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 ボタンの動作を維持しながら、ボタンをリンクのように見せることで、ボタンを非強調します。

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

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

ボタンのサイズ

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

Sr.No.	Class & Description
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>

ボタンの状態

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

アクティブ状態

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

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.

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

<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％フェードし、グラデーションが失われます。

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

Element	Class
Button element	Add the* disabled *attribute to <button> buttons.
Anchor element	Add the* disabled* class to <a> buttons. 注-このクラスは<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">