詳細介紹Bootstrap提示訊息

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

　　【相關影片推薦：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>

#【顏色設定】

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

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

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

　　label-success：成功標籤，綠色

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

　　☑   label-warning：警告標籤，橘色

#angero　abel ：錯誤標籤，紅色

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

<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”樣式來實現

　　可以像標籤一樣，使用span標籤來製作，然後加入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;
}

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

 ####

以上是詳細介紹Bootstrap提示訊息的詳細內容。更多資訊請關注PHP中文網其他相關文章！