bootstrap提供了一个非常实用的栅格系统，可以实现响应式的网格布局，原理其实很简单，利用了float、百分比的宽度和@media的配合实现响应式，bootstrap默认把一行分为了12列，提供了xs、sm、md、lg四个不同的尺寸，而这四种尺寸其实是一样大的，只是在不同的页面宽度才会触发列的浮动，例如xs是最小的，不管页面多大都会触发列的浮动，而sm只有页面在768px以上才会触发，下面就以xs和sm这两个尺寸来实现栅格系统：

首先所有的列都要放在一个行里，所以在列的外包裹元素上添加一个类名row：

  1. <div class="row">

而这个row并不需要设置过多的样式，只是将左右外边距设为了-15px，这是因为bootstrap为所有的列都添加了15px的左右内边距，让栅格中的列之间有间距但又不希望左右两边的列有多余的空隙，所以在row中设置负值的外边距抵消。

由于列会浮动，所以row还需进行浮动的清除，使用clearfix来清除：

  1. .row:after {
  2.             content: '';
  3.             display: block;
  4.             visibility: hidden;
  5.             clear: both;
  6.         }

里面的列这里只用col-xs-3,col-xs-6,col-xs-4,col-sm-3,col-sm-6这几个来演示，就像上面所说的，所有的列都有相同的左右内边距，所以先为它们设置一个公共样式：

  1. .col-sm-3, .col-sm-6, .col-xs-3, .col-xs-4, .col-xs-6 {
  2.             padding: 0 15px;
  3.         }

xs的在任何页面大小中都会使列浮动：

  1. .col-xs-3, .col-xs-6, .col-xs-4 {
  2. 			float: left;
  3. 		}
  4. 		.col-xs-3 {
  5.                         /*3代表占3份即3/12=1/4*/
  6. 			width: calc(100% / 4);
  7. 		}
  8. 		.col-xs-6 {
  9. 			width: calc(100% / 2);
  10. 		}
  11. 		.col-xs-4 {
  12. 			width: calc(100% / 3);
  13. 		}

而sm的需要页面在768px以上才浮动，所以可以使用@media：

  1. @media (min-width: 768px) {
  2.             .col-sm-3, .col-sm-6 {
  3.                 float: left;
  4.             }
  5.             .col-sm-3 {
  6.                 width: calc(100% / 4);
  7.             }
  8.             .col-sm-6 {
  9.                 width: calc(100% / 2);
  10.             }
  11.         }

这样在768px以下，sm呈现的就是垂直布局。

演示代码：

  1. <div class="container">
  2.   <div class="row">
  3.     <div class="col-xs-3">.col-xs-3</div>
  4.     <div class="col-xs-6">
  5.         <div class="row">
  6.             <div class="col-xs-4">col-xs-4</div>
  7.             <div class="col-xs-4">col-xs-4</div>
  8.             <div class="col-xs-4">col-xs-4</div>
  9.         </div>
  10.     </div>
  11.     <div class="col-xs-3">.col-xs-3</div>
  12.   </div>
  13.   <div class="row">
  14.     <div class="col-sm-3">.col-sm-3</div>
  15.     <div class="col-sm-6">.col-sm-6</div>
  16.     <div class="col-sm-3">.col-sm-3</div>
  17.   </div>
  18. </div>

在页面较小时，sm为垂直排列：

在页面大于768px时，布局相同：

这里的.container也是利用了@media的方式使该容器在不同页面宽度下有不同的大小，并且左右外边距设为了auto，所以会自动居中，在页面宽度较小的情况下会占满页面。

完整代码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Test</title>
  6.      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7.      <link rel="stylesheet" href="./css/reset.css">
  8.      <style>
  9.          * {
  10.              box-sizing: border-box;
  11.          }
  12.          .container {
  13.              padding: 0 5px;
  14.              margin-right: auto;
  15.              margin-left: auto;
  16.          }
  17.          @media (min-width: 768px) {
  18.              .container {
  19.                  width: 750px;
  20.              }
  21.          }
  22.          @media (min-width: 992px) {
  23.              .container {
  24.                  width: 980px;
  25.              }
  26.          }
  27.          @media (min-width: 1200px) {
  28.              .container {
  29.                  width: 1120px;
  30.              }
  31.          }
  32.          div {
  33.              text-align: center;
  34.          }
  35.          .row {
  36.              margin: 0 -15px;
  37.              background: yellow;
  38.          }
  39.          .row:after {
  40.              content: '';
  41.              display: block;
  42.              visibility: hidden;
  43.              clear: both;
  44.          }
  45.          .col-sm-3, .col-sm-6, .col-xs-3, .col-xs-6 {
  46.              padding: 0 15px;
  47.          }
  48.          .col-xs-3, .col-xs-6, .col-xs-4 {
  49.              float: left;
  50.          }
  51.          .col-xs-3 {
  52.              width: calc(100% / 4);
  53.          }
  54.          .col-xs-6 {
  55.              width: calc(100% / 2);
  56.          }
  57.          .col-xs-4 {
  58.              width: calc(100% / 3);
  59.          }
  60.          @media (min-width: 768px) {
  61.              .col-sm-3, .col-sm-6 {
  62.                  float: left;
  63.              }
  64.              .col-sm-3 {
  65.                  width: calc(100% / 4);
  66.              }
  67.              .col-sm-6 {
  68.                  width: calc(100% / 2);
  69.              }
  70.          }
  71.      </style>
  72.  </head>
  73.  <body>
  74.  <div class="container">
  75.    <div class="row">
  76.      <div class="col-xs-3">.col-xs-3</div>
  77.      <div class="col-xs-6">
  78.          <div class="row">
  79.              <div class="col-xs-4">col-xs-4</div>
  80.              <div class="col-xs-4">col-xs-4</div>
  81.              <div class="col-xs-4">col-xs-4</div>
  82.          </div>
  83.      </div>
  84.      <div class="col-xs-3">.col-xs-3</div>
  85.    </div>
  86.    <div class="row">
  87.      <div class="col-sm-3">.col-sm-3</div>
  88.      <div class="col-sm-6">.col-sm-6</div>
  89.      <div class="col-sm-3">.col-sm-3</div>
  90.    </div>
  91.  </div>
  92.  </body>
  93.  </html>

bootstrap栅格系统的实现的更多相关文章

  1. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  2. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  3. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  4. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  6. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  7. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  8. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  9. 第二百三十五节，Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...

  10. Bootstrap 栅格系统 理解与总结

    Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...

随机推荐

  1. 解决Mac 系统升级到 10.14.1后 IDA 在非英文输入法时启动crash的问题

    Mac 系统升级到10.14.1后,打开IDA时出现以下问题: 解决问题的方法也很简单: 1. 每次打开IDA前先切换到英文输入法模式(每次都要切换,有点麻烦)2. 直接去github上下载 libq ...

  2. Sublime Text 全程指南（转载）

    摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的Sublime Text中文教程. 更新记录 2014/09/27:完成初稿 2014/09/28: 更正打开控 ...

  3. DSP基础

    CCS V5的使用 CCS安装与设置

  4. netty中的引导Bootstrap客户端

    一.Bootstrap Bootstrap 是 Netty 提供的一个便利的工厂类, 我们可以通过它来完成 Netty 的客户端或服务器端的 Netty 初始化.下面我以 Netty 源码例子中的 E ...

  5. eclipse如何集成tomcat插件

    刚在Eclipse官方网站下载的Eclipse,需要自己手动安装tomcat插件才能配置tomcat服务器.网上好多安装方法,这里我就不厌其烦的再写一遍,边安装边截图讲解下安装方法. 首先你要去下载E ...

  6. tomcat安装与运行

    实验环境:CentOS7 使用系统yum仓库安装: #安装基本包和开发工具包 [root@~ localhost]#yum install -y java-1.8.0-openjdk java-1.8 ...

  7. NW.js将网站打包成桌面应用

    需求:已有一个网站,因为浏览器兼容性等问题,想自己封装一个浏览器,打开时固定打开这个网站,通过这样的封装,将网站变成桌面应用程序. 1. 下载并安装NW.js的最新稳定版本(NW.js) 2. 创建一 ...

  8. LAMP 1.1 Mysql

    1.下载软件包                                                                                             ...

  9. Java探索之旅(17)——多线程(1)

    1.多线程  1.1线程 线程是程序运行的基本执行单元.指的是一段相对独立的代码,执行指定的计算或操作.多操作系统执行一个程序时会在系统中建立一个进程,而在这个进程中,必须至少建立一个线程(这个线程被 ...

  10. Java泛型通配符以及限定

    摘抄笔记 A:泛型的限定 /* * 将的酒店员工,厨师,服务员,经理,分别存储到3个集合中 * 定义方法,可以同时遍历3集合,遍历三个集合的同时,可以调用工作方法 */ import java.uti ...