Bootstrap 网格系统
来源:互联网 发布:dnf 登陆器源码 编辑:程序博客网 时间:2024/05/16 11:59
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
一、Bootstrap 网格系统工作原理
网格系统通过一系列包含内容的行和列来创建页面布局。
媒体查询是非常别致的"有条件的 CSS 规则"。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。
媒体查询有两个部分,先是一个设备规范,然后是一个大小规则。
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
代码解释:对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。
三、网格选项
下表总结了 Bootstrap 网格系统如何跨多个设备工作:
超小设备手机(<768px) 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型设备台式电脑(≥1200px) 网格行为一直是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的最大容器宽度None (auto)750px970px1170pxClass 前缀.col-xs-.col-sm-.col-md-.col-lg-列数量和12121212最大列宽Auto60px78px95px间隙宽度30px
(一个列的每边分别 15px)30px
(一个列的每边分别 15px)30px
(一个列的每边分别 15px)30px
(一个列的每边分别 15px)可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes基本的网格结构:
五、偏移列
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。
为了在大屏幕显示器上使用偏移,可以使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
六、嵌套列
为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。
七、列排序
Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。
一、Bootstrap 网格系统工作原理
网格系统通过一系列包含内容的行和列来创建页面布局。
- 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
- 使用行来创建列的水平组。
- 内容应该放置在列内,且唯有列可以是行的直接子元素。
- 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。
- 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。
媒体查询是非常别致的"有条件的 CSS 规则"。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。
媒体查询有两个部分,先是一个设备规范,然后是一个大小规则。
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
代码解释:对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。
三、网格选项
下表总结了 Bootstrap 网格系统如何跨多个设备工作:
(一个列的每边分别 15px)30px
(一个列的每边分别 15px)30px
(一个列的每边分别 15px)30px
(一个列的每边分别 15px)可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes基本的网格结构:
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div></div><div class="container">....四、响应式的列重置
五、偏移列
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。
为了在大屏幕显示器上使用偏移,可以使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
六、嵌套列
为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。
七、列排序
Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <p> 排序前 </p> <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8" style="background-color: #dedef8; 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-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边 </div> </div></div>
结果如下图所示:
0 0
- Bootstrap-网格布局系统
- Bootstrap 网格系统
- bootstrap布局 网格系统
- Bootstrap学习:网格系统
- Bootstrap 网格系统
- 10003---BootStrap网格系统
- bootstrap中的网格系统
- Bootstrap网格系统
- bootstrap网格系统
- Bootstrap 网格系统 介绍
- Bootstrap(三) 网格系统
- 详解Bootstrap网格系统
- Bootstrap基础---网格系统
- Bootstrap网格系统
- bootstrap网格系统
- Bootstrap网格系统
- bootstrap的网格系统
- Bootstrap 网格系统
- 屏幕适配的前世今生
- 第三十六套
- python使用heapq实现小顶堆(TopK大)/大顶堆(BtmK小)
- android:layout_height="match_parent"和android:layout_marginTop="100dp"同时作用
- DevExpress 编辑GridControl中合并单元格
- Bootstrap 网格系统
- Tinker热修复学习笔记
- 团战可以输、提莫必须死
- bgsave出错原因分析
- JavaScript基础
- 【OA】——hibernate映射关系编写技巧
- java 处理人民日报98年语料库处理复合标注词
- No write since last change (add ! to override)
- 利用jackson在json~bean~list之间的转换