Bootstrap 基本用法

使用bootstrap框架的步骤：

　　1、引用bootstrap的css框架，这样可以通过bootstrap来布局；

　　　　<link rel="stylesheet" href="../css/bootstrap.min.css">;

　　2、引用bootstrap的js框架，这样可以使用;

　　　　注意：因为bootstrap的js框架是基于jquery而写的，因此要引用bootstrap的js框架的时候必须先引入jquery，这样才能使用bootstrap的框架；

　　　　<script src="../js/jquery-1.11.2-min.js"></script>
　　　　<script src="../js/bootstrap.min.js"></script>

bootstrap的一些常用的布局：

　　栅格化布局：

　　Bootstrap栅格系统的工作原理：

• “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 使用“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
• 通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

表格：

　　基本案例

　　　　为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能　　会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。

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

　　条纹状表格

　　利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。

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

　　带边框的表格

　　利用.table-bordered为表格和其中的每个单元格增加边框。

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

　　鼠标悬停

　　利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

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

　　紧缩表格

　　利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。

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

　　状态class

　　通过这些状态class可以为行货单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

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

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

　　

　　响应式表格

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

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

表单

　　基本案例

　　单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好　　的排列。

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter 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>

　　

按钮选项

　　使用下面列出的class可以快速创建一个带有样式的按钮。

<!-- 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、.btn-sm、.btn-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>

　　链接元素

可以为<a>添加.active class。

　　<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>

可作按钮使用的HTML标签

　　可以为<a>、<button>或<input>元素添加按钮class。

　　

<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">

这些都为bootstrap的css样式，通过在class中添加这些样式名，便可以引用这些样式；