Bootstrap——按钮，按钮组，图片，文字，背景，下拉菜单

按钮

.btn 为按钮添加基本样式

.btn-default 默认/标准按钮
.btn-primary 原始按钮样式（未被操作）
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作 .btn-link 让按钮看起来像个链接 (仍然保留按钮行为)

.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮

.btn-block 块级按钮(拉伸至父元素100%的宽度)

.active 按钮被点击
.disabled 禁用按钮

按钮组

.btn-group
该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。

<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>

.btn-toolbar
该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

.btn-group-lg, .btn-group-sm, .btn-group-xs

这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

.btn-group-vertical

该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

<div class="btn-group-vertical">

图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

文本（颜色，可用在p或者a标签等）

.text-muted（灰色）
.text-primary
.text-success
.text-info
.text-warning
.text-danger

背景

以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger

其他

.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为 display:block 并居中显示
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.text-hide 将页面元素所包含的文本内容替换为背景图（隐藏文字）
.caret 显示下拉式功能，<span class="caret"></span>

下拉功能键

<div class="container">
    <h2>实例</h2>
    <p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p>
    <p> .caret 类在按钮中使用：</p>
    <<