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

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

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

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

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

.label:empty {
    display: none;
}

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

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

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

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

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

class<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;a&gt;Inbox &lt;span&gt;42&lt;/span&gt;&lt;/a&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

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

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

セレクターを通じて実装されます) <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.badge:empty {     display: none; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;a&gt;Inbox &lt;span&gt;&lt;/span&gt;&lt;/a&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>[ボタン バッジ]

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

  
• Home 42
  
• Profile
  
• Messages 3

## 巨大スクリーン

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

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

ログイン後にコピー

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

<div>
    <div>
        <h1>小火柴的蓝色理想</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 サイトの他の関連記事を参照してください。