码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap之栅格系统

时间:2016-12-20 20:13:07      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:content   定位   init   清除浮动   pat   ati   表示   idt   padding   

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

Bootstrap之栅格系统

标签:content   定位   init   清除浮动   pat   ati   表示   idt   padding   

原文地址:http://www.cnblogs.com/dreamerC/p/6203606.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!