栅格系统
1.什么是栅格系统?
栅格系统又名网格系统,是有容器+行+列组成
容器最多容纳12列,多一列会在下一行显示,少一列,会把该列的位置空着
名字 | 类名 | 作用 |
---|---|---|
容器 | .container | 响应式的布局容器 |
- | - | 大屏(>=1200px)宽度是1170px |
- | - | 中屏(>=992px)宽度是970px |
- | - | 小屏(>=768px)宽度是750px |
- | - | 超小屏(100%) |
容器 | .container-fluid | 流失布局布局容器 |
- | - | 流失布局 百分百的宽 |
- | - | 适合做移动端开发 |
名字 | 类名 | 作用 |
---|---|---|
栅格系统 | bs中的栅格系统将容器平均分为了12列 | |
参数 | bs中行和列的组合来创建页面 | |
行 | .row | 行是放在容器中的 |
列 | .column | 列是当中行中的 |
大屏 | .col-lg- | 大屏(>=1200px)下用到的列的类名是.col-lg |
中屏 | .col-md- | .col-md-4 表示中屏下,该元素占比是4列 |
小屏 | .col-sm- | 每一列默认左右都有15px的padding |
超小屏 | .col-xs- | 列里面可以同时添加其他屏下的类 |
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 做移动端就写 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
<style type="text/css">
div{
text-align: center;
font-size: 50px;
}
.box{
/* 容器的宽是定义好的
浏览器窗口>=1200 容器的宽是1170px
1200>浏览器窗口>992px 容器的宽是970px
992>浏览器窗口>768px 容器的宽是750px
768>浏览器窗口 容器的宽是100%
*/
/* width: 1200px; */
height: 300px;
border: 1px solid red;
}
[class^=col]:nth-child(1){
height: 100px;
background: yellow;
}
[class^=col]:nth-child(2){
height: