网络系统
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
效果如下图所示：
网友评论