菜单的制作

Posted 2020-09-24

下拉菜单，要有一个下拉的效果，一个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>