bootstrap
移动优先 中文官网 http://www.bootcss.com/
1.基本模板
<!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>2.容器（默认样式中左右各15px的padding）
流体容器 铺满整个屏幕 例:<div class="container-fluid"</div>
固定容器 自适应居中 分辨率大于1200时容器大小为1170px 根据不同分辨率 值会发生改变 例:<div class="container"></div>
注： 一般头尾部采用流体 主体采用固定
3.栅格系统
row表示行 ( 会自动处理默认padding ) col表示列
组合模式 col-lg- col-md- col-sm- col-xs-
列偏移 col-offset- ( 只能向右偏移 值的范围:最小为1最大为12 偏移量+自身列数>12时会向右顶出现横向滚动条)
列排序 col-lg-push(pull)- ( push为向后排序 pull为向前排序 )
左浮动 pull-left 右浮动 pull-right
清除浮动 <div class="clearfix"></div>
固定定位 affix
打印类:
在打印中可见 非打印中不可见 visible-print-block 在打印中不可见 非打印中可见 hidden-print
转载于:https://www.cnblogs.com/dreamerC/p/6203606.html
