码迷,mamicode.com
首页 > 其他好文 > 详细

按钮--bootStap

时间:2015-09-07 01:49:12      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮</title>
<link href="../../BootStrap/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
<meta name="viewport" content="width=device-wdith,initia-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html$shim.googlecode.com/svn/trunk/html5.js"></script>>
<!--[endif]-->
</head>

<body>
<script src="../../BootStrap/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="../../BootStrap/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script src="../../BootStrap/bootstrap-3.3.5-dist/js/bootstrap-dropdown.js"></script>@*下拉*@框

<div class="container">
<h1 class="page-header">按钮<small>按钮的基本样式</small></h1>


<div>
常规按钮
</div>
<button type="button" class="btn btn-sm">
<span class="glyphicon " aria-hidden="true"></span>小按钮
</button>
<button type="button" class="btn ">
<span class="glyphicon " aria-hidden="true"></span>常规按钮
</button>
<button type="button" class="btn btn-lg ">
<span class="glyphicon " aria-hidden="true"></span>大按钮
</button>

<div>
带图标按钮
</div>
@*带图标按钮*@
<div>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加 
</button>

<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除 info
</button>

<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭 success
</button>


<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>导入 warning
</button>


<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>导出 danger
</button>


<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询 primary
</button>


<button type="button" class="btn btn-inverse">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>刷新 inverse
</button>
</div>

@*按钮组*@

<div>
按钮组
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>


@*下拉框*@
<div>
下拉框
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
新生需求
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">后台配置</a></li>
<li><a href="#">新生报到</a></li>
<li><a href="#">报表分析</a></li>

</ul>
</div>

 


</div>
</body>

</html>

  

按钮--bootStap

标签:

原文地址:http://www.cnblogs.com/wangmei/p/4787817.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!