(一) 认识BootStrap

这是一个神奇的前端UI框架

bootstrap是当下非常经典且流行的前端框架（界面工具集); 很多公司的前后端项目都有集成boostrap!
bootstrap的特点: 灵活简介、代码优雅、美观大方；用一句话概括: 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
GitHub: https://github.com/twbs/bootstrap
官网:
- http://www.bootcss.com/ (中文网)
- https://getbootstrap.com/ (英文网)

Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的一个内部开源项目，并利用业余时间完成了第一个版本的开发。

(二) 为什么要使用BootStrap

Bootstrap提供了一整套前后端(包括移动端)需要的界面工具集合, 能够让开发者快速搭建出美观的, 可适配的前端界面!
生态圈火，不断地更新迭代；并且基于bootstrap衍生出来了很多其它的前端框架, 比如: 各种什么UI(你懂得, 老祖宗在这!);
- 提供一套美观大方地界面组件；
- 提供一套优雅的 HTML+CSS 编码规范；
- ......

注意:
使用 Bootstrap 并不代表不用写 CSS 样式, JS代码，而是不用写所有通用的代码!

(三) 开始使用BootStrap

下载安装Bootstrap
- 方式一: npm install bootstrap --save
  (通过 npm 进行安装, 适合工程化开发, 比如集成到react或者Node项目中)
- 方式二: gitHub直接下载
  (适合起步, 全面学习)
Bootstrap初始化模板

<!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>页面标题</title>
     <!-- 引入Bootstrap核心样式文件（必须） -->
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <!-- 引入Bootstrap默认主题样式（可选） -->
     <link rel="stylesheet" href="css/bootstrap.theme.min.css">
     <!-- 你自己的样式或其他文件 -->
     <link rel="stylesheet" href="example.css">
   </head>
   <body>
     <!-- 你的HTML结构...... -->
     <!-- 以下代码，如果不使用JS插件则不需要 -->
     <!-- 由于Bootstrap的JS插件依赖jQuery，so 引入jQuery -->
     <script src="js/jquery.min.js"></script>
     <!-- 引入所有的Bootstrap的JS插件 -->
     <script src="bootstrap.min.js"></script>
     <!-- 你自己的脚本文件 -->
     <script src="example.js"></script>
   </body>
   </html>

(四) 前端界面常用组件

(无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能)

按钮

    <button class="btn btn-danger test">百度一下</button>
    <button class="btn btn-warning">谷歌一下</button>
    <button class="btn btn-success">搜狗一下</button>

进度条

  <div class="progress">
       <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
           <span class="sr-only">60% Complete</span>
       </div>
   </div>

徽章

  <p class="badge" style="background-color: red;">10121212121</p>

面板

 <div class="panel panel-default" style="margin: 100px;">
       <header class="panel-heading">
           通知：有大事要发生!
       </header>
       <section class="panel-body">
           <p>我不小心摔倒了！</p>
       </section>
       <footer class="panel-footer">
           来源: www.itlike.com
       </footer>
   </div>

字体图标

 <span class="glyphicon glyphicon-trash" style="font-size: 100px; color: red"></span>
 <p class="glyphicon glyphicon-qrcode" style="font-size: 100px; color: blue;"></p>