[bootstrap] bootstrap(1) 按钮和菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>bootstrap 摘录自官网 </title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="../js/bootstrap.min.js"></script> </head> <body > <!--引用图片--> <span class="glyphicon glyphicon-search" ></span> <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span> <!--将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里， 或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。 默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。 可能需要额外的定位May require additional positioning在正常的文档流中，通过 CSS 为下拉菜单进行定位。 这就意味着下拉菜单可能会由于设置了 overflow 属性的父元素而被部分遮挡或超出视口（viewport）的显示范围。如果出现这种问题，请自行解决。 不建议使用 .pull-right从 v3.1.0 版本开始，我们不再建议对下拉菜单使用 .pull-right 类。如需将菜单右对齐， 请使用 .dropdown-menu-right 类。导航条中如需添加右对齐的导航（nav）组件，请使用 .pull-right 的 mixin 版本， 可以自动对齐菜单。如需左对齐，请使用 .dropdown-menu-left 类。 --> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <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="menuitem" class="divider"></li> <!--添加禁用的链接--> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">禁用的链接</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> <!--按钮组 通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或弹出框时，必须指定 container: \'body\' 选项， 这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。 --> <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 class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。 改变尺寸: 只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。 --> <div class="btn-toolbar" role="toolbar" aria-label="..."> <div class="btn-group-sm" role="group" aria-label="...">按钮工具栏1</div> <div class="btn-group" role="group" aria-label="...">按钮工具栏2</div> <div class="btn-group" role="group" aria-label="...">按钮工具栏3</div> </div> <!--按钮的嵌套 设置class为btn-group-vertical按钮垂直显示 想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。 --> <div class="btn-group" role="group" > <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> <!--两端对齐排列的按钮组 让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。 关于边框的处理 由于对两端对齐的按钮组使用了特定的 HTML 和 CSS （即 display: table-cell），两个按钮之间的边框叠加在了一起。 在普通的按钮组中，margin-left: -1px 用于将边框重叠，而没有删除任何一个按钮的边框。 然而，margin 属性不支持 display: table-cell。因此，根据你对 Bootstrap 的定制，你可以删除或重新为按钮的边框设置颜色。 IE8 和边框Internet Explorer 8 不支持在两端对齐的按钮组中绘制边框，无论是 <a> 或 <button> 元素。 为了照顾 IE8，把每个按钮放入另一个 .btn-group 中即可。 参见 #12476 获取详细信息。 关于 <a> 元素 只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。--> <div class="btn-group btn-group-justified" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" class="btn btn-danger">Left</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Right</button> </div> </div> <!-- 按钮式下拉菜单 把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ，因此需要将此插件包含在你所使用的 Bootstrap 版本中。 单按钮下拉菜单 只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。 --> <div class="btn-group"> <!--btn-group-* 显示分裂式的菜单 info:普通信息； danger:红色背景 --> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Action <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> <!--添加分割线--> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!--向上弹出式菜单 给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。--> <div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a>列表1</a></li> <li><a>列表2</a></li> <li><a>列表3</a></li> <li><a>列表4</a></li> </ul> </div> </body> </html>
版权声明：本文为lonelywolfmoutain原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。