禁用 BootStrap Modal 点击空白时自动关闭
$('#myModal').modal({backdrop: 'static', keyboard: false});
- backdrop 为 static 时，点击模态对话框的外部区域不会将其关闭。
- keyboard 为 false 时，按下 Esc 键不会关闭 Modal。
使用Bootstrap做页面布局
- Bootstrap使用响应式网格系统，可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap的大部分类都可以应用于div 元素。
- Bootstrap的12列网格布局如何工作的图：
bootstrap网格布局
在这里有两个相应的class，来设置相应的布局
- col-md-* 这个class,这里的md 表示中等,* 是一个数字,指定了元素应该占多少列宽,从图中我们可以看出,设置的是一个中等尺寸宽度的诸如笔记本电脑屏幕上的布局。
- col-xs-* 这个class属性对按钮进行重新布局,xs 跟md 不同,xs 是指一个屏幕宽度较小的设备,比如手机屏幕之类的。
为Bootstrap定义自定义CSS
使用Bootstrap span标签来创建行内元素
- 在bootstrap中我们可以使用.btn-block来创建填满整行的按钮，当然我们也可以用<span>标签来达到同样的效果。
- 通过<span>标签，我们可以将多个标签放在一起，甚至可以对同一个标签设置多个不同的样式，这时，我们只需要在每个<span>标签中添加相应的class,就可以了。
按钮添加Font Awesome图标
-
Font Awesome是一个方便的图标库。 这些图标都是矢量图形，以.svg文件格式存储。 这些图标可以像字体一样被处理,你可以使用像素设置字体大小一样指定这些图标的大小，并且这些图标可以继承父类HTML标签的字体大小。
-
您可以添加Font Awesome到任何应用程序，只需将下面的链接添加到你的HTML顶部就可以了：
-
<link rel =“stylesheet”href =“// maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>
-
i标签最初用于制作其他元素斜体，但现在通常用于图标。 您可以将Font Awesome类添加到i元素以将其转换为图标，例如：
<i class="fa fa-info-circle"></i>
示例代码：
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"> </i>Delete</button>
</div>
</div>
bootstrap中一些按钮的样式
相关按钮样式
bootstrap表格
| 标签 | 描述 |
|---|---|
| <table> | 为表格添加基础样式 |
| <thead> | 表格标题行的容器元素（<tr>），用来标识表格列 |
| <tbody> | 表格主体中的表格行的容器元素（<tr>） |
| <tr> | 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>） |
| <td> | 默认的表格单元格 |
| <th> | 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>） |
| <tr> | 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用 |
- 可用于表格中的样式
| 类 | 描述 |
|---|---|
| .table | 为任意 <table> 添加基本样式 (只有横向分隔线) |
| .table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
- 实例（条纹表格）
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 条纹表格</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script></head><body><table class="table table-striped">
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody></table></body></html>
- <tr>, <th> 和 <td> 类
| 类 | 描述 |
|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
- 实例
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 上下文类</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script></head><body><table class="table">
<caption>上下文表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td>
</tr>
<tr class="success">
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td>
</tr>
<tr class="warning">
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td>
</tr>
<tr class="danger">
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td>
</tr>
</tbody></table></body></html>
网友评论