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. yum gd linux

    32位操作系统安装命令:[root@localhost ~]# yum install php-gd*64位操作系统安装命令:[root@localhost ~]# yum install php-g ...

  2. DICOM医学图像显示算法改进与实现——LUT

    引言 随着Ul(超声成像).CT(计算机断层成像).MRI(核磁共振成像).CR(计算机X线成像).电子内窥镜.盯(正电子发射断层成像)和MI(分子影像)等医学影像设备不断涌现,利用计算机对医学影像设 ...

  3. Solidworks 如何绘制投影曲线

    1 画一个半圆,然后旋转360°得到一个正圆   2 在视图中任意绘制一条平面曲线(用样条曲线绘制)   3 退出草图,在特征选项卡中点击"投影曲线"   4 将草图2(一条平面曲 ...

  4. leetcode笔记：Contains Duplicate

    一. 题目描写叙述 Given an array of integers, find if the array contains any duplicates. Your function shoul ...

  5. overflow（超出部分省略号）

    溢出:overflow:visible/hidden/scroll/auto/inherit: visible:默认值.不剪切.hidden:超出部分剪切.没有滚动条.scroll:超出部分有滚动条. ...

  6. 豆瓣面试题strstr）

    /*(豆瓣2013面试题strstr) 有一个在给定字符串中查找子串的函数strstr, 该函数从给定的字符串src中查找substr并返回一个整数, 指明substr第一次出现的位置(从0开始计数) ...

  7. 查询历史使用过的命令并使用（history）

    一.什么是history 在bash功能中.它能记忆使用过的命令,这个功能最大的优点就是能够查询以前做过的举动.从而能够知道你的执行步骤.那么就能够追踪你曾下达过的命令.以作为除错的工具. 二.His ...

  8. sessionFactory的创建和四种查询方式

    1,关于sessionFactory的创建 5.0版本之前,下面这种方式在5.0及之后,可能会出问题,建议修改为5.0之后的方式 // 实例化Configuration Configuration c ...

  9. Java-JDK-bin-Java-JR

    Java in JDK\bin vs. Java in JRE\bin (Java in General forum at Coderanch) https://coderanch.com/t/385 ...

  10. JUNO eclipse Version: 4.2.0 添加svn插件

    1.下载最新的这个版本的SVN http://www.eclipse.org/subversive/latest-releases.php 实际的下载地址 http://www.eclipse.org ...