重修课程day54（bootstrap之css样式）

一 bootstrap的介绍

　Bootstrap是将html，css和js的代码打包好了，只管我们拿来调用。是基于jquery开发的。

　使用BootCDN提供的免费CDN加速服务，同时支持http和https协议。CDN是一种前端的优化方式。

　jquery的代码放在body标签里面的最下面。

二 全局css样式

　 全局css样式是为了确保分辨率的样式，需要在head标签中加上viewport元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1">

　在移动设备的浏览器上面，为了通过视口设置meta标签的属性为user-sccalable=no可以进制缩放的功能，只需要用户滚动屏幕就可以就可以查看原生网页的内容。注意，这个方式并不推荐所有网站使用，根据自己需求而定。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

　栅格系统：将一个网页页面分为行（row）和列（column）；写的内容应该放在列里面，并且只有列能作为行的直接元素。

　列的格式：div.col-xx-数字。

　　xx代表的时屏幕的大小：

　　　lg：大屏幕，大桌面屏幕显示的大小

　　　md：中屏幕，桌面屏幕显示的大小

　　　xs：小屏幕，也就是手机屏幕的大小

　　　sm：小屏幕，也就是平板屏幕的大小

　　数字只有1-12，指定列，也就是说在一行中最多只有12列。

　栅格的参数：

　我们偶尔会在媒体查询代码中包含max-width从而将css的影响限制更小范围屏幕大小内　　

　　@media ：媒体；screen：显示器；max-width：最大宽度。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

列是支持嵌套的。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

　流式布局容器：将最外面的布局元素.container修改为.container-fluid，就可以将固定格局宽度改为 100%的宽度。

<div class="container-fluid">
  <div class="row">
    ...
  </div>

　clearfix：清除开始的样式，另起一行。

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn‘t match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

　联合使用过.clearfix和响应式工具类

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

　列排序：push：推；pull：拉

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

　.col-xx-offset-数字：列偏移。

<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>

三 排版

　标题：在html中hn系列的标签均可使用在标题中。另外还提供了hn系列的类。为了是给内联标签（inline）属性文本给予标题的样式

//hn标签
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

//hn类
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

　lead属性值：字体变大变粗，可以让段落突出显示。

<p class="lead">hello</p>

　mark标签：高亮显示

<mark>highlight</mark>

　del标签：删除标签和s标签：无用标签

//del标签
<del>This line of text is meant to be treated as deleted text.</del>

//s标签
<s>This line of text is meant to be treated as no longer accurate.</s>

　ins标签：插入标签，表示的吧一种状态

<ins>This line of text is meant to be treated as an addition to the document.</ins>

　u标签：带下划线的标签

<u>This line of text will render as underlined</u>

　small标签：变灰变大

<small>This line of text is meant to be treated as fine print.</small>

　strong标签：变量加粗

<strong>rendered as bold text</strong>

　em标签：斜体

<em>rendered as italicized text</em>

　文本的一些属性值的方法 ：

　　文本对齐：text前缀

　　　　-left：左对齐

　　　　-center：中对齐

　　　　-right：右对齐

　　　　还有-justify和-nowrapt

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

　　文本大小写：text前缀

　　　　-lowercased：文本变小写

　　　　-uppercased：文本变大写

　　　　-capitalize：首字母大写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

　addr下的title：显示缩略语

<abbr title="attribute">attr</abbr>

　首字母缩略语：为缩略语加上.initialism类，可以然让字体变得稍微小些

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

　address：地址链接标签

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

　blockquote：引用；footer标签：标明引用的来源；blockquote-reverse属性值：右边加上一个横线

<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

　列表标签：ul；ol

　　内联列表：通过设置display：inline-block；将所有元素放在一行。

<ul class="list-inline">
  <li>...</li>
</ul>

　kbd标签：键盘输入

<kbd>cd</kbd> followed by the name of the directory.<br>

　pre标签：代码块

<pre><p>Sample text here...</p></pre>

　var标签：变量

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

　samp标签：输出

<samp>This text is meant to be treated as sample output from a computer program.</samp>

四 表格标签

　table标签：表格标签

　　table类可以为其于基本的样式，少量的内补padding和水平方向的分割线。

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

　条纹状表格：通过table-striped类可以给tbody标签之内每一行标签增加班马条纹样式

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

　　条纹状表格是依赖于：nth-child css选择器实现的。而这一功能不被Lnternet Explorer 8 支持。

　带边框的表格：添加table-bordered类为其表格和其中的单元格增加边框

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

　鼠标悬停 ：添加table-hover类剋以让鼠标悬停的那一栏做出响应是的状态。

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

　紧缩表格：添加table-condensed类可以让表格更加的紧凑。单元格的内补padding均会减半。

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

　状态类：通过如下的状态类可以为行或者单元格设置颜色。

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

　响应式表格：将任何table元素包含在table-responsive元素内，即可创建响应式表格。在小屏幕上显示水平滚动条，在大屏幕上就会消失水平滚动条。

　　垂直方向的内截断：使用了overeflow-y：hidden属性，就可以将超出表格顶部和底部的内容截断。特别是可以截断下拉菜单呵呵第三方组件。

　　Firefox和fieldset元素：Firefox浏览器时对fieldset元素设置了一些影响width属性的样式，导致响应式表格出现了问题。可以使用以下方法针对Firefor的hack代码解决，但是以下代码并没有集成在Bootstrap中：

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

　更多信息参考：this Stack Overflow answer.

实例：

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

五 表单

　　单独的表单会赋予一些全局格式。所有设置了form-control类的元素宽度默认为100%。将label标签里面的元素和前面提到的控制包裹在 form-group中可以获得更好的排列。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

　内联表单：为form标签加上form-inline类就可以内容向左对齐，并且有inline-block级别的控件。

　　width：auto：设置宽度，内容的宽度。

　　label标签：

　　　sr-only：隐藏；aria-label，aria-labelledby和title属性：辅助技术为label提供的替代方案，如果这些属性不存在，屏幕阅读器会使用placeholder属性。如果存在，就会使用占位符代替其他的标记。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

　水平排列的表单：通过表单添加form-horizontal类，并且联合使用Bootstrap预置的栅格类，可以将label标签和控件水平布局。这样会改变form-group的行为。就无法添加row类了。

<form class="form-horizontal">
  <div class="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>

　输入框：包含大部分的表单控件，文本输入域控件，还支持所有HTML类型的输入控件：text，password，datetime，datetime-local,date，month，time，week，number，email，url，search，tel和color。

　文本域：支持多行文本域，可根据需要改变rows属性 。

<textarea class="form-control" rows="3"></textarea>

　多选和单选框：多选框：checkbox，同时可以选取一个或多个；单选框：radio，同时只能选取一个。

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that—be sure to include why it‘s great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that—be sure to include why it‘s great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

　内联单选和多选框：同个使用checkbox-inline和radio-inline类可以将多选框和单选框放在一行显示。

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

　不带文本的多选框和单选框：目前只适用于非内联的单选和多选框。使用辅助技术提供的aria-label属性

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

　下拉列表：select标签

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

　多显示下拉列表：在select表情类加上multiple属性

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

　静态控件：将需要的表单中的纯文本和label元素放在同一行，只需要为p标签元素加上form-control-static类即可。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]e.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

　焦点状态：将某些表单控件默认的outline样式移除，然后对：focus状态赋予box-shadow属性。

　禁用状态：为输入框设置disabled熟悉就可以禁用了。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

　如果为fieldset标签设置disabled属性，就会将其下面的元素全部禁用状态。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can‘t check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

　只读状态：如果为输入框设置readonly就会使用户只能读取文本，本能修改或写入。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

　校验状态：使用时添加has-warking，has-error或has-success类到这些控件的父元素即可。任何包含此元素的control-label，form-control或help-block元素都会有这些状态样式。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

　添加额外的图标：为相应的元素加上has-feedback类即可。

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

　可选图标与设置sr-only类的label元素：可以使用sr-only类来隐藏表单控件label，一旦被添加，Bootstrap会自动调整图标的位置。

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

　控制尺寸：通过input-lg类似的类来为控件设置高度，通过col-lg-*类似的类来设置宽度。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

　水平排列的表单组的尺寸：通过添加form-group-lg或form-group-sm类来设置form-horizontal包裹的label元素和表单控件快速设置尺寸。

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

　调整列的尺寸：使用栅格系统中的列为其设置宽度

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

六 按钮

　则作为按钮的元素和标签：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">

　预订样式：前缀btn

　　Default：默认样式；Primary：蓝色；Success：绿色；info：浅蓝色；Warning：橙色；Danger：红色；Link：白色

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

　设置尺寸：前缀btn

　　lg：大按钮；sm：小按钮；xs：超小按钮

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

　块级按钮：btn-block类可以将按钮拉伸与100%。

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

　激活状态：将按钮点击时，颜色会有一些变化。button标签和a标签是通过：active实现的。还可以将active应用到button上（包含aria-pressed="true"属性）。并使用编程方式使其处于记过状态。

　　button元素：由于：active是伪状态，因此无需额外添加，为了让其显示同样外观时就可以添加active类。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

　　连接a标签元素：可以基于啊、标签创建的按钮添加active类。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

　禁用状态：可以使用opacity属性就可以实现无法点击。

//button标签
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

//a标签
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

　七 图片

　响应式图片：为图片添加img-responsive类就可以支持响应式布局。

　　要让图片居中，使用center-block类即可。

<img src="..." class="img-responsive" alt="Responsive image">

　图片形状：

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

八 辅助类

　情境文本颜色：

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

　背景颜色：

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

九 其他操作

　关闭按钮：

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

　三角符号：

<span class="caret"></span>

　快速浮动：

<div class="pull-left">...</div>
<div class="pull-right">...</div>

　内容居中：

<div class="center-block">...</div>

　清除浮动：通过父类添加clearfix类就会很容易的清除浮动了。

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

　显示和隐藏内容：show和hidden类就可以强制内容显示和隐藏

<div class="show">...</div>
<div class="hidden">...</div>

　屏幕阅读器和键盘导航：sr-only类可以对屏幕阅读器以外的内容隐藏。sr-only和sr-only-focusable联合使用就可以在元素有焦点时显示出来。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

　图片替换：text-hide类可以将对应的文本内容替换成一张背景图片

<h1 class="text-hide">Custom heading</h1>

十 响应式工具

　可用的类：

　打印类：

本片博客详情：http://v3.bootcss.com/getting-started/

　　　　　　　http://v3.bootcss.com/css/