1工作原理：

（1）行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

（2）使用行来创建列的水平组。

（3）内容应该放置在列内，且唯有列可以是行的直接子元素。

（4）预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

（5）列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

（6）网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

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网格系统实例：

堆叠的水平

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 堆叠的水平</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-6"  style="background-color: #dedef8; box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <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>

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

            quae ab illo inventore veritatis et quasi architecto beatae vitae

            dicta sunt explicabo.

         </p>

      </div>

      <div class="col-md-6" style="background-color: #dedef8;box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium.

         </p>

         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

            consectetur, adipisci velit, sed quia non numquam eius modi

            tempora incidunt ut labore et dolore magnam aliquam quaerat

            voluptatem.

         </p>

   </div>

</div>

</body>

</html>

细节

<div class="container">...</div> 元素被添加，确保居中和最大宽度。
一旦添加了容器，接下来您需要考虑以行为单位。添加 <div class="row">...</div>，并在行内添加列 <div class="col-md-6"></div>。
网格中的每一行是由 12 个单元组成的，您可以使用这些单元定义列的尺寸。在我们的实例中，有两个列，每个列由 6 个单元组成，即 6+6=12。

您可以尝试其他更多的选项，比如 <div class="col-md-3"></div> 和 <div class="col-md-9"></div> 或 <div class="col-md-7"></div> 和 <div class="col-md-5"></div>。

您可以尝试一下，但要确保总和总是 12。

手机、平板电脑、台式电脑

<div class="col-sm-3 col-md-6 col-lg-4">....</div>

<div class="col-sm-9 col-md-6 col-lg-8">....</div>

3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/66% 的布局。

4响应式的列重置(我们在小设备浏览时无法确定网格显示的位置。为了解决这个问题，使用可以使用 .clearfix class)

<div class="container">

    <div class="row" >

        <div class="col-xs-6 col-sm-3"

            style="background-color: #dedef8;

            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

        <div class="col-xs-6 col-sm-3"

        style="background-color: #dedef8;box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <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>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut.

            </p>

        </div>

        <div class="clearfix visible-xs"></div>

        <div class="col-xs-6 col-sm-3"

        style="background-color: #dedef8;

        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>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-3"

        style="background-color: #dedef8;box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim

            </p>

        </div>

    </div>

</div>

5.偏移列(偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1到 11。)

我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。

<div class="container">

    <h1>Hello, world!</h1>

    <div class="row" >

        <div class="col-xs-6 col-md-offset-3"

        style="background-color: #dedef8;box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing

            elit.

            </p>

        </div>

    </div>

</div>

6.嵌套列(为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。)

布局有两个列，第二列被分为两行四个盒子。

<div class="container">

    <h1>Hello, world!</h1>

    <div class="row">

        <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <h4>第一列</h4>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit.

            </p>

        </div>

        <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <h4>第二列 - 分为四个盒子</h4>

            <div class="row">

                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        Consectetur art party Tonx culpa semiotics. Pinterest

        assumenda minim organic quis.

                    </p>

                </div>

                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                         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 class="row">

                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        quis nostrud exercitation ullamco laboris nisi ut

        aliquip ex ea commodo consequat.

                    </p>

                </div>

                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna

        aliqua. Ut enim ad minim.

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

网格：

bootstrap部分---网格系统；（几天没写博客了，为了潜心研究一下bootstrap）的更多相关文章

利用border和伪类画出三角形 ps：好久没写博客了。。。
有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...
c++设计模式总结好久没写博客了实在是忙
具体代码就不贴出来了通俗易懂的理解方式原创 c++设计模式: 简单工厂模式工厂模式有一种非常形象的描述,建立对象的类就如一个工厂,而需要被建立的对象就是一个个产品:在工厂中加工产品 ...
python io 模块之 open() 方法(好久没写博客了)
io.open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=True),打开file ...
总结下js中匿名函数的写法~好几天没写博客了。。。
小哥最近很是心烦啊,不仅仅要继续以现任前端小白,未来前端攻城狮的身份苦逼学习,还要用剩余的时间去完成毕业设计.早知如此,当初我为毛要报考数学这么个苦逼专业....昨天一整天的时间在研究毕设,感觉代码已 ...
（转）[BetterExplained]为什么你应该（从现在开始就）写博客
(一)为什么你应该(从现在开始就)写博客用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处.(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太的个例来反驳抽烟对健康的极 ...
150922-写写博客监督下不自觉的自己-PPT,Linux,HTML
开始学PHP的日子里,总是懒散的有一天没一天的.无意间听闻写博客来展示代码(现在还远远做不到哇),来监督个人每天的学习进度,鉴于自己还是爱写一点文字,但愿可以坚持下去. 凡是都喜欢有个计划,骨子里的理 ...
第一次尝试用 Live Writer 写博客
之前在官网上下载了最新版的Windows Live Writer,可是安装不了,就在其他网站下了一个试试,可以安装,不过却是2009年的版本,很不喜欢,我希望能体验最新版的,回头还得重新下个最新版的安 ...
用Jekyll在github上写博客——《搭建一个免费的，无限流量的Blog》的注脚
本来打算买域名,买空间,用wordpress写博客的.后来问了一个师兄,他说他是用github的空间,用Jekyll写博客,说很多人都这么做.于是我就研究了一下. 比较有价值的文章有这么几篇: htt ...
使用Markdown编辑器写博客
使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图 ...

随机推荐

getBoundingClientRect() 来获取页面元素的位置
getBoundingClientRect() 来获取页面元素的位置 document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...
HDU 3966 基础树链剖分
题意:给一棵树,并给定各个点权的值,然后有3种操作:I C1 C2 K: 把C1与C2的路径上的所有点权值加上KD C1 C2 K:把C1与C2的路径上的所有点权值减去KQ C:查询节点编号为C的权值 ...
[vijos P1014] 旅行商简化版
昨天早上上课讲旅行商问题,有点难,这周抽空把3^n的算法码码看.不过这个简化版已经够折腾人了. 其一不看解析不知道这是双进程动态规划,不过我看的解析停留在f[i,j]表示第一个人走到i.第二个人走到j ...
poj 1742 Coins （动态规划，背包问题）
Coins Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 32977 Accepted: 11208 Descripti ...
AngularJS结构简介
AngularJS是MVC架构,M是C里面的属性-值,C是js的class,V是DOM 各个关键特性的结构如下图所示: http://my.oschina.net/tommyfok/blog/2970 ...
APP store 上架过程中碰到的那些坑&被拒的各种奇葩原因整理&审核指南中文版
苹果官方发布的十大常见被拒原因 1.崩溃次数和Bug数量.苹果要求开发者在将应用提交给App Store之前彻查自己的应用,以尽量避免Bug的存在. 2.链或错误的链接.应用中所有的链接必须是真实且有 ...
苹果 iOS 8 新固件新功能特性总结汇总 (苹果 iPhone/iPad 最新移动操作系统)
苹果在 WWDC 2014 大会上正式发布了其最新的 OS X Yosemite 桌面系统以及 iOS 8 移动操作系统,虽然 iOS 8 依然延续了 iOS7 的扁平化设计风格,但在功能上却还是给我 ...
防止忘记初始化NSMutableArray的方法
在写项目的过程中,经常会遇到一些郁闷的事,往一个可变数组中添加一个模型数据时,经常会发现程序运行很正常,可是可变数组中就是没有任何数据,久病成医,我发现自己总是放一个错,就是NSMutableArra ...
加载不同的nib文件
只需要实现nibName方法即可另外还需在vc控制器初始化的时候不指定对应的nib文件名 -(NSString *)nibName { if(UI_USER_INTERFACE_IDIOM() == ...
static声明初始化块的一下注意事项
通过输出结果,我们可以看到,程序运行时静态初始化块最先被执行,然后执行普通初始化块,最后才执行构造方法.由于静态初始化块只在类加载时执行一次,所以当再次创建对象 hello2 时并未执行静态初始化块.

bootstrap部分---网格系统；（几天没写博客了，为了潜心研究一下bootstrap）

堆叠的水平

bootstrap部分---网格系统；（几天没写博客了，为了潜心研究一下bootstrap）的更多相关文章

随机推荐

热门专题