sixLesson
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset = "utf-8">
<title>BootStrap-组件-下拉菜单、按钮组、按钮式下拉菜单</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- 所有字体图标类都应该承载于span标签当中 -->
<!-- 下拉菜单 必须添加对应的js文件才可实现下拉效果 -->
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle"
type="button"
data-toggle="dropdown">下拉菜单
<span class="caret"></span><!-- span class="caret" 下拉图标 -->
</button>
<!-- 制定下拉菜单内容 -->
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<!-- 添加一组标题 区分分组 -->
<!-- li role="presentation" class="dorpdown-header">英文1-4</li>-->
<li><a href="#" role="menuitem">first</a></li>
<li><a href="#" role="menuitem">second</a></li>
<li><a href="#" role="menuitem">third</a></li>
<li><a href="#" role="menuitem">fourth</a></li>
<!-- <li role="presentation" class="dorpdown-header">数字1-4</li>-->
<!-- <li role="presentation" class="divider"></li> 分割线-->
<li role="presentation" class="divider"></li>
<li><a href="#" role="menuitem">1</a></li>
<li><a href="#" role="menuitem">2</a></li>
<li class="disabled"><a href="#" role="menuitem" >3</a></li>
<li><a href="#" role="menuitem">4</a></li>
</ul>
</div>
<hr>
<!-- 按钮组 btn-group btnToolBar-->
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<!-- 多个按钮组成按钮组 -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default"><span class=""></span></button>
<button class="btn btn-default"><span class=""></span></button>
<button class="btn btn-default"><span class=""></span></button>
</div>
</div>
<!-- 按钮组+下拉菜单 -->
<div class="btn-group">
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="disabled"><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
</div>
<!-- 按钮组全屏 btn-group-justified-->
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">left</button>
</div>
<div class="btn-group">
<button class="btn btn-default">middle</button>
</div>
<div class="btn-group">
<button class="btn btn-default">right</button>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
