bootstrap為我們定義了簡潔易用的樣式，我們只需要很少的樣式指定，就可以完成簡約優雅的頁面展示。
本篇主要介紹以下幾個基本控件：
1. table
2. form
3. button
1. 表格（table）依舊使用<table><thead><tbody><tr><th><td>來表現表格。有如下的類來控制table的屬性， table樣式默認會佔滿父容器
<div> <div> <div> <table> <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> <form> <div> <label for="exampleInputEmail1">Email address</label> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button> </form> </div>
內聯表單，為label指定sr-only類別，可隱藏掉標籤，但必須不可省略lable.
<div> <form> <div> <label for="exampleInputEmail1">Email address</label> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button> </form> </div>
水平類型的表單，要為lable與標籤組指定長度， 採用柵格系統的佈局方式。 label右對齊，標籤組左對齊。
<div> <form> <div> <label for="exampleInputEmail1">Email address</label> <div> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> </div> <div > <label for="exampleInputPassword1">Password</label> <div> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button> </form> </div>
form表單驗證， bootstrap3支持表單的自定義驗證。 加入req uired表示表單必填，node.setCustomValidity可以設置表單的自定義驗證
<div> <form> <div> <label for="exampleInputEmail1">Email address</label> <div> <input type="email" id="exampleInputEmail1" placeholder="Enter email" required> </div> </div> <div> <label for="password1">Password</label> <div> <input type="password" id="password1" placeholder="Password" required onchange="checkPassword()"> </div> </div><div> <label for="password2" onchange="checkPassword()"> Password2</label> <div> <input type="password" id="password2" placeholder="Password2" required> </div> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">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）元素， <a>、<button>或<input>元素添加按鈕class。
<div> <button type="button">Default</button> <button type="button">Primary</button> <button type="button">Success</button> <button type="button">Info</button> <button type="button">Warning</button> <button type="button">Danger</button> <button type="button">鏈接</button> <a href="#" role="button">Link</a> <button type="submit">Button</button> <input type="button" value="Input"> <input type="submit" value="Submit"> </div>
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程Bootstrap實戰教程
以上就是本文的全部內容，希望對大家的學習有所幫助。