Bootstrap(4)之表格和表單
阿新 • • 發佈:2019-01-04
首先來說一下表格,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" >