您的位置：首页 > Web前端 > BootStrap

Bootstrap-图标菜单和按钮组件

2017-12-14 23:08 621 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title></title>
</head>
<body>
<!--图标-->
<span class="glyphicon glyphicon-star"></span>
<!--下拉菜单组件-->
<div class="dropdown"><!--向上触发：dropup-->
<button class="btn btn-default" data-toggle="dropdown"><!--点击可以下拉-->
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu"><!--关联起来--><!--菜单项居右对齐：dropdown-menu-right-->
<li class="dropdown-header">网站导航</li><!--设置菜单标题-->
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li class="divider"><a href="#">首页</a></li><!--分割线-->
<li class="disabled"><a href="#">首页</a></li><!--不可点-->
</ul>
</div>
<!--按钮组组件-->
<div class="btn-toolbar">
<div class="btn-group " ><!--btn-group-lg-->
<button class="btn btn-default">左</button>
<button class="btn btn-default">左1</button>
<button class="btn btn-default">左2</button>
</div>
<div class="btn-group">
<button class="btn btn-default">左</button>
<button class="btn btn-default">左1</button>
<button class="btn btn-default">左2</button>
</div>
<div class="btn-group">
<button class="btn btn-default">左</button>
<button class="btn btn-default">左1</button>
<button class="btn btn-default">左2</button>
</div>
</div>
<!--嵌套一个分组，比如下拉菜单-->
<div class="btn-toolbar">
<div class="btn-group " ><!--btn-group-lg-->
<button class="btn btn-default">左</button>
<button class="btn btn-default">左1</button>
<button class="btn btn-default">左2</button>
</div>
<div class="btn-group">
<button class="btn btn-default">左</button>
<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"><!--dropdown-toggle和上面的按钮列表放在一起-->
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu"><!--关联起来--><!--菜单项居右对齐：dropdown-menu-right-->
<li class="dropdown-header">网站导航</li><!--设置菜单标题-->
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li class="divider"><a href="#">首页</a></li><!--分割线-->
<li class="disabled"><a href="#">首页</a></li><!--不可点-->
</ul>
</div>
</div>
</div>
<!--垂直排列-->
<div class="btn-group-vertical " ><!--btn-group-lg-->
<button class="btn btn-default">左</button>
<button class="btn btn-default">左1</button>
<button class="btn btn-default">左2</button>
</div>
<!--设置两端垂直按钮组，用a-->
<div class="btn-group-justified " ><!--btn-group-lg-->
<a class="btn btn-default">左</a>
<a class="btn btn-default">左1</a>
<a class="btn btn-default">左2</a>
</div>
<!--按钮式下拉菜单-->
<div class="btn-group"><!--1.改-->
<button class="btn btn-default">下拉菜单</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><!--2.加-->

<span class="caret"></span>
</button>
<ul class="dropdown-menu"><!--关联起来--><!--菜单项居右对齐：dropdown-menu-right-->
<li class="dropdown-header">网站导航</li><!--设置菜单标题-->
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li class="divider"><a href="#">首页</a></li><!--分割线-->
<li class="disabled"><a href="#">首页</a></li><!--不可点-->
</ul>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航