bootstrap的全局CSS样式以及组件的使用

一、 如何使用bootstrap

1. 引入bootstrap.css文件
2. 引入normalize.css文件
3. 将bootstrap字体文件放到工程下（当用其中的图标时会去寻找该文件夹中的内容）

一、布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器。有两个类：container和container-fluid。

1. container类：固定布局

固定布局用于固定宽度并支持响应式布局的容器。该类中在不同的屏幕大小有不同的宽度。

2. container-fluid:流式布局

流式布局用于100%宽度，占据全部视口的容器。默认有15px的左右padding

二、 栅格系统

1. ==Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动平分为12列。==它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
2. row必须包含在.container/.container-fluid中。列必须包含在row中。内容放在列中。
3. 通过为列设置padding来设置列与列之间的间隔大小。
4. 可以通过给.row设置负margin从而抵消.container的padding值。给子元素设置负margin可抵消父元素的padding
5. 每一个列都有左右15px的padding值。
6. 当每一个row所包含的列大于12个时，会将包含多余列的元素作为一个整体从另一行重新开始排布。

1. 栅格参数

2. 列偏移

1. col-md-offset-*:可通过类似形式设置在不同屏幕大小上将该列整体向右移动多少列的距离（设置整个行的margin-left值，即向右移动是所有列向右移动）。
2. col-md-push-* :可通过类似形式设置在不同屏幕大小上将该列向右移动多少列的距离（只是将该列相对于原位置向右移动，其余列不变）。
3. col-md-pull-*：可通过类似形式设置在不同屏幕大小上将改列向左移动多少列的距离（只是将该列相对于原位置向左移动，其余列不变）。

3. 嵌套列

可在一个列中嵌套一个新的 .row 元素和一系列 .col-sm-* 元素。

二、 排版

1. 基础排版

类/标签	解释
.h1 ~ .h6	作用与<h1>~<h6>标签相同
.small	作用与 <small><small>标签相同
.lead	让字体变大，让其突出显示
.mark	让内容高亮
<s></s>与<del></del>	作用相同，都是给文本添加删除线
<u></u>与<ins></ins>	给文本添加下划线的作用
<strong></strong>	加粗文本
<em></em>	文本倾斜
.text-left、.text-right、.text-center	文本对齐方式（左、右、中）
.text-justify	暂时和左对齐效果相同
.text-nowrap	文本不折行显示
.text-lowercase	文本全部字母小写
.text-uppercase	文本全部字母大写
.text-capitalize	文本所有单词首字母大写
<abbr title="完整内容"></abbr>	当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性
<blockquote></blockquote>	引用样式。可通过添加.blockquote-reverse类让引用内容向右对齐。
<footer></footer>	用于标明引用来源
bootstrap将全局的font-size设置为14px，line-height设置为1.428。<p>标签被设置了10px的底部外边距margin
.control-label	设置label的文字右对齐
.center-block	让块级元素居中
.clearfix	清除浮动
.push-left	左浮动
.push-right	有浮动
.show	显示
.hide	隐藏
.close	关闭按钮

2. 列表

类/标签	解释
.list-unstyled	无样式列表可用。移除了默认的list-style样式和左侧外边距。
.list-inline	将<ul>所有子元素设置为行内块元素，让其放置一行
.dl-horizontal	可让<dl>内的子元素排在一行

3. 表格

① 基本样式类

类/标签	解释
.table	为table标签添加该类可给其添加少量的padding和 水平方向的分割线
.table-striped	为table标签添加该类可以给每一行增加斑马条纹样式
table-bordered	为table标签添加该类可给每个单元格增加边框
table-hover	为table标签添加该类可对每一行设置鼠标悬停样式
table-condensed	让表格更加紧凑，单元格中的内补（padding）均会减半。

② 表格中的状态类：可设置行或单元格的背景颜色

③ 响应式表格

将任何.table元素包裹在tabble-responsive元素内，即可创建响应式表格。其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

④ 表单

1. Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可(添加到表单控件本身不起作用)。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
2. 若要给表单控件尾部添加校验状态图标，则需要给其父元素添加has-feedback类，以及图标元素设置glyphicon glyphicon-状态 .form-control-feedback三个类。其中glyphicon-状态中的状态可根据所需选择。

//添加图标例子
 <form class="form-horizontal">
        <div class="form-group has-success">
            <label class="col-sm-1 control-label">姓名</label>
            <div class="col-sm-9  has-feedback">
                <input type="text" class="form-control"/>
                <span class="glyphicon glyphicon-ok " aria-hidden="true"></span>//图标元素
            </div>
        </div><div class="form-group has-warning ">
        <label class="col-sm-1 control-label">姓名</label>
        <div class="col-sm-9 has-feedback">
            <input type="text" class="form-control"/>
            <span class="glyphicon glyphicon-ok " aria-hidden="true"></span>
        </div>
    </div>
        <div class="form-group has-error">
        <label class="col-sm-1 control-label">姓名</label>
        <div class="col-sm-9 has-feedback">
            <input type="text" class="form-control"/>
            <span class="glyphicon glyphicon-ok " aria-hidden="true"></span>
        </div>
    </div>
        <div class="form-group">
        <label class="col-sm-1 control-label">姓名</label>
        <div class="col-sm-9 has-feedback">
            <input type="text" class="form-control"/>
            <span class="glyphicon glyphicon-ok " aria-hidden="true"></span>
        </div>
    </div>
    </form>

类/标签	描述
.form-control	所有设置了form-control类的<input>、<textarea>和<select>的元素的宽都被设置为100%
.form-group	将label元素和设置了form-control的控件包裹在设置了.form-group的元素中可得到更好的排版（每一个设置了.form-group类的元素之间都会有一定的间距）
.form-inline	为form标签设置该类可让其内容左对齐且每一个元素都为行内块元素，即可在一行放置form标签内部的元素。该类只有在视口宽度大于等于768px时有效，小于768px会使表单折叠
.form-horizontal	给form标签设置该类可以让每一组.form-group内的子元素并排。且此时设置了.form-group的元素可被当做栅格系统的.row。故可给其子元素设置所占列比例
rows	可以给textarea标签设置rows属性
.checkbox-inline	将设置了该类的复选框设置为行内块标签
.radio-inline	将设置了该类的单选框设置为行内块标签
.form-control-static	若想让form标签中的<p>标签和label元素放置一行，可给<p>标签使用.form-control-static
.input-lg/.input-sm/	设置表单控件的高
.col-lg-*	通过.col-lg-*类似的类可以为控件设置宽（无须设置.row）
.form-group-lg/.form-group-sm	为.form-horizontal包裹的label元素和表单控件设置高度

//.form-horizontal例子
<form class="form-horizontal">
  <div class="form-group">
  //可给.form-group的子元素设置所占列比例
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

⑤ 按钮

1. 为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
2. 如果<a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button"属性。

类	解释
.btn	给按钮添加基本样式（去除outline等等）
.btn-default/.btn-danger/.btn-warning/.btn-success/.btn-info/.btn-primary	设置按钮的背景颜色
.btn-lg/.btn-sm/.btn-xs	设置按钮的尺寸
.btn-link	设置按钮点击与链接点击样式类似
.btn-block	给按钮添加该类可将其拉至父元素100%的宽度，按钮变为块级元素

⑥ 图片

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

类	解释
.img-circle	图片的形状设置为圆形
.img-rounded
.img-thumbnail

⑦ 文字颜色类

类	描述
text-danger
text-warning
text-info
text-success

⑧ 背景色辅助类

类	描述
.bg-info
.bg-success
.bg-warning
.bg-danger

二、 组件的使用

如何使用组件

1. 引入bootstrap.js文件
2. 引入bootstrap.css文件
3. 引入jquery....js文件
4. 官网代码copy进工程修改显示内容即可