第一章 BootStrap认知 - 《BootStrap4响应式开发实战》

1.1 BootStrap下载
- 官网下载
- NPM下载
1.2 BootStrap使用方式
1.3 BootStrap基本模板
- 1.3.1 HTML5优先
- 1.3.2 移动设备优先

BootStrap 是目前世界上最流行的前端UI组件库，由Twitter开发的用于开发响应式布局、移动设备优先的WEB项目。

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

BootStrap 目前版本由BootStrap2、BootStrap3以及本书所讲解的BootStrap4，最新的BootStrap中使用了CSS3中的Grid布局以及Flex等布局方案，是为未来推出的一个UI组件库。在推动CSS3新布局方法的推广上也贡献了自己的一份力量。

本章你会学到BootStrap4（后文皆称BootStrap）的下载以及文件引入的方式，这样我们就可以开始学习BootStrap的基础语法了。本章内容如下：

BootStrap下载
BootStrap使用方式
BootStrap基本模板

1.1 BootStrap下载

得益于前端包管理工具的发展，目前有多种下载 BootStrap 的方法，如果我们只是在静态页面中使用BootStrap，可以直接在官网下载即可。如果我们想要在相关搭建了前端构建工具如Gulp、webpack等项目中使用BootStrap，那么我们可以直接使用Brower或者NPM。

官网下载

BootStrap的官方网站为 https://v4.bootcss.com，在这个访问网站后，我们直接点击网站上的按钮“下载BootStrap”即可，如图 1.1.1

图 1.1.1

点击下载BootStrap后进入页面再次点击“下载BootStrap”即可完成下载，如图1.1.2

图 1.1.2

NPM下载

使用NPM可以方便的在我们的项目中下载BootStrap至本地并作为模块使用

npm install bootstrap

1.2 BootStrap使用方式

BootStrap提供给我们的有CSS及JS文件，这些文件我们像平时一样，直接引入即可。下载后的文件结构如图 1.2.1

图 1.2.1

虽然文件很多，但是我们需要清楚的是，在这么多文件中，我们只需要css中的bootstrap.css以及js中的bootstrap.js即可，这是很重要的一个需要注意的地方。

看到了BootStrap的相关内容后，我们就可以在我们的网页中引入BootStrap的CSS及JS文件

<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
<script src="./bootstrap/js/bootstrap.js"></script>

但是需要注意的是，BootStrap的JS效果基于jQuery，所以在引入bootstrap.js之前，需要先引入jQuery.js，具体方法如下

<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
<script src="./js/jquery.js"></script>
<script src="./bootstrap/js/bootstrap.js"></script>

1.3 BootStrap基本模板

一个BootStrap的基本模板需要引入bootstrap.js、bootstrap.css以及jquery.js、popper.js。BootStrap的弹窗需要利用popper.js所以需要在bootstrap之前引入。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 引入BootStrap CSS -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- 先引入jquery, 然后引入popper, 最后引入 Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

1.3.1 HTML5优先

Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明并且设置字符编码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

1.3.2 移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，以此得到最好的前端适配。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度
initial-scale=1 表示初始的缩放比例
shrink-to-fit=no 自动适应手机屏幕的宽度