Bootstrap(4)之表格和表单

首先来说一下表格,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" >

没有更多推荐了,返回首页