Bootstrap源码解读导航条（7）
源码解读Bootstrap导航条
基础导航条
要制作一个基础导航条，要在制作导航的列表<ulclass="nav">基础上添加类名“navbar-nav”，然后在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”。例如：
<divclass="navbarnavbar-default"role="navigation"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="##">首页</a></li> <li><ahref="##">网站内容</a></li> <li><ahref="##">关于我们</a></li> </ul> </div>
“.navbar”样式的主要功能就是设置左右padding和圆角等效果，实现源码如下：
.navbar{
position:relative;
min-height:50px;
margin-bottom:20px;
border:1pxsolidtransparent;
}
导航条的颜色都是通过“.navbar-default”来进行控制，实现源码如下：
.navbar-default{
background-color:#f8f8f8;
border-color:#e7e7e7;
}
“.navbar-nav”样式是在导航“.nav”的基础上重新调整了菜单项的浮动与内外边距。而颜色和其他样式是通过配合父容器“navbar-default”来一起实现。实现源码如下：
.navbar-default.navbar-nav>li>a{
color:#777;
}
.navbar-default.navbar-nav>li>a:hover,
.navbar-default.navbar-nav>li>a:focus{
color:#333;
background-color:transparent;
}
.navbar-default.navbar-nav>.active>a,
.navbar-default.navbar-nav>.active>a:hover,
.navbar-default.navbar-nav>.active>a:focus{
color:#555;
background-color:#e7e7e7;
}
.navbar-default.navbar-nav>.disabled>a,
.navbar-default.navbar-nav>.disabled>a:hover,
.navbar-default.navbar-nav>.disabled>a:focus{
color:#ccc;
background-color:transparent;
}
导航条标题
通过“navbar-header”和“navbar-brand”来实现，例如：
<divclass="navbarnavbar-default"role="navigation"> <divclass="navbar-header"> <ahref="##"class="navbar-brand">标题</a> </div> <ulclass="navnavbar-nav"> ... </ul> </div>
主要是加大了字体设置，并且设置了最大宽度，实现源码如下：
.navbar-brand{
float:left;
height:50px;
padding:15px15px;
font-size:18px;
line-height:20px;
}
.navbar-brand:hover,
.navbar-brand:focus{
text-decoration:none;
}
.navbar-brand>img{
display:block;
}
@media(min-width:768px){
.navbar>.container.navbar-brand,
.navbar>.container-fluid.navbar-brand{
margin-left:-15px;
}
}
在默认导航条（navbar-default）下，对navbar-brand也做了颜色处理，实现源码如下：
.navbar-default.navbar-brand{
color:#777;
}
.navbar-default.navbar-brand:hover,
.navbar-default.navbar-brand:focus{
color:#5e5e5e;
background-color:transparent;
}
带表单的导航条
在navbar容器中放置一个带有“navbar-form”类名的表单，例如：
<divclass="navbarnavbar-default"role="navigation"> <ulclass="navnavbar-nav"> ... </ul> <formaction="##"class="navbar-formnavbar-left"rol="search"> <divclass="form-group"> <inputtype="text"class="form-control"placeholder="请输入关键词"/> </div> <buttontype="submit"class="btnbtn-default">搜索</button> </form> </div>
实现源码如下：
.navbar-form{
padding:10px15px;
margin-top:8px;
margin-right:-15px;
margin-bottom:8px;
margin-left:-15px;
border-top:1pxsolidtransparent;
border-bottom:1pxsolidtransparent;
-webkit-box-shadow:inset01px0rgba(255,255,255,.1),01px0rgba(255,255,255,.1);
box-shadow:inset01px0rgba(255,255,255,.1),01px0rgba(255,255,255,.1);
}
@media(min-width:768px){
.navbar-form.form-group{
display:inline-block;
margin-bottom:0;
vertical-align:middle;
}
.navbar-form.form-control{
display:inline-block;
width:auto;
vertical-align:middle;
}
.navbar-form.form-control-static{
display:inline-block;
}
.navbar-form.input-group{
display:inline-table;
vertical-align:middle;
}
.navbar-form.input-group.input-group-addon,
.navbar-form.input-group.input-group-btn,
.navbar-form.input-group.form-control{
width:auto;
}
.navbar-form.input-group>.form-control{
width:100%;
}
.navbar-form.control-label{
margin-bottom:0;
vertical-align:middle;
}
.navbar-form.radio,
.navbar-form.checkbox{
display:inline-block;
margin-top:0;
margin-bottom:0;
vertical-align:middle;
}
.navbar-form.radiolabel,
.navbar-form.checkboxlabel{
padding-left:0;
}
.navbar-form.radioinput[type="radio"],
.navbar-form.checkboxinput[type="checkbox"]{
position:relative;
margin-left:0;
}
.navbar-form.has-feedback.form-control-feedback{
top:0;
}
}
@media(max-width:767px){
.navbar-form.form-group{
margin-bottom:5px;
}
.navbar-form.form-group:last-child{
margin-bottom:0;
}
}
@media(min-width:768px){
.navbar-form{
width:auto;
padding-top:0;
padding-bottom:0;
margin-right:0;
margin-left:0;
border:0;
-webkit-box-shadow:none;
box-shadow:none;
}
}
“navbar-left”可以让导航条里的表单左浮动，“navbar-right”为右浮动。实现源码如下：
@media(min-width:768px){
.navbar-left{
float:left!important;
}
.navbar-right{
float:right!important;
}
}
固定导航条
要将导航条固定在浏览器顶部或底部，只需要在制作导航条最外部容器navbar上追加对应的类名即可：
.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部
例如：<divclass="navbarnavbar-defaultnavbar-fixed-top"role="navigation">...</div>
实现原理就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed属性，并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0。实现源码如下：
.navbar-fixed-top,
.navbar-fixed-bottom{
position:fixed;
right:0;
left:0;
z-index:1030;
}
@media(min-width:768px){
.navbar-fixed-top,
.navbar-fixed-bottom{
border-radius:0;
}
}
.navbar-fixed-top{
top:0;
border-width:001px;
}
.navbar-fixed-bottom{
bottom:0;
margin-bottom:0;
border-width:1px00;
}
不过我们可以发现，页面主内容顶部和底部都被固定导航条给遮住了。我们可以在body上加上样式：padding-top:70px;或padding-bottom:70px;来避免这种情况。
响应式导航条
响应式导航条比较复杂，宽屏是水平平铺显示，窄屏时收缩垂直显示，使用方法如下：
1.把在窄屏时需要折叠的内容包裹在带一个div内，并且为这个div追加“collapse”、“navbar-collapse”两个类名。最后为这个div添加一个class类名或者id名。
2.定制在窄屏时要显示的图标样式。
3.为button添加data-target=”.类名”或data-target=”#id名”，是类名还是id名由需要折叠的div来决定。
完整示例如下：
<divclass="navbarnavbar-default"role="navigation"> <divclass="navbar-header"> <!--.navbar-toggle样式用于toggle收缩的内容，即nav-collapsecollapse样式所在元素--> <buttonclass="navbar-toggle"type="button"data-toggle="collapse"data-target=".navbar-responsive-collapse"> <spanclass="sr-only">ToggleNavigation</span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <!--确保无论是宽屏还是窄屏，navbar-brand都显示--> <ahref="##"class="navbar-brand">Bootstrap中文网</a> </div> <!--屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。--> <divclass="collapsenavbar-collapsenavbar-responsive-collapse"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="##">Bootstrap2</a></li> <li><ahref="##">Bootstrap3</a></li> <li><ahref="##">Bootstrap4</a></li> <li><ahref="##">网站实例</a></li> </ul> </div> </div>
反色导航条
将navbar-deafult类名换成navbar-inverse即可。只是导航条的背景色和文本做了修改。
带页码的分页导航
在ul标签上加入pagination方法即可。例如：
<ulclass="pagination"> <li><ahref="#">«第一页</a></li> <li><ahref="#">2</a></li> <li><ahref="#">3</a></li> <liclass="active"><ahref="#">4</a></li> <li><ahref="#">5</a></li> <liclass="disabled"><ahref="#">最后一页»</a></li> </ul>
实现源码如下：
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus{
z-index:2;
color:#fff;
cursor:default;
background-color:#428bca;
border-color:#428bca;
}
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus{
color:#999;
cursor:not-allowed;
background-color:#fff;
border-color:#ddd;
}
在ul上追加“pagination-lg”可以让分页导航变大，“pagination-sm”可以让分页导航变小。实现源码如下：
.pagination-lg>li>a,
.pagination-lg>li>span{
padding:10px16px;
font-size:18px;
}
.pagination-lg>li:first-child>a,
.pagination-lg>li:first-child>span{
border-top-left-radius:6px;
border-bottom-left-radius:6px;
}
.pagination-lg>li:last-child>a,
.pagination-lg>li:last-child>span{
border-top-right-radius:6px;
border-bottom-right-radius:6px;
}
.pagination-sm>li>a,
.pagination-sm>li>span{
padding:5px10px;
font-size:12px;
}
.pagination-sm>li:first-child>a,
.pagination-sm>li:first-child>span{
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.pagination-sm>li:last-child>a,
.pagination-sm>li:last-child>span{
border-top-right-radius:3px;
border-bottom-right-radius:3px;
}
翻页分页导航
为ul标签加入pager类即可。例如：
<ulclass="pager"> <li><ahref="#">«上一页</a></li> <li><ahref="#">下一页»</a></li> </ul>
实现源码如下：
.pager{
padding-left:0;
margin:20px0;
text-align:center;
list-style:none;
}
.pagerli{
display:inline;
}
.pagerli>a,
.pagerli>span{
display:inline-block;
padding:5px14px;
background-color:#fff;
border:1pxsolid#ddd;
border-radius:15px;
}
.pagerli>a:hover,
.pagerli>a:focus{
text-decoration:none;
background-color:#eee;
}
导航默认居中，如果要一个居左一个居右，可以在li分别上追加previous和next类名。实现源码如下：
.pager.next>a,
.pager.next>span{
float:right;
}
.pager.previous>a,
.pager.previous>span{
float:left;
}
本文系列教程整理到：Bootstrap基础教程专题中，欢迎点击学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。