初识bootstrap
简介
Bootstrap(web前端UI框架)，是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，它使得 Web 开发更加快捷。Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
下载
Bootstrap4 目前是 Bootstrap 的最新版本，可以在官网下载。地址：https://v4.bootcss.com/
创建第一个 Bootstrap 4 页面
- 添加 HTML5 doctype：Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
- 移动设备优先：为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签
注：如果使用的开发工具为HbuilderX，那么在创建好的html文件中，直接输入html+回车，即可出现以下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
-->
<title></title>
</head>
<body>
</body>
</html>
- 容器类
Bootstrap 4 需要一个容器元素来包裹网站的内容。我们可以使用以下两个容器类：
.container 类用于固定宽度并支持响应式布局的容器。(85%-90%)
.container-fluid 类用于占据全部视窗的容器。(100%)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<h1>创建第一个 Bootstrap 4 页面</h1>
<p>container</p>
</div>
<div class="container-fluid">
<h1>创建第一个 Bootstrap 4 页面</h1>
<p>container</p>
</div>
</body>
</html>
