简介
bootstrap是一个开源的前端框架，整合了HTML、CSS、JS。
其响应式的含义为：网页可以根据不同的设备（安卓、平板、PC）动态调整网页布局（防止页面因分辨率不同出现错乱的情况），不必为每个设备独立开发网页。
环境准备
依赖库下载地址下载完成后将依赖库导入当前项目中来
模板案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
栅格系统
bootstrap把网页的每一行都分割成12列，通过控制这些列来调整布局，实现动态性。
- 栅格系统的使用
<!-- 每一行必须在container 或container-full中 -->
<div class="container" style="background-color: #46b8da;">
<!-- 定义行 -->
<div class="row">
<!-- clss中 col代表列 lg代表pc端 6代表一行中占几列 -->
<div class="col-lg-6" style="background-color: red;">111</div>
</div>
</div>
- 栅格系统的嵌套使用
栅格系统的行是可以嵌套的 行–列--行—列…
<body>
<div class="container" style="background-color: #46b8da;">
<!-- 定义行 -->
<div class="row">
<!-- clss中 col代表列 lg代表pc端 6代表一行中占几列 -->
<div class="col-lg-12" style="background-color: red;">
<div class="row">
<div class="col-lg-6" style="background-color: #46b8da;">111</div>
</div>
</div>
</div>
</div>
</body>
3.屏幕尺寸设置
