第二百五十节，Bootstrap项目实战--响应式导航
Bootstrap项目实战--响应式导航
学习要点：
1.响应式导航
一．响应式导航
基本导航组件+响应式
第一步，声明导航区域，设置导航默认样式，设置导航条固定在顶部
navbar样式class类，写在导航
navbar-default样式class类，写在导航
navbar-fixed-top样式class类，写在导航
第二步，设置导航内容区域固定布局，最大宽度1140 第三步，设置导航标题区域 第四步，设置导航折叠区域来写导航列表 第五步，事件绑定 html css
container样式class类，写在导航内容区域
navbar-header样式class类，写在导航标题区域
navbar-brand样式class类，写在导航标题内容里，设置导航标题内容样式(项目实战Bootstrap)
navbar-toggle样式class类，写在导航标题
icon-bar样式class类，写在导航标题按钮里，设置导航响应式按钮文字样式，也就是一横，写3个就是三横(项目实战Bootstrap)
collapse样式class类，写在导航列表区域
navbar-collapse样式class类，写在导航列表区域
nav样式class类，写在导航列表区域里，设置导航列表区域(项目实战Bootstrap)
navbar-nav样式class类，写在导航列表区域里，设置导航列表样式(项目实战Bootstrap)
navbar-right样式class类，写在导航列表区域里，设置导航列表右浮动(项目实战Bootstrap)
active样式class类，写在导航列表区域
glyphicon样式class类，写在导航列表区域
将导航列表的折叠区域设置一个id,在导航按钮上关联折叠区域的id
data-target="#navbar-collapse"写在导航按钮
data-toggle="collapse"写在导航按钮<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
@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;
}