5-17 导航(胶囊形(pills)导航)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

导航(胶囊形(pills)导航)

胶囊形(pills)导航听起来有点别扭,因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示,并带有圆角效果。其实现方法和“nav-tabs”类似,同样的结构,只需要把类名“nav-tabs”换成“nav-pills”即可:

<ul class="nav nav-pills">
      <li class="active"><a href="##">Home</a></li>
      <li><a href="##">CSS3</a></li>
      <li><a href="##">Sass</a></li>
      <li><a href="##">jQuery</a></li>
      <li class="disabled"><a href="##">Responsive</a></li>
</ul>

实现效果样式代码:

/*源码请查阅bootstrap.css文件第3563行~第3577行*/

.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
  background-color: #428bca;
}

 

任务

我来试试:完成下面任务

编写代码实现“胶囊形导航”,效果图如下:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>胶囊形(pills)导航</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <ul class="nav nav-pills">
  11. <li class="active"><a href="##">Home</a></li>
  12. <li><a href="##">CSS3</a></li>
  13. <li><a href="##">Sass</a></li>
  14. <li><a href="##">jQuery</a></li>
  15. <li class="disabled"><a href="##">Responsive</a></li>
  16. </ul>
  17. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  18. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  19. </body>
  20. </html>
  1. body{margin:50px;padding:50px;}
下一节