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

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

関連する推奨事項: 「

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

タグ

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

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

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

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

のようなインライン ラベルを使用できます。

[自動非表示]

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

.label:empty {
    display: none;
}

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

[色の設定]

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

☑ 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>

# #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>

【自動非表示】を追加できます。 ]

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

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

  
• Home 42
  
• Profile
  
• Messages 3

  Messages 4

## 巨大スクリーン

これは、ブラウザのビューポート全体に拡張して Web サイト上の主要なコンテンツを表示できる軽量で柔軟なコンポーネントです

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

If 巨大な画面コンポーネントに丸い角を追加し、このコンポーネントを .container

要素

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

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