一、按钮样式
1.类
btn | 为按钮添加基本样式 |
.btn-default | 默认/标准按钮 |
.btn-primary | 原始按钮样式(未被操作) |
.btn-success | 表示成功的动作 |
.btn-info | 该样式可用于要弹出信息的按钮 |
.btn-warning | 表示需要谨慎操作的按钮 |
.btn-danger | 表示一个危险动作的按钮操作 |
.btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
.btn-lg | 制作一个大按钮 |
.btn-sm | 制作一个小按钮 |
.btn-xs | 制作一个超小按钮 |
.btn-block | 块级按钮(拉伸至父元素100%的宽度) |
.active | 按钮被点击 |
.disabled | 禁用按钮 |
2.实例
<button type="button" class="btn btn-default">(默认样式)Default</button>
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<button type="button" class="btn btn-info">(一般信息)Info</button>
<button type="button" class="btn btn-warning">(警告)Warning</button>
<button type="button" class="btn btn-danger">(危险)Danger</button>
<button type="button" class="btn btn-link">(链接)Link</button>
结果:
二、表格样式
1.
标签 | 描述 |
---|---|
<table> | 为表格添加基础样式。 |
<thead> | 表格标题行的容器元素(<tr>),用来标识表格列。 |
<tbody> | 表格主体中的表格行的容器元素(<tr>)。 |
<tr> | 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。 |
<td> | 默认的表格单元格。 |
<th> | 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。 |
<caption> | 关于表格存储内容的描述或总结。 |
2.
类 | 描述 |
---|---|
.table | 为任意 <table> 添加基本样式 (只有横向分隔线) |
.table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) |
.table-bordered | 为所有表格的单元格添加边框 |
.table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 |
.table-condensed | 让表格更加紧凑 |
3.<tr>, <th> 和 <td> 类
.active | 将悬停的颜色应用在行或者单元格上 |
.success | 表示成功的操作 |
.info | 表示信息变化的操作 |
.warning | 表示一个警告的操作 |
.danger | 表示一个危险的操作 |
4.响应式表格
<!-- 响应式表格 -->
<div class="table-responsive">
<table class="table table-hover table-bordered table-striped">
<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>
</div>
结果:
三、表单样式
1.分类
- 垂直表单(默认):form-vertical
- 内联表单:form-inline
- 水平表单:form-horizontal
2.水平表单
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">账号</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入账号">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default btn-success">登录</button>
</div>
</div>
</form>
结果: