這篇文章主要介紹Bootstrap中導(dǎo)航條和分頁(yè)導(dǎo)航如何實(shí)現(xiàn)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)是一家企業(yè)級(jí)云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營(yíng)經(jīng)驗(yàn)。主營(yíng)GPU顯卡服務(wù)器，站群服務(wù)器，IDC機(jī)房托管，海外高防服務(wù)器，成都機(jī)柜租用，動(dòng)態(tài)撥號(hào)VPS，海外云手機(jī)，海外云服務(wù)器，海外服務(wù)器租用托管等。
本篇文章帶大家了解一下Bootstrap中的導(dǎo)航條和分頁(yè)導(dǎo)航，順帶介紹一下標(biāo)簽和徽章，希望對(duì)大家有所幫助！
導(dǎo)航條（navbar）和上一節(jié)介紹的導(dǎo)航（nav），就相差一個(gè)字，多了一個(gè)“條”字。其實(shí)在Bootstrap框架中他們還是明顯的區(qū)別。在導(dǎo)航條(navbar)中有一個(gè)背景色、而且導(dǎo)航條可以是純鏈接（類(lèi)似導(dǎo)航），也可以是表單，還有就是表單和導(dǎo)航一起結(jié)合等多種形式。
在Bootstrap框中，導(dǎo)航條和導(dǎo)航從外觀上差別不是太多，但在實(shí)際使用中導(dǎo)航條要比導(dǎo)航復(fù)雜得多。
使用方法：
在制作一個(gè)基礎(chǔ)導(dǎo)航條時(shí)，主要分以下幾步：
第一步：首先在制作導(dǎo)航的列表()基礎(chǔ)上添加類(lèi)名“navbar-nav”
第二步：在列表外部添加一個(gè)容器（div），并且使用類(lèi)名“navbar”和“navbar-default”
原理分析：
而導(dǎo)航條的顏色都是通過(guò)“.navbar-default”來(lái)進(jìn)行控制。
在Web頁(yè)面制作中，常常在菜單前面都會(huì)有一個(gè)標(biāo)題（文字字號(hào)比其它文字稍大一些），其實(shí)在Bootstrap框架也為大家做了這方面考慮，其通過(guò)“navbar-header”和“navbar-brand”來(lái)實(shí)現(xiàn)，此功能主要起一個(gè)提醒功能，當(dāng)然改良一下可以當(dāng)作是logo(此處不做過(guò)多闡述)。其樣式主要是加大了字體設(shè)置，并且設(shè)置了最大寬度，同樣在默認(rèn)導(dǎo)航條（navbar-default）下，對(duì)navbar-brand也做了顏色處理，同樣的，在基礎(chǔ)導(dǎo)航條中對(duì)菜單提供了當(dāng)前狀態(tài)，禁用狀態(tài)，懸浮狀態(tài)等效果，而且也可以帶有二級(jí)菜單的導(dǎo)航條。
在Bootstrap框架中提供了一個(gè)“navbar-form”，使用方法很簡(jiǎn)單，在navbar容器中放置一個(gè)帶有navbar-form類(lèi)名的表單，在Bootstrap框架中，還提供了“navbar-right”樣式，讓元素在導(dǎo)航條靠右對(duì)齊。這里有一個(gè)條件，只有當(dāng)瀏覽器視窗寬度大于768px生效。
Bootstrap框架的導(dǎo)航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，還可以使用其他元素。框架提供了三種其他樣式：
1）導(dǎo)航條中的按鈕navbar-btn
2）導(dǎo)航條中的文本navbar-text
3）導(dǎo)航條中的普通鏈接navbar-link
但這三種樣式在框架中使用時(shí)受到一定的限制，需要和navbar-brand、navbar-nav配合起來(lái)使用。而且對(duì)數(shù)量也有一定的限制，一般情況在使用一到兩個(gè)不會(huì)有問(wèn)題，超過(guò)兩個(gè)就會(huì)有問(wèn)題。
很多情況之一，設(shè)計(jì)師希望導(dǎo)航條固定在瀏覽器頂部或底部，這種固定式導(dǎo)航條的應(yīng)用在移動(dòng)端開(kāi)發(fā)中更為常見(jiàn)。Bootstrap框架提供了兩種固定導(dǎo)航條的方式：
? .navbar-fixed-top：導(dǎo)航條固定在瀏覽器窗口頂部
? .navbar-fixed-bottom：導(dǎo)航條固定在瀏覽器窗口底部
使用方法很簡(jiǎn)單，只需要在制作導(dǎo)航條最外部容器navbar上追加對(duì)應(yīng)的類(lèi)名即可。
重慶分公司
重慶分公司
