網(wǎng)絡(luò)系統(tǒng)
bootstrap允許將頁(yè)面劃分成共12個(gè)等寬邏輯單元办陷，既允許單獨(dú)地使用這12個(gè)等分邏輯單元说搅，也可以將其相鄰的列合并成一個(gè)更寬的邏輯單元炸枣，甚至在一個(gè)邏輯單元中再劃分12個(gè)子邏輯單元。如下圖所示：
網(wǎng)格用到的類(lèi)樣式Bootstrap的網(wǎng)絡(luò)系統(tǒng)支持可響應(yīng)式布局弄唧，當(dāng)其列屏幕大小發(fā)生變化時(shí)則自動(dòng)計(jì)算列寬适肠。
共有4個(gè)：
xs (phones)
sm (tablets)
md (desktops)
lg (larger desktops)
下面是BootStrap網(wǎng)絡(luò)的基本結(jié)構(gòu)：
"row">
"col-*-*">
"row">
"col-*-*">
"col-*-*">
"col-*-*">
"row">
...
示例
下面的示例是Bootstrap官方提供的基于Bootstrap構(gòu)造HTML面頁(yè)基本模板。
"en">
Bootstrap Example
"utf-8">
"viewport"content="width=device-width, initial-scale=1">
"stylesheet"href="css/bootstrap.min.css">
"js/jquery.min.js">
"js/bootstrap.min.js">
"text/css">
div{
border-left:1px dotted blue;
border-bottom:1px dotted blue;
}
"row">
"col-sm-1">1
"col-sm-1">2
"col-sm-1">3
"col-sm-1">4
"col-sm-1">5
"col-sm-1">6
"col-sm-1">7
"col-sm-1">8
"col-sm-1">9
"col-sm-1">10
"col-sm-1">11
"col-sm-1">12
"row">
"col-sm-4">4-1
"col-sm-4">4-2
"col-sm-4">4-3
"row">
"col-sm-4">4
"col-sm-8">8
"row">
"col-sm-6">6-1
"col-sm-6">6-2
效果如下圖所示：
