zoukankan      html  css  js  c++  java
  • Bootstrap中下拉菜单的用法

    <div class="dropdown">

    <button type="button" class="btn btn-toggle"  id="dropdownmenu1" data-toggle="dropdown">编程语言</button>//下来按钮

    <span class="caret"></span>//小三角图片

    <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownmenu1">

            //pull-right即显示的下来菜单靠右。默认是pull-left靠左位于下拉按钮下见图示

            //aria-labelledby用于提示屏幕阅读器显示对应的作用id

    <li  role="presentation"><a class="menuitem" tabindex="-1" href="#">Java</li>

    // tabindex="-1"  即切换tab键时不显示,如值为1,2,3的话恰换tab键时按小到大显示即1,2,3。。。。

    <li role="presentation"><a class="menuitem" tabindex="1"   href="#">c#</a></li> 

    <li role="presentation class="divider"></li> //分割线

    <li role="presentation" class="dropdown-header">基础语言</li>//下拉标题

    <li role="presentation"><a class="menuitem" tabindex="2" href="#">C</li>

    </ul>

    </div>

    通过把<div class="dropdown">中的dropdown换成dropup即变成上拉

    效果图如下:

  • 相关阅读:
    05mybatis配置方式简单入门
    04mybatis配置文件lombok组件使用
    03mybatis-注解方式简单入门实例
    01-02 ssm框架简介
    jsp实现文件上传
    新增的语义化标签
    html5与html4的区别
    面向对象总结
    html语法
    购物车总结
  • 原文地址:https://www.cnblogs.com/professional-NET/p/4733467.html
Copyright © 2011-2022 走看看