詳解Bootstrap中的標籤、徽章、巨幕和頁頭

在Bootstrap中，有一些元件用於提示訊息，如 標籤、徽章、巨幕和頁頭。本篇文章為大家介紹一下Bootstrap中的提示訊息。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關推薦：《bootstrap教學》

標籤

　　在某些Web頁面中常常會新增一個標籤用來告訴使用者一些額外的信息，比如說在導航上新增了一個新導航項，可能就會加一個「new」標籤，來告訴使用者

　　在Bootstrap框架中刻意將這樣的效果提取出來成為一個標籤元件，並且以“.label”樣式來實現高亮顯示

　　使用方法很簡單，可以在使用span這樣的行內標籤

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

#【自動隱藏】

　　當沒有內容的時候，自動隱藏

.label:empty {
    display: none;
}

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

【顏色設定】

#　　與按鈕元素button類似，label樣式也提供了多種顏色：

　　☑   label-default:預設標籤，深灰色

　　☑   label-primary：主要標籤，深藍色

　　☑   label-success：成功標籤，綠色

#　　☑   label-info：訊息標籤，淺藍色

　　☑   label-warning：警告標籤，

 ☑  pabel-warning：警告標籤，

‍ -danger：錯誤標籤，紅色

　　主要是透過這幾個類別名稱來修改背景顏色和文字顏色

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

徽章

　　從某種意義上來說，徽章效果和前面介紹的標籤效果極為相似。也用來做一些提示訊息使用。常出現的是一些系統發出的信息，例如係統提示有多少信息未讀 

　　在Bootstrap框架中，把這種效果稱作為徽章效果，使用“badge”樣式來實現　　可以像標籤一樣，使用span標籤來製作，然後加入

badge

類別

<a>Inbox <span>42</span></a>

【自動隱藏】#　　如果沒有新的或未讀的資訊條目，也就是說不包含任何內容，徽章組件能夠自動隱藏（透過CSS的 

:empty

 選擇符實現)  

.badge:empty {
    display: none;
}

<a>Inbox <span></span></a>

#【按鈕徽章】

　　徽章在按鈕元素button和膠囊形導覽nav-pills也有類似的樣式，只不過顏色不同

  
• Home 42
  
• Profile
  
• Messages 3

  Messages 4

巨幕

　　這是一個輕量、靈活的元件，它能延伸至整個瀏覽器視窗來展示網站上的關鍵內容

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

如果為巨幕元件加入圓角，把此元件放在 

.container

 元素的內部即可

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

頁頭

#　　頁頭元件能夠為 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中文網其他相關文章！