zoukankan      html  css  js  c++  java
  • BT之下拉菜单

     

     1 <div class="dropdown">
     2   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
     3     下拉菜单
     4     <span class="caret"></span>
     5   </button>
     6   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
     7     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
     8     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
     9     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    10     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    11   </ul>
    12 </div>

    如上代码,是一个最基本的下拉菜单。效果如图所示: 

    1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:

    <div class="dropdown"></div>

    2、使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:

    data-toggle="dropdown"

    3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为:

    <ul class="dropdown-menu">

    <span class="caret"></span>为右边的倒三角符号

    <li role="presentation" class="divider"></li>插入控li,并加上类名divider,可实现分割线

    <li role="presentation" class="dropdown-header">第一部分菜单头部</li>在li里加上dropdown-header,实现标题

    Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名

    下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus),  下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名

     

  • 相关阅读:
    .vue文件在phpstorm中红线解决办法
    javascript预编译详解
    javascript数据类型判断及数据隐式和显示转换
    用git版本库工具上传项目到github(新手简单易上手)
    javascript的数据运算和条件判断
    javascript基础类型和引用类型
    uniapp开发钉钉小程序遇到的坑!!!
    pdf解析器 用于小程序 h5
    百度的Ueditor(php)上传到aws s3存储方案
    css3 pointer-event属性
  • 原文地址:https://www.cnblogs.com/zhouliang/p/5803026.html
Copyright © 2011-2022 走看看