bootstrap系列之十一按钮下拉菜单

来源：互联网发布：电商行业转化率算法编辑：程序博客网时间：2024/05/16 15:42
效果图
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>demo01</title><link rel="stylesheet" href="css/bootstrap.min.css" /><script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>    <script language="JavaScript" src="js/bootstrap.min.js"></script></head><body><div class="container"><hr/>   <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>     </ul>   </div>      <div class="btn-group">     <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>     <li><a href="#">项目</a></li>     </ul>   </div>      <div class="btn-group">     <button  type="button" class="btn btn-info 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>     </ul>   </div>      <div class="btn-group">     <button  type="button" class="btn btn-default dropdown-toggle btn-lg" 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>     </ul>   </div>   <hr />          <div class="btn-group dropup" >       <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>     </ul>   </div>      </div></body></html>
阅读全文
0 0