<!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>
浙公网安备 33010602011771号