亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2016年04月12日 15:38:36   投稿：lijiao  
這篇文章主要教會(huì)大家學(xué)習(xí)使用bootstrap基本控件，如table、form、button控件，感興趣的小伙伴們可以參考一下

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

1. 表格（table）依舊使用<table><thead><tbody><tr><th><td>來(lái)表現(xiàn)表格。有如下的類來(lái)控制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包起來(lái)，默認(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)簽組指定長(zhǎng)度， 采用柵格系統(tǒng)的布局方式。 label右對(duì)齊，標(biāo)簽組左對(duì)齊。  

 <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級(jí)（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)教程

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

相關(guān)文章

最新評(píng)論