<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>图标菜单和按钮组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin:50px;"> <!--图标参考官网--> <i class="glyphicon glyphicon-star"></i> <button class="btn btn-default btn-sm glyphicon glyphicon-star"></button> <!-- dropdown 下拉菜单头 data-toggle="dropdown" 下拉菜单js样式 dropdown-menu 下拉菜单 dropdown-menu-right 下拉菜单左边显示 dropdown-header 下拉菜单头 divider 分割线 disabled 禁用项 --> <div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" > <li class="dropdown-header">网站导航</li> <li> <a href="#">1</a> </li> <li class="divider"></li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4 </a> </li> </ul> </div> <!--按钮组件 btn-group dropdown-toggle 嵌套下拉菜单需要用此组件 btn-toolbar 大的群组组件 btn-group-vertical 垂直排列 btn-group-justified 两端对齐<适用于a标签和分组后的button> --> <div class="btn-group-justified"> <a class="btn btn-default">1</a> <a class="btn btn-default">1</a> <a class="btn btn-default">1</a> </div> <div class="btn-group-justified"> <div class="btn-group"> <button class="btn btn-default">1</button> </div> <div class="btn-group"> <button class="btn btn-default">2</button> </div> <div class="btn-group"> <button class="btn btn-default">3</button> </div> </div> <div class="btn-group-vertical"> <div class="btn-group"> <button class="btn btn-default">1</button> </div> <div class="btn-group"> <button class="btn btn-default">2</button> </div> <div class="btn-group"> <button class="btn btn-default">3</button> </div> </div> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default">1</button> <button class="btn btn-default">2</button> <button class="btn btn-default">3</button> </div> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" > <li class="dropdown-header">网站导航</li> <li> <a href="#">1</a> </li> <li class="divider"></li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4 </a> </li> </ul> </div> </div> <!--分组式下拉菜单--> <div class="btn-group"> <button class="btn btn-group">下拉菜单</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" > <li class="dropdown-header">网站导航</li> <li> <a href="#">1</a> </li> <li class="divider"></li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4 </a> </li> </ul> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> </body> </html>