BootStrap 网格系统

网络系统

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

效果如下图所示：