打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
带下拉菜单的按钮
附加的按钮的内容,span在文本框前面则附加按钮在前,span在文本框后面,则附加按钮在后面 
主要内容:
<div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>



效果图:
 
 


源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Navbar Template for Bootstrap</title>

    <link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"></link>

    


  </head>
  
  <body>
   
<div class="row">
  <div class="col-sm-2">
    <div class="input-group">
    <!-- 附加的按钮的内容,span在文本框前面则附加按钮在前,span在文本框后面,则附加按钮在后面 -->
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Go!<span class="caret"></span></button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
   </ul>
      </div>
      <input type="text" class="form-control"/>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-sm-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button type="button" class="btn btn-default toggle-menu" data-toggle="dropdown">Go!<span class="caret"></span></button>
      <ul class="dropdown-menu">
       <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
         <li><a href="#">Something else here</a></li>
         <li class="divider"></li>
         <li><a href="#">Separated link</a></li>
      </ul>
      </span>
      
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div>

  </body>
  <script type="text/javascript" src="../../js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
</html>

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
bootstrap精简教程
Bootstrap_Button+Input组件
第七节,Bootstrap图标菜单按钮组件
Bootstrap每天必学之按钮
WEB前端第五十一课——BootStrap组件(三)dropdown、form、modal、pagination
学会Twitter Bootstrap不再难
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服