Bootstrap 3.0 学習ノートボタンスタイル

この記事では主にボタンのスタイルについて説明します。

1. オプション

2. サイズ

3. 活動状況

4. 無効状態

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

6. まとめ

オプション

上記のクラスを使用して、スタイル設定されたボタンをすばやく作成します。

コードをコピー
コードは次のとおりです。

 <button type="button" class="btn btn-default">デフォルト</button>
 <button type="button" class="btn btn-primary">プライマリ</button>
 <button type="button" class="btn btn-success">成功</button>
 <button type="button" class="btn btn-info">情報</button>
 <button type="button" class="btn btn-warning">警告</button>
 <button type="button" class="btn btn-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">大きいボタン</button>
 <button type="button" class="btn btn-default btn-lg">大きいボタン</button>
 </p>
 <p>
 <button type="button" class="btn btn-primary">デフォルトボタン</button>
 <button type="button" class="btn btn-default">デフォルトボタン</button>
 </p>
 <p>
 <button type="button" class="btn btn-primary btn-sm">小さいボタン</button>
 <button type="button" class="btn btn-default btn-sm">小さいボタン</button>
 </p>
 <p>
 <button type="button" class="btn btn-primary btn-xs">極小ボタン</button>
 <button type="button" class="btn btn-default btn-xs">極小ボタン</button>
 </p>

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

コードをコピー
コードは次のとおりです。

 <button type="button" class="btn btn-primary btn-lg btn-block">ブロック レベル ボタン</button>
 <button type="button" class="btn btn-default btn-lg btn-block">ブロック レベル ボタン</button>

アクティビティステータス

ボタンがアクティブな場合、ボタンは押された状態で表示されます (背景が暗くなり、境界線が暗くなり、影が内側に表示されます)。 B<button> 要素の場合、これは :active を通じて実現されます。 <a> 要素の場合、これは .active を通じて実現されます。ただし、.active<button> を併用してプログラム的にアクティブにすることもできます。

:active は疑似状態なので追加する必要はありませんが、同じ外観を表示する必要がある場合は .active を追加できます。

コードをコピー
コードは次のとおりです。

 <button type="button" class="btn btn-primary btn-lg active">プライマリボタン</button>
 <button type="button" class="btn btn-default btn-lg active">ボタン</button>

<a> に .activeclass を追加できます。

コードをコピー
コードは次のとおりです。

 <a href="#" class="btn btn-primary btn-lg active" role="button">プライマリリンク</a>
 <a href="#" class="btn btn-default btn-lg active" role="button">リンク</a>

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

無効状態

ボタンの背景色を 50% フェードすると、クリックできないように見せることができます。

<button> に disabled 属性を追加します。

コードをコピー
コードは次のとおりです。

 <button type="button" class="btn btn-lg btn-primary" disabled="disabled">プライマリボタン</button>
 <button type="button" class="btn btn-default btn-lg" disabled="disabled">ボタン</button>

ボタンの上にマウスを置いてクリックすると、効果を確認できます。

クロスブラウザ互換性

<button> に disabled 属性を追加すると、Internet Explorer 9 以前ではボタン内のテキストが灰色で表示され、影が目立ちます。現在、これを修正する方法はありません。

<a> に .disabledclass を追加します。

コードをコピー
コードは次のとおりです。

 <a href="#" class="btn btn-primary btn-lg disabled" role="button">プライマリリンク</a>
 <a href="#" class="btn btn-default btn-lg disabled" role="button">リンク</a>

上のボタンとの比較です。

.activeclass と同様に、.disabled をユーティリティ クラスとして使用するため、プレフィックスを追加する必要はありません。

リンク機能は影響を受けません

上記のクラスは <a> の外観のみを変更し、機能には影響しません。このドキュメントでは、JavaScript コードを通じてリンクのデフォルト機能を無効にしました。

コンテキストに応じた使用法

ボタン クラスは <a> 要素と <button> 要素で使用できますが、nav コンポーネントと navbar コンポーネント内では <button> 要素のみがサポートされます。

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

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

コードをコピー
コードは次のとおりです。

 <a class="btn btn-default" href="#" role="button">リンク</a>
 <button class="btn btn-default" type="submit">ボタン</button>
 <input class="btn btn-default" type="button" value="入力">
 <input class="btn btn-default" type="submit" value="送信">

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

ベストプラクティスとして、ブラウザ間で一貫したスタイルを確保するために、可能な限り <button> 要素を使用することを強くお勧めします。

他の理由の中でも、この Firefox のバグにより、<input> タグベースのボタンの行の高さを設定できなくなり、Firefox 上の他のボタンと行がずれてしまいます。

要約する

このセクションでは主にボタンのスタイルについて説明します。重要なのは、これらのスタイルを柔軟に実行して制御することです。