Bootstrap が毎日覚えなければならないボタン (1)_JavaScript スキル

この記事では主にボタンのスタイルについて説明します。
1.オプション
2. サイズ
3.活動状況
4. 無効状態
5. ボタンとして使用できるHTMLタグ

オプション

上記のクラスを使用して、スタイル付きのボタンをすばやく作成します。

 <button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">链接</button>

サイズ
ボタンのサイズを変える必要がありますか?異なるサイズのボタンを取得するには、.btn-lg、.btn-sm、.btn-xs を使用します。

<p>
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
 <button type="button" class="btn btn-primary">Default button</button>
 <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Small 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 button</button>
 <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

ボタンに .btn-block を追加すると、親ノードの幅を 100% 埋めることができ、ボタンもブロック要素になります。

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

アクティビティステータス
ボタンがアクティブになると、ボタンが押されたように見えます (背景が暗く、境界線が暗くなり、組み込みの影が表示されます)。 B 要素の場合は、:active によって実装されます。 要素の場合、.active を通じて実装されます。ただし、.active を と組み合わせて使用​​し、プログラム的にアクティブにすることもできます。
ボタン要素
:active は擬似的な状態なので追加する必要はありませんが、同じ見た目を見せたい場合には .active を追加するとよいでしょう。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

リンク要素
に .active クラスを追加できます。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

上のボタンで比較できます。

無効ステータス
ボタンの背景色を 50% 薄くすることで、クリックできない効果を作成できます。
ボタン要素
無効な属性を

に追加します。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

ボタンの上にマウスを置き、クリックすると効果を確認できます。
ブラウザ間の互換性

に無効な属性を追加すると、Internet Explorer 9 以前のバージョンのブラウザでは、ボタンのテキストが不快な影で灰色で表示されます。現時点では解決策はありません。
リンク要素
に .disabled クラスを追加します。

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

上のボタンとの比較です。
.active クラスと同様に、ツール クラスとして .disabled を使用するため、プレフィックスを追加する必要はありません。
リンク機能は影響を受けません

上記のクラスは の外観を変更するだけであり、機能には影響しません。このドキュメントでは、JavaScript コードによるリンクのデフォルト機能を無効にしました。

ボタンとして使用できる HTML タグ
、

、または 要素にボタン クラスを追加できます。

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

クロスブラウザーのパフォーマンス

ベスト プラクティスとして、ブラウザ間で一貫したスタイルを確保するために、可能な限り

要素を使用することを強くお勧めします。

他の理由により、この Firefox のバグにより、 タグに基づいてボタンの行の高さを設定できなくなり、その結果、Firefox の他のボタンと高さが不一致になります。
このセクションの主な内容は、これらのスタイルを柔軟に実行して制御できることです。