引言
- 最近工作中经常需要写自适应网站，媒体查询写的我快要吐了。用bootstrap写了一段时间，今天来跟大家分享下。
简介
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。（十二栅格系统）
栅格系统通过行（row）与列（column）组成页面布局，页面内容就放入这些创建好的容器中
使用规则
-
内容必须放在创建好的
container容器中。<div class="container"> <div class="row"></div> </div> -
在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数12
<div class="container"> <div class="row"> <div class="col-md-8"> 内容一 </div> <div class="col-md-4"> 内容二 </div> </div> </div> 具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外（margin）来抵消内距(padding)的影响
实例讲解栅格系统
-
下面的demo你会彻底了解12栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="bootstrap.min.css"> <style> .row { margin-top: 100px; } .row div { border: 1px solid skyblue; text-align: center; height: 60px; line-height: 60px; } </style> </head> <body> <div class="container"> <!-- 一行分成12等分 --> <div class="row"> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> <div class="col-md-1">占了一格</div> </div> <!-- 一行分成6等分 --> <div class="row"> <div class="col-md-2">占了二格</div> <div class="col-md-2">占了二格</div> <div class="col-md-2">占了二格</div> <div class="col-md-2">占了二格</div> <div class="col-md-2">占了二格</div> <div class="col-md-2">占了二格</div> </div> <!-- 一行分成3等分 --> <div class="row"> <div class="col-md-4">占了三格</div> <div class="col-md-4">占了三格</div> <div class="col-md-4">占了三格</div> </div> <!-- 一行分成2等分 --> <div class="row"> <div class="col-md-6">占了六格</div> <div class="col-md-6">占了六格</div> </div> <!-- 独占一行 --> <div class="row"> <div class="col-md-12">占了十二格</div> </div> </div> </body> </html> 将
.container修改为.container-fluid，就可以将固定宽度改变成100%宽度。
栅格参数
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 |
- 如果你的内容想在手机上显示那么你就可以调用
.col-xs- - 如果你的内容想在平板上显示那么你就可以调用
.col-sm- - 如果你的内容想在pc上显示那么你就可以调用
.col-md-
自适应demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
.row div {
display: flex;
align-items: center;
height: 300px;
justify-content: center;
font-size: 18px;
color: #fff;
}
.row div:nth-child(1) {
background: skyblue;
}
.row div:nth-child(2) {
background: purple;
}
.row div:nth-child(3) {
background: pink;
}
.row div:nth-child(4) {
background: yellowgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
第一块内容 <br> pc占3格 <br>平板占6格<br>手机占12格
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
第二块内容 <br> pc占3格 <br>平板占6格<br>手机占12格
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
第三块内容<br> pc占3格 <br>平板占6格<br>手机占12格
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
第四块内容<br> pc占3格 <br>平板占6格<br>手机占12格
</div>
</div>
</div>
</body>
</html>
总结
- 要设置
<meta name="viewport" content="width=device-width, initial-scale=1">标签 - 内容需要放在
.container或.container-fluid - 其实栅格系统的原理还是css3的媒体查询，只要我们掌握其原理，还怕不会用吗
