bootstarp导航
Posted 米小玉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstarp导航相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .container{ border: 1px solid #ccc; } </style> </head> <body> <div> <!-- 标签页 --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#">Home</a></li><!-- active选择链接 --> <li role="presentation"><a href="#">Profile</a></li> <!-- 带下拉菜单的标签页 --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">Messages <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#">Profile</a> </li> <li role="presentation"><a href="#">Prsdsig</a> </li> <li role="presentation" class="divider"></li> <li role="presentation" class="disabled"><a href="#">Pdddffe</a> </li> </ul><!-- dropdown-menu --> </li><!-- dropdown --> </ul><!-- nav nav-tabs --> <br> <!-- 胶囊式标签页 须使用 .nav-pills--> <ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Home</a></li><!-- active选择链接 --> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">fasfafa</a></li> </ul> <br> <!-- 胶囊是标签页垂直方向堆叠排列的只需添加 .nav-stacked --> <ul class="nav nav-pills nav-stacked" role="tablist"> <li role="presentation" class="active"><a href="#">Home</a></li><!-- active选择链接 --> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">fasfafa</a></li> </ul> <br> <!-- 两端对齐的标签页 只需添加 .nav-stacked --> <ul class="nav nav-pills nav-justified" role="tablist"> <li role="presentation" class="active"><a href="#">Home</a></li><!-- active选择链接 --> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">fasfafa</a></li> </ul> </div> <br> <!-- jQuery (necessary for Bootstrap‘s javascript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
以上是关于bootstarp导航的主要内容，如果未能解决你的问题，请参考以下文章