Bootstrap基本结构

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

优点：面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。

缺点：兼容各种设备工作量大，效率低下，代码累赘，会出现隐藏无用的元素，加载时间加长。

总的来说响应式布局是大势所趋，能够给用户更好的体验。

BootStrap天然的支持响应式布局，只要在head里面添加如下代码即可：

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

Bootstrap容器

Bootstrap需要一个容器元素来包裹网站的内容。BootStrap会对容器中的元素起作用。

我们可以使用以下两个容器类：

（1）.container 类用于固定宽度并支持响应式布局的容器。

（2）.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

Bootstrap栅格系统 

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

Bootstrap 栅格系统有以下 5 个类:

（1） .col- 针对所有设备

（2）.col-sm- 平板 - 屏幕宽度等于或大于 576px

（3）.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px

（4）.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px

（5）.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

偏移列：偏移列通过 offset-*-* 类来设置。

第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型（可以省略）；

第二个星号( * )可以是 1 到 11 的数字。

Bootstrap的栅格系统需要在容器.container里设置一个数据行.row；在行(.row)里添加列(.column)。

<div class="container">
   <div class="row">
     <div class="col-md-4">...</div>
     <div class="col-md-4 offset-md-2">...</div>
   </div>
</div>

Bootstrap CSS 

BootStrap CSS包含了许多的内容，其中包括排版、表格、表单、按钮、图片、信息提示框等。

1.排版

标题：Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示。

在Bootstrap中为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

 <small>：在 Bootstrap 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本。

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

文本对齐方式： 在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格： 左对齐，取值left；居中对齐，取值center；右对齐，取值right；两端对齐，取值justify。 为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐；.text-center：居中对齐；.text-right：右对齐；.text-justify：两端对齐。

例如下面的四行代码，分别定义文本的四种不同的对齐风格：

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

 2.表格

.table：为 <table> 标签增加基本样式--很少的内补(padding)并只增加水平分隔线——只要为其增加 .table 类即可。

<table class="table">
  <tr>
    <td>php</td>
    <td>8学时</td>
  </tr>
  <tr>
    <td>bootstrap</td>
     <td>10学时</td>
  </tr>
</table> 

结果如下： 

 .table-striped：通过在table标签上添加 .table-striped class，我们将在 <tbody> 内的行上看到条纹。

<table class="table table-striped">
   <tbody>
    <tr><td>php</td></tr>
    <tr><td>bootstrap</td></tr>
    <tr><td>css</td></tr>
   </tbody>
</table>

 结果如下：

.table-bordered ：通过添加 .table-bordered 可以为表格添加边框。

<table class="table table-striped table-bordered">
  <tbody>
  <tr><td>php</td></tr>
  <tr><td>bootstrap</td></tr>
  <tr><td>css</td></tr>
  </tbody>
</table>

结果如下：

.table-hover: 通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景。

<table class="table table-striped table-bordered table-hover">
  <tbody>
    <tr><td>php</td></tr>
    <tr><td>bootstrap</td></tr>
    <tr><td>css</td></tr>
  </tbody>
</table>

结果如下：

指定意义的颜色类：通过指定意义的颜色类可以为表格的行或者单元格设置颜色。样式是在tr上的。 

样式	意义
.table-primary	蓝色: 指定这是一个重要的操作
.table-success	绿色: 指定这是一个允许执行的操作
.table-danger	红色: 指定这是可以危险的操作
.table-info	浅蓝色: 表示内容已变更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用于鼠标悬停效果
.table-secondary	灰色: 表示内容不怎么重要

<table class="table table-striped table-bordered table-hover">
    <tbody>
    <tr><td>Default</td></tr>
<tr class="table-primary"><td>Primary</td></tr>
<tr class="table-success"><td>Success</td></tr>
<tr class="table-danger"><td>Danger</td></tr>
<tr class