Bootstrap プロンプト情報の詳細な紹介

一部の Web ページでは、ユーザーに追加情報を伝えるためにラベルが追加されることがよくあります。たとえば、新しいナビゲーション項目がナビゲーションに追加された場合、ユーザーに伝えるために「新しい」ラベルが追加されることがあります

【関連動画】推奨: Bootstrapチュートリアル】

Bootstrapフレームワークでは、この効果はラベルコンポーネントとして特別に抽出され、「.label」スタイルで強調表示されます

使用方法は非常に簡単で、spanなどを使用できますインラインラベル

<h3>Example heading <span class="label label-default">New</span></h3>

【自動非表示】

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

.label:empty {display: none;
}

<h3>Example heading <span class="label label-default"></span></h3>

【色の設定】

ボタン要素のボタンと同様に、ラベルスタイルも提供されています さまざまな色:

☑ label-default: デフォルトラベル、ダークグレー

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

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

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

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

☑ label-danger: エラーラベル、赤

主にこれらのクラス名を通じて背景色と文字色を変更します

<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>

バッジ

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

Bootstrap フレームワークでは、この効果はバッジ効果と呼ばれ、「バッジ」スタイルを使用して実装されます

スパンを使用できますラベルのようにタグを作成し、バッジクラスを追加しますbadge类

<a href="#">Inbox <span class="badge">42</span></a>

【自动隐藏】

　　如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的 :empty 选择符实现)  

.badge:empty {display: none;
}

<a href="#">Inbox <span class="badge"></span></a>

【按钮徽章】

　　徽章在按钮元素button和胶囊形导航nav-pills也有类似的样式，只不过颜色不同

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li></ul><button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span></button>

巨幕

　　这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容

<div class="jumbotron">
  <h1>小火柴的蓝色理想</h1>
  <p>好的代码像粥一样，都是用时间熬出来的</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>

　　如果为巨幕组件添加圆角，把此组件放在 .container 元素的里面即可

<div class="container"><div class="jumbotron"><h1>小火柴的蓝色理想</h1><p>好的代码像粥一样，都是用时间熬出来的</p><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div></div>

 

页头

　　页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small

.page-header {padding-bottom: 9px;margin: 40px 0 20px;border-bottom: 1px solid #eee;
}

【自動非表示】

🎜 新規または未読の情報エントリがない場合は、つまり、コンテンツは含まれていません。バッジ コンポーネントは自動的に非表示にできます (CSS の :empty セレクターによって実装されます) 🎜🎜

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1></div>

🎜🎜rrreee🎜🎜🎜🎜🎜【ボタンバッジ】🎜 🎜 バッジはボタン要素のボタンとカプセルの形状にあります ナビゲーション ナビピルも同様のスタイルを持っていますが、色が異なります🎜🎜rrreee🎜🎜大画面🎜🎜 これはブラウザのビューポート全体に拡張できる軽量で柔軟なコンポーネントですウェブサイト上の主要なコンテンツを表示するには🎜🎜 rrreee🎜🎜🎜🎜🎜 巨大な画面コンポーネントに丸い角を追加したい場合は、このコンポーネントを .container 要素内に置くだけです🎜🎜rrreee🎜🎜🎜 🎜🎜🎜🎜ヘッダー🎜🎜 ヘッダー コンポーネントは、h1 タグに適切なスペースを追加して、ページの他の部分から一定の分離を形成できます。 h1 タグに埋め込まれた small 要素のデフォルト効果をサポートし、他のほとんどのコンポーネントもサポートします (追加のスタイルを追加する必要があります)🎜🎜rrreee🎜🎜rrreee🎜🎜🎜

以上がBootstrap プロンプト情報の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。