<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端视口的设置 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入bootstrap.css --> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/bootstrap.js"></script> <style> #login{ width:400px; } </style> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <br> <br> <div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> <br> <ul class="nav nav-tabs" style="400px;"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> <br> <ul class="nav nav-tabs nav-justified" style="400px;"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> <br> <ul class="nav nav-tabs nav-tabs-justified"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> <br> <ul class="nav nav-pills"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </div> </body> <script> /* 下拉菜单 属性 — data-* — aria-* — rolr open 显示下拉菜单 dropdown-menu-right 下拉菜单右浮动 dropdown-header 下拉头部 divider 分割线 标签页 头部 — nav — nav-tabs 不适合竖状展示 — nav-justified 端点对齐 — nav-tabs-justified — nav-pills 圆角 — nav-stacked 竖状菜单 — 带下拉菜单的头部 */ </script>