HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用Bootstrap開源框架快速搭建響應(yīng)式網(wǎng)頁能夠?qū)W習(xí)Bootstrap的導(dǎo)航條組件，利用Bootstrap導(dǎo)航條組件相關(guān)內(nèi)容，完成不同樣式導(dǎo)航條的制作；能夠利用Bootstrap的JavaScript插件，對(duì)導(dǎo)航條進(jìn)行移動(dòng)化（響應(yīng)式）改造。任務(wù)目標(biāo)

使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條本次任務(wù)要求通過學(xué)習(xí)Bootstrap的導(dǎo)航條及相關(guān)組件，完成項(xiàng)目網(wǎng)頁的導(dǎo)航條制作。完成后的導(dǎo)航條如圖2-3所示。任務(wù)描述圖2-3移動(dòng)端和電腦端導(dǎo)航條測(cè)試效果圖

使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條在上一任務(wù)的基礎(chǔ)上，完成D清單頁面導(dǎo)航條制作。需要：學(xué)習(xí)Bootstrap的菜單框架、菜單樣式、字體圖標(biāo)等知識(shí)；學(xué)習(xí)Bootstrap的響應(yīng)式菜單、下拉菜單等JavaScript插件知識(shí)；綜合運(yùn)用Bootstrap相關(guān)知識(shí)，完成D清單頁面響應(yīng)式導(dǎo)航條制作。任務(wù)分析

使用Bootstrap組件和JS插件制作網(wǎng)頁導(dǎo)航條知識(shí)與技能準(zhǔn)備網(wǎng)頁的組件，是指包括下拉菜單、導(dǎo)航、警告框、彈出框等可以在各個(gè)網(wǎng)頁上常見的一般可以復(fù)用的頁面元素。為了完成頁面導(dǎo)航條的制作，需要學(xué)習(xí)Bootstrap組件部分的相關(guān)知識(shí)，可以查閱Bootstrap框架中文網(wǎng)址

的“組件”

來學(xué)習(xí)Bootstrap的組件。根據(jù)本次任務(wù)的要求，為了能夠順利應(yīng)用Bootstrap組件來制作招生頁面的導(dǎo)航條，我們需要先學(xué)習(xí)Bootstrap的導(dǎo)航條組件和字體圖標(biāo)等相關(guān)知識(shí)。Bootstrap中的導(dǎo)航組件都共同使用一個(gè)已經(jīng)寫好了的nav類，狀態(tài)類也是共用的。通過修改nav類的樣式我們就可以得到我們想要的樣式。知識(shí)與技能準(zhǔn)備1、導(dǎo)航條的框架樣式導(dǎo)航條框架包括創(chuàng)建一個(gè)導(dǎo)航條欄底色和布局容器，Bootstrap為導(dǎo)航條設(shè)置了.navbar和.navbar-default類預(yù)定義樣式來設(shè)置導(dǎo)航條的高寬、邊框、邊距和導(dǎo)航項(xiàng)背景色等格式，.container布局容器則已經(jīng)在任務(wù)2中學(xué)習(xí)了。1234567891011121314.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1pxsolidtransparent;}/*在平板以上設(shè)備增加了border-radius:4px;*/.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7;}/*設(shè)置導(dǎo)航條底色，反色樣式為.navbar-inverse，你也可以自己設(shè)置*/.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px;}/*用于抵消.container和.container-fluid布局容器設(shè)置的兩個(gè)邊距，一般用于導(dǎo)航條的左右兩端*/知識(shí)與技能準(zhǔn)備1、導(dǎo)航條的框架樣式應(yīng)用時(shí)可以參考如下代碼：完成后的效果圖如下：12345<navclass="navbarnavbar-default"> <divclass="container"> <divclass="navbar-header">頭部</div> </div></nav>圖2-3-1導(dǎo)航條框架效果圖知識(shí)與技能準(zhǔn)備2、導(dǎo)航條內(nèi)容優(yōu)化樣式在搭建好框架后，我們需要在導(dǎo)航條中創(chuàng)建各種內(nèi)容。2.1列表導(dǎo)航使用<ul>列表來創(chuàng)建導(dǎo)航是行業(yè)的習(xí)慣，為此，Bootstrap也為使用<ul>創(chuàng)建導(dǎo)航條創(chuàng)建了各種樣式，主要以.nav和.navbar-bar類為主，且一般會(huì)同時(shí)使用。2.2常用格式優(yōu)化為了保證導(dǎo)航容器內(nèi)的相關(guān)內(nèi)容有正確的行距和顏色等格式，Bootstrap預(yù)設(shè)了一些常用的樣式格式。某網(wǎng)站導(dǎo)航條效果圖如圖2-3-3所示，請(qǐng)使用Bootstrap導(dǎo)航條組件完成其網(wǎng)頁效果的實(shí)現(xiàn)?？蓞⒖既缦路绞綄?shí)現(xiàn)：（1）搭建導(dǎo)航框架；（2）創(chuàng)建列表，并輸入相應(yīng)內(nèi)容；（3）利用Bootstrap的導(dǎo)航條格式優(yōu)化樣式來設(shè)置內(nèi)容樣式。課堂練習(xí)2-3-1使用Bootstrap制作如下導(dǎo)航條圖2-3-3課堂練習(xí)2-3-1效果圖知識(shí)與技能準(zhǔn)備3、字體圖標(biāo)或品牌圖片3.1字體圖標(biāo)在配置環(huán)境的時(shí)候，也許你已經(jīng)留意到了Bootstrap存放字體的文件夾，Bootstrap提供了Glyphicons字體圖標(biāo)，包括250多個(gè)來自GlyphiconHalflings的字體圖標(biāo)。GlyphiconsHalflings一般是收費(fèi)的，但是他們的作者允許Bootstrap免費(fèi)使用。部分圖標(biāo)樣式可以看下圖，你也可以在

查看所有的圖標(biāo)樣式。圖2-3-4Bootstrap提供的字體圖標(biāo)知識(shí)與技能準(zhǔn)備3、字體圖標(biāo)或品牌圖片每一個(gè)圖標(biāo)都有一個(gè)獨(dú)立的類，圖標(biāo)類不能和其它組件直接聯(lián)合使用，它們不能在同一個(gè)元素上與其他類共同存在。所以，要使用圖標(biāo)必須創(chuàng)建一個(gè)嵌套的<span>標(biāo)簽，并將圖標(biāo)類應(yīng)用到這個(gè)<span>標(biāo)簽上。為了有正確的padding值，務(wù)必在圖標(biāo)和文本之間添加一個(gè)空格?？蓞⒖既缦麓a：aria-hidden=“true”為無障礙屬性，在項(xiàng)目5中會(huì)介紹。3.2品牌圖片將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方（頭部）替換為<img>元素即可展示自己的品牌圖標(biāo)。由于.navbar-brand已經(jīng)被設(shè)置了內(nèi)補(bǔ)（padding）和高度（height），所以在使用時(shí)需要設(shè)置自己的CSS代碼來替換默認(rèn)的樣式?？蓞⒖既缦翪SS樣式代碼：1<spanclass="glyphiconglyphicon-search"aria-hidden="true"></span>12.navbar-brand{padding:5px!important;}.navbar-brand>img{height:40px;}在上一個(gè)課堂練習(xí)的基礎(chǔ)上，完成如下效果圖：在Login前面添加字體圖標(biāo)，在OlimpiaTrucks前面添加品牌圖片?？蓞⒖既缦路绞綄?shí)現(xiàn)：（1）添加品牌圖片刪除原有的文字品牌標(biāo)志，添加<img>標(biāo)簽，圖片文件在4.3-2文件夾中；修改<img>的格式，讓其在導(dǎo)航條上有正確的大小和邊距，CSS代碼可參考上面品牌圖片內(nèi)容中涉及的代碼；（2）添加字體圖標(biāo)參考字體圖標(biāo)內(nèi)容中的<span>標(biāo)簽代碼，修改相應(yīng)的樣式即可。課堂練習(xí)2-3-2在導(dǎo)航條添加圖標(biāo)和品牌圖片圖2-3-5帶logo和圖標(biāo)的導(dǎo)航條知識(shí)與技能準(zhǔn)備4、為手機(jī)端創(chuàng)建菜單圖標(biāo)將課堂練習(xí)2-3-2中完成的導(dǎo)航條在手機(jī)端（<768px），我們會(huì)發(fā)現(xiàn)導(dǎo)航條全部垂直排列了，如下圖：很明顯，這個(gè)并不是我們要的效果。Bootstrap已經(jīng)為我們想好了一切，為此，你只需要添加適當(dāng)?shù)腍TML代碼即可得到你要的結(jié)果。圖2-3-6移動(dòng)端導(dǎo)航條初始化效果知識(shí)與技能準(zhǔn)備4、為手機(jī)端創(chuàng)建菜單圖標(biāo)（1）在navbar-header類的<div>標(biāo)簽中添加<button>按鈕，并為其添加navbar-toggle和collapsed類；（2）用<div>將要隱藏的列表包裹，并為其添加collapse和navbar-collapse類；（3）Bootstrap采用的是通過單擊鼠標(biāo)按鈕來顯示和隱藏的下拉菜單，所以其依賴于jquery.js和bootstrap.js文件。為此，我們需要在<button>中添加如下參數(shù)：data-toggle="collapse"：觸發(fā)事件data-target="#bs-example-navbar-collapse-1"：觸發(fā)事件的目標(biāo)aria-expanded="false"：用于無障礙設(shè)備檢查切換動(dòng)作的擴(kuò)張屬性data屬性是Bootstrap的API，是我們使用BootstrapJS的首選方式，你可以僅僅通過data屬性API就能使用所有Bootstrap中的插件，而不用寫一行JavaScript代碼，此處應(yīng)用了BootstrapJS的collapse插件。aria-expanded是W3CWAI-ARIA（無障礙）的一個(gè)擴(kuò)展屬性，目前還是草案，可查看W3C文檔

了解詳細(xì)，如果你的網(wǎng)頁不針對(duì)網(wǎng)頁無障礙進(jìn)行設(shè)計(jì)的，則可省略此屬性。在navbar-collapse類的<div>標(biāo)簽中添加id屬性，并對(duì)應(yīng)data-target的值：id="bs-example-navbar-collapse-1"當(dāng)然你也可以自己定義屬性值，只需要與data-target的屬性對(duì)應(yīng)即可。將課堂練習(xí)2-3-2的導(dǎo)航條進(jìn)行響應(yīng)式處理，讓其在移動(dòng)端時(shí)按下圖效果顯示，且在單擊圖標(biāo)時(shí)能夠按下拉的方式顯示隱藏的導(dǎo)航條?？蓞⒖既缦麓a：課堂練習(xí)2-3-3導(dǎo)航條的移動(dòng)化1234567<!--在navbar-header類的<div>標(biāo)簽中添加--><buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button>1234<!--用此div包裹要隱藏的內(nèi)容--><divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"><!--隱藏的內(nèi)容--></div>圖2-3-7移動(dòng)端導(dǎo)航條知識(shí)與技能準(zhǔn)備5、滾動(dòng)監(jiān)聽滾動(dòng)監(jiān)聽插件是用來根據(jù)滾動(dòng)條所處的位置來自動(dòng)更新導(dǎo)航項(xiàng)的。當(dāng)滾動(dòng)導(dǎo)航條項(xiàng)對(duì)應(yīng)的內(nèi)容區(qū)域時(shí)該導(dǎo)航條項(xiàng)目會(huì)高亮顯示。該插件依賴于Bootstrap的scrollspy.js，該js文件已經(jīng)集成在了bootstrap.js中。在完成ID屬性來實(shí)現(xiàn)頁面內(nèi)鏈接的導(dǎo)航方式后，通過調(diào)用data屬性，即可完成對(duì)<body>內(nèi)相對(duì)定位元素的滾動(dòng)監(jiān)聽。為此，你需要將<body>設(shè)置為相對(duì)定位，同時(shí)為該標(biāo)簽添加data-spy="scroll"和data-target="#navbar-example"兩個(gè)屬性（#navbar-example可以根據(jù)具體情況修改，并與id值對(duì)應(yīng)）。（測(cè)試內(nèi)容部分可以只寫標(biāo)題，以添加高度的方式來占位）（1）添加樣式，將<body>設(shè)置為相對(duì)定位：（2）為<body>標(biāo)簽添加兩個(gè)data屬性：（3）將data-target="#navbar-example"屬性與滾動(dòng)監(jiān)聽對(duì)象——導(dǎo)航條組件進(jìn)行關(guān)聯(lián)，即在<nav>中加入id="navbar-example"，并將導(dǎo)航條固定在頂部（添加.navbar-fixed-top，并為body添加“padding-top:70px;”樣式屬性）。（4）為菜單列表添加高亮顯示樣式.nav-tabs，并設(shè)置列表的href屬性。課堂練習(xí)2-3-4在練習(xí)2.3-2的基礎(chǔ)上，為導(dǎo)航條制作滾動(dòng)監(jiān)聽效果1body{position:relative;}123456<ulclass="navnavbar-navnav-tabs"> <liclass="active"><ahref="#start">Start</a></li> <li><ahref="#trucks">OurTrucks</a></li> <li><ahref="#about">Aboutus</a></li> <li><ahref="#impressum">Impressum</a></li></ul>1<bodydata-spy="scroll"data-target="#navbar-example">1<navid="navbar-example"class="navbarnavbar-defaultnavbar-fixed-top">（5）在<nav>標(biāo)簽后添加測(cè)試代碼，為了效果明顯，建議為測(cè)試代碼添加邊框和高度。HTML測(cè)試代碼：為測(cè)試代碼添加CSS樣式：至此，滾動(dòng)監(jiān)聽練習(xí)完成。由于導(dǎo)航條固定在頂部的原因，我們會(huì)發(fā)現(xiàn)監(jiān)聽內(nèi)容與導(dǎo)航條項(xiàng)有70px的高度誤差。為解決此誤差，可以將body的“padding-top:70px;”樣式屬性添加到測(cè)試代碼各div的css樣式中。課堂練習(xí)2-3-4在練習(xí)2.3-2的基礎(chǔ)上，為導(dǎo)航條制作滾動(dòng)監(jiān)聽效果1234<divid="start">Start</div><divid="trucks">OurTrucks</div><divid="about">Aboutus</div><divid="impressum">Impressum</div>1234#start,#trucks,#about,#impressum{ border:1pxsolid#000; height:500px;}任務(wù)實(shí)施在任務(wù)2中，我們已經(jīng)對(duì)整個(gè)頁面進(jìn)行了布局，其中導(dǎo)航條的代碼如下：很明顯，這是利用Bootstrap的刪格系統(tǒng)進(jìn)行的左右布局，通過前面知識(shí)的學(xué)習(xí)，我們知道利用Bootstrap的導(dǎo)航條來完成任務(wù)，不需要進(jìn)行左右布局。為了快速完成任務(wù)，我們要使用用Bootstrap的導(dǎo)航條來完成本次任務(wù)，以提高開發(fā)速度，當(dāng)然代價(jià)是我要犧牲部分的設(shè)計(jì)功能，所以此任務(wù)完成的導(dǎo)航條與項(xiàng)目1完成的會(huì)有些許差別。我們發(fā)現(xiàn)，我們要做的導(dǎo)航條比較簡單，并不是Bootstrap提供的參考樣式。12345678<headerclass="header"> <navclass="container"> <divclass="row"> <divclass="col-lg-3col-md-3col-sm-4">logo</div> <divclass="col-lg-9col-md-9col-sm-8">nav</div> </div> </nav></header>任務(wù)實(shí)施1、搭建導(dǎo)航條框架由于任務(wù)中的導(dǎo)航條并沒有圓角邊框，所以要修改navbar-default樣式。另外導(dǎo)航條在1440px狀態(tài)下我們發(fā)現(xiàn)并不是占滿整行的，而是有一個(gè)最大的寬度，據(jù)此可以判斷采用的是container容器而不是container-fluid容器?？蓞⒖既缦麓a來搭建導(dǎo)航條框架：2、為導(dǎo)航條添加LOGO在navbar-henader中加入圖片即可。123456<headerclass="headernavbarnavbar-default"> <navclass="container"> <divclass="navbar-header">logo和圖標(biāo)</div> <ulclass="navnavbar-navnavbar-right">li</ul> </nav></header>123<aclass="navbar-brandmylogo"href="#"> <imgalt="D清單"src="img/logo.png"height="45px"></a>任務(wù)實(shí)施3、制作導(dǎo)航條列表列表信息根據(jù)內(nèi)容輸入即可，由于導(dǎo)航條是在右邊的，所以需要加入navbar-right樣式。4、修改樣式(1)我們需要去掉導(dǎo)航條的邊框，所以可以通過修改.navbar-default來實(shí)現(xiàn)。新建一個(gè)css樣式表，取名為mystyle.css，保存到css文件夾，并與index.html頁面建立關(guān)聯(lián)，即在該頁面<head>中加入<link>引入樣式文件：123456789<ulclass="navnavbar-navnavbar-right"> <liclass="active"><ahref="">首頁</a></li> <li><ahref="">關(guān)于</a></li> <li><ahref="">應(yīng)用特征</a></li> <li><ahref="">下載</a></li> <li><ahref=""