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>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">一个链接</a></li>
            <li><a href="#">另一个链接 link</a></li>
            <li><a href="#">其他功能</a></li>
        </ul>
    </div>
</div>

---

下拉菜单

基本

.dropdown ——指定下拉菜单，下拉菜单都包裹在dropdown里
.dropdown-menu ——用于创建下拉菜单

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
    </ul>
</div>

通过class dropdown-header向下拉菜单添加标题

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
</ul>

向上下拉菜单

<div class="container">
  <h2>向上下拉菜单</h2>
  <p>.dropup 类用于指定一个向上的下拉菜单。</p>
  <p>.dropdown-menu 类用于创建下拉菜单。</p>
  <div class="dropup">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">教程
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
    </ul>
  </div>
</div>

.divider 类用于设置下拉菜单的分割线

<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜鸟教程</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜鸟教程</a></li>

.disabled类用于设置下拉菜单中的禁用项

下拉菜单与按钮组组合使用

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下列
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

//将btn-group换成btn-group-vertical即可得到垂直的下拉菜单

分割的下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-default">默认</button>
    <button type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">切换下拉菜单</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">功能</a></li>
        <li><a href="#">另一个功能</a></li>
        <li><a href="#">其他</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
    </ul>
</div>