Bootstrap 下拉菜单（Dropdowns）

Bootstrap下拉菜单（Dropdowns）本章将重点介绍Bootstrap下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与下拉菜单（Dropdown）JavaScript插件的互动来实现。如需使用下拉菜单，只需要在class.dropdown内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：实例<divclass="dropdown"><buttontype="button"class="btndropdown-toggle"id="dropdownMenu1"data-toggle="dropdown">主题<spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu1"><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Java</a></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">数据挖掘</a></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">数据通信/网络</a></li><lirole="presentation"class="divider"></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">分离的链接</a></li></ul></div>尝试一下?结果如下所示：选项对齐通过向.dropdown-menu添加class.pull-right来向右对齐下拉菜单。下面的实例演示了这点：实例<divclass="dropdown"><buttontype="button"class="btndropdown-toggle"id="dropdownMenu1"data-toggle="dropdown">主题<spanclass="caret"></span></button><ulclass="dropdown-menupull-right"role="menu"aria-labelledby="dropdownMenu1"><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Java</a></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">数据挖掘</a></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">数据通信/网络</a></li><lirole="presentation"class="divider"></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">分离的链接</a></li></ul></div>尝试一下?结果如下所示：标题您可以使用classdropdown-header向下拉菜单的标签区域添加标题。下面的实例演示了这点：实例<divclass="dropdown"><buttontype="button"class="btndropdown-toggle"id="dropdownMenu1"data-toggle="dropdown">主题<spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu1"><lirole="presentation"class="dropdown-header">下拉菜单标题</li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Java</a></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">数据挖掘</a></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">数据通信/网络</a></li><lirole="presentation"class="divider"></li><lirole="presentation"class="dropdown-header">下拉菜单标题</li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">分离的链接</a></li></ul></div>尝试一下?结果如下所示：更多实例类描述实例.dropdown指定下拉菜单，下拉菜单都包裹在.dropdown里尝试一下.dropdown-menu创建下拉菜单尝试一下.dropdown-menu-right下拉菜单右对齐尝试一下.dropdown-header下拉菜单中添加标题尝试一下.dropup指定向上弹出的下拉菜单尝试一下.disabled下拉菜单中的禁用项尝试一下.divider下拉菜单中的分割线尝试一下