Bootstrap中標(biāo)簽、徽章、巨幕和頁頭的示例分析

這篇文章主要介紹Bootstrap中標(biāo)簽、徽章、巨幕和頁頭的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

標(biāo)簽

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

　　在Bootstrap框架中特意將這樣的效果提取出來成為一個標(biāo)簽組件，并且以“.label”樣式來實現(xiàn)高亮顯示

　　使用方法很簡單，可以在使用span這樣的行內(nèi)標(biāo)簽

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

【自動隱藏】

　　當(dāng)沒有內(nèi)容的時候，自動隱藏

.label:empty {
    display: none;
}

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

【顏色設(shè)置】

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

　　?   label-default:默認(rèn)標(biāo)簽，深灰色

　　?   label-primary：主要標(biāo)簽，深藍(lán)色

　　?   label-success：成功標(biāo)簽，綠色

　　?   label-info：信息標(biāo)簽，淺藍(lán)色

　　?   label-warning：警告標(biāo)簽，橙色

　　?   label-danger：錯誤標(biāo)簽，紅色

　　主要是通過這幾個類名來修改背景顏色和文本顏色

<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>

徽章

　　從某種意義上來說，徽章效果和前面介紹的標(biāo)簽效果極其相似。也用來做一些提示信息使用。常出現(xiàn)的是一些系統(tǒng)發(fā)出的信息，比如系統(tǒng)提示有多少信息未讀

　　在Bootstrap框架中，把這種效果稱作為徽章效果，使用“badge”樣式來實現(xiàn)

　　可以像標(biāo)簽一樣，使用span標(biāo)簽來制作，然后加入badge類

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

【自動隱藏】

　　如果沒有新的或未讀的信息條目，也就是說不包含任何內(nèi)容，徽章組件能夠自動隱藏（通過CSS的 :empty 選擇符實現(xiàn))

.badge:empty {
    display: none;
}

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

【按鈕徽章】

　　徽章在按鈕元素button和膠囊形導(dǎo)航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>

巨幕

　　這是一個輕量、靈活的組件，它能延伸至整個瀏覽器視口來展示網(wǎng)站上的關(guān)鍵內(nèi)容

<div class="jumbotron">
  <h2>小火柴的藍(lán)色理想</h2>
  <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">
        <h2>小火柴的藍(lán)色理想</h2>
        <p>好的代碼像粥一樣，都是用時間熬出來的</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>

頁頭

　　頁頭組件能夠為 h2 標(biāo)簽增加適當(dāng)?shù)目臻g，并且與頁面的其他部分形成一定的分隔。它支持 h2 標(biāo)簽內(nèi)內(nèi)嵌 small 元素的默認(rèn)效果，還支持大部分其他組件（需要增加一些額外的樣式）

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

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

以上是“Bootstrap中標(biāo)簽、徽章、巨幕和頁頭的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！