zoukankan      html  css  js  c++  java
  • 菜单的制作

    下拉菜单,要有一个下拉的效果,一个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>
  • 相关阅读:
    111
    关于Node.js中安装完express后不能使用express命令
    vscode tab转空格
    【终端使用】rm命令,删除文件获目录
    WebStorage是什么?
    Vue路由传参
    --save 和 --save-dev的区别
    第五篇,理解JS模块化编程思想
    第四篇,JavaScript面试题汇总
    第三篇,ajax 和 axios、fetch的区别
  • 原文地址:https://www.cnblogs.com/leibo520/p/7064249.html
Copyright © 2011-2022 走看看