學(xué)習(xí)使用bootstrap基本控件（table、form、button）

更新時(shí)間：2016年04月12日 15:38:36 投稿：lijiao

這篇文章主要教會(huì)大家學(xué)習(xí)使用bootstrap基本控件，如table、form、button控件，感興趣的小伙伴們可以參考一下

bootstrap為我們定義了簡潔易用的樣式，我們只需要很少的樣式指定，就可以完成簡約優(yōu)雅的頁面展示。
本篇主要介紹以下幾個(gè)基本控件：
1. table
2. form
3. button

1. 表格（table）依舊使用<table><thead><tbody><tr><th><td>來表現(xiàn)表格。有如下的類來控制table的屬性， table樣式默認(rèn)會(huì)占滿父容器

 <div class="container">
 <div class="row">
  <div class="col-md-8 col-md-offset-2">
  <table class="table table-bordered table-striped table-hover">
  <tr>
  <th>標(biāo)題一</th>
  <th>標(biāo)題二</th>
  <th>標(biāo)題三</th>
  </tr>
  <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  </tr>
  <tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  </tr>
 </table>
  </div>
 </div>
 </div>

將任何.table包裹在.table-responsive中即可創(chuàng)建響應(yīng)式表格，其會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)。當(dāng)屏幕大768px寬度時(shí)，水平滾動(dòng)條消失。

2. 表單form, 有如個(gè)幾種樣式定義

lable與控件要用form-group類型的div包起來，默認(rèn)表單如下

 <div class="container">
 <form>
  <div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1"
   placeholder="Enter email">
  </div>
  <div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control"
   id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="checkbox">
  <label> <input type="checkbox"> Check me out
  </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
 </form>
 </div>

內(nèi)聯(lián)表單，為label指定sr-only類別，可隱藏掉標(biāo)簽，但必須不可省略lable.

 <div class="container">
 <form class="form-inline">
  <div class="form-group">
  <label for="exampleInputEmail1" class="sr-only">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1"
   placeholder="Enter email">
  </div>
  <div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control"
   id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="checkbox">
  <label> <input type="checkbox"> Check me out
  </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
 </form>
 </div>

水平類型的表單，要為lable與標(biāo)簽組指定長度，采用柵格系統(tǒng)的布局方式。 label右對齊，標(biāo)簽組左對齊。

 <div class="container">
 <form class="form-horizontal">
  <div class="form-group">
   <label for="exampleInputEmail1" class="col-md-2 control-label">Email
   address</label>
  <div class="col-md-8">
   <input type="email" class="form-control" id="exampleInputEmail1"
   placeholder="Enter email">
  </div>
  </div>
  <div class="form-group" >
   <label for="exampleInputPassword1" class="col-md-2 control-label">Password</label>
  <div class="col-md-8">
   <input type="password" class="form-control"
   id="exampleInputPassword1" placeholder="Password">
  </div>
  </div>
  <div class="checkbox col-md-offset-2">
  <label> <input type="checkbox"> Check me out
  </label>
  </div>
  <button type="submit" class="btn btn-default col-md-offset-2">Submit</button>
 </form>
 </div>

form表單驗(yàn)證，bootstrap3支持表單的自定義驗(yàn)證。加入req uired表示表單必填，node.setCustomValidity可以設(shè)置表單的自定義驗(yàn)證

<div class="container">
 <form class="form-horizontal">
  <div class="form-group">
  <label for="exampleInputEmail1" class="col-md-2 control-label">Email
   address</label>
  <div class="col-md-8">
   <input type="email" class="form-control" id="exampleInputEmail1"
   placeholder="Enter email" required>
  </div>
  </div>
  <div class="form-group">
  <label for="password1" class="col-md-2 control-label">Password</label>
  <div class="col-md-8">
   <input type="password" class="form-control"
   id="password1" placeholder="Password" required onchange="checkPassword()">
  </div>
  </div>
<div class="form-group">
  <label for="password2" class="col-md-2 control-label" onchange="checkPassword()"> Password2</label>
  <div class="col-md-8">
   <input type="password" class="form-control"
   id="password2" placeholder="Password2" required>
  </div>
  </div>
  <div class="checkbox col-md-offset-2">
  <label> <input type="checkbox"> Check me out
  </label>
  </div>
  <button type="submit" class="btn btn-default col-md-offset-2">Submit</button>
 </form>
 </div>
 
 <script>
 function checkPassword() {
  var pwd1 = $("#password1").val();
  var pwd2 = $("#password2").val();
  if (pwd1 != pwd2) {
  document.getElementById("password1").setCustomValidity("兩次輸入的密碼不一致");
  } else {
  document.getElementById("password1").setCustomValidity("");
  }
  
 }
 </script>

3. button的樣式

使用.btn-lg、.btn-sm、.btn-xs可以獲得不同尺寸的按鈕，給按鈕添加.btn-block可以使其充滿父節(jié)點(diǎn)100%的寬度，而且按鈕也變?yōu)榱藟K級（block）元素， <a>、<button>或<input>元素添加按鈕class。

 <div class="container">
 <button type="button" class="btn btn-default btn-block">Default</button>
 <button type="button" class="btn btn-primary btn-block">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">鏈接</button>
 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">
 </div>

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: