網絡系統
bootstrap允許將頁面劃分成共12個等寬邏輯單元,既允許單獨地使用這12個等分邏輯單元,也可以將其相鄰的列合并成一個更寬的邏輯單元,甚至在一個邏輯單元中再劃分12個子邏輯單元。如下圖所示:
網格用到的類樣式Bootstrap的網絡系統支持可響應式布局,當其列屏幕大小發生變化時則自動計算列寬。
共有4個:
xs (phones)
sm (tablets)
md (desktops)
lg (larger desktops)
下面是BootStrap網絡的基本結構:
"row">
"col-*-*">
"row">
"col-*-*">
"col-*-*">
"col-*-*">
"row">
...
示例
下面的示例是Bootstrap官方提供的基于Bootstrap構造HTML面頁基本模板。
"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
效果如下圖所示: