这篇学习网格系统（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. Java之JVM调优案例分析与实战(2) - 集群间同步导致的内存溢出

    环境:一个基于B/S的MIS系统,硬件为两台2个CPU.8GB内存的HP小型机,服务器是WebLogic 9.2,每台机器启动了3个WebLogic实例,构成一个6个节点的亲合式集群. 说明:由于是亲 ...

  2. NSArray利用Cocoa框架进行汉字排序

    NSArray利用Cocoa框架进行汉字排序 在NSString有一个函数localizedCompare:,它的功能是通过自身与给定字符串的比較,返回一个本地化的比較结果.也就是说这个函数是支持汉字 ...

  3. 15-spring学习-集合表达式

    spring认为,数组和List集合是等价的. 要想操作list集合,利用“{内容,内容...}”的形式就可以完成了(类似数组). package com.Spring.ELDemo; import ...

  4. 用sqldevelop进行连接linux中ret Hat 6.2 中的oracle步骤

    1.下载Oracle Instant Client (32-bit) 因为PL/SQL只支持32位的Oracle,所以必须下载对应的32位的才可以. 只需要下载instantclient-basic- ...

  5. 注意Hibernate4在开发当中的一些改变

    Hibernate4的改动较大只有spring3.1以上版本能够支持,Spring3.1取消了HibernateTemplate,因为Hibernate4的事务管理已经很好了,不用Spring再扩展了 ...

  6. dom与jquery互相转换

    /*取得<input>标签中的value属性的内容[dom对象->jquery对象] var inputElement = document.getElementById(" ...

  7. C#USB录像视频拍照-代码

    论坛帖:http://bbs.csdn.net/topics/390536016 using System; using System.Collections.Generic; using Syste ...

  8. tp数据库操作

    1.常见的数据库操作//插入记录// $insert=Db::execute("insert into tp_user (username,password) values ('dome', ...

  9. autoHotKey 一些脚本积累

    新建test.ahk,然后运行即可. #InstallKeybdHook #Persistent Hotstring("EndChars", "`n") ; 设 ...

  10. python开发者通过国内镜像安装pip包

    对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...