bootstrap 使用（一）

介绍

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
bootstrap的js插件需要引入jquery.js
菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-intro.html
中文官网：https://v3.bootcss.com/
现在的版本主要有3.x和4.x。我这里使用3.x。

使用

bootstrap的使用可以下载到项目中，也可以直接在线引用。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

栅格系统

栅格（网格）系统通过一系列包含内容的行和列来创建页面布局。

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">

• 栅格系统主要有三个元素：容器、行和列。
• 容器可以并列存在，行必须在容器中，列必须在行中。
• 这三者本质都是div元素，只是class不同。
• 容器：div.container;行：div.row；列：col--
• 超小设备手机（col-xs-）、小型设备平板电脑（col-sm-）、中型设备台式电脑（col-md-）、大型设备台式电脑（col-mlg-）
• 不论是什么设备，一个行下的列宽之和为12