下拉菜单,要有一个下拉的效果,一个Dropdown按钮和右侧有个小图标caret,这个小图标和按钮的文本是平级的。
button按钮中有个dropdown-tooggle,还有一个data-toggle属性,根据这个属性来弹出下拉列表。
然后接着ul标签的dropdown-menu是和上面button按钮的样式类dropdown-toggle联合使用,在通过aria-labelledby绑定
上面的button按钮。示例代码:
<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="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>
字体图标,图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>
标签,并将图标类应用到这个 <span>
标签上。
图标类只能应用在不包含任何文本内容或子元素的元素上。
也可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。示例代码:
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
时间: 2024-10-07 02:39:45