Bootstrap 按钮

この章では、Bootstrapボタンの使用方法を例を通して説明します。classを持つ任意の要素は.btnの要素はすべて、角丸グレーのボタンのデフォルトの外観を継承します。ただし、Bootstrap にはボタンのスタイルを定義するためのいくつかのオプションが用意されており、詳細は次の表のとおりです。

以下のスタイルは<a>、<button>、または<input>要素に使用できます：

类	描述	实例
.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	禁用按钮	尝试一下

以下の例は、上記のすべてのボタン class を示しています。

結果は以下の通りです：

按钮大小

次の表に、さまざまなサイズのボタンを取得するためのクラスを示します：

Class	描述
.btn-lg	これにより、ボタンがより大きく見えます。
.btn-sm	これにより、ボタンがより小さく見えます。
.btn-xs	これにより、ボタンが特に小さく見えます。
.btn-block	これにより、親要素の全幅にわたるブロックレベルのボタンが作成されます。

以下の例は、上記のすべてのボタン class を示しています。

結果は以下の通りです：

按钮状态

Bootstrap には、アクティブ、無効などのボタン状態のクラスが用意されており、以下で詳しく説明します。

激活状态

ボタンはアクティブになると、押し込まれた外観（濃い背景、濃い枠線、影）になります。

次の表は、ボタン要素とアンカー要素をアクティブ状態にするためのクラスを示しています：

元素	Class
按钮元素	添加.activeクラスを使用して、アクティブであることを示します。
锚元素	添加 .active<a> ボタンにクラスを指定して、アクティブであることを示します。

次の例はこれを示しています：

結果は以下の通りです：

禁用状态

ボタンを無効にすると、色が50%薄くなり、グラデーションが失われます。

次の表は、ボタン要素とアンカー要素を無効状態にするためのクラスを示しています：

元素	Class
按钮元素	添加disabled 属性<button>ボタンに。
锚元素	添加disabled class<a>ボタンに。

次の例はこれを示しています：

結果は以下の通りです：

按钮标签

<a>、<button>、または <input> 要素でボタンクラスを使用できます。ただし、クロスブラウザの不整合の問題を避けるため、<button> 要素でボタンクラスを使用することをお勧めします。

次の例はこれを示しています：

結果は以下の通りです：

---

按钮组

div 内で .btn-group を直接使用すると、ボタングループを作成できます：

.btn-group-lg|sm|xsを使用してボタングループのサイズを制御します：

垂直方向のボタンを設定する場合は、.btn-group-vertical クラスを使用して設定できます：

---

サイズに応じて自動調整されるボタングループ

.btn-group-justified クラスを使用すると、自動サイズ調整されるボタングループを設定できます。

次の例ではaタグを使用して示しています：

注意:もし〜なら<button>要素は、外側で使用する必要があります。.btn-group类来包裹:

---

ドロップダウンメニューを内蔵したボタングループ

ボタングループ内のボタンにはドロップダウンメニューを設定できます。以下の例のとおりです。

分割按钮

其他扩展