Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
下面我们通过操作，学会如何引用 css 样式，并在使用css 样式美化界面
第1步，下载 bootstrap
1. 从官网下载，地址为：
https://v3.bootcss.com/
这个是第3版的样式，也可以在官网选择自己需要的版本
说明：后面的操作使用的是 v3 版本。
2. 从百度云下载，我已将下载后的文件放到了百度云，地址为：
链接：https://pan.baidu.com/s/1_0pZGEdWqFt74YjMX7tcyQ
提取码：t36t
第2步，复制下载的BOOTSTRAP到项目中
我们把 bootstrap 复制到 plugins 目录中。
复制后如下图所示：
第3步，在页面中添加一个按纽和文本框
为了比较 bootstrap 的样式，先添加按纽、文本框、段落等，如下图所示：
添加的代码如下：
<button>我是一个按纽1</button>
<button>我是一个按纽2</button>
<button>我是一个按纽3</button>
<input type="text" value="我是一个文本框">
<p>我是一个段落</p>
<select>
<option>我是一个下拉选择1</option>
<option>我是一个下拉选择2</option>
<option>我是一个下拉选择3</option>
</select>
第4步，运行程序查看效果
运行后的效果如下图所示：
这个样式并不美观。如何处理呢，我们需要引入 bootstrap 的样式表。
第5步，引入 BOOTSTRAP.CSS
引入位置如下图所示：
引入的代码如下：
<!-- 2. 引用 bootstrap -->
<link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"></link>
<script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
第6步，将页面中的按纽、文本等添加上样式
把这些控件添加上 css 类，如下图所示：
Class= 代表是要使用一个 css 的类，后面的 btn btn-default 或 form-controll 或 text-success 是bootstrap 的样式。
这里我们先用简单的样式，目的是让页面看出来美观一些。
第7步，运行程序查看 bootstrap 的效果
这里看到这个效果，比未添加样式前要好看多了。
此时我们的 bootstrap 样式添加完成了。
特别说明：bootstrap 我们只用基本样式，再深入的就属于前端开发了
下节课，我们将使用bootstrap 把留言板页面完成。
hbqcwl@sina.cn
