1、简介

栅格系统(grid systems)，也称为“网格系统”，运用固定的格子设计版面布局，风格工整简洁。是从平面栅格系统演变而来。

Bootstrap建立在12列栅格系统、布局、组件之上。以规则的网格阵列来指导和规范网页中的版面布局以及信息分布
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe。

2、设计原理

http://ued.taobao.org/blog/2008/09/grid_systems/

3、网页设计中的栅格系统

（）默认栅格系统

    Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。

    基本代码

    <div class="row">

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

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

    </div>

    )列分配

    对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

    <div class="row">

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

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

    </div>

    上面的代码展示了 .span4 和 .span8 两列，两列的和总共是12个栅格。

    )列偏移

    把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。

    <div class="row">

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

      <div class="span3 offset2">...</div>

    </div>

    )嵌套列

    在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。

    <div class="row">

      <div class="span9">

        Level  column

        <div class="row">

          <div class="span6">Level </div>

          <div class="span3">Level </div>

        </div>

      </div>

    </div>

（）流式栅格系统

    流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。

    基本代码

    将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变，这样能方便的在流式与固定栅格之间切换。

    <div class="row-fluid">

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

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

    </div>

    )偏移

    定义方式和固定网格系统相同：给任何想偏移的列添加 .offset* 即可。

    <div class="row-fluid">

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

      <div class="span4 offset2">...</div>

    </div>

    )嵌套

    和固定栅格的嵌套有一点不同：

    固定栅格每行的列总数等于父级列。

    而流式布局每行被嵌套的列数之和要等于12。

    这是因为流式栅格使用百分比来设置每列的宽度。

    <div class="row-fluid">

      <div class="span12">

        Fluid

        <div class="row-fluid">

          <div class="span6">

            Fluid

            <div class="row-fluid">

              <div class="span6">Fluid </div>

              <div class="span6">Fluid </div>

            </div>

          </div>

          <div class="span6">Fluid </div>

        </div>

      </div>

    </div>

4、布局

（）固定布局

    提供了一个通用的固定宽度(也可以变为响应式)的布局方式，仅仅用 <div class="container"> 即可。

    <body>

      <div class="container">

        ...

      </div>

    </body>

（）流式布局

    利用 <div class="container-fluid"> 代码可以创建一个流式、两列的页面 — 非常适合于应用和文档类页面。

    <div class="container-fluid">

      <div class="row-fluid">

        <div class="span2">

          <!--Sidebar content-->

        </div>

        <div class="span10">

          <!--Body content-->

        </div>

      </div>

    </div>

5、启动响应式设计

    通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    注意！ 
　　Bootstrap在默认情况下是没有引入响应式特性的，因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。

6、设备和屏幕分辨率

    类型        布局宽度         列宽    间隙宽度

    大屏幕      大于等于1200px   70px    30px

    默认        大于等于980px    60px    20px

    平板        大于等于768px    42px    20px

    手机到平板   小于等于767px    流式列，无固定宽度

    手机        小于等于480px    流式列，无固定宽度

[bootstrap] 栅格系统和布局的更多相关文章

  1. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  2. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  3. Bootstrap 栅格系统（布局）

    基本用法  网格系统用来布局,其实就是列的组合.Bootstrap框架的网格系统中有四种基本的用法.由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式,在这一节中所涉及到的示例,我们都以中屏 ...

  4. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  5. 深入理解BootStrap之栅格系统（布局）

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  6. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  7. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Bootstrap栅格系统用法--Bootstrap基础

    1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同 ...

  9. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

随机推荐

  1. Bootstrap_表单

    表单样式 一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> &l ...

  2. HDU 4997 Biconnected （状态压缩DP）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4997 题意:一个n个点的完全图中去掉一些边.求这个图有多少个子图是边双联通的.(就是去掉任意一条边之后 ...

  3. 如何解决Angular 2 的templateUrl和styleUrl的路径问题？

    参考地址:https://github.com/kittencup/angular2-ama-cn/issues/18 前言: templateUrl表示的是组件在浏览器中运行时依赖的模板地址,所以在 ...

  4. Dev gridview新增一行自动获得焦点并打开编辑模式

    1.gridview添加一行自动获得焦点实现方式: 关键代码: GarsonZhang dt.Rows.Add("1", "2"); gridView1.Foc ...

  5. Django中的分页

    直接看代码吧,还算比较简单: 先确认数据量有多少 根据页面显示数据的多少来分割数据,得到页面的开始数据和结束数据 根据开始和截止数据去切片数据,并且得到总共的页码数 根据一页显示多少页码和当前页码数, ...

  6. 关于Ubuntu中passwd、shadow、group等文件

    在Ubuntu系统中,/etc目录下,有三个文件:passwd shadow group,可能我们已经在用了,但是没有注意到其详细. 这三个配置文件用于系统帐号管理,都是文本文件,可用vi等文本编辑器 ...

  7. iOS - OC NSTimer 定时器

    前言 @interface NSTimer : NSObject 作用 在指定的时间执行指定的任务. 每隔一段时间执行指定的任务. 1.定时器的创建 当定时器创建完(不用 scheduled 的,添加 ...

  8. 操作系统基础知识之————单线程（Thread）与多线程的区别

    单线程(Thread)与多线程的区别 (一)首先了解一下cpu: 随着主频(cpu内核工作时钟频率,表示在CPU内数字脉冲信号震荡的速度,等于外频(系统基本时间)乘倍频)的不断攀升,X86构架的硬件逐 ...

  9. c 函数调用产生的汇编指令和数据在内存情况(1)

    一直对函数调用的具体汇编指令和各种变量在内存的具体分配,一知半解.各种资料都很详细,但是不实践,不亲自查看下内存总不能笃定.那就自己做下. 两个目的: 一,函数和函数调用编译后的汇编指令基本样貌 二, ...

  10. 关于Spring定时任务（定时器）用法

    Spring定时任务的几种实现 Spring定时任务的几种实现 一．分类 从实现的技术上来分类,目前主要有三种技术(或者说有三种产品): 从作业类的继承方式来讲,可以分为两类: 从任务调度的触发时机来 ...