标签：
使用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栅格系统的工作原理：
.container中，以便为其赋予合适的排列（aligment）和内补（padding）。.row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。.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 | 描述 |
|---|---|
.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>
可以为<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中添加这些样式名，便可以引用这些样式；
标签：
原文地址：http://www.cnblogs.com/wanb/p/4593149.html
