这篇学习网格系统（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. webpack 编译less/scss文件

    1.安装插件 处理less: npm install less-loader --save-dev 处理sass: npm install sass-loader --save-dev 2.项目目录: ...

  2. Java之字节码(2) - .class文件格式详解

    转载来自 小介:去 年在读<深入解析JVM>的时候写的,记得当时还想着用自己的代码解析字节码的,最后只完成了一部分.现在都不知道还有没有保留着,貌似Apache有现 成的BCEL工程可以做 ...

  3. Android应用开发相关下载资源(2014/12/14更新)

    官方终于发布了Android Studio正式版,Android Studio将会成为推荐使用的主要Android开发工具. (1)Android SDK (Android SDK主安装包,包含SDK ...

  4. java线程-java多线程之可见性

    可见性:一个线程对共享变量值的修改,能够及时呗其他线程看到. 共享变量:如果一个变量在多个线程的内存中都存在副本,那么这个变量就是这几个线程的共享变量. java内存模型(JMM) 描述了java程序 ...

  5. linux sort 、uniq 命令

    以文件的每行为单位,从左往右依次按ascii码进行比较 sort sort.txt #默认为升序 -u:去除重复行 sort -u sort.txt -r:降序排列 sort -r sort.txt ...

  6. ORACLE expdp/impdp详解（转）

    ORCALE10G提供了新的导入导出工具,数据泵.Oracle官方对此的形容是:Oracle DataPump technology enables Very High-Speed movement ...

  7. webservice调用的四种方式

    因为数据在网络上传输都是通过xml形式的,本质都是把数据封装然后通过xml传输,接收到的也是xml文件,1 和 4 让程序员屏蔽了处理xml文件,而2 和3需要程序员自己写请求体 ,还要处理返回的xm ...

  8. 【LeetCode】117. Populating Next Right Pointers in Each Node II (2 solutions)

    Populating Next Right Pointers in Each Node II Follow up for problem "Populating Next Right Poi ...

  9. python 火车票爬取代码

    1.根据搜索词下载百度图片: # -*- coding: utf-8 -*- """根据搜索词下载百度图片""" import re imp ...

  10. 如何利用dex2jar反编译APK

    工具/原料 电脑 dex2jar JD-GUI 方法/步骤 1 下载dex2jar和JD-GUI,在参考资料中添加了这两个工具的百度网盘下载地址供读者下载使用(笔者亲测) 2 找到我们准备测试用的ap ...