首页 > 其他 > 详细

bootstrap中的按钮组

时间:2015-08-18 01:07:11      阅读:241      评论:0      收藏:0      [点我收藏+]

第一、基本的按钮组:

<div class="btn-group">

<button type="button" class="btn btn-default">default按钮</button>

<button type="button" class="btn btn-success"> success按钮</button>

</div>

 

第二、按钮组工具条(包含多个按钮组)及控制按钮组大小:

<div class="btn-toolbar" role="toolbar">

<div class="btn-group btn-group-lg">

<button type="btn btn-info">info按钮</button>

<button type="btn btn-danger">danger按钮</button>

</div>

<div class="btn-group btn-group-sm">

<button type="button" class="btn btn-warning">warning按钮</button>

<button type="button" class="btn btn-primary">primary按钮</button>

<button>

</div>

<div class="btn-group btn-group-xs">

<button type="button" class="btn btn-info">info按钮</button>

<button type="button" class="btn btn-danger">danger按钮</button>

</div>

</div>

 

第三、垂直排列的按钮组:

<div class="btn-group-vertical ">

<button type="button" class="btn btn-info">info按钮</button>

<button type="button" class="btn btn-success">success按钮</button>

<button type="button" class="btn btn-danger">danger按钮</button>

</div>

 

第四、内嵌按钮组和下拉菜单:

<div class="btn-group">

<button type="button" class="btn btn-success">手机</button>

<button type="button" class="btn btn-info">电脑</button>

<div class="btn-group dropdown">

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">

车型

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

</button>

<ul class="dropdown-menu">

<li><a href="#">保时捷</a></li>

<li><a href="#">兰博基尼</a></li>

</ul>

</div>

</div>

 

效果图如下:

技术分享

 

bootstrap中的按钮组

原文:http://www.cnblogs.com/professional-NET/p/4738157.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!