data-toggle与data-target作用

Bootstrap为a之类元素绑定上事件 终止了链接默认行为

data-toggle 指以什么事件触发

常用的如modal,popover,tooltips等

data-target指事件的目标

尝试一下

<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>

尝试一下 »

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>

尝试一下 »

如果同时使用 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>

尝试一下 »

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