<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 手机、平板电脑、台式电脑</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

<div class="row">

<div class="col-xs-6 col-sm-3 col-md-6 col-lg-9"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>

<div class=" col-xs-6 col-sm-9 col-md-6 col-lg-3"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>

<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>

Bootstrap自适应各种设备的更多相关文章

  1. 浅谈Bootstrap自适应功能在Web开发中的应用

    随着移动端市场的强势崛起,web的开发也变得愈发复杂,对于个体开发者来说,自己开发的网站,在电脑.手机.Pad等上面都要有正常的显示以及良好的用户体验.如果每次都要自己去调整网页去匹配各个不同的客户端 ...

  2. Bootstrap 自适应排列顺序

    一.前用 我们在做一些页面的设计时,总会想到自适应的问题.其实 Bootstrap 框架就很好的融合这个问题了.下面是我学习 Bootstrap 的总结. 二.问题来源 我为什么会遇见这个问题,是因为 ...

  3. 2016 医疗项目 Bootstrap 自适应页面布局（1）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 怎样自适应ios设备大小

       在编写移动端GIS程序的时候.常常要依据ios设备的大小来设置UI.曾经我在ios程序中,须要定义设备的值(如:宽度和高度),如: 可是假设是不同的设备.如iphone4.iphone5,甚至是 ...

  5. 多个按钮触发同一个Bootstrap自适应模态窗口

    在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...

  6. bootstrap自适应栅格系统布局

  7. 通栏banner自适应各个设备

    思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置一样没用,除非你搞个js判断,动态刷新. 换一种思路,直接用<img& ...

  8. 浅谈Web自适应

    前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置.移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样.这给我们在编写前端界面时增加了困难, ...

  9. Bootstrap人民币玩家攻略

    用bootstrap及其它基于它的框架,做了多次网站大改版~对bootstrap的特点有了越来越深的了解~从一开始接触时觉得超级鸡肋,到后来觉得方便,再到后来觉得还是能不用就别用了~为什么这么说?我们 ...

随机推荐

  1. macOS网络安全审计

    nettop监听网络流量的方法 nettop是macOS系统自带的命令,命令功能能监听网络流量,如果你想查询一个恶意域名.ip和本机进程连接情况,那么可以试试nettop,就是展示方式不是太友好,需要 ...

  2. go 报错 import cycle not allowed

    运行时报错,import cycle not allowed : 查了goole大概知道了原因,还是导包类的问题,我检察了一下我的代码库,发现我昨天划分几个工具文件,里面的两个文件相互引用,就导致报i ...

  3. 记录 Allsec 解题过程

    开局打开URL:http://119.3.191.245:65532/#/allsecPlayGame,前去做游戏 游戏URL:http://119.3.191.245:8877/Login.php ...

  4. Netty源码 新连接处理

    上文我们阐述了Netty的Reactor模型.在Reactor模型的第二阶段,Netty会处理各种io事件.对于客户端的各种请求就是在这个阶段去处理的.本文便来分析一个新的连接是如何被处理的. 代码的 ...

  5. JavaScript数组的几个常用的API

    一. 扁平化嵌套数组/展平和阵列孔--flat() 1.实现效果 var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] var arr2 = ...

  6. php-fpm的慢执行日志

    通过慢执行日志,我们可以清晰地了解PHP脚本在哪里执行时间长,可以定位到行 下面介绍如何开启和查看慢执行日志 #vim /usr/local/php-fpm/etc/php-fpm.d/www.con ...

  7. redhat安装python3.7

    下载并解压: 1 wget https://www.python.org/ftp/python/3.7.2/Python-3.7.2.tgz 2 tar -xzvf Python-3.7.2.tgz ...

  8. The League of Sequence Designers Gym - 102460E

    题目链接:https://vjudge.net/problem/Gym-102460E 思路:求: 题目当中给了一段伪代码算法,仔细一看发现它是不会记录负数情况,所以与正确答案会有误差,现在题目给定K ...

  9. 【hacker101 CTF】Photo Gallery

    0x01 打开首页看到 查看源代码,发现图片都是通过"fetch?id=1"这种方式加载的 简单测了一下存在SQL注入. 直接上sqlmap跑 第一个flag: ^FLAG^d45 ...

  10. docker使用常见问题解决方案:错误号码2058,docker WARNING :IPv4,容器间的通讯

    1.错误号码2058 1,错误解决: 解决方法:docker下mysql容器 登录 mysql -u root -p 登录你的 mysql 数据库,然后 执行这条SQL: ALTER USER 'ro ...