2023年7月9日发(作者：)
Bootstrap每天必学之导航1、导航（基础样式）导航对于⼀位前端⼈员来说并不陌⽣。可以说导航是⼀个⽹站重要的元素组件之⼀，可以便于⽤户查找⽹站所提供的各项功能服务。导航的制作⽅法也是千奇百怪，五花⼋门。在这⼀节中将向⼤家介绍如何使⽤Bootstrap框架制作各式各样的导航。在Bootstrap框架将导航独⽴出来成为⼀个导航组件，根据不同的版本，可以找到对应的源码：☑ LESS版本：对应的源⽂件是☑ Sass版本：对应的源⽂件是_☑ 编译后版本：对应源码是⽂件第3450⾏～第3641⾏导航基础样式Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外⼀个样式才会有效，⽐如“nav-tabs”、“nav-pills”之类。⽐如⼀个tab导航条的例⼦，他的实现⽅法就是为ul标签加⼊.nav和nav-tabs两个类样式。
/源码请查阅⽂件第3450⾏~第3493⾏/.nav { padding-left: 0; margin-bottom: 0; list-style: none;}.nav> li { position: relative; display: block;}.nav> li > a { position: relative; display: block; padding: 10px 15px;}.nav> li >a:hover,.nav> li >a:focus { text-decoration: none; background-color: #eee;}.nav>ed> a { color: #999;}.nav>ed>a:hover,.nav>ed>a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color: transparent;}.nav .open > a,.nav .open >a:hover,.nav .open >a:focus { background-color: #eee; border-color: #428bca;}.nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}.nav> li > a >img { max-width: none;}2、导航（标签形tab导航）标签形导航，也称为选项卡导航。特别是在很多内容分块显⽰的时，使⽤这种选项卡来分组⼗分适合。标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名，如：运⾏的效果如下所⽰：实现原理⾮常的简单，将菜单项（li）按块显⽰，并且让他们在同⼀⽔平上排列，然后定义⾮⾼亮菜单的样式和⿏标悬浮效果。代码如下：/源码请查阅⽂件第3494⾏～第3509⾏/.nav-tabs {border-bottom: 1px solid #ddd;}.nav-tabs > li {float: left;margin-bottom: -1px;}.nav-tabs > li > a {margin-right: 2px;line-height: 1.42857143;border: 1px solid transparent;border-radius: 4px 4px 0 0;}.nav-tabs > li >a:hover {border-color: #eee #eee #ddd;}其实上例的效果和我们平时看到的选项卡效果并不⼀致。⼀般情况之下，选项卡教会有⼀个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”即可：运⾏效果如下：对应样式代码如下：/源码请查阅⽂件第3510⾏～第3518⾏/.nav-tabs >> a,.nav-tabs >>a:hover,.nav-tabs >>a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent;}除了当前项之外，有的选项卡还带有禁⽤状态，实现这样的效果，只需要在标签项上添加“class=”disabled””即可：运⾏效果如下：实现这个效果的样式，在默认样式“.nav”中就带有：/源码请查看⽂件第3469⾏～第3478⾏/.nav>ed> a { color: #999;}.nav>ed>a:hover,.nav>ed>a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color: transparent;}注意：我们看到的选项卡效果，点击菜单项就可以切换内容，如果要实现这样的效果需要配合js插件，这部分将在后⾯的博客中会介绍。3、导航（胶囊形(pills)导航）胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的⼤众形导航。当前项⾼亮显⽰，并带有圆⾓效果。其实现⽅法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可：实现效果样式代码：/源码请查阅⽂件第3563⾏～第3577⾏/.nav-pills > li { float: left;}.nav-pills > li > a { border-radius: 4px;}.nav-pills > li + li { margin-left: 2px;}.nav-pills >> a,.nav-pills >>a:hover,.nav-pills >>a:focus {color: #fff; background-color: #428bca;}4、导航（垂直堆叠的导航）在实际运⽤当中，除了⽔平导航之外，还有垂直导航，就类似前⾯介绍的垂直排列按钮⼀样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加⼀个“nav-stacked”类名即可(stacked就是堆的意思)：运⾏效果如下：垂直堆叠导航与胶囊形导航相⽐，主要是让导航项不浮动，让其垂直排列，然后给相邻导航项留有⼀定的间距：/源码请查阅⽂件第3578⾏～第3584⾏/.nav-stacked > li { float: none;}.nav-stacked > li + li { margin-top: 2px; margin-left: 0;}⼤家是否还记得，在下拉菜单⼀节中，下拉菜单组与组之间有⼀个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“”即可：运⾏效果如下：实现样式：/源码请查阅⽂件第3485⾏～3490⾏/.nav .nav-divider {height: 1px;margin: 9px 0;overflow: hidden;background-color: #e5e5e5;}或许你会问，如果我在”nav-tabs”上添加“nav-stacked”是不是也能实现垂直的标签选项导航呢？答案是：在bootstrap V2.x版本可以，但在Bootstrap V3.x版本将这个效果取消了，可能作者觉得垂直选择项并不太常见，也不美观吧。4、⾃适应导航（使⽤）⾃适应导航指的是导航占据容器全部宽度，⽽且菜单项可以像表格的单元格⼀样⾃适应宽度。⾃适应导航和前⾯使⽤“btn-group-justified”制作的⾃适应按钮组是⼀样的。只不过在制作⾃适应导航时更换了另⼀个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在⼀起使⽤。如：运⾏效果如下：⾃适应导航（实现原理）实现原理并不难，列表（- ）上设置宽度为“100%”，然后每个菜单项(
- )设置了“display:table-cell”，让列表项以模拟表格单元格的形式显⽰：/源码请查阅⽂件第3585⾏～第3607⾏/.nav-justified { width: 100%;}.nav-justified > li { float: none;}.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}@media (min-width: 768px) { .nav-justified > li { display: table-cell; width: 1%; } .nav-justified > li > a { margin-bottom: 0; }}这⾥有⼀个媒体查询条件：“@media (min-width:768px){…}”表⽰⾃适应导航仅在浏览器视窗宽度⼤于768px才能按上图风格显⽰。当你的浏览器视窗宽度⼩于768px的时候，将会按下图的风格展⽰：从上图效果可以得知，“nav-tabs”和“nav-justified”配合在⼀起使⽤，也就是⾃适应选项卡导航，浏览器视窗宽度⼩于768px时，在样式上做了另外的处理。/源码请查阅⽂件第3519⾏～第3562⾏/.-justified { width: 100%; border-bottom: 0;}.-justified > li { float: none;}.-justified > li > a { margin-bottom: 5px; text-align: center;}.-justified > .dropdown .dropdown-menu { top: auto; left: auto;}@media (min-width: 768px) { .-justified > li { display: table-cell; width: 1%; }.-justified > li > a { margin-bottom: 0; }}.-justified > li > a { margin-right: 0; border-radius: 4px;}.-justified > .active > a,.-justified > .active >a:hover,.-justified > .active >a:focus { border: 1px solid #ddd;}@media (min-width: 768px) { .-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }.-justified > .active > a,.-justified > .active >a:hover,.-justified > .active >a:focus { border-bottom-color: #fff; }}5、导航加下拉菜单（⼆级导航）前⾯介绍的都是使⽤Bootstrap框架制作⼀级导航，但很多时候，在Web页⾯中是离不开⼆级导航的效果。那么在Bootstrap框架中制作⼆级导航就更容易了。只需要将li当作⽗容器，使⽤类名“dropdown”，同时在li中嵌套另⼀个列表ul，使⽤前⾯介绍下拉菜单的⽅法就可以：运⾏效果如下：通过浏览器调试⼯具，不难发现，点击有⼆级导航的菜单项，会⾃动添加“open”类名，再次点击就会删除添加的“open”类名：简单点来说，就是依靠这个类名来控制⼆级导航显⽰与否，并且设置了背景⾊和边框：/源码查看⽂件第3479⾏～3484⾏/.nav .open > a,.nav .open >a:hover,.nav .open >a:focus {background-color: #eee;border-color: #428bca;}⼤家回忆⼀下，在制作下拉菜单时，可以⽤分隔线，那么在⼆级导航中是否可以呢？我们⼀起来看看：不⽤再说太多，只需要添加“ ”这样的⼀个空标签就可以了。运⾏效果如下：/源码请查看⽂件第3485⾏～第3490⾏/.nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}6、⾯包屑式导航⾯包屑(Breadcrumb)⼀般⽤于导航，主要是起的作⽤是告诉⽤户现在所处页⾯的位置（当前位置）。在Bootstrap框架中⾯包屑也是⼀个独⽴模块组件：LESS版本：对应源⽂件ss版本：对应源⽂件_编译出来的版本：源码对应⽂件第4112⾏～第4129⾏使⽤⽅法：使⽤⽅式就很简单，为ol加⼊breadcrumb类：想想看，当前菜单项是不需要链接的，所以也就不⽤a标签了。实现原理：看来不错吧！作者是使⽤li+li:before实现li与li之间的分隔符，所以这种⽅案在IE低版本就惨了（不⽀持）。/源码查看⽂件第4112⾏～第4129⾏/.breadcrumb {padding: 8px 15px;margin-bottom: 20px;list-style: none;background-color: #f5f5f5;border-radius: 4px;}.breadcrumb> li {display: inline-block;}如果⼤家还想深⼊学习，可以点击进⾏学习，再为⼤家附两个精彩的专题： 以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。
发布者：admin，转转请注明出处：http://www.yc00.com/news/1688853816a176698.html
评论列表（0条）