BootStrap 的随笔一二三

正在学习中待补充 。。为自己日后查看留存，不喜误看

特别鸣谢，小霖，小涛，小海...

Bootstrap总结

可实现的页面效果

导航、格栅分为12份，焦点图，按钮，响应式，下拉按钮，选项卡等

bootstrap布局

　　网格系统：

　　预定义的网格类

　　.row

　　.col-xs-4

　　.col-sm-4

　　.col-md-4

　　.col-lg-4

　　可用于快速创建网格布局

　　其中.col-xs-*用户布局额外小的设备，小于768px

　　.col-sm-*用于布局小型设备，768px起

　　.col-md-*用于布局中型设备，992px起

　　.col-lg-*用于布局大型设备，1200px起

偏移列

为了能在大屏幕显示器上使用便宜，使用.col-md-offset-*类，这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

3.嵌套列

　　为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列 内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列总计达 12。

4.列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

5排版

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。

如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本

为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本

HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）

HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>

表格

Bootstrap提供了清晰的创建表格的布局

<table> 容纳以表格形式显示数据的元素

<thead> 表格标题行的容器元素<tr>,用来标识表格列

<tbody> 表格主题中的表格行的容器元素<tr>

<tr> 一组出现在单行的表格单元格的容器元素

<td> 默认的表格单元格

<th> 特殊的表格单元格，位于<thead>内使用

<caption> 关于表格存储内容的描述

6 先引入一下组件

<!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

在标签中引入class类例如：

<table class="table table-striped">  ...</table>

.active

.success

.info

.warning

.danger

设置单元格的颜色