1.表格
table
thead tr th
tbody tr td
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>43</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>42</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>43</td>
</tr>
<tr>
<td>4</td>
<td>马六</td>
<td>43</td>
</tr>
</tbody>
</table>
图片.png
基本样式<table class="table">，都要基于此样式
图片.png
1.1 条纹状表格
<table class="table table-striped">，只对tbody有作用
图片.png
1.2 带边框的表格
<table class="table table-bordered">
图片.png
1.3 鼠标悬停 对tbody有用
class="table-hover"
<table class="table table-bordered table-hover">
图片.png
1.4 状态类
写在tr标签内
<tr class="success">
| 样式 | 说明 |
|---|---|
| active | 鼠标悬停在行或单元格上 |
| success | 表示成功或积极的动作 |
| info | 标识普通的提示信息或动作 |
| warning | 标识警告或需用户注意 |
| danger | 标识危险或潜在的带来负面影响的动作 |
1.5 隐藏行
<tr class="sr-only">
1.6 响应式表格
表格父元素设置响应式，小于768px出现边框
<body class="table-responsive">
2.按钮
2.1 a input button
class="btn"基本必带
<a href="###" class="btn btn-default">Button</a>
<input type="button" class="btn btn-default" value="Button">
<button class="btn btn-default">Button</button>
| 样式 | 说明 |
|---|---|
| btn-default | 默认样式 |
| btn-success | 成功样式 |
| btn-info | 一般信息样式 |
| btn-warning | 警告样式 |
| btn-danger | 危险样式 |
| btn-primary | 首选项样式 |
| btn-link | 链接样式 |
2.2 尺寸大小
class="btn-lg" "btn-sm" "btm-xs"
2.3 块级换行
class="btn-block" 占用一整行
2.4 激活/禁用状态
class="active"
class="disabled"
网友评论