首页 > 代码库 > Bootstrap之栅格系统

Bootstrap之栅格系统

2024-08-28 08:08:37   217人阅读

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="http://www.mamicode.com/css/bootstrap.css" style type="text/css">
　　　　 <script src="http://www.mamicode.com/js/jquery-1.11.3.js"></script>
	<script src="http://www.mamicode.com/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之栅格系统


联系
我们