Bootstrap中CSS的使用方法

<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>

• list-unstyled用于未定义样式列表ul，list-inline用于水平列表ul
• pre-scrollable使pre可滚动
• <code>内联显示代码，<pre>显示多行代码
  

关于表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

<div class="table-responsive">
 <table class="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" class="form-control" placeholder="文本输入"/>
<textarea class="form-control" rows="3"></textarea>
<label for="name">可多选的选择列表</label>
 <select multiple class="form-control">
 <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 class="form-control" type="text" placeholder="">
 <span class="help-block">一个较长的帮助文本块，超过一行，
 需要扩展到下一行。本实例中的帮助文本总共有两行。</span>

关于按钮

<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

按钮的大小

<p>
 <button type="button" class="btn btn-primary btn-lg">
 大的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary">
 默认大小的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">
 小的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">
 特别小的原始按钮
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg btn-block">
 块级的原始按钮
 </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学习教程 Bootstrap实战教程

以上就是Bootstrap中CSS的使用方法，希望大家会喜欢。