Bootstrap3学习（一）
一、Bootstrap简介
Bootstrap来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
（1）基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
（2）CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
（3）组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
（4）JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
（5）定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
（6）Bootstrap中主要包含css、js和fonts。
注意：Bootstrap.css和Bootstrap.min.css版本的区别：Bootstrap.min.css是压缩版，就是把换行和空格都去除，从而减少文件大小，适合生产环境；Bootstrap.css是未压缩版，便于调试开发，适合开发环境，二者的内容都是一样的。
（一）HTML中href和src区别
（1）href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2） src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。
（3）src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。
二、Bootstrap CSS
（一）Bootstrap CSS 概览
1、Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。例如：。
2、为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，；
（1）device-width 可以确保它能正确呈现在不同设备上。
（2）initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
（3）在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。
3、响应式图像
（1） max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。
（2）把元素的 display 属性设置为 block，以块级元素显示。
4、Bootstrap 使用 Normalize 来建立跨浏览器的一致性。Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
5、设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。
（二）Bootstrap 网格系统
1、 网格系统（Grid System）的工作原理
（1）行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
（2）使用行来创建列的水平组。
（3）内容应该放置在列内，且唯有列可以是行的直接子元素。
（4）预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
（5）列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
（6）网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
注意：为适应设备的不同大小，Bootstrap分为4种，采用不同的类属性来区分标识。分别为超小设备手机（<768px）使用.col-xs-*类属性（extra small）；小型设备平板电脑（≥768px）使用.col-sm-*类属性（small）；中型设备台式电脑（≥992px）使用.col-md-*类属性（middle）；大型设备台式电脑（≥1200px）使用.col-lg-*类属性（large）。
注意：网格系统列数总和最大为12列，通过类属性来指定元素占几列。如果总和超过12列，会自动换行。
2、Bootstrap 响应式实用工具
Bootstrap 提供了一些辅助类，实现内容对设备的显示和隐藏。visible-sm和hidden-sm等，例如： 小型✔ 在小型设备上可见；
3、实现对元素的移动：请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
4、Bootstrap允许列嵌套：添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。
注意：嵌套列添加的列不能超过12列。
5、列排序：按照一种顺序编写列，使用 .col-md-push-* 和 .col-md-pull-* 类属性来按照自己制定的顺序展示。
注意：push相当于推即相对于原位置向前推几列；pull相当于拉即相对于原位置往回拉几列。
（三）Bootstrap 排版
1、内联子标题样式：在元素两旁添加 ，或者添加 .small class。这样子您就能得到一个字号更小的颜色更浅的文本
2、引导主题副本：为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本。
3、Bootstrap 提供了一些用于强调或对齐文本的类，text-center、text-warning、text-danger、text-success；
4、缩写：HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 。
5、引用（Blockquote）：可以在任意的 HTML 文本旁使用默认的 。其他选项包括，添加一个 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。
6、Bootstrap 支持有序列表、无序列表和定义列表。
（1）有序列表：有序列表是指以数字或其他有序字符开头的列表。
（2）无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
（3）定义列表：在这种类型的列表中，每个列表项可以包含 内的短语及其描述排在一行。
（四）Bootstrap 代码
Bootstrap 允许您以两种方式显示代码：
1、 标签。如果您想要内联显示代码，那么您应该使用 标签。
2、标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用
标签。
（五）Bootstrap 表格
1、表格类：
（1）.table:为任意 添加基本样式 (只有横向分隔线);
（2）.table-striped：在 内添加斑马线形式的条纹 ( IE8 不支持)；
（3）.table-bordered：为所有表格的单元格添加边框；
（4）.table-hover：在 内的任一行启用鼠标悬停状态；
（5）.table-condensed：让表格更加紧凑；
2、用于表格的行或者单元格的类：
（1）.active：将悬停的颜色应用在行或者单元格上；
（2）.success：表示成功的操作；
（3）.info：表示信息变化的操作
（4）.danger：表示一个危险的操作;
（5）.warning:表示一个警告的操作；
注意：这些类的效果是表格呈现不同的背景颜色。
（六）Bootstrap 表单（form）
1、垂直或基本表单：
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。
（1）向父