Bootstrap-buttons
ブートストラップ-ボタン
この章では、Bootstrapボタンの使用期間と例を示します。 .btn のクラスが与えられたものはすべて、角が丸い灰色のボタンのデフォルトの外観を継承します。 ただし、Bootstrapはスタイルボタンにいくつかのオプションを提供します。これらのオプションは次の表にまとめられています-
Sr.No. | Class & Description |
---|---|
1 |
btn デフォルト/標準ボタン。 |
2 |
btn-primary 追加の視覚的重みを提供し、一連のボタンの主要なアクションを識別します。 |
3 |
btn-success 成功または積極的な行動を示します。 |
4 |
btn-info 情報アラートメッセージのコンテキストボタン。 |
5 |
btn-warning このアクションには注意が必要であることを示します。 |
6 |
btn-danger 危険または潜在的に否定的なアクションを示します。 |
7 |
btn-link ボタンの動作を維持しながら、ボタンをリンクのように見せることで、ボタンを非強調します。 |
次の例は、上記のすべてのボタンクラスを示しています-
ボタンのサイズ
次の表は、さまざまなサイズのボタンを取得するために使用されるクラスをまとめたものです-
Sr.No. | Class & Description |
---|---|
1 |
.btn-lg これにより、ボタンのサイズが大きくなります。 |
2 |
.btn-sm これにより、ボタンのサイズが小さくなります。 |
3 |
.btn-xs これにより、ボタンのサイズが非常に小さくなります。 |
4 |
.btn-block これにより、ブロックレベルのボタンが作成されます。これは、親の幅全体に広がります。 |
次の例はこれを示しています-
ボタンの状態
ブートストラップは、ボタンの状態をアクティブ、無効などに変更できるクラスを提供します。 それぞれについて、次のセクションで説明します。
アクティブ状態
アクティブな場合、ボタンは押された状態で表示されます(背景が暗くなり、境界線が暗くなり、影がはまります)。 次の表は、ボタン要素とアンカー要素をアクティブにするために使用されるクラスをまとめたものです-
Element | Class |
---|---|
Button element | Use *.active *class to show that it is activated. |
Anchor element | Use* .active *class to <a> buttons to show that it is activated. |
次の例はこれを示しています-
無効状態
ボタンを無効にすると、色が50%フェードし、グラデーションが失われます。
次の表は、ボタン要素とアンカー要素を無効にするために使用されるクラスをまとめたものです-
Element | Class |
---|---|
Button element | Add the* disabled *attribute to <button> buttons. |
Anchor element |
Add the* disabled* class to <a> buttons. 注-このクラスは<a>の外観のみを変更し、機能は変更しません。 ここでリンクを無効にするには、カスタムJavaScriptを使用する必要があります。 |
次の例はこれを示しています-
ボタンタグ
<a>、<button>、または<input>要素でボタンクラスを使用できます。 ただし、ブラウザ間の不整合の問題を回避するために、主に<button>要素とともに使用することをお勧めします。
次の例はこれを示しています-