首页 > 代码库 > bootstrap栅格系统
bootstrap栅格系统
栅格系统的基本用法：
1、打开www.bootstrap.com——》点击bootstrap中文文档——》点击全局CSS样式——》栅格系统
2、试做：导入CSS文件、jquery文件
屏幕分类：
<768px:超小屏幕xs
<992px:小屏幕sm
<1200px:中屏幕md
>1200px:超大屏幕lg
栅格系统实现原理：
将屏幕等分为12个格子，指定div占几个格子，不指定百分率
代码解释：
<!DOCTYPE html>//html5标签
<html>
<head>//头标签
<meta charset="UTF-8">//才有utf-8编码
<meta name="viewport" content="width=device-width, initial-scale=1">//移动设备优先显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0
<title>栅格系统</title>//网页标题
<link rel="stylesheet"href="http://www.mamicode.com/css/bootstrap.min.css" />//引入css文件
<style type="text/css">//样式
div{border: 1px #000000 solid;}//div样式
@media(max-width:768px){//当屏幕最大分辨率为768时，div样式如下：
div{background:#1B6D85;}
}
</style>
</head>
<body>//此文中的div与表格中的行列标签同理
<div class="container">//容器.container 最大宽度：None（自动） 750px 970px 1170px;<div class="container-fluid">全屏
<div class="row">//行
<div class="col-md-2">md2</div> //在中屏幕时占2格，引用了col-md-2类，可以同时引用多个类，在不同的屏幕下就有不同的响应，可以做到跨应用响应。其中，小屏幕的设置会自动适应大屏幕，大屏幕的设置在小屏幕上会改变
<div class="col-md-2 col-xs-2">md2</div>
<div class="col-md-2">md2</div>
<div class="col-md-2">md2</div>
<div class="col-md-2">md2</div>
<div class="col-md-2">md2</div>
</div>
<div class="row">
<div class="col-md-8">md8</div>
<div class="col-md-4">md4</div>
</div>
</div>
</body>
</html>
栅格应用：
列偏移：
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>//在中屏幕分辨率下占4格，.col-md-offset-* 类可以将列向右侧偏移
</div>
列嵌套：和<td><tr></tr></td>同理
<div class="row">
<div class="col-sm-9">//在小屏幕上占9格
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">//在超晓屏幕上占8格，在小屏幕上占6格
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
列排序：
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>//在中屏幕上占9个格子，并向右推3格子
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>////在中屏幕上占3个格子，并向左拉9格子
</div>
温馨提示：在div的内容中可以使用<br>换行
bootstrap栅格系统