bootstrap表格的认识

不安装bootstrap的话，可以用链接，效果是一样的，使用的时候记住标签即可，记不住可以多熟悉一下，链接放在head即可

<meta name="viewport" content="width=device-width, initial-scale=1">

基本表格：

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

条纹表格：

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

边框表格

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

鼠标悬停

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

颜色表格或者状态表格

不同的版本可能颜色不同，或者不显示颜色，影响不大，自己调试

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

紧缩表格

其实也不算缩进太多，还是非常美观的

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

表单

同样记住标签即可，不要将表单组直接和输入框组混合使用，可以嵌套

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>