BootStrap 网格系统
网络系统
bootstrap允许将页面划分成共12个等宽逻辑单元，既允许单独地使用这12个等分逻辑单元，也可以将其相邻的列合并成一个更宽的逻辑单元，甚至在一个逻辑单元中再划分12个子逻辑单元。如下图所示：
网格用到的类样式Bootstrap的网络系统支持可响应式布局，当其列屏幕大小发生变化时则自动计算列宽。
共有4个：
xs (phones)
sm (tablets)
md (desktops)
lg (larger desktops)
下面是BootStrap网络的基本结构：
|
<div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div> |
示例
下面的示例是Bootstrap官方提供的基于Bootstrap构造HTML面页基本模板。
|
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <style type="text/css"> div { border-left:1px dotted blue; border-bottom:1px dotted blue; } </style> </head>
<body> <div class="row"> <div class="col-sm-1" >1</div> <div class="col-sm-1" >2</div> <div class="col-sm-1" >3</div> <div class="col-sm-1" >4</div> <div class="col-sm-1" >5</div> <div class="col-sm-1" >6</div> <div class="col-sm-1" >7</div> <div class="col-sm-1" >8</div> <div class="col-sm-1" >9</div> <div class="col-sm-1" >10</div> <div class="col-sm-1" >11</div> <div class="col-sm-1" >12</div> </div> <div class="row"> <div class="col-sm-4" >4-1</div> <div class="col-sm-4" >4-2</div> <div class="col-sm-4" >4-3</div> </div> <div class="row"> <div class="col-sm-4" >4</div> <div class="col-sm-8" >8</div> </div> <div class="row"> <div class="col-sm-6" >6-1</div> <div class="col-sm-6" >6-2</div> </div> </body> </html>
|
效果如下图所示：