ブートストラップで基本Webページ要素をコード化する方法 - ダミー

< 純粋なレイアウトに加えて、BootstrapはほぼすべてのWebサイトにあるWebページコンポーネントを作成することもできます。ここでのアイデアは、レイアウトを扱うときと同じです。独自のボタンやツールバーを設計するたびにホイールを再作成するのではなく、既に複数のブラウザやデバイスでテスト済みのビルド済みコードを使用する方がよいでしょう。

次の例は、一般的なWebコンポーネントをすばやく作成する方法を示しています。

<！デザインボタン

ボタンは多くのWebページの基本要素ですが、通常は設定やスタイルが難しい場合があります。ここに示すように、ボタンはさまざまなタイプとサイズを持つことができます。

ボタンを作成するためのブートストラップコード

属性

クラス接頭辞

説明	ボタンタイプ	btn-defaultbtn-primarybtn-successbtn-danger
ホバー効果を持つ標準ボタンタイプ	<！ホバー効果付きの青ボタン	ホバー効果付きの緑ボタン ホバー効果付き赤ボタン ボタンサイズ btn-lgbtn​​-defaultbtn-sm 大きなボタンサイズ
デフォルトのボタンサイズ	小さいボタンサイズ	ボタンを作成するには、次のHTMLを記述します。 ボタン HTMLエレメントから始めます。

開かれた<< ボタン>

1. タグには、 type = "button" が含まれています。
2. クラス属性に btn クラス属性値を含め、必要なエフェクトに基づいてクラス接頭辞を追加します。 スタイルを追加するには、 クラス
3. というプレフィックス名をHTML クラス 属性に追加し続けます。
4. <！ 大きいデフォルトボタン 大きなデフォルトボタン デフォルト成功ボタン デフォルトデフォルトボタン

小さな危険ボタン

小さなデフォルトボタン

ブートストラップボタンの種類とサイズ。

追加のボタンタイプ、ボタンサイズ、およびその他のボタンオプションを確認します。

ツールバーでナビゲートする

複数のページまたはビューを持つWebページには、通常、ナビゲーションに役立つツールバーが1つ以上あります。いくつかのツールバーオプションがあります。

ナビゲーションツールバーを作成するためのブートストラップコード

属性

クラスプレフィックス

説明

ツールバータイプ

nav-tabs

nav-pills

タブナビゲーションツールバー	またはソリッドボタンナビゲーションツールバー	ツールバーボタンの種類
ドロップダウン	キャレットドロップダウンメニュー ドロップダウンメニューとしてのボタンまたはタブ	下矢印ドロップダウンメニューアイコン ドロップダウンメニュー項目
ピルまたはソリッドボタンナビゲーションツールバーを作成するには、次のHTMLを記述します。	ul	要素を使用して順序付けられていないリストを開始します。 開始タグ には、

class = "nav nav-pills"

1. が含まれます。 タグを使用してボタンを作成します。 1つの開始タグ
2. に
   class = "active" を含めて、マウスがボタンの上を移動したときにメインツールバーのどのタブを視覚的に強調表示するかを指定します。 ドロップダウンメニューを作成するには、順序なしリストをネストします。クラスプレフィックス
   • "ドロップダウン"
   • 、 "キャレット" 、および
   • "ドロップダウンメニュー"
   • の横のコードを参照してください。 タグを使用して、ドロップダウンメニューの他のWebページにリンクすることができます。 ブートストラップを使用してツールバーを作成するコード： タイムライン About Photos

     Friends More

Places

• Sports
• Music
• Bootstrap toolbar withドロップダウンメニュー。

• ドロップダウントグル

  • クラスと
  • data-toggle = "dropdown"
  • 属性と値が連携して、リンクなどの要素にドロップダウンメニューを追加します。追加のツールバーオプションを確認してください。

アイコンの追加

アイコンはボタンで頻繁に使用され、何らかのアクションを伝えるのに役立ちます。たとえば、電子メールプログラムでは、ゴミ箱アイコン付きのボタンを使用して電子メールを削除する可能性があります。アイコンは、あまり説明することなく、提案されたアクションをユーザーにすばやく伝えます。 これらのアイコンは グリフ、 と呼ばれ、グリフアイコンはブートストラップで使用されるグリフを提供します。 ブートストラップは200個以上のグリフをサポートしており、

タグを使用してボタンやツールバーに追加できます。次のコード例では、星、クリップ、ゴミ箱グリフの3つのボタンを作成します。

スター

添付 ゴミ箱 アイコン付きのブートストラップボタン。

すべてのブートストラップグリフの名前を確認します。