ブートストラップ-ボタン

この章では、例を挙げてBootstrapボタンの使用期間について説明します。のクラスが与えられているものは何でも.btn角が丸い灰色のボタンのデフォルトの外観を継承します。ただし、Bootstrapには、ボタンのスタイルを設定するためのいくつかのオプションがあり、次の表に要約されています。

シニア番号	クラスと説明
1	btn デフォルト/標準ボタン。
2	btn-primary 視覚的な重みを追加し、一連のボタンの主要なアクションを識別します。
3	btn-success 成功または前向きなアクションを示します。
4	btn-info 情報アラートメッセージ用のコンテキストボタン。
5	btn-warning このアクションには注意が必要であることを示します。
6	btn-danger 危険または潜在的に否定的な行動を示します。
7	btn-link ボタンの動作を維持しながら、ボタンをリンクのように見せることで、ボタンの強調を解除します。

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

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

ボタンのサイズ

次の表は、さまざまなサイズのボタンを取得するために使用されるクラスをまとめたものです。

シニア番号	クラスと説明
1	.btn-lg これにより、ボタンのサイズが大きくなります。
2	.btn-sm これにより、ボタンのサイズが小さくなります。
3	.btn-xs これにより、ボタンのサイズが非常に小さくなります。
4	.btn-block これにより、ブロックレベルのボタン（親の幅全体に広がるボタン）が作成されます。

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

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

ボタンの状態

Bootstrapは、ボタンの状態をアクティブ、無効などに変更できるクラスを提供します。それぞれについて、次のセクションで説明します。

アクティブ状態

アクティブな場合、ボタンは押された状態で表示されます（背景が暗く、境界線が暗く、影がはめ込まれています）。次の表は、ボタン要素とアンカー要素をアクティブにするために使用されるクラスをまとめたものです。

素子	クラス
ボタン要素	使用する .active それがアクティブ化されていることを示すクラス。
アンカー要素	使用する .active <a>ボタンにクラス分けして、アクティブ化されていることを示します。

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

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

無効状態

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

次の表は、ボタン要素とアンカー要素を無効にするために使用されるクラスをまとめたものです。

素子	クラス
ボタン要素	追加します disabled <button>ボタンの属性。
アンカー要素	追加します disabled <a>ボタンへのクラス。 Note−このクラスは、<a>の外観のみを変更し、機能は変更しません。ここでリンクを無効にするには、カスタムJavaScriptを使用する必要があります。

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

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

ボタンタグ

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

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

<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">