第二百五十節,Bootstrap項目實戰--響應式導航
Bootstrap項目實戰--響應式導航
學習要點:
1.響應式導航
一.響應式導航
基本導航組件+響應式
第一步,聲明導航區域,設置導航默認樣式,設置導航條固定在頂部
navbar樣式class類,寫在導航<nav>裏,聲明導航區域(項目實戰Bootstrap)
navbar-default樣式class類,寫在導航<nav>裏,設置導航默認樣式(項目實戰Bootstrap)
navbar-fixed-top樣式class類,寫在導航<nav>裏,設置導航條固定在頂部(項目實戰Bootstrap)
第二步,設置導航內容區域固定布局,最大寬度1140
container樣式class類,寫在導航內容區域<div>裏,設置導航內容區域固定布局,最大寬度1140(項目實戰Bootstrap)
第三步,設置導航標題區域
navbar-header樣式class類,寫在導航標題區域<div>裏,設置導航標題區域樣式(項目實戰Bootstrap)
navbar-brand樣式class類,寫在導航標題內容<a>裏,設置導航標題內容樣式(項目實戰Bootstrap)
navbar-toggle樣式class類,寫在導航標題<button>裏,設置導航標題裏響應式按鈕樣式(項目實戰Bootstrap)
icon-bar樣式class類,寫在導航標題按鈕<span>裏,設置導航響應式按鈕文字樣式,也就是一橫,寫3個就是三橫(項目實戰Bootstrap)
第四步,設置導航折疊區域來寫導航列表
collapse樣式class類,寫在導航列表區域<div>裏,設置導航列表折疊區域(項目實戰Bootstrap)
navbar-collapse樣式class類,寫在導航列表區域<div>裏,設置導航列表折疊樣式(項目實戰Bootstrap)
nav樣式class類,寫在導航列表區域<ul>裏,設置導航列表區域(項目實戰Bootstrap)
navbar-nav樣式class類,寫在導航列表區域<ul>裏,設置導航列表樣式(項目實戰Bootstrap)
navbar-right樣式class類,寫在導航列表區域<ul>裏,設置導航列表右浮動(項目實戰Bootstrap)
active樣式class類,寫在導航列表區域<li>裏,設置當前導航列表項首選(項目實戰Bootstrap)
glyphicon樣式class類,寫在導航列表區域<li>裏,設置當前導航列表項圖標(項目實戰Bootstrap)
第五步,事件綁定
將導航列表的折疊區域設置一個id,在導航按鈕上關聯折疊區域的id
data-target="#navbar-collapse"寫在導航按鈕<button>裏,將按鈕事件關聯折疊區域的id(項目實戰Bootstrap)
data-toggle="collapse"寫在導航按鈕<button>裏,設置導航事件,點擊折疊和收縮(項目實戰Bootstrap)
html
<nav class="navbar navbar-default navbar-fixed-top"> <!--聲明導航區域,設置導航默認樣式,設置導航條固定在頂部--> <div class="container"> <!--設置固定布局,最大寬度1140--> <div class="navbar-header"> <!--設置導航標題區域--> <a href="#" class="navbar-brand" style="padding:0;"><img src="img/logo.png" alt="瓢城企訓網"></a> <!--設置導航標內容--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <!--設置導航按鈕--> <span class="icon-bar"></span> <!--設置導航按鈕樣式--> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <!--設置導航折疊區域,設置導航折疊樣式--> <ul class="nav navbar-nav navbar-right" style="margin-top:0"> <!--設置列表區域,導航列表默認樣式,導航列表右浮動--> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首頁</a></li> <!--設置當前列表首先--> <li><a href="#"><span class="glyphicon glyphicon-list"></span> 資訊</a></li> <!--設置當前列表圖標--> <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 關於</a></li> </ul> </div> </div> </nav>
css
@charset "utf-8"; /*導航部分-------------------------------------------------------------------------------------------------------------*/ /*導航區域背景色*/ .navbar{ background-color: #2056AC; } /*導航a首選標簽,聚集光標和鼠標放上去背景色*/ .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{ background-color: #FE7C19; color: #FFFFFF; } /*導航a標簽,聚集光標和鼠標放上去背景色*/ .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{ background-color: #FE7C19; color: #FFFFFF; } /*導航條文字顏色*/ .navbar-default .navbar-nav > li > a{ color: #FFFFFF; } /*導航條按鈕背景色*/ .navbar-toggle, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ background-color: #ddd; } /*導航條按鈕文字三橫背景和文字顏色*/ .navbar-default .navbar-toggle .icon-bar{ background-color: #f5f5f5; border-radius: 1px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); display: block; height: 2px; width: 18px; }
第二百五十節,Bootstrap項目實戰--響應式導航