建议新窗口打开,使用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>