第二百五十節，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;
}