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中添加这些样式名，便可以引用这些样式；