ブートストラップボタンの使用方法

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップボタンを使用するためのガイド

Bootstrapは、Webプロジェクトに簡単に追加できるさまざまな事前設定ボタンスタイルを提供します。これらのボタンは応答性が高く、さまざまな画面サイズでよく表示されます。

ブートストラップボタンの使用方法

プロジェクトでブートストラップボタンを使用するには、次のことが必要です。

1. Bootstrap CSSの導入： タグに、Bootstrap CSSファイルへの参照を追加します。
2. ボタン要素の作成： <button></button>要素を使用してボタンを作成します。
3. ブートストラップボタンクラスを追加： btn-primaryやbtn-outline-successなどのボタン要素にブートストラップボタンクラスを追加します。
4. ボタンテキストの追加：ボタン要素内にボタンテキストを追加します。

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

Bootstrapは、さまざまなボタンスタイルと動作を設定するために使用できるさまざまなボタンクラスを提供します。

• タイプ： btn-primary 、 btn-secondary 、 btn-success 、 btn-danger 、 btn-warning 、 btn-info 、 btn-light 、 btn-dark 。
• サイズ： btn-sm 、 btn-lgおよびbtn-block 。
• 形状： btn-rounded 。
• ステータス： btn-active 、 btn-disabledおよびbtn-loading 。
• アウトライン： btn-outline-* 。

例

<button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-outline-success">Success Button</button>

最初のボタンは青い背景と白いテキストのあるボタンをレンダリングしますが、2番目のボタンは緑の境界線と白いテキストでボタンをレンダリングします。

その他の機能

ブートストラップボタンは、次の他の機能もサポートしています。

• アイコン： <i></i>要素を使用してアイコンを追加します。
• 無効： disabledプロパティを使用してボタンを無効にします。
• ローディングステータス： btn-loadingクラスを使用して、ボタンが読み込まれていることを示します。

ブートストラップボタンを使用することで、プロジェクトに美しくインタラクティブなボタンを簡単に追加できます。

以上がブートストラップボタンの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。