一,栅格系统简介
1,响应式设计
响应式设计是就一个网站能够兼容多个终端,而不是为每个终端特定一个版本
2,栅格实现原理
- “行(row)”必须包含在 .container 中
- 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--移动设备优先-->
<title>demo02</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
div{border: 1px #333333 solid;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 col-sm-6">.col-md-8</div>
<div class="col-md-4 col-sm-6">.col-md-4</div>
</div>
</div>
</body>
</html>
注意:<div class="col-md-8 col-sm-6">.col-md-8</div>
<div class="col-md-4 col-sm-6">.col-md-4</div>
可以在中等屏幕和小屏幕分别以不同的百分比排列
3,媒体查询
修改样式代码为
<style type="text/css">
div{border: 1px #333333 solid;}
@media (max-width: 767px) {
div{background: #F0AD4E;}
}
</style>
定义小于超小屏幕的样式
二,栅格布局基本用法
1,布局容器
<body>
<div class="container">
<h1>container</h1>
</div>
<div class="container-fluid">
<h1>container-fluid</h1>
</div>
</body>
对比效果container-fluid可以宽度100%显示,container有限制
具体参见源码
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
2,列组合
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
注意:大小向上兼容,也就是col-xs-6
适用所有屏幕,col-md-4
适用中屏幕及更大屏幕
3,列偏移
<div class="row">
<div class="col-xs-3 col-xs-offset-3">col-xs-3</div>
<div class="col-xs-2 col-xs-offset-2">col-xs-2</div>
</div>
col-xs-offset-3
向右偏移三格
4,列嵌套
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
</div>
<div class="col-md-4">4</div>
</div>
5,列排序
<div class="row">
<div class="col-md-3 col-md-push-5">col-md-3</div>
<div class="col-md-2 col-md-pull-2">col-md-2</div>
</div>
col-md-push-5
向右5格, col-md-pull-2
向左2格
三,栅格参数
1,跨设备组合定义
<div class="row">
<div class="col-md-8 col-sm-6">.col-md-8</div>
<div class="col-md-4 col-sm-6">.col-md-4</div>
</div>
注意:<div class="col-md-8 col-sm-6">.col-md-8</div>
<div class="col-md-4 col-sm-6">.col-md-4</div>
可以在中等屏幕和小屏幕分别以不同的百分比排列
2,清除浮动
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 1
<br />ssssssssssssss
</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 2</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 4</div>
</div>
<div class="clearfix visible-xs"></div>
只在xs分辨率时清除浮动当一行不能放下所有列,浮动到下一行显示
四,禁止响应布局
1,删除viewport的meta
2,为.container设固定宽度
3,对导航移除折叠和展开行为