HTML5+CSS3網頁設計與制作使用Bootstrap開源框架快速搭建響應式網頁能夠學習Bootstrap的導航條組件，利用Bootstrap導航條組件相關內容，完成不同樣式導航條的制作；能夠利用Bootstrap的JavaScript插件，對導航條進行移動化（響應式）改造。任務目標

使用Bootstrap組件和JS插件制作網頁導航條本次任務要求通過學習Bootstrap的導航條及相關組件，完成項目網頁的導航條制作。完成后的導航條如圖2-3所示。任務描述圖2-3移動端和電腦端導航條測試效果圖

使用Bootstrap組件和JS插件制作網頁導航條在上一任務的基礎上，完成D清單頁面導航條制作。需要：學習Bootstrap的菜單框架、菜單樣式、字體圖標等知識；學習Bootstrap的響應式菜單、下拉菜單等JavaScript插件知識；綜合運用Bootstrap相關知識，完成D清單頁面響應式導航條制作。任務分析

使用Bootstrap組件和JS插件制作網頁導航條知識與技能準備網頁的組件，是指包括下拉菜單、導航、警告框、彈出框等可以在各個網頁上常見的一般可以復用的頁面元素。為了完成頁面導航條的制作，需要學習Bootstrap組件部分的相關知識，可以查閱Bootstrap框架中文網址

的“組件”

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

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

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