版权声明:转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/86581489
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
网络游戏
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">英雄联盟</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">魔兽世界</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">大话西游</a>
</li>
<li role="presentation" class="divider"></li> <!-- 分界线-->
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">九阴真经</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">英雄联盟</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">梦幻传奇</a>
</li>
</ul>
</div>
</div>
- 通过添加 .pull-right来右对齐下拉菜单
- 使用 .dropdown-header 向下拉菜单的标签区域添加标题(标题的a链接可以去掉,这样效果更好)
注:如果我们对Bootstrap中的样式不满意的可以自己重新在style中定义,默认会直接覆盖原来自带的样式
更多类:
.dropdown 指定下拉菜单,下拉菜单都包裹子啊.dropdown里
.dropup 指定向上弹出的下拉菜单(与上面的dropdown方向相反)
.dropdown-menu 创建下拉菜单
.dropdown-menu-right 下拉菜单右对齐
.disabled 下来菜单的禁用选项
.divider 下拉菜单的分割线