这篇学习网格系统（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. IOS：Camera的特性分析与使用

    Camera是IOS中很重要的一个信息获取途径. 以下我们主要从硬件特性以及软件特性两个方面来看看Canera的使用,先来看看软件上我们使用Camera都能干点什么. 先来看看以下一张图: 相机软件部 ...

  2. iOS pickerView（所有类型一网打尽）

    概述 关于PickView的所有类型都在这里 详细 代码下载:http://www.demodashi.com/demo/11017.html 首先看下项目的整体结构: 一.准备工作 UIPicker ...

  3. iOS开发－多线程开发之线程安全篇

    前言:一块资源可能会被多个线程共享,也就是多个线程可能会访问同一块资源,比如多个线程访问同一个对象.同一个变量.同一个文件和同一个方法等.因此当多个线程访问同一块资源时,很容易会发生数据错误及数据不安 ...

  4. PHP - MAC下PhpStorm安装调试环境xdebug

    今天下午一直在捣鼓如何用PhpStorm进行调试,查找了许多资料,零零碎碎的,所以自己弄篇文章记录一下步骤. 安装xdebug 使用brew安装xdebug,语法如下 brew install hom ...

  5. 【LeetCode】105. Construct Binary Tree from Preorder and Inorder Traversal

    Construct Binary Tree from Preorder and Inorder Traversal Given preorder and inorder traversal of a ...

  6. C#:TextBox控件操作类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  7. SQL server中的parsename详解

    1.SQL server中如何拆分ip地址 比如有一个ip地址是 192.168.0.8 2.再或者,如何拆分一个包装比例,比如1:5:3 用parsename方法即可以实现: select pars ...

  8. numpy.argmin 使用

    https://docs.scipy.org/doc/numpy-1.10.1/reference/generated/numpy.argmin.html numpy.argmin(a, axis=N ...

  9. ubuntu下载linux内核源码

    ubuntu仓库里面关于源码部分配置的好全啊,什么都有,ps:包括vim的各种插件居然也有人打包放到仓库里,真是方便. 1.首先查看一下本系统使用的内核版本号: cat /proc/version L ...

  10. 内存控制函数(1)-mmap() 建立内存映射

    示例1: 1.首先建立一个文本文件,名字为tmp,内容为hello world 2.编写mmap.c #include <sys/types.h> #include <sys/sta ...