按钮与徽章

使用方法:

建议新窗口打开,使用Chrome浏览器或Firefox浏览器的开发者模式查看!
》 新窗口打开

实现代码

<!-- 根据内边距定义和根据宽度定义的按钮 -->
 <span class="p3 pl6 pr6 btn radius5 disable">按钮 </span>
 <span class="p3 w69 btn f60 radius10">按钮 </span>

 <!-- 不同的按钮皮肤 -->
 <div class="p3 f30">
 	<span class="p2 pl3 pr3 btn radius5 btn-primary">按钮</span>
 	<span class="p2 pl3 pr3 btn radius5 btn-success">按钮</span>
 	<span class="p2 pl3 pr3 btn radius5 btn-info">按钮</span>
 	<span class="p2 pl3 pr3 btn radius5 btn-warning">按钮</span>
 	<span class="p2 pl3 pr3 btn radius5 btn-danger">按钮</span>
 </div>
 
 <!-- 按钮组 -->
 <div class="m3 f28 ui-btnlist clearfix">
	 <span class="p2 pl2 pr2 btn btn-primary">首页 </span>
	 <span class="p2 pl2 pr2 btn btn-info">< </span>
	 <span class="p2 pl2 pr2 btn btn-warning">1 </span>
	 <span class="p2 pl2 pr2 btn btn-info">> </span>
	 <span class="p2 pl2 pr2 btn btn-primary">尾页 </span>
 </div>
 
 <!-- 小徽章 -->
 <div class="p3 f30">
 	<span class="state">state</span>
 	<span class="state state-primary">state-primary</span>
 	<span class="state state-success">state-success</span>
 	<span class="state state-info">state-info</span>
 	<span class="state state-warning">state-warning</span>
 	<span class="state state-danger">state-danger</span>				
 </div>
 
 <!-- 下拉导航的实现 -->
 <div class="btn-select w34">
	 <font class="btn-select-content p2 w34 radius5 btn btn-primary">
		 <i class="fr icon iconfont icon-unfold"> </i>
		 <span>下拉导航组件 </span>
	 </font>
	 <ul class="btn-select-list radio5 bg-color-primary">
		 <li>
			 <span class="pl3">首页 </span>
		 </li>
	 </ul>
 </div>
 <script type="text/javascript">	
	 $(".btn-select .btn-select-content").tap(function(){
		 $(this).siblings(".btn-select-list").toggle();
	 });
	 $(".btn-select .btn-select-list li").tap(function(){
		 $(this).parents(".btn-select").find(".btn-select-content span").text($(this).text());
		 $(this).parent(".btn-select-list").hide();
	  });
 </script>