bootstrap-导航一
<!DOCTYPE HTML> <html> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script type="text/javascript"> </script> </head> <body > <!--图标glyphicon类--> <span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-signal"></span> <span class="glyphicon glyphicon-cog"></span> <span class="glyphicon glyphicon-apple"></span> <i class="glyphicon glyphicon-apple"></i> <i class="glyphicon glyphicon-text-width"></i> <!--导航部分注意这里是加glyphicon,不能直接使用icon-home--> <ul class="nav nav-list"> <li class="active"><a href="#" class="glyphicon glyphicon-home ">Home</a></li> <li><a href="#"><i class="glyphicon glyphicon-book ">Library</i></a></li> <li><a href="#"><i class="glyphicon glyphicon-pencil ">Misc</i></a></li> </ul> <!--内置的组件,下拉菜单--> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> <div class="dropdown"><!--data-toggle表示数据切换意思,aria-expanded表示展开状态,默认为undefined|aira-haspopup="true"表示点击的时候会出现菜单或浮动元素,false表示没有pop-up效果--> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu " role="menu" aria-labelledby="dLabel"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Another action</a> <ul class="dropdown-menu" > <li role="presentation">子菜单一</li> <li role="presentation"><a href="#" role="menuitem" tabindex="-1">子菜单二</li> <li role="presentation"><a href="#" role="menuitem" tabindex="-1">子菜单三</li> </ul> </li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> <!--二级下拉菜单这里有问题--> <!--label的用法--> <br><br><br><br><br><br><br><br><br><br><br><br><br> <form role = "form"> <!--aira-label可自动读取身份证的文本--> <div class="form-group col-lg-3 form-horizontal"> <div class="col-lg-7"> <input type = "text" id = "idCard" class="form-control" aria-label = "身份证号"> </div> </div> </form> <form role = "form"> <div class="form-group col-lg-3 form-horizontal"> <label for = "idCard" class="control-label col-lg-5">身份证号:</label> <div class="col-lg-7"> <input type = "text" id = "idCard" class="form-control"> </div> </div> </form> <!--二级菜单的制作--> <div class="sidebar-menu"> <a href="#userMeun" class="nav-header menu-first collapsed" data-toggle="collapse"><i class="icon-user-md icon-large"></i> 用户管理</a> <ul id="userMeun" class="nav nav-list collapse menu-second"> <li><a href="#"><i class="icon-user"></i> 增加用户</a></li> <li><a href="#"><i class="icon-edit"></i> 修改用户</a></li> <li><a href="#"><i class="icon-trash"></i> 删除用户</a></li> <li><a href="#"><i class="icon-list"></i> 用户列表</a></li> </ul> <a href="#articleMenu" class="nav-header menu-first collapsed" data-toggle="collapse"><i class="icon-book icon-large"></i> 文章管理</a> <ul id="articleMenu" class="nav nav-list collapse menu-second"> <li><a href="#"><i class="icon-pencil"></i> 添加文章</a></li> <li><a href="#"><i class="icon-list-alt"></i> 文章列表</a></li> </ul> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <!--按钮组的使用--> <div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div> <i class="glyphicon glyphicon-edit glyphicon-white"></i> <!-- 按钮组合图标一起使用 --> <div class="btn-toolbar"> <div class="btn-group"> <a href="#" class="btn"><i class=" glyphicon glyphicon-align-left"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-align-center" title="中间"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-align-right" title="右边"></i></a> <a class="btn" href="#"><i class="glyphicon glyphicon-align-justify" title="简化"></i></a> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>