詳細介紹Bootstrap提示訊息

　　在一些Web頁面中常常會添加一個標籤用來告訴用戶一些額外的信息，比如說在導航上添加了一個新導航項，可能就會加一個“new”標籤，來告訴用戶

　　【相關影片推薦：Bootstrap教學】

　　在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：警告標籤，橘色

#angero　abel ：錯誤標籤，紅色

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

<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中文網其他相關文章！