1  网格布局

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/index.css" />

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

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">

        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    </head>

    <body>

            <h1 class="page-header">使用<small>Bootstrap网格系统布局网页</small></h1>

            <p>

            </p>

            <h2 class="page-header">区块一</h2>

            <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

            <h2 class="page-header">区块二</h2>

            <p>bbbbbbbbbbbbbbbbbbbbbbbbbbb</p>

            <h2 class="page-header">区块三</h2>

            <p>cccccccccccccccccccccccccccccc</p>   

    </body>

</html>

把显示的内容居中，分成三等份显示在同一排

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/index.css" />

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

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">

        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container">

            <h1 class="page-header">使用<small>Bootstrap网格系统布局网页</small></h1>

            <p>

            </p>

            <div class="row">

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

                    <h2 class="page-header">区块一</h2>

                    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

                </div>

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

                    <h2 class="page-header">区块二</h2>

                    <p>bbbbbbbbbbbbbbbbbbbbbbbbbbb</p>

                </div>

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

                    <h2 class="page-header">区块三</h2>

                    <p>cccccccccccccccccccccccccccccc</p>

                </div>

            </div>

        </div>

    </body>

</html>

知识点：

1）让显示的内容居中，使用css的class container.

container这个类设置了内容的宽度，并且让现实的内容居中。

2）把显示的内容显示在同一行，并且平均分为三份，需要使用css的class row

要在显示的内容上，添加网格的类。

显示的页面如下图：

2  嵌套布局

嵌套布局的网格宽度依赖于他的父网格的宽度。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/index.css" />

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

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">

        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container">

            <h1 class="page-header">使用<small>Bootstrap网格系统布局网页</small></h1>

            <p>

            </p>

            <div class="row">

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

                    <h2 class="page-header">区块一</h2>

                    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

                </div>

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

                    <h2 class="page-header">区块二</h2>

                    <p>bbbbbbbbbbbbbbbbbbbbbbbbbbb</p>

                </div>

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

                    <h2 class="page-header">区块三</h2>

                    <p>cccccccccccccccccccccccccccccc</p>

                    <div class="row">

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

                            <p>eeeee</p>

                        </div>

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

                            <p>fffffff</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

3 流式布局

　　将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。流动布局的内容会随着浏览器的大小进行自动缩放。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/index.css" />

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

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">

        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container-fluid">

            <h1 class="page-header">使用<small>Bootstrap网格系统布局网页</small></h1>

            <p>

            </p>

            <div class="row">

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

                    <h2 class="page-header">区块一</h2>

                    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

                </div>

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

                    <h2 class="page-header">区块二</h2>

                    <p>bbbbbbbbbbbbbbbbbbbbbbbbbbb</p>

                </div>

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

                    <h2 class="page-header">区块三</h2>

                    <p>cccccccccccccccccccccccccccccc</p>

                    <div class="row">

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

                            <p>eeeee</p>

                        </div>

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

                            <p>fffffff</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

4 响应式布局

　　现在用户上网使用的设备都不一样，可能是大屏幕的桌面电脑，可能是平板电脑，或者是智能手机。这些上网设备的屏幕尺寸都不太一样。如果考虑显示在不同的页面的内容优化，可以考虑使用响应式布局的设计。

　　响应式布局是根据浏览器窗口的不同做出相应的变化。原理很简单使用了CSS3的media queries来判断浏览器窗口的尺寸。在CSS的样式表里去设置一些规则。当浏览器的尺寸大于或小于某个特定的尺寸时，使浏览器使用特定样式。 比如：页面宽度大于700像素时，文字大小变为55像素，背景颜色变为红色。

<style>
@media (min-width: 700px){

                body {

                    background-color: red;

                    font-size: 55px;

                }

}
</style>

　 @media (min-width: 700px){  屏幕宽度 >= 768的设备 }

@media (max-width: 900){  屏幕宽度 <=900的设备 }

　　响应式页面代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

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

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <style>

            body {

                background-color: #269ABC;

            }

            @media (min-width: 700px) and (max-width: 900px) {

                body {

                    background-color: red;

                    font-size: 55px;

                }

            }

        </style>

    </head>

    <body>

        　再过两个多月，就是美国大选的投票日了。目前，民主党候选人希拉里·克林顿和共和党候选人特朗普之间的“选战”愈发白热化。

    </body>

</html>

当屏幕宽度大于700像素，小于900像素时，如下图所示：

　　当屏幕宽度大于700像素，小于900像素时，屏幕显示的内容发生了样式改变。

　　Bootstrap已经做好了响应式的布局设计。比如在桌面浏览器中，当最小宽度992px时，按照流式网格布局按照每行最多12列进行渲染页面。比如上面的流式网格布局，当屏幕宽度大于992像素时，如下图所示：

　　缩小屏幕宽度，当屏幕宽度小于992像素时,找不到对应的@media (min-width: 992px)规则,既当前选中元素的样式就发生了改变，如下图：

5 例子

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/index.css" />

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

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link rel="icon" href="./img/index.png">

        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container">

            <h1 class="page-header">响应式布局的实用类<small>使用Bootstrap网格系统布局网页</small></h1>

            <div class="row">

                <div class="col-md-4" onclick="alert('phone')"><img src="img/phone.jpg" alt"智能手机"/></div>

                <div class="col-md-4"  onclick="alert('tablet')"><img src="img/tablet.jpg" alt"平板电脑"/></div>

                <div class="col-md-4" onclick="alert('desktop')" ><img src="img/desktop.jpg" alt"桌面电脑"/></div>

            </div>

        </div>

    </body>

</html>

使用Ipad模拟器横向查看页面，如下图：

　　竖向显示页面如下图：

引用资料：

http://v3.bootcss.com/css/#grid

bootstrap学习总结-02 网格布局的更多相关文章

  1. 转:Bootstrap研究 精巧的网格布局系统

    本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...

  2. Bootstrap3基础教程 02 网格布局

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多列. 网页设计中的网格布局作用:组织内容,让网站易于浏览,并降低用户端 ...

  3. Bootstrap学习笔记-响应式布局原理

    响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...

  4. 02网格布局Gridlayout

    <span style="font-size:18px;"><?xml version="1.0" encoding="utf-8& ...

  5. Android零基础入门第32节：新推出的GridLayout网格布局

    原文:Android零基础入门第32节:新推出的GridLayout网格布局 本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有 ...

  6. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  7. bootstrap学习笔记--bootstrap布局方式

    Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备.平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑.台式电脑)上的组件和网格. 移动设备优 ...

  8. Bootstrap系列 -- 10. 网格布局

    一. 实现原理 网格布局是通过容器的大小,平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别. 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中 ...

  9. BootStrap网格布局

    如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...

随机推荐

  1. TM4C123G红外触摸屏：开发板好不容易实现了原理，放到专家设计的板子上无法运行，于是专家跑路项目黄了

    使用TI的TM4C123G LaunchPad开发板,USB接口,来对同样的芯片进行烧写. 我们只用烧写那一块功能,不用另外一个芯片的开发功能,需要跳线   源码项目:   从官方网站TM4C123G ...

  2. Qt中forward declaration of struct Ui::xxx的解决

    每当你新键一个 QT设计界面, QT会自动生成yyy.ui文件,如 <?xml version="1.0" encoding="UTF-8"?> & ...

  3. ServiceStack 概念参考文摘

    摘自:http://www.cnblogs.com/woxpp/p/5010881.html ServiceStack 用于服务开发,可以为各种形式的网站.软件.APP等提供数据服务,可以提供REST ...

  4. 实现解耦-Spring.Net

    spring.net属于IOC(中文名:控制反转)的思想实现. 概念解释: 控制反转概念: 控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来 ...

  5. BOP 2016 复赛题目

    复赛采用团队赛的形式,基于Azure云计算平台在实际大数据的基础上展开前沿课题的较量. 在编程之美挑战赛复赛中,选手需要通过组队共同完成复赛题,考查选手编程能力的同时,也考验选手的团队协作能力.选手点 ...

  6. 在Go语言中使用JSON(去掉空字段)

    Encode 将一个对象编码成JSON数据,接受一个interface{}对象,返回[]byte和error: func Marshal(v interface{}) ([]byte, error) ...

  7. android开发------响应用户事件

    今天的内容有点简单,不难,就是为按钮添加onClick事件.  新知识点: Intent类的简单使用 startActivity方法 一般事件都由按钮触发,现在我们要实现的是当用户点击按钮的时候,启动 ...

  8. eclipse的插件安装

    如何安装:http://my.oschina.net/linjunlong/blog/126961 插件安装方法:eclipse和myeclipse版本不一样,略有区别 在线安装: 第一种:知道在线安 ...

  9. 【CodeVS 5032】【省队集训2016 Day5 T1】Play with array

    一开始我用分块大法,分成$\sqrt{n}$块,每个块上维护一个Splay,然后balabala维护一下,时间复杂度是$O(n\sqrt{n}logn)$.后来对拍的时候发现比$O(n^2)$的暴力跑 ...

  10. 网页端压缩解压缩插件JSZIP库的使用

    JSZIP这个库支持在网页端生成zip格式的文件,  官方网站是:http://stuk.github.io/jszip/ 官方网站的DEMO如下: <!DOCTYPE html> < ...