主要是下拉框，下拉按钮以及按钮组
<!DOCTYPE html> <html> <head> <title>05_buttonset.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" media="screen" href="../css/bootstrap.min.css"> <link rel="stylesheet" media="screen" href="../css/bootstrap-theme.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <script src="../js/jquery-1.11.2.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3 class="page-header">按钮工具类</h3> <div class="row"> <div class="col-md-5"> <h4>1 下拉框</h4> <p>按钮中有个<code>.dropdown-toggle</code>，还有一个<code>data-toggle</code>属性弹出列表。</p> <p><code><ul></code>标签的<code>dropdown-menu</code>应该是和上面按钮的样式类<code>dropdown-toggle</code>联合使用</p> <p>通过<code>aria-labelledby</code>绑定上面的<code>button</code>按钮。</p> <p><code>.divider</code>是一个分割线</p> <p>向<code><li></code>加入<code>.dropdown-header</code>变成框头（类似静态说明文本）</p> <P>向<code><li></code>加入<code>.disabled</code>则是禁用某一条</p> <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> </div> <div class="col-md-7"> <div class="row"> <div class="col-md-12"> <h4>2 按钮组</h4> <p>通过<code>.btn-group</code>就可以得到一组按钮</p> <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> <div class="col-md-12"> <h4>3 按钮工具栏</h4> <p>把一组<code><div class="btn-group"></code>组合进一个<code><div class="btn-toolbar"></code></p> <p>只要给<code>.btn-group</code>加上<code>.btn-group-*</code>，而不是给组中每个按钮都应用大小类。</p> <div class="btn-toolbar" role="toolbar"> <div class="btn-group btn-group-lg"> <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> <button type="button" class="btn btn-default">4</button> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">7</button> <button type="button" class="btn btn-default">8</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">9</button> </div> </div> </div> </div> </div> <div class="clearfix visible-lg visible-md visible-sm visible-xs"></div> <div class="col-md-3"> <h4>4 嵌套</h4> <div class="btn-group"> <button type="button" class="btn btn-info">1</button> <button type="button" class="btn btn-warning">2</button> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> <div class="col-md-3"> <h4>5 垂直排列</h4> <p>添加<code>.btn-group-vertical</code>这个class(有点问题)</p> <div class="btn-group-vertical"> <a href="#"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> </a> <div class="btn-group"> <a href="#"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown<span class="caret"></span> </button> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> <div class="col-md-3"> <h4>6 分列式</h4> <p>只有点击三角形才有效</p> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <div class="dropdown"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</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> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> <div class="col-md-3"> <h4>7 向上拉</h4> <p>给父类加上<code>.dropup</code>这个class</p> <div class="btn-group dropup"> <button type="button" class="btn btn-primary">Dropup</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</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> </div> <div class="clearfix visible-lg visible-md visible-sm visible-xs"></div> <div class="col-md-3"> <h4>8 单按钮下拉</h4> <p>把<code>.btn-group</code>添加适当标记</p> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action<span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Final</a> </ul> </div> </div> <div class="col-md-6"> <h4>9 撑满一行</h4> <p>加入<code>.btn-group-justified</code>(此行占6格宽)</p> <div class="btn-group btn-group-justified"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> </div> </div> </body> </html>
效果如下
