表格
受支持的表格标签
受支持的表格标签列表以及使用方法。
| 标签 | 描述 |
|---|---|
<table> |
包裹以表格形式展示数据的元素 |
<thead> |
包含表头(<tr>) 的容器 |
<tbody> |
包含表格内容(<tr>)的容器 |
<tr> |
单元格 (<td> 或 <th>) 容器 |
<td> |
默认的单元格 |
<th> |
每列(或行，依赖于放置的位置)所对应的的label |
<caption> |
用于对表的描述或总结，对屏幕阅读器特别有用 |
为 <table> 标签增加基本样式--很少的内补(padding)并只增加水平分隔线--只要为其增加 .table 类即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../css/bootstrap.css" rel="stylesheet"/>
<script src="../jquery/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
</head>
<body>
<h1>表格</h1>
<div>
<table class="table table-striped table-hover table-bordered table-condensed">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="error">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="warning">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
.table-striped 斑马纹
.table-bordered 为表格增加边框(border)和圆角(rounded corner)。
.table-hover 为 <tbody> 中的每一行赋予鼠标悬停样式。
.table-condensed 每个单元格的内补(padding)减半可使表格更紧凑。
选择情景(contextual)类为表格添加颜色。
| Class | Description |
|---|---|
.success |
表示成功或积极的行为。 |
.error |
表示一个危险或存有潜在危险的行为。 |
.warning |
表示警告，可能需要注意。 |
.info |
作为一个默认样式的一个替代样式。 |
表单
默认样式
无需对<form>添加任何类或改变标签结构，每个单独的表单控件都已经被赋予了样式。默认是堆叠、label左侧对齐并在控件之上。
<div>
<form>
<label>姓名</label>
<input type="text" required="required">
<label>
记住我
<input type="checkbox" class="checkbox">
</label>
<input type="submit" class="btn"/>
</form>
</div>
可选布局
搜索表单
为表单增加.form-search类，并为<input>增加.search-query类，可将输入框变成圆角状。
<div>
<h1></h1>
<form class="form-search">
<input type="text" class="search-query"/>
<button class="btn">search</button>
</form>
</div>
行内表单
为表单增加.form-inline类， 结果是一个压缩型排列的表单，其中label左侧对齐、控件为inline-block类型。
<form class="form-inline">
<input type="text" placeholder="name">
<input type="text" placeholder="pwd">
<label class="checkbox">remenber
<input type="checkbox"/>
</label>
<button class="btn">点击</button>
</form>
扫描二维码关注公众号，回复：
4058955 查看本文章
水平表单
右侧对齐并且左侧浮动的label和控件排列在同一行。这需要对默认的表单格式做修改：R
- 为表单添加
.form-horizontal类 - 将label和控件包裹在
.control-group中 - 为label添加
.control-label类 - 将任何相关的控件包裹在
.controls中，以确保最佳的对齐
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">name:</label>
<div class="controls">
<input type="text"/>
</div>
</div>
<div class="control-group">
<label class="control-label">email:</label>
<div class="controls">
<input type="text"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox" >
remember
<input class="controls" type="checkbox"/>
</label>
</div>
</div>
</form>