栅格系统（bootstrap的核心之一，也是bootstrap的主要布局风格）

栅格系统是对原有div布局的升级版。打破了传统div模式只能纵向垂直排列的弊端，大大提高了页面布局的速度和效果，也很好的配合响应式布局。在设备宽度不够时栅格系统会自动把所有栅格纵向排列。

什么是栅格系统：

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。

 栅格的使用

栅格系统给出了四种适应不同尺寸屏幕的样式，col-xs、col-sm、col-md、col-lg。下面表格详解。

列偏移
使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

嵌套列
为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。

列排序
通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

看一个demo就明白了

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>列的嵌套</title>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="style.css">

</head>

<body>

<b>col-lg-*用法</b>

        <br/>

        <div class="row show-grid">

          <div class="col-lg-8">.col-lg-8</div>

          <div class="col-lg-4">.col-lg-4</div>

        </div>

        <br/>

        <b>col-md-*用法</b>

        <div class="row show-grid">

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

          <div class="col-md-1">.col-md-1</div>

        </div>

        <br/>

        <div class="row show-grid">

          <div class="col-md-8">.col-md-8</div>

          <div class="col-md-4">.col-md-4</div>

        </div>

        <br/>

        <b>col-sm-*用法</b>

        <div class="row show-grid">

          <div class="col-sm-8">.col-sm-8</div>

          <div class="col-sm-4">.col-sm-4</div>

        </div>

        <br/>

        <b>col-xs-*用法</b>

        <div class="row show-grid">

          <div class="col-xs-8">.col-xs-8</div>

          <div class="col-xs-4">.col-xs-4</div>

        </div>

        <br/>

        <b>列偏移: col-md-offset-*</b>

        <div class="row show-grid">

          <div class="col-md-4">.col-md-4</div>

          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

        </div>

        <div class="row show-grid">

          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

        </div>

        <div class="row show-grid">

          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>

        </div>

        <br/>

        <b>嵌套列: 嵌套row所包含的列加起来应该等于12</b>

        <div class="row show-grid">

            <div class="col-md-9">

                Level 1: .col-md-9

                <div class="row show-grid">

                    <div class="col-md-6">Level 2: .col-md-6</div>

                    <div class="col-md-6">Level 2: .col-md-6</div>

                </div>

            </div>

        </div>

        <br/>

        <b>列排序: .col-md-push-*和.col-md-pull-*</b>

        <div class="row show-grid">

          <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>

          <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>

        </div>

</body>

</html>

demo效果图

总结一下：

栅格系统是bootstrap的核心布局方案。使用栅格系统可以实现页面的高效布局。

bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）的更多相关文章

  1. Bootstrap学习速查表（四） 栅格系统

    Bootstrap框架的网格系统工作原理如下: 1.数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding).如: 2.在行(.row)中可以添加 ...

  2. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  3. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  4. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  5. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  6. 5.bootstrap练习笔记-巨幕和流体布局

    bootstrap练习笔记-巨幕和流体布局 1.在bootstrap中 .jumbotron可以设置巨幕效果 2.div.jumnotron自动设置一个黑色的巨幕效果 3.div.container ...

  7. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  8. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  9. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. JavaEE基础（十九）/异常和File

    1.异常(异常的概述和分类) A:异常的概述 异常就是Java程序在运行过程中出现的错误. B:异常的分类 通过API查看Throwable Error 服务器宕机,数据库崩溃等 Exception ...

  2. HDU 4315：Climbing the Hill（阶梯博弈）

    http://acm.hdu.edu.cn/showproblem.php?pid=4315 题意:有n个人要往坐标为0的地方移动,他们分别有一个位置a[i],其中最靠近0的第k个人是king,移动的 ...

  3. HDU 3652：B-number（数位DP）

    http://acm.hdu.edu.cn/showproblem.php?pid=3652 题意:求数位含有13和可以被13整除的数字个数. 思路:记录3种状态: st == 0 表示 从最高位到第 ...

  4. JavaScript DOM 编程艺术（第2版）读书笔记（4）

    案例研究:JavaScript 图片库 改变图片的src属性的两种方式: 1,setAttribute方法是“第1级DOM”的组成部分,它可以设置元素节点的任意属性. 2,element.src = ...

  5. 【转】利用xcode生成的app生成可以在iphone和itouch上运行的ipa安装包

    转载地址:http://blog.csdn.net/yohunl/article/details/5971252 在编译好的真机版目录下的.app文件,至于生成真机可以运行的app的方法,有两种方式, ...

  6. js 表单操作

    order.aspx 订单页-  order-detail.aspx订单确认页-  操作:order.aspx提交订单@1,跳转到order-detail.aspx页面,确认页面操作:返回上一步@2- ...

  7. MAVEN安装过程

    maven 的压缩包地址: http://pan.baidu.com/s/1kT4ckGf 第三方资源jar包地址:   http://pan.baidu.com/s/1i3vtgED

  8. 2013 Asia Regional Changchun I 题，HDU(4821)，Hash

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4821 解题报告:搞了很久,总算搞出来了,还是参考了一下网上的解法,的确很巧,和上次湘潭的比 ...

  9. 网站性能优化之CSS无图片技术：三角形

    1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...

  10. 2016年7月1日 星期五 --出埃及记 Exodus 14:28

    2016年7月1日 星期五 --出埃及记 Exodus 14:28 The water flowed back and covered the chariots and horsemen--the e ...