Bootstrap学习笔记（二） table表格&表单

1.表格

标准格式：

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

<table class="table table-striped">
  ...
</table>

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框

<table class="table table-bordered">
  ...
</table>

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

<table class="table table-hover">
  ...
</table>

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

<table class="table table-condensed">
  ...
</table>

状态类

通过这些状态类可以为行或单元格设置颜色

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

例如：

<tr class="success">
      <td>2</td>
      <td>18</td>
      <td>男</td>
      <td>20</td>
</tr>

2.表单

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px宽度时（视口宽度再小的话就会使表单折叠）。

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列

<form action="#" class="form-horizontal">
    <div class="form-group">
        <input type="text" placeholder="请输入你的帐号" class="form-control">
    </div>
    <div class="form-group">
        <input type="password" placeholder="请输入你的密码" class="form-control">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox">记住我
        </label>
        </div>
    <div class="radio">
        <label for="man">
            <input type="radio" id="man" name="sex">man
        </label>
        <label for="woman">
            <input type="radio" id="woman" name="sex">woman
        </label>
        <label for="secret">
            <input type="radio" id="secret" name="sex" disabled>secret
        </label>
    </div>
    <div class="form-group">
        <select name="select" class="form-control">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
</form>