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

开发bootstrap的Icon图表的事例

2014-12-09 10:03 441 查看
<html lang="en">

<head>

<title>图标</title>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width,initial-scale=1" />

<script src="../file/jquery.js" type="text/javascript"></script>

<link href="../book/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script src="../book/js/bootstrap.js" type="text/javascript"></script>

</head>

<body>

<div class="btn-toolbar">

<div class="btn-group">

<a class="btn btn-default" href="#">

<span class="glyphicon glyphicon-align-left"></span>

</a>

<a class="btn btn-default" href="#">

<span class="glyphicon glyphicon-align-center"></span>

</a>

<a class="btn btn-default" href="#">

<span class="glyphicon glyphicon-align-right"></span>

</a>

<a class="btn btn-default" href="#">

<span class="glyphicon glyphicon-align-justify"></span>

</a>

</div>

</div>

<div class="btn-group" style="margin-top:100px">

<a class="btn btn-default btn-primary" href="#">

<span class="glyphicon glyphicon-user"></span>User

</a>

<a class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" href="#">

<span class="caret"></span>

</a>

<ul class="dropdown-menu">

<li><a href="#"><span class="glyphicon glyphicon-pencil"></span>Edit</a></li>

<li><a href="#"><span class="glyphicon glyphicon-trash"></span>Delete</a></li>

<li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span>Bar</a></li>

<li class="divider"></li>

</ul>

</div>

</body>

</html>

显示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航