ブートストラップボタン

この章では、ブートストラップのボタンを使用する方法を例を挙げて説明します。クラスを持つ任意の要素は、丸みを帯びた灰色のボタンのデフォルトの外観を継承します.btn。しかし、ブートストラップは、特定の次の表に示すように、ボタンのスタイルを定義するためのオプションを提供します。

次のスタイルは<A>、<ボタン>、または<input>要素を使用することができます。

カテゴリ	説明	例
.btn	基本的なスタイルを追加するためのボタン	試します
.btnデフォルト	デフォルト/標準ボタン	試します
.btnプライマリ	オリジナルボタンスタイル（動作しません）	試します
.btn成功	それは、成功したアクションを示します	試します
.btn-情報	スタイル情報は、ボタンを排出するために使用することができます	試します
.btn警告	彼は注意ボタンの必要性を表明しました	試します
.btn-危険	これは、危険なアクションボタン操作を表し	試します
.btnリンク	ボタンは、リンクのように見えるしてみましょう（まだボタンの動作を保持）	試します
.btn-LG	大きなボタンを作ります	試します
.btn-SM	小さなボタンを作ります	試します
.btn-XS	超小型のボタンを作ります	試します
.btnブロック	（親要素の幅の100％まで延伸）ブロックレベルのボタン	試します
.active	ボタンがクリックされます	試します
.disabled	ボタンを無効にします	試します

次の例では、上記のボタンクラスのすべてを示しています。

例

<！ - [標準]ボタン - > <ボタン = "ボタン"を入力クラス= "BTN BTN-デフォルト" > デフォルトボタン </ button>の <！ - 追加の視覚効果を提供することで、元のアクションのボタンのセットを識別し - > <ボタン = "ボタン"を入力クラス= "BTN BTN-プライマリ」 > オリジナルボタン </ button>の <！ - 成功または正のアクションを表します。 - > <ボタン = "ボタン"を入力クラス= "BTN BTN-成功" > サクセス・ボタン </ button>の <！ - 警告メッセージコンテキストボタン - > <ボタン = "ボタン"を入力クラス= "BTN BTN-情報" > 情報ボタン </ button>の <！ - 注意して取るべきアクションを示します。 - > <ボタン = "ボタン"を入力クラス= "BTN BTN-警告" > 警告ボタン </ button>の <！ - 危険または潜在的に負の作用を表現 - > <ボタン = "ボタン"を入力クラスは、= "BTN BTN-危険" > 危険なボタン </ button>の <！ - 強調していませんリンクのように見えますが、同時に、ボタンの動作を維持するボタンがあります - > <ボタン = "ボタン"を入力クラス= "BTN BTN-リンク" > リンクボタン </ button>の

»をお試しください

結果は以下の通りであります：

ボタンサイズ

次の表は、クラスの様々なボタンへのアクセスのサイズを示しています。

Class	描述
.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

次の例では、上記のボタンクラスのすべてを示しています。

例

<P> <ボタン = "ボタン"を入力クラス= "BTN BTN-プライマリBTNの -LG"> 大オリジナルボタン </ button>の <ボタン = "ボタン"を入力クラス= "BTN BTN-デフォルトBTN -LG"> ビッグボタン </ button>の </ P> <P> <ボタン = "ボタン"を入力クラス= "BTN BTN-プライマリ」 > 元のボタンのデフォルトサイズ </ button>の <ボタン = "ボタン"を入力クラス= "BTN BTN-デフォルト" > ボタンのデフォルトサイズ </ button>の </ P> <P> <ボタン = "ボタン"を入力クラス= "BTN BTN-プライマリBTNの -sm"> 小さなオリジナルボタン </ button>の <ボタン = "ボタン"を入力クラス= "BTN BTN-デフォルトBTN -sm"> 小さなボタン </ button>の </ P> <P> <ボタン = "ボタン"を入力クラスは「BTN-プライマリBTN BTN = -xs "> オリジナル特に小さなボタン </ button>の <ボタン = "ボタン"を入力クラス= "BTN BTN-デフォルトBTN -xs"> 特に小さなボタン </ button>の </ P> <P> <ボタン = "ボタン"を入力クラス= "BTN BTN-プライマリBTN -LG BTN-ブロック"> ブロックレベルのオリジナルボタン </ button>の <ボタン = "ボタン"を入力クラス= "BTN BTN-デフォルトBTN -LG BTN-ブロック"> ブロックレベルボタン </ button>の </ P>

»をお試しください

結果は以下の通りであります：

ボタンの状態

ブートストラップは、起動クラスと他の無効ボタンの状態を提供し、以下に詳細に説明します。

アクティブ

ボタンをアクティブにするために押されたとき、それは外観（暗い背景、暗い境界線、影）として表示されます。

次の表は、ボタンやアンカー要素を作成する要素を示していますクラスで活躍しました：

元素	Class
按钮元素	添加.activeclass 来显示它是激活的。
锚元素	添加 .activeclass 到 <a> 按钮来显示它是激活的。

次の例では、この点を示しています。

例

<P> <ボタン = "ボタン"を入力クラス= "BTN BTN-デフォルトBTN -LG"> デフォルトボタン </ button>の <ボタン = "ボタン"を入力クラス= "BTN BTN-デフォルトBTN -LGアクティブ"> 起動ボタン </ button>の </ P> <P> <ボタン = "ボタン"を入力クラス= "BTN BTN-プライマリBTNの -LG"> オリジナルボタン </ button>の <ボタン = "ボタン"を入力クラスは、= "BTN BTN-プライマリBTN -LGアクティブ"> </ button>のオリジナルのボタンをアクティブにします </ P>

»をお試しください

結果は以下の通りであります：

使用禁止

あなたはボタンを無効にすると、その色が50％、および勾配の損失にフェードインします。

次の表は、クラスならば、ボタンが無効になっている作るための要素とアンカー要素を示しています。

元素	Class
按钮元素	添加 disabled属性到 <button> 按钮。
锚元素	添加 disabledclass到 <a> 按钮。注意：该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

次の例では、この点を示しています。

例

<P> <ボタン = "ボタン"を入力クラス= "BTN BTN-デフォルトBTN -LG"> デフォルトボタン </ button>の <ボタン = "ボタン"を入力クラスは、「BTN-デフォルトBTN BTN = -lg " 無効 = "無効"> 無効にするボタン </ button>の </ P> <P> <ボタン = "ボタン"を入力クラス= "BTN BTN-プライマリBTNの -LG"> オリジナルボタン </ button>の <ボタン = "ボタン"を入力クラス= "BTN BTN-プライマリBTNの -LG」 = "無効" 無効 > </ button>のオリジナルのボタンを無効にします </ P> <P> <A href = "＃" クラスは、「BTN-デフォルトBTN BTN = -lg " 役割 = "ボタン"> リンク </ A> <A href = "＃" クラスは、= "BTN BTN-デフォルトBTN -LG無効」役割 = "ボタン"> を無効にリンク </ A> </ P> <P> <A href = "＃" クラス= "BTN BTN-プライマリBTNの -LG」役割 = "ボタン"> 元のリンク </ A> <A href = "＃" クラスは、= "BTN BTN-プライマリBTN -LG無効」役割は = "ボタン"> </ A> 元のリンクを無効にします </ P>

»をお試しください

結果は以下の通りであります：