ブートストラップ-ボタングループとボタンのようなドロップダウンメニュー

ボタングループ

基本例

1.ボタングループを使用すると、複数のボタンを同じ行に積み重ねることができます。これは、ボタンを揃えるときに非常に便利です。
2.ボタングループのツールチップとポップアップボックスには特別な設定が必要です。
ツールチップまたはポップアップボックスを.btn-groupの要素に適用する場合は、コンテナを指定する必要があります。不要な副作用を回避するための「body」オプション（たとえば、ツールチップまたはポップアップボックスがトリガーされると、ページ要素が広くなったり、角が丸くなったりします）。

<div class="btn-group">
    <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">結合されたセット<div class="btn-toolbar">は、より複雑なコンポーネントにすることができます。

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
    <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>

サイズ

.btn-group- *クラスを.btn-groupに追加するだけで、ボタングループの各ボタンにサイズクラスを割り当てる必要がなくなります。これは、複数のボタングループが含まれている場合にも当てはまります。

<div class="btn-group btn-group-lg">
    <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 btn-group-sm">......</div>
<div class="btn-group btn-group-xs">......</div>

ネスト

ただし、ドロップダウンメニューボタンのシリーズをミックスしたい.btn-group別のものを置く.btn-groupには

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

縦置き

ボタンのグループを水平ではなく垂直に積み重ねます。列ボタンのドロップダウンメニューは、この方法をサポートしていません。

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group-vertical">
    <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>

正当化されたボタングループ

1.ボタンのグループを同じサイズに伸ばして、親要素の幅を埋めます。同じことがボタングループのボタンタイプのドロップダウンメニューにも当てはまります。
2.<a>要素は、あなただけ.btn-group.btnグループ詰めに.btn一連の要素をラップする必要があります。
3の<button>正当化ボタングループで使用される要素、各ボタンがAにラップする必要がありますボタングループ内

   <div class="btn-group btn-group-justified" role="group" >
            <a class="btn btn-info">a标签</a>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">按钮标签</button>
            </div>
            <a class="btn btn-info">a标签</a>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">按钮标签</button>
            </div>
        </div>

ボタングループのドロップダウンメニュー

前回の記事ではドロップダウンメニューを紹介しましたが、ドロップダウンメニューとWebページのボタンの組み合わせが広く使われています。

分割ボタンのドロップダウンメニュー

分割ボタンは、2つのbtnタイプの要素をに配置する必要があります.btn-group

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

サイズ

サイズのサイズは、ボタンのサイズで調整できます。btn-xs btn-sm btn-lg