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即变成上拉

    效果图如下:

  • 相关阅读:
    [leetcode] Valid Sudoku
    [leetcode] Count and Say
    [leetcode] Decode Ways
    [leetcode] Sqrt(x)
    [leetcode] Best Time to Buy and Sell Stock II
    7-27 兔子繁衍问题
    7-26 最大公约数和最小公倍数
    7-25 求奇数和
    7-24 猜数字游戏
    7-23 分段计算居民水费
  • 原文地址:https://www.cnblogs.com/professional-NET/p/4733467.html
Copyright © 2011-2022 走看看