表格
受支持的表格标签
受支持的表格标签列表以及使用方法。
标签 | 描述 |
---|---|
<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>
水平表单
右侧对齐并且左侧浮动的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>