ylbtech-Bootstrap-CL：按钮下拉菜单
1.返回顶部
1、

Bootstrap 按钮下拉菜单

本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。

下面的实例演示了一个基本的简单的按钮下拉菜单：

实例

<div class="btn-group">

    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" role="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 class="btn-group">

    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" role="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 class="btn-group">

    <button type="button" class="btn btn-default">默认</button>

    <button type="button" class="btn btn-default dropdown-toggle"

        data-toggle="dropdown">

        <span class="caret"></span>

        <span class="sr-only">切换下拉菜单</span>

    </button>

    <ul class="dropdown-menu" role="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 class="btn-group">

    <button type="button" class="btn btn-primary">原始</button>

    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

        <span class="sr-only">切换下拉菜单</span>

    </button>

    <ul class="dropdown-menu" role="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>

尝试一下 »

结果如下所示：

按钮下拉菜单的大小

您可以使用带有各种大小按钮的下拉菜单：.btn-large、.btn-sm 或 .btn-xs。

实例

<div class="btn-group">

    <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" role="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 class="btn-group">

    <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">原始

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" role="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 class="btn-group">

    <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">成功

        <span class="caret"></span></button>

    <ul class="dropdown-menu" role="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>

尝试一下 »

结果如下所示：

按钮上拉菜单

菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可。

实例

<div class="row" style="margin-left:50px; margin-top:200px">

    <div class="btn-group dropup">

        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" role="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 class="btn-group dropup">

        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" role="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>

尝试一下 »

结果如下所示：

 
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
11.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

Bootstrap-CL：按钮下拉菜单的更多相关文章

  1. 8.bootstrap单按钮下拉菜单

    1. 2. (1)首先是两个按钮,因此需要<div class="btn-group">加上"btn-group". (2)要将下拉菜单与按钮联系在 ...

  2. bootstrap：按钮下拉菜单

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  3. Bootstrap 单按钮下拉菜单

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  4. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  5. Bootstrap系列 -- 34. 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...

  6. Bootstrap系列 -- 24. 下拉菜单基本用法

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文 ...

  7. 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)

    实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...

  8. 【Bootstrap】 bootstrap-select2下拉菜单插件

    这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...

  9. Bootstrap系列 -- 27. 下拉菜单对齐方式

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

随机推荐

  1. 洛谷P1865 A % B Problem

    1.洛谷P1865 A % B Problem 题目背景 题目名称是吸引你点进来的 实际上该题还是很水的 题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行 ...

  2. Android-一张图理解MVP的用法

    M和V通过P交互,M做了两件事,开启子线程做耗时操作,然后使用原生的Hander方式切回主线程回调结果给P. M做的两件事也可以使用比较流行的rxjava实现: 备注:图片不清晰可以看这里

  3. Java抓屏程序代码

    原文:http://www.open-open.com/code/view/1422262655200 import java.awt.Dimension; import java.awt.Recta ...

  4. Java中的Copy-on-Write容器 & ConcurrentHashMap & HashTable比较

    参考这篇文章:Link 从JDK1.5开始Java并发包里提供了两个使用CopyOnWrite机制实现的并发容器,它们是CopyOnWriteArrayList和CopyOnWriteArraySet ...

  5. 五步掌握Git的基本开发使用命令

    第一步:设置全局变量: git config --global user.name "gang.li" git config --global user.email "l ...

  6. kibana dev tools快捷键

    kibana dev tools快捷键 ctrl+enter  提交请求 ctrl+i 自动缩进 ctrl+enter 提交请求 down 打开自动补全菜单 enter或tab 选中项自动补全 esc ...

  7. 【转载】5种网络IO模型

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问题其实不同的人给出 ...

  8. 算法和流程控制 --《高性能JavaScript》

    总结: 1.for, while, do-while循环性能相当,并没有一种循环类型明显快于或满于其他类型. 2.避免使用for-in循环,除非要遍历一个属性数量未知的对象. 3.改善循环性能的最佳形 ...

  9. AVL树，红黑树，B-B+树，Trie树原理和应用

    前言:本文章来源于我在知乎上回答的一个问题 AVL树,红黑树,B树,B+树,Trie树都分别应用在哪些现实场景中? 看完后您可能会了解到这些数据结构大致的原理及为什么用在这些场景,文章并不涉及具体操作 ...

  10. 使用Genymotion调试出现错误INSTALL_FAILED_CPU_ABI_INCOMPATIBLE解决的方法

    今天在使用android studio在Genymotion上调试程序出现INSTALL_FAILED_CPU_ABI_INCOMPATIBLE导致程序安装不了: 后来百度发现是要安装:http:// ...