首页 > 代码库 > 菜单的制作
菜单的制作
下拉菜单,要有一个下拉的效果,一个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=http://www.mamicode.com/"#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href=http://www.mamicode.com/"#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href=http://www.mamicode.com/"#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href=http://www.mamicode.com/"#">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>
菜单的制作
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。