zoukankan      html  css  js  c++  java
  • BootStrap学习之下拉列表

    1基本样式

    A.下拉列表容器本身要添加“dropdown”类

    B.下拉按钮添加类dropdown-toggle以及data-toggle="dropdown"

    C.列表部分添加类"dropdown-menu"”

    <div class="container">
         <div class="dropdown">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              默认 <span class="caret"></span>
              </button>
    <ul class="dropdown-menu" >
        <li><a href="#">功能</a></li>
        <li><a href="#">另一个功能</a></li>
       <li><a href="#">其他</a></li>
       <li class="divider"></li>
       <li><a href="#">分离的链接</a></li>
    </ul>
    </div>
    </div>

    caret:倒三角形

    divider:下拉列表中分割线

    2.设置默认打开在“ <div class="dropdown">”设为 <div class="dropdown open">

    3.设置下拉列表整体右对齐,加上pull-right,有浮动 <div class="dropdown pull-right">

    4.设置下拉列表按钮变成块级元素,加上类btn-block

    <button type="button" class="btn btn-default dropdown-toggle btn-block"
    data-toggle="dropdown">
    默认 <span class="caret"></span>
    </button>

    5.设置下拉列表右对齐,加上dropdown-menu-right,不过此类,不是代表是该下拉控件的右边,是这一行的右边

    <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">功能</a></li>
    <li><a href="#">另一个功能</a></li>
    <li><a href="#">其他</a></li>
    <li class="divider"></li>
    <li><a href="#">分离的链接</a></li>
    </ul>

    如果按钮没有btn-block,容器又是左边,显示效果,如果把容器设为有浮动pull-right,择显示在下拉按钮下方

    6.下拉列表中增加分割文字,添加类dropdown-header

    <ul class="dropdown-menu dropdown-menu-right" role="menu">
    <li class="dropdown-header">目录</li>
    <li><a href="#">功能</a></li>
    <li><a href="#">另一个功能</a></li>
    <li><a href="#">其他</a></li>
    <li class="divider"></li>
    <li><a href="#">分离的链接</a></li>
    </ul>

    7.下拉列表,列表内容朝上 在容器中把dropdown改为dropup  ,<div class="dropup pull-right">

    8.下拉列表,列表内容居中,每个li中添加类"text-center"

    9.判断是否是移动端的一种方法

    window.navigator.userAgent.toLowerCase().indexOf('moblie')==-1,为-1的是PC端

    10.如果去掉data-toggle="dropdown",就用$(该节点元素).dropdown()代替;

    使用时data-toggle="dropdown",如果页面存在多个下拉控件,则点击任一个时,会把所有的下拉控件全部关闭

    使用$(该节点元素).dropdown()时不会关闭其他的下拉控件

    11.$(该节点元素).dropdown("toggle"),会以当前下拉列表相反的方式显示

  • 相关阅读:
    start tag, end tag issues in IE7, particularly in xslt transformation
    用SandCastle为注释生成chm文档
    Firebug
    架构的重点
    Linux Shell常用技巧(十) 管道组合
    Linux JDK升级
    Linux Shell常用技巧(十二) Shell编程
    Packet Tracer 5.0实验(一) 交换机的基本配置与管理
    Linux Shell常用技巧(六) sort uniq tar split
    Linux Shell常用技巧(二) grep
  • 原文地址:https://www.cnblogs.com/zhangxiong/p/5071578.html
Copyright © 2011-2022 走看看