Bootstrap(4)之表格和表单

最新推荐文章于 2023-04-12 15:30:27 发布

Fadeaway席八农

最新推荐文章于 2023-04-12 15:30:27 发布

阅读量1.2k

点赞数

首先来说一下表格，bootstrap的表格有专门的class="table"。

<table class="table  table-hover table-bordered ">  
      <caption>Table基本案例</caption>  
      <thead>
        <tr class="active">
          <th>First Name</th>
          <th>Last Name</th>
          <th>User Name</th>
        </tr>
      </thead>
      <tbody>  
        <tr class="success">  
          <td>aehyok</td>  
          <td>leo</td> 
          <td>@aehyok</td>  
        </tr>
        <tr class="danger">  
          <td>lynn</td>  
          <td>thl</td> 
          <td>@lynn</td>  
        </tr>
      </tbody>  
    </table>

然后就是一些table的样式，比如table-hover,table-border.

其实重点是表单，关于表单我自己感觉其实是有点复杂的，主要是需要记忆的东西比较多。

1.表单，你可以选择class= 水平或者别的。

2.表单里面的元素，比如说 E-MAIL输入框。第一步需要一个div class="form-group'把row元素包起来(其实主要是为了让输入框看起来比较舒服，最佳比例)，第二步<label>Email address</label>

第三步 <input type="email" class="form-control " id="" placeholder="Enter email" name="email">。所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。）

3.输入框长度或者宽度的变化。需要在div class="form-group'外再增添一个div class="row",然后输入框<input type="email" class="form-control col-sm-* input lg " id="" placeholder="Enter email" name="email" >