1.1 栅格系统组成
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12格。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。
1.2 两种容器
容器的类样式名 | 特点 |
---|---|
container | 固定宽度的容器,在不同的设备上宽度不同 |
container-fluid | 始终占屏幕宽度的100% |
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--网页编码的类型-->
<meta charset="utf-8">
<!--使用最新的支持H5浏览器内核来解析-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
视口:在浏览器中一个虚拟的网页容器。参数:网页的宽度设置为设备的宽度 初始缩放比: 1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<style type="text/css">
div{
border: 2px solid red;
height: 100px;
}
</style>
<title>容器创建</title>
<!-- 导入文件:bootstrap.css -->
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
container:不同的设备上有不同的固定宽度
</div>
<div class="container-fluid">
container-fluid:100%宽度显示
</div>
<!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery,所以必须放在前边 -->
<script src="../static/js/jquery-3.1.1.js"></script>
<!-- 加载 Bootstrap的所有 JavaScript插件-->
<script src="../static/js/bootstrap.min.js"></script>
</body>
</html>
执行结果
1.3 设备查询@media
通过不同的设备类型和条件定义样式表规则。设备查询让CSS可以更精确作用于不同的设备类型和同一设备的不同条件。设备查询的大部分特性都接受min和max用于表达“大于或等于”和“小于或等于”。打开文件:bootstrap.css,可以看到以下代码:
.container {
padding-right: 15px; 内右边距
padding-left: 15px; 内左边距
margin-right: auto; 块级元素居中
margin-left: auto;