Bootstrap之栅格系统

bootstrap

1.宗旨模板

  清除浮动 <div class=”clearfix”></div>

  组合形式  col-lg-  col-md-  col-sm-  col-xs-

  row表示行 ( 会自动处理暗许padding )  col代表列

  左浮动 pull-left  右浮动 pull-right

运动优先  中文官网  http://www.bootcss.com/

  打印类:  

  流体容器 铺满全体荧屏  例:<div
class=”container-fluid”</div>  

3.栅格系统

    注: 一般头尾部接纳流体 主体使用一定

  固定定位 affix

2.容器(默认样式中左右各15px的padding)

*  *固定容器 自适应居中  分辨率大于1200时容器大小为1170px
依据不一样分辨率 值会生出改变 例:<div class=”container”></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 兼容IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容移动端 -->
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css" style type="text/css">
     <script src="./js/jquery-1.11.3.js"></script>
    <script src="./js/bootstrap.js"></script>   

</head>
<body>

</body>
</html>

  列排序 col-lg-push(pull)-  ( push为向后排序 pull为向前排序 )

 

      在打字与印刷中可知 非打字与印刷中不可知 visible-print-block
      在打字与印刷中不可知 非打字与印刷中可知 hidden-print

  列偏移  col-offset-  ( 只可以向右偏移 值的限定:最小为1最大为12
偏移量+本人列数>12时会向右顶出现横向滚动条)

相关文章