bootstrap導航元素(14)
阿新 • • 發佈:2018-12-30
表格導航或標籤 建立一個標籤式的導航選單: 以一個帶有 class .nav 的無序列表開始。 新增 class .nav-tabs。 <p>標籤式的導航選單</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul> 基本的膠囊式導航選單 如果需要把標籤改成膠囊的樣式, 只需要使用 class .nav-pills 代替 .nav-tabs 即可,其他的步驟與上面相同。 垂直的膠囊式導航選單 您可以在使用 class .nav、.nav-pills 的同時使用 class .nav-stacked,讓膠囊垂直堆疊。 兩端對齊的導航 您可以在螢幕寬度大於 768px 時,通過在分別使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同時使用 class .nav-justified, 讓標籤式或膠囊式導航選單與父元素等寬。在更小的螢幕上,導航連結會堆疊。 禁用連結 對每個 .nav class,如果添加了 .disabled class,則會建立一個灰色的連結,同時禁用了該連結的 :hover 狀態 帶有下拉選單的標籤 向標籤新增下拉選單的步驟如下: 以一個帶有 class .nav 的無序列表開始。 新增 class .nav-tabs。 新增帶有 .dropdown-menu class 的無序列表。 <p>帶有下拉選單的標籤</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li class="divider"></li> <li><a href="#">分離的連結</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul> 帶有下拉選單的膠囊 步驟與建立帶有下拉選單的標籤相同,只是需要把 .nav-tabs class 改為 .nav-pills,