ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明

Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明

青灯夜游
青灯夜游転載
2021-03-30 19:00:503034ブラウズ

Bootstrap には、ラベル、バッジ、巨大画面、ヘッダーなど、プロンプト情報に使用されるコンポーネントがいくつかあります。この記事では、Bootstrap のプロンプト情報について紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明

関連する推奨事項: 「

ブートストラップ チュートリアル

タグ

一部の Web ページでは、タグが使用されています。ユーザーに追加情報を伝えるため。たとえば、新しいナビゲーション項目がナビゲーションに追加された場合、ユーザーに伝えるために「新しい」タグが追加される可能性があります。

この効果は、ブートストラップ フレームワーク Extract で意図的に使用されています。これをラベル コンポーネントにし、「.label」スタイルを使用して強調表示を実現します。

使用方法は非常に簡単で、span

<h3>Example heading <span>New</span>
</h3>

のようなインライン ラベルを使用できます。 Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明

[自動非表示]

コンテンツがない場合は自動的に非表示になります

.label:empty {
    display: none;
}
<h3>Example heading <span></span>
</h3>

Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明

[色の設定]

とボタン 要素のボタンも同様で、ラベル スタイルにもさまざまな色が用意されています。

☑ label-default: デフォルトのラベル、濃い灰色

☑ label-primary: メイン ラベル、ダークブルー

☑ label-success: 成功ラベル、緑色

☑ label-info: 情報ラベル、水色

☑ label-warning: 警告ラベル、オレンジ

☑ label -danger: error label, red

主にこれらのクラス名を使用して背景色とテキスト色を変更します

<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明

# #badge

ある意味、バッジ効果は、前に紹介したラベル効果とよく似ています。いくつかのプロンプトメッセージを作成するためにも使用されます。多くの場合、表示されるのは、未読のメッセージの数をシステムがプロンプトするなど、一部のシステムによって送信された情報です。

ブートストラップ フレームワークでは、この効果はバッジ効果と呼ばれ、「バッジ」スタイルはこれを達成するために使用されます。 it

スパンタグを使用してタグのようにし、

badge

class<pre class="brush:php;toolbar:false">&lt;a&gt;Inbox &lt;span&gt;42&lt;/span&gt;&lt;/a&gt;</pre>

Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明【自動非表示】を追加できます。 ]

新しい情報エントリまたは未読の情報エントリではない場合、つまりコンテンツが含まれておらず、バッジ コンポーネントを自動的に非表示にすることができます (CSS

:empty

セレクターを通じて実装されます) <pre class="brush:php;toolbar:false">.badge:empty {     display: none; }</pre> <pre class="brush:php;toolbar:false">&lt;a&gt;Inbox &lt;span&gt;&lt;/span&gt;&lt;/a&gt;</pre>[ボタン バッジ]

バッジは、ボタン要素ボタンとカプセル ナビゲーション ナビゲーション ピルで同様のスタイルですが、色が異なります



Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明## 巨大スクリーン

これは、ブラウザのビューポート全体に拡張して Web サイト上の主要なコンテンツを表示できる軽量で柔軟なコンポーネントです
<div>
  <h1>小火柴的蓝色理想</h1>
  <p>好的代码像粥一样,都是用时间熬出来的</p>
  <p><a>Learn more</a></p>
</div>

If 巨大な画面コンポーネントに丸い角を追加し、このコンポーネントを Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明.container

要素

<div>
    <div>
        <h1>小火柴的蓝色理想</h1>
        <p>好的代码像粥一样,都是用时间熬出来的</p>
        <p><a>Learn more</a></p>
    </div>
</div>

Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明Header 内に配置します。

ヘッダー コンポーネントは、h1

タグに適切なスペースを追加し、ページの他の部分から一定の分離を形成できます。

h1 タグに埋め込まれた small 要素のデフォルト効果をサポートし、他のほとんどのコンポーネントもサポートします (追加のスタイルを追加する必要があります)

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}
<div>
  <h1>Example page header <small>Subtext for header</small>
</h1>
</div>

プログラミング関連の知識について詳しくは、Bootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明プログラミング ビデオ

をご覧ください。 !

以上がBootstrap のラベル、バッジ、巨大スクリーン、ヘッダーの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。