Bootstrap 栅格系统
2019-09-25 本文已影响0人
CondorHero
推荐去下面两个网站去多看几个模板，随便改改：
找一个站仿仿 bootstrap 的网站实例：
http://expo.bootcss.com/
一、基本骨架
下载文件基本/演示结构：
dist/
├── css/
│ ├── bootstrap.min.css
├── js/
│ ├── jquery.min.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
必须引入 bootstrap.min.css 然后引入bootstrap.min.js，bootstrap.min.js 依赖于jquery.min.js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Hello Bootstrap</title>
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器 -->
<h1>你好！</h1>
<!-- Bootstrap 的所有 JavaScript 插件都依赖 jQuery -->
<script src="./js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
你好！
二、栅格系统
container 容器会根据电脑视口大小进行调整。分别为 None 自动，750px，970px，1170px。将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。栅格参数大约如下：
div 盒子布局从堆叠到水平排列：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Hello Bootstrap</title>
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<style>
.container{
height: 300px;
background-color: rgba(205, 223, 57,.8);
}
.num1{
height: 200px;
background-color: #0fc;
border-radius: 3px;
}
.num2{
height: 200px;
background-color: #d47c7c;
border-radius: 3px;
}
.num3{
height: 200px;
background-color: #7025c2;
border-radius: 3px;
}
</style>
</head>
<body>
<!-- Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器 -->
<div class="container">
<div class="row">
<div class="num1 col-lg-5"></div>
<div class="num2 col-lg-4"></div>
<div class="num3 col-lg-3"></div>
</div>
</div>
<!-- Bootstrap 的所有 JavaScript 插件都依赖 jQuery -->
<script src="./js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
col-lg 表示大屏幕显示器 (≥1200px) 起作用。
<div class="num1 col-lg-5"></div>
移动设备和桌面屏幕同时自适应：
- 屏幕显示器(≥1200px) 三个盒子宽比为 5:4:3
- 屏幕显示器(1200px>x≥992px) 三个盒子宽比为 4:4:4
- 屏幕显示器(992px>x≥768px) 三个盒子宽比为 5:2:5
- 屏幕显示器(x<768px) 三个盒子宽比为 2:8:2
<div class="num1 col-lg-5 col-md-4 col-sm-5 col-xs-2"></div>
<div class="num2 col-lg-4 col-md-4 col-sm-2 col-xs-8"></div>
<div class="num3 col-lg-3 col-md-4 col-sm-5 col-xs-2"></div>
大致效果如下图：
需要注意的是：多余的列（column）将另起一行排列
三、列偏移（制作盒子居中）
如何让一个盒子居中？使用列偏移。
<div class="container">
<div class="row">
<div class="num1 col-lg-6"></div>
</div>
</div>
不居中
一共十二列，盒子宽六列，剩下六列，列只需要偏移三列就行了。
<div class="num1 col-lg-6 col-lg-offset-3"></div>
盒子水平居中
