學習使用bootstarp基本控制項（table、form、button）_javascript技巧

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

1. 表格（table）依舊使用

來表示表格。有如下的類別來控制table的屬性， table樣式預設會佔滿父容器 <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>标题一</th> <th>标题二</th> <th>标题三</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中即可建立響應式表格，其會在小螢幕裝置上（小於768px）水平捲動。當螢幕大768px寬度時，水平捲軸消失。 2. 表單form, 有如幾種樣式定義 lable與控制項要用form-group類型的div包起來，預設表單如下 <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> 內聯表單，為label指定sr-only類別，可隱藏掉標籤，但必須 不可省略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與標籤組指定長度， 採用柵格系統的佈局方式。 label右對齊，標籤組左對齊。   <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表單驗證，bootstrap3支援表單的自訂驗證。 加入req    uired表示表單必填，node.setCustomValidity可以設定表單的自訂驗證 <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可以使其充滿父節點100%的寬度，而且按鈕也變為了塊級（block）元素， 、或元素新增按鈕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> 以上就是本文的全部內容，希望對大家的學習有所幫助。