1. 程式人生 > >Bootstrap(4)之表格和表單

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" >