Bootstarp基本樣式
1 表單
- form-group -> 該表單框距離下面表單框多了一些距離
- form-control -> 將所在表單框拉長
參考連結 :
全域性 CSS 樣式 · Bootstrap v3 中文文件 | Bootstrap 中文網 (bootcss.com)
<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>
2.按鈕
- btn btn-warning 警告
- btn btn-success 成功
- btn btn-primary 首選項
- btn btn-default 預設樣式
- btn btn-default btn-lg 大按鈕
- btn btn-primary btn-sm 小按鈕
參考連結 :
全域性 CSS 樣式 · Bootstrap v3 中文文件 | Bootstrap 中文網 (bootcss.com)
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-offset-4">
<form>
<div class="form-group">
<label>使用者名稱</label>
<input type="text" class="form-control" placeholder="使用者名稱">
</div>
<div class="form-group">
<label>密碼</label>
<input type="password" class="form-control" placeholder="密碼">
</div>
<div class="form-group">
<label>郵箱</label>
<input type="text" class="form-control" placeholder="郵箱">
</div>
<button type="submit" class="btn btn-primary btn-sm">Submit</button>
</form>
</div>
</div>
</div>
3.表格
- table-bordered 每一行對滑鼠懸停狀態作出響應
- table-hover 為表格和其中的每個單元格增加邊框
- table-stripe 增加斑馬條紋樣式
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-offset-2">
<table border="1" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
<th>部門</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>高濤</td>
<td>19</td>
<td>技術部</td>
</tr>
<tr>
<td>2</td>
<td>高傑</td>
<td>20</td>
<td>銷售部</td>
</tr>
<tr>
<td>3</td>
<td>張欣怡</td>
<td>21</td>
<td>託管部</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
4 .路徑導航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
呈現效果