BootStrap网格布局

如何使用BootStrap样式

　　BootStrap与其他的开源库类似，直接引用它的css样式文件就可以使用了。

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

　　在代码中，直接使用class就可以使用其定义的样式，例如使用它button样式，就可以按照下面的方式：

<button class="btn btn-primary" type="button">Reset</button>

　　什么是网格布局

　　目前流行的响应式布局，在显示界面设定了集中宽度，当宽度满足一定的标准时，就是用当前宽度支持下的样式。

　　这样就可以使一种开发，支持移动端、以及各种分辨率的显示器，达到良好的使用效果。

　　BootStrap把网页分成12个网格，并有下面四中宽度：自动、750px、970px和1170px

260949593649471.jpg


使用的基本语法，类似下面：container---->row---->column


<div class="container"><div class="row"></div></div>　
　提供个简单的样例：<!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"></head><body><div class="container">  <div class="row">    <button class="btn btn-primary col-md-4" type="button">test</button>    <button class="btn btn-primary col-md-8" type="button">test</button>  </div>  <div class="row">    <button class="btn btn-info col-md-4" type="button">test</button>    <button class="btn btn-info col-md-4" type="button">test</button>    <button class="btn btn-info col-md-4" type="button">test</button>  </div>  <div class="row">    <button class="btn btn-primary col-md-3" type="button">test</button>    <button class="btn btn-primary col-md-6" type="button">test</button>    <button class="btn btn-primary col-md-3" type="button">test</button>  </div></div></body></html>


主要要满足网格数目不超过12个，超过的部分会自动挤到下一列！

　　样式运行效果分别如下：

　　最大的宽度下：



网格列偏移

　　BootStrap中支持网格的列偏移：直接在样式中col-md-offset-*就可以达到偏移效果。

　　例如下面的代码：

<div class="container">  <div class="row">    <button class="btn btn-primary col-md-4" type="button">test</button>    <button class="btn btn-primary col-md-4 col-md-offset-4" type="button">test</button>  </div>  <div class="row">    <button class="btn btn-info col-md-4" type="button">test</button>    <button class="btn btn-info col-md-4" type="button">test</button>    <button class="btn btn-info col-md-4" type="button">test</button>  </div></div>

　　第一行的第二个button就达到了列偏移4个网格的效果：


网格嵌套　　在BootStrap中也支持网格的嵌套，同样也需要嵌套中的网格满足12格的划分原则　　　　<div class="container">  <div class="row">    <button class="btn btn-primary col-md-4" type="button">test</button>    <div class="col-md-8">        <div class="row">            <button class="btn btn-info col-md-4" type="button">test</button>            <button class="btn btn-info col-md-4" type="button">test</button>            <button class="btn btn-info col-md-4" type="button">test</button>          </div>    </div>  </div>  <div class="row">    <button class="btn btn-info col-md-4" type="button">test</button>    <button class="btn btn-info col-md-4" type="button">test</button>    <button class="btn btn-info col-md-4" type="button">test</button>  </div></div>

260959138333698.jpg