栅格布局使用例子：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Bootstrap 101 Template</title>

     <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

     <script src="../lib/html5shiv/html5shiv.min.js"></script>

     <script src="../lib/respond/respond.js"></script>

     <![endif]-->

     <style>

         .container{

             background-color: #ccc;

         }

         .row{

             height: 100px;

         }

         .row > div{

             height: 100%;

             background-color: red;

             border: 1px solid blue;

             box-sizing: border-box;

         }

     </style>

 </head>

 <body>

 <!--需求：

 -xs-默认情况下：宽度占12列

 -sm-宽度占6列

 -md-宽度占4列

 -lg-宽度占3列

 -->

 <div class="container">

     <div class="row">

         <div class="col-xs-1 col-sm-6 col-md-4 col-lg-3">1</div>

         <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">2</div>

         <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">3</div>

         <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">4</div>

     </div>

 </div>

 <script src="../lib/jquery/jquery.js"></script>

 <script src="../lib/bootstrap/js/bootstrap.js"></script>

 </body>

 </html>

其中的：

一. col-xs-offset-2:

　　设置当前列在xs屏幕下往后移动2个等分的距离，它是使用margin-left的方式实现的，所以会影响后面的元素 它也有向上兼容向下覆盖的特点

二. col-xs-push-2:

　　可以将当前元素往后推指定的等分，但是它的实现方式是通过定位(position:relative)，所以不会影响其它的元素，但是会造成元素的重叠

三. 嵌套栅格列

  <div class="row">

        <div class="col-xs-1 hidden-xs">1</div>

        <div class="col-xs-1 col-xs-push-2" style="z-index: 99999999">2</div>

        <div class="col-xs-1 col-xs-pull-3">3</div>

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

        <div class="col-xs-1">5</div>

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

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

            <!--嵌套栅格列绝对不能添加容器，因为容器的宽度是固定的，不会受限于父容器，所以嵌套栅格直接嵌套row-->

            <div class="row">

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

            </div>

        </div>

    </div>

四.响应式工具：响应式工具的设置不会影响其它的屏幕，意味着它没有向上兼容和向下覆盖的特性

hidden-xs  : 响应式中控制元素可见性的类根据文档当前宽度控制指定元素的可见性

bootstrap--栅格系统布局的更多相关文章

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

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

  2. Bootstrap栅格系统（布局）

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

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

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

  4. Bootstrap 栅格系统(转载)

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

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

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

  6. Bootstrap栅格系统用法--Bootstrap基础

    1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同 ...

  7. 入门——Bootstrap栅格系统

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

  8. Bootstrap栅格系统基本使用

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

  9. Bootstrap 栅格系统初识

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

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

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

随机推荐

  1. Oracle 从 dual 表中查询返回多行记录

    同时查询出十条数据 ; 按照这个特性计算两个日期之间的工作日: select days, week as days, to_char(to_date(, 'day') as week from dua ...

  2. 记录：使用springboot的cors和vue的axios进行跨域

    一.编写一个配置类,并且注册CorsFilter: 注意允许跨域的域名不要写错 @Configuration public class ZysuyuanCorsConfiguration { @Bea ...

  3. Android 开发 MediaRecorder音频录制

    前言 MediaRecorder类是Android sdk提供的一个专门用于音视频录制,一般利用手机麦克风采集音频和摄像头采集图像.这个类是属于简单的音频录制类,录制音频简单容易但是对音频流的控制也比 ...

  4. I-country

    I-country 在\(n\times m\)的网格图中,给出每个格子的权值,寻找有k个格子的凸联通块,使包含的权值最大,\(N,M≤15,K≤225\). 解 我们首先要知道凸联通块的定义 从任意 ...

  5. 如何玩转跨库Join？跨数据库实例查询应用实践

    背景 随着业务复杂程度的提高.数据规模的增长,越来越多的公司选择对其在线业务数据库进行垂直或水平拆分,甚至选择不同的数据库类型以满足其业务需求.原本在同一数据库实例里就能实现的SQL查询,现在需要跨多 ...

  6. Jtopo使用中link中文字与link平行

    修改源代码如下 //新增 a.translate(e ,f ); a.rotate(Math.atan((d.y-c.y)/(d.x-c.x))); //修改 a.fillText(this.text ...

  7. IOS6 新特性之UIRefreshControl

    "不会模仿的公司不是好公司不会剽窃的公司不是优秀公司  不会调戏代码的不是骨灰级码工 你同意吗? 苹果估计想取代第三方的pull to refresh"        ------ ...

  8. <随便写>创建文件批处理文件

    创建一个text文档 写入想写的程序 将后缀改为bat 例如创建一个文件夹: 双击运行bat文件就可以创建文件夹 运行结果: 需要批量处理,就用for循环生成代码,粘贴上去就行了

  9. springboot自己实现mysql主从数据切换机制

    在很多公司都是实现了数据的读写分离,所谓的读写分离,就是写的时候从主库 ,然后从库就会从主库中复制过去,这样就会形成了数据的读写分离,然而在很多场景是适用的,那么我们怎么做呢,可以利用aop 加注解的 ...

  10. VS2005进行WORD文档开发

    折腾了将近一个月的WORD文档开发终于告一段落.这件事已经很多大牛已经做过了.并且很多方法都已经非常详细,提供的资料也非常齐全.不过由于时间的久远并且较为散乱.所以我在学习时间过程中还是走了一些些弯路 ...