欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap實現(xiàn)默認導(dǎo)航欄效果

 更新時間：2020年09月21日 15:34:30   作者：林炳文Evankaka  
這篇文章主要介紹了Bootstrap實現(xiàn)默認導(dǎo)航欄效果，導(dǎo)航欄是一個很好的功能，是Bootstrap網(wǎng)站的一個突出特點，本文帶領(lǐng)大家學(xué)習(xí)實現(xiàn)Bootstrap導(dǎo)航欄,需要的朋友可以參考下

導(dǎo)航欄是一個很好的功能，是 Bootstrap 網(wǎng)站的一個突出特點。導(dǎo)航欄是響應(yīng)式元組件就，作為應(yīng)用程序或網(wǎng)站的導(dǎo)航標題。導(dǎo)航欄在移動設(shè)備的視圖中是折疊的，隨著可用視口寬度的增加，導(dǎo)航欄也會水平展開。在 Bootstrap 導(dǎo)航欄的核心中，導(dǎo)航欄包括了為站點名稱和基本的導(dǎo)航定義樣式。
創(chuàng)建一個默認的導(dǎo)航欄的步驟如下：

  • 向 <nav> 標簽添加 class .navbar、.navbar-default（白底黑字），navbar-inverse（黑底白字）
  • 向上面的元素添加 role="navigation"，有助于增加可訪問性。
  • 向 <div> 元素添加一個標題 class .navbar-header，內(nèi)部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。

為了向?qū)Ш綑谔砑渔溄?，只需要簡單地添加帶?class .nav、.navbar-nav 的無序列表即可。

下面的實例演示了這點：

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 實例 - 默認的導(dǎo)航欄</title> 
 <link href="bootstrap.min.css" rel="stylesheet"> 
 <script src="jquery-2.1.4.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
 
<nav class="navbar navbar-inverse" role="navigation"> 
 <div class="navbar-header"> 
 <a class="navbar-brand" href="#">林炳文在此～</a> 
 </div> 
 <div> 
 <ul class="nav navbar-nav"> 
 <li class="active"><a href="#">導(dǎo)航一</a></li> 
 <li><a href="#">導(dǎo)航二</a></li> 
 <li class="dropdown"> 
 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
 下拉菜單 
 <b class="caret"></b> 
 </a> 
 <ul class="dropdown-menu"> 
 <li><a href="#">我是誰呢？</a></li> 
 <li><a href="#">我也不知道</a></li> 
 <li><a href="#">你是誰呢？</a></li> 
 <li class="divider"></li> 
 <li><a href="#">分離的鏈接</a></li> 
 <li class="divider"></li> 
 <li><a href="#">另一個分離的鏈接</a></li> 
 </ul> 
 </li> 
 </ul> 
 </div> 
</nav> 
</body> 
</html>

效果如下：


把

<nav class="navbar navbar-inverse" role="navigation">

改成

<nav class="navbar navbar-default" role="navigation">

效果如下：

如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程

以上就是Bootstrap實現(xiàn)默認導(dǎo)航欄效果的代碼，希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評論