<div> <table> <caption>响应式表格布局</caption> <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>产品1</td> <td>23/11/2013</td> <td>待发货</td> </tr> </tbody> </table> </div>
关于表单
在form上加上属性role="form"就会应用Bootstrap基本的表单结构,此时默认为垂直表单
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<input type="text" placeholder="文本输入"/> <textarea rows="3"></textarea> <label for="name">可多选的选择列表</label> <select multiple> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
在form加上类calss=form-inline,那么表单元素就会变成内联的
在form加上类class=form-horizontal,那么表单元素就会变成水平的
1)设置表单控件padding和margin值
2)改变“form-group”的表现形式,类似于网格系统的“row”。
3)向标签添加 class .control-label。
复选框和单选框
1)对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。
当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static。
禁用的输入框 input,如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性
对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。
.input-lg 和.input-sm可以改变输入框的高度样式
help-block Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在 <input> 后使用 .help-block。
<input type="text" placeholder=""> <span>一个较长的帮助文本块,超过一行, 需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
关于按钮
<button type="button">默认按钮</button> <!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --> <button type="button">原始按钮</button> <!-- 表示一个成功的或积极的动作 --> <button type="button">成功按钮</button> <!-- 信息警告消息的上下文按钮 --> <button type="button">信息按钮</button> <!-- 表示应谨慎采取的动作 --> <button type="button">警告按钮</button> <!-- 表示一个危险的或潜在的负面动作 --> <button type="button">危险按钮</button> <!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 --> <button type="button">链接按钮</button>
按钮的大小
<p> <button type="button"> 大的原始按钮 </button> </p> <p> <button type="button"> 默认大小的原始按钮 </button> </p> <p> <button type="button"> 小的原始按钮 </button> </p> <p> <button type="button"> 特别小的原始按钮 </button> </p> <p> <button type="button"> 块级的原始按钮 </button> </p>
class为active表示激活按钮
class为disabled表示禁用按钮
在a和input上使用按钮class也能弄成按钮的样子,但是考虑到跨浏览器的问题还是在button上比较好。
关于图片
关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式:
.img-rounded 圆角图片
.img-circle 圆形图片
.img-thumbnail 缩略图功能
关于其它样式类
.pull-left左浮动
.pull-right右浮动
center-block内容居中
.clearfix清除浮动
.caret显示下拉式
.close关闭图标
关于不同设备