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. Codeforces 375 D Tree and Queries

    Discription You have a rooted tree consisting of n vertices. Each vertex of the tree has some color. ...

  2. mysql 5.7版本目录无data文件夹的解决办法

    安装mysql 5.7+版本时,若发现因根目录下,缺少data文件夹的情况, ***请不要去拷贝其他版本的data文件夹!*** 因为此操作会出现很多潜在问题:比如我遇到的执行show variabl ...

  3. linux 文件属性、权限、所有人、所属组

    Linux命令行模式下,文件还是需要通过ls -l来查看 可以通过ll查看长文件,会有如下类型显示drwxr-xr-x  2 root root 4096 Nov 10  2010 conf 总共有7 ...

  4. 【paddle学习】识别数字

    Softmax回归(Softmax Regression) 最简单的Softmax回归模型是先将输入层经过一个全连接层得到的特征,然后直接通过softmax 函数进行多分类 输入层的数据$X$传到输出 ...

  5. 转：给 Android 开发者的 RxJava 详解

    转自:  http://gank.io/post/560e15be2dca930e00da1083 评注:多图解析,但是我还是未看懂. 前言 我从去年开始使用 RxJava ,到现在一年多了.今年加入 ...

  6. 【Mongodb教程 第十八课 】MongoDB常用命令 数据库命令 集合操作命令

    面向文档的 NoSQL 数据库主要解决的问题不是高性能的并发读写,而是保证海量数据存储的同时,具有良好的查询性能.  条件操作符 <, <=, >, >=  这个操作符就不用多 ...

  7. 【转载】TCP粘包问题分析和解决（全）

    TCP通信粘包问题分析和解决(全) 在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.因此TCP的socket编程,收发两端(客户端和服务器端)都要有成对的socket,因此,发送 ...

  8. ArcGIS教程：分水岭

    摘要 确定栅格中一组像元之上的汇流区域. 使用方法 · 各个分水岭的值将取自输入栅格中源的值或者要素倾泻点数据.假设倾泻点为栅格数据集,则使用像元值.假设倾泻点为点要素数据集,则从指定的字段中获取值. ...

  9. uboot 对 FAT 分区的解析

    uboot 对 FAT 分区的解析 改写 UBOOT 从 U 盘读入固件,然后刷机.发现有的 U 盘无法正确读到分区,跟踪了一下发现自己写的代码有漏洞,只尝试解析分区表里的第一个分区.跟踪的过程中重温 ...

  10. mac下Tomcat的安装

    转自:http://blog.csdn.net/liuyuyefz/article/details/8072485 对于Apache Tomcat 估计很多童鞋都会,那么今天就简单说下在mac上进行t ...