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实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助。