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

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

<div class="row">

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

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

.row:after {

            content: '';

            display: block;

            visibility: hidden;

            clear: both;

        }

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

.col-sm-3, .col-sm-6, .col-xs-3, .col-xs-4, .col-xs-6 {

            padding: 0 15px;

        }

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

.col-xs-3, .col-xs-6, .col-xs-4 {

			float: left;

		}

		.col-xs-3 {

                        /*3代表占3份即3/12=1/4*/

			width: calc(100% / 4);

		}

		.col-xs-6 {

			width: calc(100% / 2);

		}

		.col-xs-4 {

			width: calc(100% / 3);

		}

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

@media (min-width: 768px) {

            .col-sm-3, .col-sm-6 {

                float: left;

            }

            .col-sm-3 {

                width: calc(100% / 4);

            }

            .col-sm-6 {

                width: calc(100% / 2);

            }

        }

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

演示代码：

<div class="container">

  <div class="row">

    <div class="col-xs-3">.col-xs-3</div>

    <div class="col-xs-6">

        <div class="row">

            <div class="col-xs-4">col-xs-4</div>

            <div class="col-xs-4">col-xs-4</div>

            <div class="col-xs-4">col-xs-4</div>

        </div>

    </div>

    <div class="col-xs-3">.col-xs-3</div>

  </div>

  <div class="row">

    <div class="col-sm-3">.col-sm-3</div>

    <div class="col-sm-6">.col-sm-6</div>

    <div class="col-sm-3">.col-sm-3</div>

  </div>

</div>

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

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

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

完整代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Test</title>

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <link rel="stylesheet" href="./css/reset.css">

     <style>

         * {

             box-sizing: border-box;

         }

         .container {

             padding: 0 5px;

             margin-right: auto;

             margin-left: auto;

         }

         @media (min-width: 768px) {

             .container {

                 width: 750px;

             }

         }

         @media (min-width: 992px) {

             .container {

                 width: 980px;

             }

         }

         @media (min-width: 1200px) {

             .container {

                 width: 1120px;

             }

         }

         div {

             text-align: center;

         }

         .row {

             margin: 0 -15px;

             background: yellow;

         }

         .row:after {

             content: '';

             display: block;

             visibility: hidden;

             clear: both;

         }

         .col-sm-3, .col-sm-6, .col-xs-3, .col-xs-6 {

             padding: 0 15px;

         }

         .col-xs-3, .col-xs-6, .col-xs-4 {

             float: left;

         }

         .col-xs-3 {

             width: calc(100% / 4);

         }

         .col-xs-6 {

             width: calc(100% / 2);

         }

         .col-xs-4 {

             width: calc(100% / 3);

         }

         @media (min-width: 768px) {

             .col-sm-3, .col-sm-6 {

                 float: left;

             }

             .col-sm-3 {

                 width: calc(100% / 4);

             }

             .col-sm-6 {

                 width: calc(100% / 2);

             }

         }

     </style>

 </head>

 <body>

 <div class="container">

   <div class="row">

     <div class="col-xs-3">.col-xs-3</div>

     <div class="col-xs-6">

         <div class="row">

             <div class="col-xs-4">col-xs-4</div>

             <div class="col-xs-4">col-xs-4</div>

             <div class="col-xs-4">col-xs-4</div>

         </div>

     </div>

     <div class="col-xs-3">.col-xs-3</div>

   </div>

   <div class="row">

     <div class="col-sm-3">.col-sm-3</div>

     <div class="col-sm-6">.col-sm-6</div>

     <div class="col-sm-3">.col-sm-3</div>

   </div>

 </div>

 </body>

 </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. Python 写文件时的Unicode设置

    今天在把Evenote的笔记内容写为文件时出错:     f.write(content) UnicodeEncodeError: &apos;gbk&apos; codec can& ...

  2. 微服务理论之六：ESB与SOA的关系

    一.SOA和ESB一直是没有明确概念的两个缩略词 SOA----面向服务架构,实际上强调的是软件的一种架构,一种支撑软件运行的相对稳定的结构,表面含义如此,其实SOA是一种通过服务整合来解决系统集成的 ...

  3. Ruby中print、p、puts的区别

    三个方法的作用都是将一个字符串打印到控制台  比较项目  puts  print p   换行符 末尾添加换行符  末尾不加换行符  末尾添加换行符  非字符串对象的输出  调用该对象的to_s方法 ...

  4. Python模块-sys模块

    sys.version        获取Python解释程序的版本信息 >>> sys.version '2.7.12 (default, Dec 4 2017, 14:50:18 ...

  5. stm32与三菱PLC通信

    一.三菱PLC通讯概要   三菱PLC FX系列通信结构如下图所示: 三菱PLC FX系列的通信规格如下图所示: 三菱PLC FX系列一般有以下几种通信模块,以FX2N为例: FX2N-232-BD ...

  6. Python，PyCharm2017安装教程，包含注册码[转载]

    一,安装PyCharm 1.下载PyCharm 进入https://www.jetbrains.com/pycharm/download/#section=windows官网下载页面,可以到到PyCh ...

  7. 0009_if控制语句

    1.if 条件:                   (判断相等一定注意要用 ==  而不是 =) 代码块 else: 代码块 2.if 条件一: 代码块 elif 条件二: 代码块 elif 条件三 ...

  8. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; che

    出现此种错误,我暂时遇到了两次. 1 我的字段的名称和数据库的关键字重合. 上图中的desc是默认降序排列的意思. 2 第二次出现的异常是我在重构代码阶段遇到的一个bug.不过我暂时不能理解,虽然解决 ...

  9. mac 创建快捷方式

    一.替身文件 mac上有个功能叫“制作替身”.使用 ⌘+⇧+鼠标左键拖拽   可以生成一个文件的替身文件.此替身文件相当于windows的快捷方式. 二.link文件 link文件也可以做快捷方式.还 ...

  10. Impala介绍

    Impala介绍 Impala支持的文件格式 Impala可以对Hadoop中大多数格式的文件进行查询.它能通过create table和insert的方式将一部分格式的数据加载到table中,但值得 ...