2.bootstrap-全局css

1.Bootstrap 网格系统

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

 

         1.基本的网格结构

                   下面是 Bootstrap 网格的基本结构：

                   <div class="container">

                      <div class="row">

                         <div class="col-*-*"></div>

                         <div class="col-*-*"></div>     

                      </div>

                      <div class="row">...</div>

                   </div>

                   <div class="container">....

         2.响应式的列重置

                   以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。

                   为了解决这个问题，使用 可以使用 .clearfix class和 响应式实用工具来解决，

         3.偏移列

                   偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

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

         4.列排序

                   Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

                   您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

                  

                   push是向左移动

                   pull是向右移动

2.Bootstrap 排版

         1.标题

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

                   内联子标题(small)

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

         2.引导主体副本

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

         3.强调

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

         4.缩写

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

3.Bootstrap 代码

         Bootstrap 允许您以两种方式显示代码：

                   第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。

                   第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。        

         请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： &lt; 和 &gt;。

         用户输入：通过 <kbd> 标签标记用户通过键盘输入的内容。

         变量:通过 <var> 标签标记变量

         程序输出:通过 <samp> 标签来标记程序输出的内容。

4.Bootstrap表格

         表格类

                   .table        为任意 <table> 添加基本样式 (只有横向分隔线)    尝试一下

                   .table-striped  在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)        尝试一下

                   .table-bordered        为所有表格的单元格添加边框     尝试一下

                   .table-hover     在 <tbody> 内的任一行启用鼠标悬停状态        尝试一下

                   .table-condensed     让表格更加紧凑

         <tr>, <th> 和 <td> 类

                   .active      将悬停的颜色应用在行或者单元格上         尝试一下

                   .success   表示成功的操作     尝试一下

                   .info 表示信息变化的操作     尝试一下

                   .warning  表示一个警告的操作     尝试一下

                   .danger    表示一个危险的操作

         响应式表格

                   通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别

Bootstrap表单

         垂直或基本表单

                   基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

                   向父 <form> 元素添加 role="form"。

                   把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

                   向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

         内联表单

                   如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

                   默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。

                   使用 class .sr-only，您可以隐藏内联表单的标签。

         水平表单

                   水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

                   向父 <form> 元素添加 class .form-horizontal。

                   把标签和控件放在一个带有 class .form-group 的 <div> 中。

                   向标签添加 class .control-label。

         静态控件

                   当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。

         表单控件状态

                   输入框焦点

                   当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

                   禁用的输入框 input

                   如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

                   禁用的字段集 fieldset

                   对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

                   验证状态

                   Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

                   控件尺寸

                   水平排列的表单组的尺寸

                            通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

         辅助文本

                   针对表单控件的“块（block）”级辅助文本。

                   与表单控件相关联的帮助文本

                   与表单控件相关联的帮助文本 aria-describedby 属性的表单控件关联，这将确保使用辅助技术- 如屏幕阅读器 - 的用户获取控件焦点或进入控制时显示这个帮助文本。

         按钮

                   1.可作为按钮使用的标签或元素

                   为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

                  

                   <a class="btn btn-default" href="#" role="button">Link</a>

                   <button class="btn btn-default" type="submit">Button</button>

                   <input class="btn btn-default" type="button" value="Input">

                   <input class="btn btn-default" type="submit" value="Submit">

 

                   2.预定义样式（不同颜色）

                   3.尺寸

                   4.激活状态

                            当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。

                            对于 <button> 元素，是通过 :active 状态实现的。

                            对于 <a> 元素，是通过 .active 类实现的。

                     禁用状态

                            通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

                            为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

                            为基于 <a> 元素创建的按钮添加 .disabled 类。

         图片

                   响应式图片

                            在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实只是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

                            如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类

                   形状

                            <img src="..." alt="..." class="img-rounded">

                            <img src="..." alt="..." class="img-circle">

                            <img src="..." alt="..." class="img-thumbnail">

         快速浮动

                   通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。

         清除浮动

                   通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。

         显示或隐藏内容

                   .show 和 .hidden 类可以强制任意元素显示或隐藏

         让内容块居中

                   为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。