導航欄是一個很好的功能,是Bootstrap 網站的一個突出特點。導航欄是響應式元組件就,作為應用程序或網站的導航標題。導航欄在移動設備的視圖中是折疊的,隨著可用視口寬度的增加,導航欄也會水平展開。在Bootstrap 導航欄的核心中,導航欄包括了為站點名稱和基本的導航定義樣式。
創建一個默認的導航欄的步驟如下:
為了嚮導航欄添加鏈接,只需要簡單地添加帶有class .nav、.navbar-nav 的無序列表即可。
下面實例為大家分享使用Bootstrap3製作的導航欄,具體內容如下
比如
微博
那麼如何寫出這樣方便這樣的組件
使用bootstrap3吧!
直接說使用
一般情況下導航放到如下的結構中
<nav role="navigation"> <div> <div> <a href="#"> <img src="..."> </a> </div> </div></nav>
1、nav標籤
第一層class中navbar是必須的其他的屬性是可選的
添加navbar-default創建的是最基本的導航,不會固定在哪個位置顏色是透明的
添加navbar-inverse類顏色變為黑色
添加navbar-fixed-top固定在頂部,添加navbar-fixed-bottom固定在底部
添加navbar-static-top 效果如下
<div>
導航的頭比如說網站的loge 點擊進去主頁,或者是網站的名稱
效果如上
這裡可以換成文字我感覺效果會更好
2、表單
在導航裡添加表單,比如搜索,登錄什麼的也比較常見
比如我上面的搜索
<form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">搜索</button> </form>
解釋一下其中的navbar-left類會把這個form定位在左邊
當然也對應有navbar-right類
同理按鈕可以這樣加
<button type="button">Sign in</button>
文本可以這樣加
<p>Signed in as Mark Otto</p>
鏈接可以這樣加
<p>Signed in as <a href="#">Mark Otto</a></p>
並且這樣都可以添加navbar-right或者navbar-left類
我的導航
<!--導航--> <div> <div id="navcontainer"> <nav role="navigation"> <div> <div> <a href="#">先聲文庫</a> </div> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">搜索</button> </form> <div> <ul> <li><a data-toggle="modal" data-target="#register" >註冊</a></li> <li><a data-toggle="modal" data-target="#signin" >登錄</a></li> </ul> </div> </div> </nav> </div> </div>
效果如下
更多內容大家可以參考一下文章進行學習:
Bootstrap實現默認導航欄效果
Bootstrap每天必學之導航條(二)
Bootstrap每天必學之附加導航(Affix)插件
關於Bootstrap的更多內容大家還可以參考專題進行學習: 《Bootstrap學習教程》
以上就是利用Bootstrap3製作的導航欄,希望對大家的學習有所幫助,做出屬於自己的導航欄