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简洁的语法代码块高亮图片链接和图 ...

随机推荐

oracle数据库常用SQL语句（11.29更新)
笔者日常工作中常用到的sql语句,现总结如下,留作日后查看. 1.按照两列中的最大值取 ,只取两列其中的一列 SELECT * FROM t_doc T ORDER BY GREATEST(T.Loa ...
线程系列3---ThreadLocal类研究
2013-12-23 17:44:44 Java为线程安全提供了一些工具类,如ThreadLocal类,它代表一个线程局部变量,通过把数据放在ThreadLocal中就可以让每个线程创建一个该变量的副 ...
JSTL标准标签库
有时使用EL和标准动作达不到目的,于是就引入定制标记. 对于JSP页面创作人员来说,定制标记使用起来比脚本要容易一些.不过对于JAVA程序员来说,简历定制标记处理器反而更困难.幸运的是,已经有了一个标 ...
入門必學NO.1 Android 初學特訓班(第四版) 目錄
第 01 章敲開 Android 的開發大門工欲善其事,必先利其器,要學習 Android 應用程式,先取得功能強大的開發工具,就可讓學習事半功倍. 1.1 Android 是啥米?1.2 建構 A ...
戴文的Linux内核专题：10配置内核（6）
转自Linux中国欢迎来到下一篇关于内核配置文章!还有大量的选项需要配置.这篇文章将主要讨论PCI和ACPI. 这里我们可以启用由ACPI控制的扩展坞和可移动驱动器槽的支持(Dock).记住,ACP ...
避免ajax中get方法产生缓存的解决办法
在参数中传一个随机数,就会避免浏览器对get方法异步修改数据缓存,导致不能及时看到最新效果 $.get("<?php echo U('Vip/VipHandouts/change_gr ...
vs2012 断点不能调试
调试ASP.NET时发现,设置的断点被视而不见提示错误 debugging information for ‘iisexpress.exe’cannot be found or does not m ...
Discuz 论坛的搭建（五）
配置discus论坛 1.下载discus论坛代码 2.解压缩到ApacheProject目录下 3.把discuz的upload文件copy到discuz文件夹下,然后删除upload文件夹 4.修 ...
$.noop()和$.map()函数
最近在项目中发现$.noop()函数,因以前没使用过故查询下,现整理如下: jQuery.noop()函数是一个空函数,它什么也不做. 当某些时候你需要传入函数参数,而且希望它什么也不做的时候,你可以 ...
Errors
Errors running builder 'Android Resource Manager' on project 'Demo'. java.lang.NullPointerException ...

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

堆叠的水平

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

随机推荐

热门专题