Bootstrap Navbar Component實(shí)現(xiàn)響應(yīng)式導(dǎo)航
目的：
用Bootstrap Navbar component 實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航
理解Bootstrap Navbar component是如何工作的（不包括collepse.js）
清楚自己添加一個(gè)規(guī)定的類名時(shí)是做了些什么
根據(jù)自己的需求進(jìn)行改裝
對(duì)比自己的實(shí)現(xiàn)方法，找出差距。
1.實(shí)現(xiàn)：
我想要模仿一個(gè)這樣的響應(yīng)式導(dǎo)航：
按照Bootstrap官網(wǎng)上介紹的方法，按照規(guī)則創(chuàng)建標(biāo)簽添加類名之后，可以得到一個(gè)這樣的導(dǎo)航：
代碼：
<nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand">Live With It</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav>
2.實(shí)現(xiàn)原理：
從他的源碼中扒出和nav navbar相關(guān)的代碼，挑出和位置相關(guān)的：
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-brand {
float: left;
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
}
.navbar-nav > li {
float: left;
}
}
兩個(gè)關(guān)鍵的盒子，navbar-header和navbar-nav
默認(rèn)是小屏幕，他們的狀態(tài)是:
大屏幕時(shí)，navbar-header左浮動(dòng)，navbar-nav和里面的li也都左浮動(dòng)，像下面這樣：
所以，他實(shí)現(xiàn)的原理就是，利用塊級(jí)元素在文檔流中占滿一行，浮動(dòng)之后擠到一起的特性，來(lái)控制堆疊和并排。
所以，為了可以在變成大屏幕時(shí)這兩個(gè)盒子可以順利地到一行上去，也就是說不要出現(xiàn)下面的情況，需要控制navbar-header和navbar-nav里面元素的總寬度不要超過768px。
再挑出和隱藏于出現(xiàn)相關(guān)的樣式：
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.collapse {
display: none;
}
@media (min-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
}
}
navbar-collapse是控制導(dǎo)航列表隱藏和出現(xiàn)的盒子，按鈕會(huì)在變成大屏后消失。
3.弄清楚每個(gè)類名添加的樣式
.navbar 負(fù)責(zé)定義一個(gè)長(zhǎng)條
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.navbar-header ，負(fù)責(zé)包裹brand和折疊按鈕，控制小屏幕時(shí)brand和按鈕的位置，控制導(dǎo)航列表的布局。
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.container > .navbar-header,
.container-fluid > .navbar-header {
margin-right: -15px; //小屏幕的時(shí)候header內(nèi)容左邊緣和container左邊緣對(duì)齊
margin-left: -15px;
}
@media (min-width: 768px) {
.container > .navbar-header,
.container-fluid > .navbar-header {
margin-right: 0;
margin-left: 0;
}
}
.navbar-brand, 負(fù)責(zé)左邊logo區(qū)的默認(rèn)樣式
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: block;
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px; /*大屏幕的時(shí)候內(nèi)容左邊緣和header左邊緣對(duì)齊*/
}
}
container和navbar-brand都在左右兩邊設(shè)置了15px的內(nèi)填充，所以container、header、brand三個(gè)盒子左邊線本該是這樣的：
小屏幕的時(shí)候，header左右兩邊各有一個(gè)負(fù)邊距，所以是這樣的狀態(tài)：
大屏幕的時(shí)候，brand左邊有一個(gè)負(fù)邊距：
.nav 負(fù)責(zé)定義成垂直導(dǎo)航的樣式
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
navbar-nav：負(fù)責(zé)豎版導(dǎo)航的填充、實(shí)現(xiàn)橫版導(dǎo)航。
.navbar-nav {
margin: 7.5px -15px; /*折疊之后添加一個(gè)上下邊距，每一行都和屏幕等寬*/
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
navbar-right，navbar-left ：負(fù)責(zé)定位
@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
margin-right: -15px; //第一個(gè)添加navbar-right的元素右邊會(huì)有一個(gè)負(fù)邊距
}
.navbar-right ~ .navbar-right { //之后的都不會(huì)有
margin-right: 0;
}
}
navbar-toggle：負(fù)責(zé)定義按鈕的樣式，里面用三個(gè)盒子繪制三條線。在大屏幕時(shí)消失。
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle:focus {
outline: 0;
}
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
collapse，負(fù)責(zé)控制顯示和隱藏
.collapse {
display: none;
}
@media (min-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
}
.navbar-collapse: 負(fù)責(zé)被折疊盒子的樣式
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@media (min-width: 768px) {
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
以上這些類負(fù)責(zé)的樣式是除了顏色之外的樣式，與顏色相關(guān)的一切都由.navbar-default負(fù)責(zé)。
4.改裝
現(xiàn)在的導(dǎo)航條是這個(gè)樣子的：
和我想要的還有一些差異，不過知道了它的實(shí)現(xiàn)方式，就可以進(jìn)行想要的改動(dòng)。
首先讓小屏幕的時(shí)候?qū)Ш搅斜硪彩撬斤@示，并且與屏幕兩邊有一定距離：
.navbar-nav {
text-align:center;
}
.nav li {
display:inline-block;
}
.navbar {
border: 0;
}
.navbar .navbar-header {
padding-top:10px;
padding-bottom:10px;
}
@media(min-width:768px){
.navbar-collapse {
padding-top:10px;
padding-bottom:10px;
}
}
.navbar-brand {
font-size: 34px;
font-family: Lobster, Monospace;
}
.nav {
font-size: 20px;
}
@media(max-width:768px){
.container .navbar-collapse {
margin-left: 12px;
margin-right: 12px;
}
}
（如果以后也會(huì)用到這種版式，也可以為他定義一個(gè)類）
然后定義一個(gè)新的配色方案，替換掉.navbar-default
@media(min-width:768px){
.navbar {
background-color: #F79C9C;
}
}
.navbar-girl .navbar-header,
.navbar-girl .navbar-collapse {
background-color: #F79C9C;
}
.navbar-girl .navbar-brand {
color: #FFF;
}
.navbar-girl .navbar-text {
color: #F7846B;
}
.navbar-girl .navbar-nav > li > a {
color: #F7846B;
}
.navbar-girl .navbar-nav > li > a:hover,
.navbar-girl .navbar-nav > li > a:focus {
color: #CEE6E6;
background-color: transparent;
}
.navbar-girl .navbar-nav > .active > a,
.navbar-girl .navbar-nav > .active > a:hover,
.navbar-girl .navbar-nav > .active > a:focus {
color: #F7846B;
background-color: #FFF;
}
.navbar-girl .navbar-toggle {
border-color: #FFF;
}
.navbar-girl .navbar-toggle:hover,
.navbar-girl .navbar-toggle:focus {
background-color: #CEE6E6;
}
.navbar-girl .navbar-toggle .icon-bar {
background-color: #FFF;
}
.navbar-girl .navbar-collapse {
border-color: #FFF;
}
大功告成啦。
5.反思
之前用自己的思路實(shí)現(xiàn)了一個(gè)響應(yīng)式導(dǎo)航：CSS3media queries+jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航
和Bootstrap的思想對(duì)比之后，發(fā)現(xiàn)自己的一些問題
①定位：
我的思路是通過position:absolute來(lái)控制導(dǎo)航列表的位置。這樣有一個(gè)明顯的缺點(diǎn)，導(dǎo)航列表已經(jīng)完全脫離普通流。
我這樣思考的根源是，我沒有抓住這個(gè)變化的本質(zhì)，當(dāng)我看到兩個(gè)相同的東西在不同情況下出現(xiàn)在不同地方的時(shí)候，（也就是從一個(gè)地方換到另一個(gè)地方），我首先想到的就是直接挪過去，即利用absolute定位。
而Bootstrap看到了這個(gè)變化的本質(zhì)，讓一些塊級(jí)元素由堆疊排列變成水平排列（或者相反），這樣的變化通過利用塊級(jí)元素的特點(diǎn)和浮動(dòng)就可以實(shí)現(xiàn)。
②出發(fā)點(diǎn)：
Bootstrap的中心思想是：mobile first，先把在小屏幕上的布局實(shí)現(xiàn)，然后再做一些改變來(lái)實(shí)現(xiàn)在大屏幕上的布局。
而我的思想是：每一個(gè)布局和樣式都考慮到這兩種情況，對(duì)比一下看哪種情況方便就用哪個(gè)。所以我的代碼中會(huì)出現(xiàn)@media(min-width:768px)和@media(max-width:768px)兩種條件，對(duì)于一個(gè)設(shè)計(jì)我可能默認(rèn)大屏幕的，小屏幕的用media，另一個(gè)設(shè)計(jì)我可能就會(huì)默認(rèn)小屏幕的，大屏幕的用media。
這樣做可以減少一些重復(fù)的不必要的代碼。但是缺點(diǎn)遠(yuǎn)遠(yuǎn)大于優(yōu)點(diǎn)：
①對(duì)于寫的人來(lái)說，如果邏輯清晰的話，寫的會(huì)很順暢。如果思維稍微有點(diǎn)混亂的話，就會(huì)把自己繞進(jìn)去。
②對(duì)于看的人來(lái)說，理解起來(lái)會(huì)很別扭。
③如果過段時(shí)間想改一個(gè)小樣式，都需要重新理解一下當(dāng)時(shí)的邏輯。
以上所述是小編給大家介紹的Bootstrap Navbar Component實(shí)現(xiàn)響應(yīng)式導(dǎo)航，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript?Promise執(zhí)行流程深刻理解
這篇文章主要介紹了JavaScript?Promise執(zhí)行流程深刻理解，他是一個(gè)構(gòu)造函數(shù)，每個(gè)創(chuàng)建的promise都有各自狀態(tài)和值，且狀態(tài)初始值為pending，值為undefined2022-06-06
微信小程序在其他頁(yè)面監(jiān)聽globalData中值的變化
這篇文章主要給大家介紹了關(guān)于微信小程序如何在其他頁(yè)面監(jiān)聽globalData中值的變化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
本篇文章主要介紹了webpack源碼之loader機(jī)制詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-04-04
前端異步同步處理應(yīng)用場(chǎng)景及優(yōu)化詳細(xì)講解和舉例
前端開發(fā)中異步與同步處理分別適用不同場(chǎng)景,異步操作如網(wǎng)絡(luò)請(qǐng)求、文件讀寫等,而同步處理適用于簡(jiǎn)單、線性任務(wù),異步處理可通過回調(diào)函數(shù)、Promise、async/await等方式優(yōu)化,提高代碼效率和可維護(hù)性,需要的朋友可以參考下2024-10-10
手機(jī)平板等移動(dòng)端適配跳轉(zhuǎn)URL的js代碼
這篇文章主要為大家分享下手機(jī)平板等移動(dòng)端適配跳轉(zhuǎn)URL的js代碼，需要的朋友可以參考下2014-01-01
讓ie6也支持websocket采用flash封裝實(shí)現(xiàn)
ie9都不支持websocket,何況ie6,往往這些不可思議的事情卻意想不到的發(fā)生了;websocket能開發(fā)那么酷的功能,怎么能讓ie攔住我們的腳步,用falsh封裝吧，感興趣的你可不要錯(cuò)過了哈2013-02-02
使用JavaScript鏈?zhǔn)骄幊虒?shí)現(xiàn)模擬Jquery函數(shù)
這篇文章主要介紹了使用JavaScript鏈?zhǔn)骄幊虒?shí)現(xiàn)模擬Jquery函數(shù)的方法及源碼分享，非常的不錯(cuò)，推薦給大家。2014-12-12
JavaScript設(shè)計(jì)模式之建造者模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之建造者模式介紹,將一個(gè)復(fù)雜對(duì)象的構(gòu)造與它的表示相分離,使同樣的創(chuàng)建過程可有不同的表示,這就叫做建造者模式,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了js顯示文本框提示文字的方法,涉及javascript鼠標(biāo)事件及樣式操作的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
這篇文章主要是來(lái)和大家分享10個(gè)JavaScript中的編程小技巧，文中的示例代碼簡(jiǎn)潔易懂，對(duì)我們學(xué)習(xí)JavaScript開發(fā)有一定的幫助，需要的可以參考一下2023-05-05