首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

BootStrap入门教程(三)之响应式原理

Posted in Javascript onSeptember 19, 2016

相关阅读：

BootStrap入门教程(一)之可视化布局

BootStrap入门教程(二)之固定的内置样式

Bootstrap网格系统（Grid System）

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

BootStrap入门教程(三)之响应式原理

工作原理

· 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

· 使用行来创建列的水平组。

· 内容应该放置在列内，且唯有列可以是行的直接子元素。

· 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

· 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

· 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */ 
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

BootStrap入门教程(三)之响应式原理

网格的基本结构

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div> 
</div>
<div class="row">...</div>
</div>
<div class="container">....

示例一：水平堆叠

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 堆叠的水平</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6" style=" 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-md-6" style="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>
</div>
</div>
</body>
</html>

效果：

BootStrap入门教程(三)之响应式原理

确保单元的总数为12以保障显示效果比较和谐。超过12就串行了。如果单个行的单元数超过12呢：

BootStrap入门教程(三)之响应式原理

如上图所示，单个行的单元数超过12会失去内边距。

示例二：中型和大型设备

睡得晚起得早还多梦，也是没治了。

中型设备是50%/50%，大型设备是33%/66%，那么可以这样写：

<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>

源码如下：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 中型和大型设备</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6 col-lg-4" style="
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-md-6 col-lg-8" style="
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>
</div>
</div>
</body>
</html>

若如此，中型设备的显示是50%/50%：

BootStrap入门教程(三)之响应式原理

大型设备的显示是33%/66%：

BootStrap入门教程(三)之响应式原理

同理移动设备也可进行类似设置：

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

源码及效果略。

响应式的列重置

小设备时无法确定网格显示的位置。

解决方法是添加一个响应式的块（描述未必准确），使用.clearfix class和响应式实用工具：

<div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3"
style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-xs-6 col-sm-3"
style="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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.
</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"
style="
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-xs-6 col-sm-3"
style="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
</p>
</div>
</div>
</div>

解释一下中间这句：

<div class="clearfix visible-xs"></div>

响应式实用工具目前适用于块和表切换。看下面两个表格就知道了。

BootStrap入门教程(三)之响应式原理

网格的基本结构

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div> 
</div>
<div class="row">...</div>
</div>
<div class="container">....

实例三：响应式实用工具

源码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap 实例 - 响应式实用工具</title>
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 40px;">
  <div class="row visible-on">
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-xs">特别小型</span>
      <span class="visible-xs">✔ 在特别小型设备上可见</span>
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-sm">小型</span>
      <span class="visible-sm">✔ 在小型设备上可见</span>
    </div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-md">中型</span>
      <span class="visible-md">✔ 在中型设备上可见</span>
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-lg">大型</span>
      <span class="visible-lg">✔ 在大型设备上可见</span>
    </div>
  </div>
</div>
</body>
</html>

效果如下：

BootStrap入门教程(三)之响应式原理

大型设备时：

其他设备略。

偏移列

.col-xs=*类不支持偏移，可以通过使用一个空的单元格来实现该效果。

使用.col-md-offset-*类可以把一个列的左外边距增加*列，其中*的范围是从1到11。

<div class="container">
  <h1>Hello, world!</h1>
  <div class="row" >
    <div class="col-xs-6 col-md-offset-3"
    style="box-shadow:
    inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing
      elit.
      </p>
    </div>
  </div>
</div>

效果：

BootStrap入门教程(三)之响应式原理

嵌套列

嵌套需要添加一个新的.row，然后在这个嵌套的.row里添加一组.col-md-*列。这组列的个数不能超过12。

<div class="container">
  <h1>Hello, world!</h1>
  <div class="row">
    <div class="col-md-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>第一列</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
    <div class="col-md-9" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>第二列 - 分为四个盒子</h4>
      <div class="row">
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            Consectetur art party Tonx culpa semiotics. Pinterest
    assumenda minim organic quis.
          </p>
        </div>
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
             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>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.
          </p>
        </div>
        <div class="col-md-6" style=" 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.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

效果：

BootStrap入门教程(三)之响应式原理

列排序

有一点像定位。.col-md-push-*相当于left；.col-md-pull-*类似于right。其中*的范围是从1到11。标签在后面的层级高一些。

<div class="container">
  <h1>Hello, world!</h1>
  <div class="row">
   <p>排序前</p>
   <div class="col-md-4" style="
     box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
     我在左边
   </div>
   <div class="col-md-8" style="
     box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
     我在右边
   </div>
  </div><br>
  <div class="row">
   <p>排序后</p>
   <div class="col-md-4 col-md-push-1"
     style="
     box-shadow: inset 1px -1px 1px #444,
     inset -1px 1px 1px #444;">
     我在左边
   </div>
   <div class="col-md-8 col-md-pull-2"
     style="
     box-shadow: inset 1px -1px 1px #444,
     inset -1px 1px 1px #444;">
     我在右边
   </div>
  </div>
</div>

效果：

BootStrap入门教程(三)之响应式原理

 

参考：http://www.runoob.com/bootstrap/bootstrap-grid-system.html

以上所述是小编给大家介绍的BootStrap入门教程(三)之响应式原理，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootStrap入门教程(三)之响应式原理

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript获得选中文本内容的方法
Dec 02 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 #Javascript
javascript this详细介绍
Sep 19 #Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 #Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 #Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 #Javascript
详解Node.Js如何处理post数据
Sep 19 #Javascript
React Native实现简单的登录功能(推荐)
Sep 19 #Javascript
http(6) Windows server 2019(5) Windows server 2016(6) Windows server 2008(5) IIS(7) Telnet(1) 负载均衡(6) 远程控制(1) 动静分离(1) https(7)
You might like
编译问题
2006/10/09 PHP
php部分常见问题总结
2008/03/27 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php检测文件编码的方法示例
2014/04/25 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
js 省地市级联选择
2010/02/07 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
JavaScript简单拖拽效果（1）
2017/05/17 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
Vue 实例事件简单示例
2019/09/19 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
香港迪士尼乐园酒店预订：Hong Kong Disneyland Hotels
2017/05/02 全球购物
俄罗斯韩国化妆品网上商店：Cosmasi.ru
2019/10/31 全球购物
在阿联酋购买翻新手机和平板电脑：Teckzu
2021/02/12 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
PHP使用QR Code生成二维码实例
2021/07/07 PHP
nginx设置资源请求目录的方式详解
2022/05/30 Servers