Bootstrap中CSS的使用方法(2)

<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关闭图标

关于不同设备

Bootstrap中CSS的使用方法

Bootstrap中CSS的使用方法

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwydx.html