bootstrap 基本的胶囊式导航菜单
1、模仿菜鸟教程的导航栏
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> </head> <style> .nav li a { color: #fff; } .nav li a:focus { opacity: 0.8; background-color: #96b97d; } .nav li a:hover { opacity: 0.8; background-color: #96b97d; } </style> <body> <div style="background-color: #96b97d;"> <ul class="nav nav-pills"> <li><a href="#">南风轻语</a></li> <li><a href="#">百越之地</a></li> <li><a href="#">风吹草动</a></li> <li><a href="#">大腹便便</a></li> <li><a href="#">背水一战</a></li> <li><a href="#">弃车保帅</a></li> </ul> </div> </body> </html>