Bootstrap 教程 在线

556Bootstrap按钮组

<div class="btn-group">
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-default">按钮 1</button>
        <button type="button" class="btn btn-default">按钮 2</button>
        <button type="button" class="btn btn-default">按钮 3</button>
    </div>
</div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 4</button>
        <button type="button" class="btn btn-default">按钮 5</button>
        <button type="button" class="btn btn-default">按钮 6</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 7</button>
        <button type="button" class="btn btn-default">按钮 8</button>
        <button type="button" class="btn btn-default">按钮 9</button>
    </div>
</div>
</div>

尝试一下 »

555Bootstrap按钮组

btn-group 的内容会先显示, btn-group-vertical 的内容再显示。

这个主要是由外层的导致的 <div class="btn-group" role="toolbar">........</div> 导致的,

如果要按钮组一垂直显示在前面只需把 <div class="btn-group" role="toolbar">......</div> 给删掉即可:

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
</div>

尝试一下 »

554Bootstrap按钮组

如果同时使用 btn-group 和 btn-group-vertical ,你会发现,不管你在 btn-group 样式的按钮前面设置了多少个 btn-group-vertical 样式的按钮, btn-group 的优先级总会高于 btn-group-vertical ,换句话说,就是 btn-group 的内容会先显示, btn-group-vertical 的内容再显示。

<div class="btn-group" role="toolbar">    
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-default">按钮 1</button>
        <button type="button" class="btn btn-default">按钮 2</button>
        <button type="button" class="btn btn-default">按钮 3</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 4</button>
        <button type="button" class="btn btn-default">按钮 5</button>
        <button type="button" class="btn btn-default">按钮 6</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 7</button>
        <button type="button" class="btn btn-default">按钮 8</button>
        <button type="button" class="btn btn-default">按钮 9</button>
    </div>
</div>

尝试一下 »

553Bootstrap排版

  • .text-muted:提示,使用浅灰色(#999)
  • .text-primary:主要,使用蓝色(#428bca)
  • .text-success:成功,使用浅绿色(#3c763d)
  • .text-info:通知信息,使用浅蓝色(#31708f)
  • .text-warning:警告,使用黄色(#8a6d3b)
  • .text-danger:危险,使用褐色(#a94442)

82Bootstrap 按钮组

妈妈语重心长的对女儿说,“从小你就不聪明,累死累活的才考上个大学,毕业后还找不到工作,现在司机要男的、编辑要男的、会计要男的、连秘书也指定要男的,妈实在为你操碎了心啊。”女儿,“555555……。”妈妈一抹脸,坚定的说,“所以趁现在老婆还能是女人,赶紧上岗,要不然过两年……