第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

章節(jié)
問(wèn)答
課簽
筆記
評(píng)論
占位
占位

導(dǎo)航加下拉菜單(二級(jí)導(dǎo)航)

前面介紹的都是使用Bootstrap框架制作一級(jí)導(dǎo)航,但很多時(shí)候,在Web頁(yè)面中是離不開(kāi)二級(jí)導(dǎo)航的效果。那么在Bootstrap框架中制作二級(jí)導(dǎo)航就更容易了。只需要將li當(dāng)作父容器,使用類名“dropdown”,同時(shí)在li中嵌套另一個(gè)列表ul,使用前面介紹下拉菜單的方法就可以:

<ul class="nav nav-pills">
     <li class="active"><a href="##">首頁(yè)</a></li>
     <li class="dropdown">
        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            …
       </ul>
     </li>
     <li><a href="##">關(guān)于我們</a></li>
</ul>

運(yùn)行效果如下:

通過(guò)瀏覽器調(diào)試工具,不難發(fā)現(xiàn),點(diǎn)擊有二級(jí)導(dǎo)航的菜單項(xiàng),會(huì)自動(dòng)添加“open”類名,再次點(diǎn)擊就會(huì)刪除添加的“open”類名:

簡(jiǎn)單點(diǎn)來(lái)說(shuō),就是依靠這個(gè)類名來(lái)控制二級(jí)導(dǎo)航顯示與否,并且設(shè)置了背景色和邊框:

/*源碼查看bootstrap.css文件第3479行~3484行*/

.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
background-color: #eee;
border-color: #428bca;
}

大家回憶一下,在制作下拉菜單時(shí),可以用分隔線,那么在二級(jí)導(dǎo)航中是否可以呢?我們一起來(lái)看看:

不用再說(shuō)太多,只需要添加“<li class=”nav-divider”></li>”這樣的一個(gè)空標(biāo)簽就可以了。

運(yùn)行效果如下:

/*源碼請(qǐng)查看bootstrap.css文件第3485行~第3490行*/

.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

任務(wù)

我來(lái)試試;完成下面任務(wù)

編寫(xiě)代碼實(shí)現(xiàn)“tab型二級(jí)導(dǎo)航”,效果圖如下:

備注:這一小節(jié)沒(méi)有正確性驗(yàn)證,請(qǐng)查看結(jié)果窗口與任務(wù)所給的結(jié)果圖片是否一致,從而判斷輸入代碼是否正確。

?不會(huì)了怎么辦

參考代碼:

<ul class="nav nav-tabs">
  <li class="active"><a href="##">首頁(yè)</a></li>
  <li class="dropdown">
      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
      <ul class="dropdown-menu">
          <li><a href="##">CSS3</a></li>
          <li><a href="##">Sass</a></li>
          <li class="nav-divider"></li>
          <li><a href="##">jQuery</a></li>
          <li><a href="##">Responsive</a></li>
      </ul>
  </li>
  <li><a href="##">關(guān)于我們</a></li>
</ul>
||

提問(wèn)題

寫(xiě)筆記

公開(kāi)筆記
提交
||

請(qǐng)驗(yàn)證,完成請(qǐng)求

由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求

加群二維碼

打開(kāi)微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

  • · 粉絲專屬優(yōu)惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問(wèn)題答復(fù)提醒
  • · 賬號(hào)支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書(shū)簽

邀請(qǐng)您關(guān)注公眾號(hào)
關(guān)注后,及時(shí)獲悉本課程動(dòng)態(tài)

舉報(bào)

0/150
提交
取消
全部 精華 我要發(fā)布
全部 我要發(fā)布
最熱 最新
只看我的

手記推薦

更多

本次提問(wèn)將花費(fèi)2個(gè)積分

你的積分不足,無(wú)法發(fā)表

為什么扣積分?

本次提問(wèn)將花費(fèi)2個(gè)積分

繼續(xù)發(fā)表請(qǐng)點(diǎn)擊 "確定"

為什么扣積分?