这篇学习网格系统（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. ajax 缓存问题及解决方案

      ajax 缓存问题及解决方案 CreationTime--2018年7月25日16点04分 Author:Marydon 1.什么情况下ajax请求会出现缓存? 当请求的路径.参数名.参数值三者都 ...

  2. 【Linux】cp命令

    用途 cp除了复制功能之外还可以建立快捷方式 全称 cp的全称为copy 参数 -a :相当于同时指定参数pdr -d :若文件为链接文件的属性(link file),则复制链接文件属性而非档案本身 ...

  3. POJ 3468 A Simple Problem with Integers 【线段树，区间更新】

    题意:你有N个整数,A1,A2,-,一个.你须要处理两种类型的操作.一种类型的操作是加入了一些给定的数字,每一个数字在一个给定的时间间隔. 还有一种是在给定的时间间隔要求数量的总和. 难点:主要是la ...

  4. jquery prop('checked', true)解决attr('checked', true)不能选中radio问题

    正如标题所言,使用:prop('checked', true)就可以了

  5. EasyUI combobox的panelHeight自动高度

    在使用EasyUI的时候,有时会用到combobox组件,这里的记录数不是很固定,设置为auto可能会被挡住,设置固定高度时,option很少时,也很丑 所以这里给出我自己自动调整combobox的p ...

  6. unity, 设置帧率上限

    用unity做了个demo,把所有开销大的特效都去了,在真机上运行仍然卡.显示帧率来看,最高到30.原来unity在ios设备上帧率默认限制为不超过30. 可以通过Application.target ...

  7. MS SQL表字段自增相关的脚本

    --查询表是否有自增字段 SELECT OBJECTPROPERTY(OBJECT_ID('[表名]'), 'TableHasIdentity') --查询表的自增字段 SELECT COLUMN_N ...

  8. (Spring Boot框架)快速入门

    Spring Boot 系列文章推荐 Spring Boot 入门 Spring Boot 属性配置和使用 Spring Boot 集成MyBatis Spring Boot 静态资源处理 今天介绍一 ...

  9. U盘 格式化 ext3 ext4

    [root@ok Desktop]# mkfs.ext3 /dev/sdc mke2fs 1.41.12 (17-May-2010) /dev/sdc is entire device, not ju ...

  10. jquery 怎么触发select的change事件

    可以使用jQuery的trigger() 方法来响应事件 定义和用法 trigger() 方法触发被选元素的指定事件类型. 语法 $(selector).trigger(event,[param1,p ...