BootStrap网格布局
如何使用BootStrap樣式
BootStrap與其他的開(kāi)源庫(kù)類似，直接引用它的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>什么是網(wǎng)格布局
目前流行的響應(yīng)式布局，在顯示界面設(shè)定了集中寬度，當(dāng)寬度滿足一定的標(biāo)準(zhǔn)時(shí)，就是用當(dāng)前寬度支持下的樣式。
這樣就可以使一種開(kāi)發(fā)，支持移動(dòng)端、以及各種分辨率的顯示器，達(dá)到良好的使用效果。
BootStrap把網(wǎng)頁(yè)分成12個(gè)網(wǎng)格，并有下面四中寬度：自動(dòng)、750px、970px和1170px
當(dāng)屏幕屬于其中某個(gè)區(qū)間時(shí)，自動(dòng)使用對(duì)應(yīng)的樣式。
使用的基本語(yǔ)法，類似下面：container---->row---->column
<div class="container"> <div class="row"></div> </div>提供個(gè)簡(jiǎn)單的樣例：
<!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>主要要滿足網(wǎng)格數(shù)目不超過(guò)12個(gè)，超過(guò)的部分會(huì)自動(dòng)擠到下一列！
樣式運(yùn)行效果分別如下：
最大的寬度下：
中等寬度下：
最小寬度下：
網(wǎng)格列偏移
BootStrap中支持網(wǎng)格的列偏移：直接在樣式中col-md-offset-*就可以達(dá)到偏移效果。
例如下面的代碼：
<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>第一行的第二個(gè)button就達(dá)到了列偏移4個(gè)網(wǎng)格的效果：
網(wǎng)格嵌套
在BootStrap中也支持網(wǎng)格的嵌套，同樣也需要嵌套中的網(wǎng)格滿足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>效果如下：
總結(jié)
以上是生活随笔為你收集整理的BootStrap网格布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： js GPS 百度地图坐标转换
- 下一篇： 一些变态的PHP一句话后门收集