如何使用bootstrap栅格系统？

最新推荐文章于 2024-01-01 21:15:06 发布

原创最新推荐文章于 2024-01-01 21:15:06 发布 · 479 阅读

1 ·

CC 4.0 BY-SA版权

给大家介绍一下如何使用bootstrap栅格系统

1.背景介绍

Bootstrap是2011年由Twitter工程师们制作的一套开源框架。他可以简单、灵活的用于搭建WEB页面。是最受欢迎的HTML,CSS,JavaScript框架。

Bootstrap栅格（网格）系统是Bootstrap中的一个响应式的、移动设备优先的、不固定的网格系统。他可以随着设备或视口大小的增加而适当的扩展到 12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

2.知识剖析

工作原理：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

基本的网格结构：

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

container与container-fluid的区别：

container：用于固定宽度并支持响应式布局的容器。

container-fluid：用于 100% 宽度，占据全部视口（viewport）的容器。

container 有两个作用：

在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化，container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比，所以他们的值不需要变化。
提供一个水平方向的 padding，使其内部的内容不会接触到浏览器的边界，大小为15px，就是图片中粉红色的部分，作用会在下面说。

注意，不需要也不应该在 container 中嵌套另一个 container

下表总结了 Bootstrap 网格系统如何跨多个设备工作

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

3.常见问题

Bootstrap栅格布局的响应式如何实现？

4.解决方案

在<div class="col-xs-* col-sm-* col-md-* col-lg-*"></div>

通过给col附加不同的class前缀，以此对应不同的屏幕下，内容的宽度。

也就是利用列重置，列偏移

5.编码实战

<div class="row logo">
    <div class="col-md-2 col-md-offset-1 col-xs-12 col-sm-12 col-lg-2 col-lg-offset-1 logo-alibaba">
        </div>
    <div class="col-md-2  col-xs-12 col-sm-12 col-lg-2  logo-jinshan">
    </div>
    <div class="col-md-2  col-xs-12 col-sm-12 col-lg-2  logo-huanxin">
    </div>
    <div class="col-md-2  col-xs-12 col-sm-12 col-lg-2  logo-ronglian">
    </div>
    <div class="col-md-2  col-xs-12 col-sm-12 col-lg-2  logo-qiniu">