ホームページ > 記事 > ウェブフロントエンド > 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>
アクティビティステータス
ボタンがアクティブになると、ボタンが押されたように見えます (背景が暗く、境界線が暗くなり、組み込みの影が表示されます)。 Bbb9345e55eb71822850ff156dfde57c8 要素の場合は、:active によって実装されます。 3499910bf9dac5ae3c52d5ede7383485 要素の場合、.active を通じて実装されます。ただし、.active を bb9345e55eb71822850ff156dfde57c8 と組み合わせて使用し、プログラム的にアクティブにすることもできます。
ボタン要素
: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>
リンク要素
3499910bf9dac5ae3c52d5ede7383485 に .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% 薄くすることで、クリックできない効果を作成できます。
ボタン要素
無効な属性を bb9345e55eb71822850ff156dfde57c8 に追加します。
<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>
ボタンの上にマウスを置き、クリックすると効果を確認できます。
ブラウザ間の互換性
bb9345e55eb71822850ff156dfde57c8 に無効な属性を追加すると、Internet Explorer 9 以前のバージョンのブラウザでは、ボタンのテキストが不快な影で灰色で表示されます。現時点では解決策はありません。
リンク要素
3499910bf9dac5ae3c52d5ede7383485 に .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 を使用するため、プレフィックスを追加する必要はありません。
リンク機能は影響を受けません
上記のクラスは 3499910bf9dac5ae3c52d5ede7383485 の外観を変更するだけであり、機能には影響しません。このドキュメントでは、JavaScript コードによるリンクのデフォルト機能を無効にしました。
ボタンとして使用できる HTML タグ
3499910bf9dac5ae3c52d5ede7383485、bb9345e55eb71822850ff156dfde57c8、または d5fd7aea971a85678ba271703566ebfd 要素にボタン クラスを追加できます。
<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">
クロスブラウザーのパフォーマンス
ベスト プラクティスとして、ブラウザ間で一貫したスタイルを確保するために、可能な限り bb9345e55eb71822850ff156dfde57c8 要素を使用することを強くお勧めします。
他の理由により、この Firefox のバグにより、d5fd7aea971a85678ba271703566ebfd タグに基づいてボタンの行の高さを設定できなくなり、その結果、Firefox の他のボタンと高さが不一致になります。
このセクションの主な内容は、これらのスタイルを柔軟に実行して制御できることです。