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

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> bootstrap教程 >> bootstrap按钮式下拉菜单

bootstrap按钮式下拉菜单

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

• 用bootstrap按钮式下拉菜单其实和前面我们讲的bootstrap下拉菜单组件知识点一样，只不过，这个是在群组里，不需要<div>声明class="dropdown"。

  //群组按钮下拉菜单

  <div class="btn-group">
  	<button type="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 class="btn-group">
  	<button type="button" class="btn btn-default">下拉菜单</button>
  	<button type="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 class="btn-group dropup">
  

• bootstrap输入框input组件加文字或按钮 :上一篇
  bootstrap按钮组组件,多个按钮集成在一个容器里的效果 :下一篇