这篇学习网格系统（Grid System）

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1.网格选项：

  超小设备手机（<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

2.基本的网格结构：

    <div class="container">

       <div class="row">

          <div class="col-*-*"></div>

          <div class="col-*-*"></div>

       </div>

       <div class="row">...</div>

    </div>

    <div class="container">....

3.示例一：

 <div class="container">

         <div class="row">

             <div class="col-xs-4" style="background:green;">

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

              </p>

             </div>

                 <div class="col-xs-4" style="background:#abcdef;">

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

              </p>

             </div>

             <div class="col-xs-4" style="background:#282828;">

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

              </p>

             </div>

         </div>

         </div>

4.中型和大型设备

    <div class="col-md-6 col-lg-4">....</div>

    <div class="col-md-6 col-lg-8">....</div>

5.示例：

 <div class="container">

         <div class="row">

             <div class="col-xs-2 col-md-4" style="background:green;">

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

              </p>

             </div>

                 <div class="col-xs-4 col-md-4" style="background:#abcdef;">

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

              </p>

             </div>

             <div class="col-xs-6 col-md-4" style="background:#282828;">

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

              </p>

             </div>

         </div>

         </div>

6.适应于：手机、平板电脑、台式电脑

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

    <div class="col-sm-9 col-md-6 col-lg-8">....</div>

7.示例：

<div class="container">

         <div class="row">

             <div class="col-xs-1 col-sm-5 col-md-8 col-lg-9" style="background:green;">

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

              </p>

             </div>

                 <div class="col-xs-2 col-sm-5 col-md-2 col-lg-1" style="background:#abcdef;">

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

              </p>

             </div>

             <div class="col-xs-6 col-sm-2 col-md-2 col-lg-2" style="background:#282828;">

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

              </p>

             </div>

         </div>

         </div>

8.响应式的列重置

使用：

<div class="clearfix visible-xs"></div>解决小设备浏览时无法确定网格显示的位置。

9.代码示例：

 <div class="container">

         <div class="row">

             <div class="col-xs-2 col-sm-3" style="background:green;">

            nisi ut aliquip ex ea commodo consequat.

             </div> 

             <div class="col-xs-6 col-sm-3" style="background:pink;">

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

             </div> 

            <div class="clearfix visible-xs"></div>

             <div class="col-xs-6 col-sm-3" style="background:blue;">

                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

             </div> 

             <div class="col-xs-6 col-sm-3" style="background:gray;">

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

             </div> 

         </div>

     </div>

10.偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。

例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。

这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

11.示例：居中效果

<div class="container">

         <div class="row">

              <div class="col-xs-6 col-xs-offset-3" style="background:#abcdef;">

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing

                    elit.Lorem ipsum dolor sit amet, consectetur adipisicing

                    elit.Lorem ipsum dolor sit amet, consectetur adipisicing

                    elit.Lorem ipsum dolor sit amet, consectetur adipisicing

                    elit.

                 </p>

              </div>

         </div>

     </div>

12.嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。

被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

13.示例：

 <div class="container">

         <div class="row">

              <div class="col-xs-2" style="background:yellow;">

                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

              </div>

              <div class="col-xs-10" style="border:1px solid red;">

                  <div class="row">

                      <div class="col-xs-5" style="background:#abcdef;">

                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.

                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

                      </div>

                      <div class="col-xs-7" style="background:#fedcba;">

                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.

                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

                      </div>

                  </div>

                  <div class="row">

                      <div class="col-xs-10" style="background:blue;">

                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.

                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

                      </div>

                  </div>

              </div>

         </div>

     </div>

14.列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

15.示例：

<div class="container">

         <div class="row">

           <p>排序前：</p>

           <div class="col-xs-4" style="background:green;">

               this is a test!

           </div>

           <div class="col-xs-8" style="background:#abcdef;">

               this is a demo!

           </div>

         </div>

         <br>

         <div class="row">

             <p>排序后：</p>

             <div class="col-xs-4 col-xs-push-8" style="background:red;">

                 this is a test!

             </div>

             <div class="col-xs-8 col-xs-pull-4" style="background:yellow;">

                 this is a demo!

             </div>

         </div>

     </div>

bootstrap基础学习二篇的更多相关文章

  1. bootstrap基础学习五篇

    bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...

  2. bootstrap基础学习八篇

    bootstrap辅助类 a.对于文本颜色 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted "text-muted" ...

  3. bootstrap基础学习七篇

    bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle ...

  4. bootstrap基础学习六篇

    bootstrap按钮 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式(未被操作) .btn-success 表示成功的动作 ...

  5. bootstrap基础学习四篇

    bootstrap代码 Bootstrap 允许两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 < ...

  6. bootstrap基础学习三篇

    bootstrap的排版 1.标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式 2.代码如下: <div class="container"& ...

  7. bootstrap基础学习一篇

    官网:http://www.bootcss.com/ 这里,主要讲解bootstrap3.关于他的介绍就不用复述了. 1.示例 <!doctype html> <html lang= ...

  8. bootstrap基础学习十一篇

    bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...

  9. bootstrap基础学习十篇

    bootstrap字体图标(Glyphicons) a.什么是字体图标 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...

随机推荐

  1. honeyd蜜罐配置和web监听脚本

    Honeyd的安装和配置 Honeyd软件依赖于下面几个库及arpd工具: (1)Libevent:是一个非同步事件通知的函数库. 通过使用 libevent,开发者能够设定某些事件发生时所运行的函数 ...

  2. 基于Django的在线考试系统

    概述 基于Django的在线考试系统,适配电脑端,可以实现出题,答题,排行榜,倒计时等等等功能 详细 代码下载:http://www.demodashi.com/demo/13923.html 项目目 ...

  3. iOS开发- 隐藏键盘总结

    一.隐藏自身软键盘 当对于有多个UITextField控件都想通过点击"Return"来隐藏自身软键盘的情况.这时的最好办法是使用Did End on Exit事件.在点击软键盘右 ...

  4. mysql允许远程连接

    GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123' WITH GRANT OPTION;

  5. Android Launcher拖拽事件详解【android4.0--Launcher系列二】

    AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...

  6. 使用 log4j 2记录日志

    log4j2使用方法还是很简单的 1 需要使用的jar包有两个, 1)log4j-api-2.8.2.jar 2)log4j-core-2.8.2.jar 2 产生Logger 对象非常的简单,使用  ...

  7. c3p0数据库连接池管理

    之前已经讲过dbcp可以用于数据库连接池进行管理.另一种技术c3p0也可以用于数据库连接池管理,其中Spring等框架都是基于c3p0技术进行数据库连接池管理的. 使用之前需要引入 c3p0-0.9. ...

  8. 再谈RESTAPI最佳实践

    近一年半,我参与了两到三个项目的工作,这些项目涉及到大量供“外部”使用的REST API,稍后我们会看到为什么要将“外部”这个词放在引号之中.在项目工作期间,我不得不对这些API进行反复地设计,再设计 ...

  9. 禁止用户登陆的 /bin/false和/sbin/nologin的区别

    1 区别 /bin/false是最严格的禁止login选项,一切服务都不能用. /sbin/nologin只是不允许login系统  小技巧: 查看 /etc/passwd文件,能看到各用户使用的sh ...

  10. linux 使用FIO测试磁盘iops 方法详解

    FIO是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎, 包括:sync,mmap, libaio, posixaio, SG v3, splice, null, ...