• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> bootstrap教程 >> bootstrap按钮组组件,多个按钮集成在一个容器里的效果

bootstrap按钮组组件,多个按钮集成在一个容器里的效果

• 作者：创新互联 文章来源：网页前端技术 点击数： 更新时间：2016-03-21

• 用bootstrap按钮组组件实现多个按钮集成在一个容器里形成独有的效果。

  
  

  //基本格式

  <div class="btn-group">
  	<button type="button" class="btn btn-default">左</button>
  	<button type="button" class="btn btn-default">中</button>
  	<button type="button" class="btn btn-default">右</button>
  </div>
  

  //将多个按钮组整合起来便于管理

  <div class="btn-toolbar">
  	<div class="btn-group">
  		<button type="button" class="btn btn-default">左</button>
  		<button type="button" class="btn btn-default">中</button>
  		<button type="button" class="btn btn-default">右</button>
  	</div>
  	<div class="btn-group">
  		<button type="button" class="btn btn-default">1</button>
  		<button type="button" class="btn btn-default">2</button>
  		<button type="button" class="btn btn-default">3</button>
  	</div>
  </div>
  

  //设置按钮组大小

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

  //嵌套一个分组，比如下拉菜单

  <div class="btn-group">
  	<button type="button" class="btn btn-default">左</button>
  	<button type="button" class="btn btn-default">中</button>
  	<button type="button" class="btn btn-default">右</button>
  	<div class="btn-group">
  		<button class="btn btn-default dropdown-toggle"
  		data-toggle="dropdown">
  			下拉菜单
  		<span class="caret"></span>
  		</button>
  	<ul class="dropdown-menu">
  		<li><a href="#">首页</a></li>
  		<li><a href="#">资讯</a></li>
  		<li><a href="#">产品</a></li>
  		<li><a href="#">关于</a></li>
  	</ul>
  	</div>
  </div>
  

  //注意：这里<div>中并没有实现class="dropdown"，通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个class="dropdown-toggle"即可。

  //设置按钮组垂直排列

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

  //设置两端对齐按钮组，使用<a>标签

  <div class="btn-group-justified">
  	<a type="button" class="btn btn-default">左</a>
  	<a type="button" class="btn btn-default">中</a>
  	<a type="button" class="btn btn-default">右</a>
  </div>
  

  //如果需要使用<button>标签，则需要对每个按钮进行群组

  <div class="btn-group-justified">
  	<div class="btn-group">
  		<button type="button" class="btn btn-default">左</button>
  	</div>
  	<div class="btn-group">
  		<button type="button" class="btn btn-default">中</button>
  	</div>
  	<div class="btn-group">
  		<button type="button" class="btn btn-default">右</button>
  	</div>
  </div> 
  

• bootstrap按钮式下拉菜单 :上一篇
  bootstrap下拉菜单组件 :下一篇