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. 基于MNIST数据的卷积神经网络CNN

    基于tensorflow使用CNN识别MNIST 参数数量:第一个卷积层5x5x1x32=800个参数,第二个卷积层5x5x32x64=51200个参数,第三个全连接层7x7x64x1024=3211 ...

  2. 生活娱乐 VERYCD的T恤设计大赛

    http://www.verycd.com/event/tee2011/ 购买网站: http://dianlv.taobao.com/

  3. 【leetcode】 26. Remove Duplicates from Sorted Array

    @requires_authorization @author johnsondu @create_time 2015.7.22 18:58 @url [remove dublicates from ...

  4. Ubuntu搭建Android开发环境

    前言 由于迁移到新的笔记本,所以Android开发环境须要又一次配置了.android官网有配置教程,我正好回想一遍 配置Java环境 下载jdk.官网地址:http://www.oracle.com ...

  5. 走入asp.net mvc不归路:[2]控制器概览

    asp.net mvc中最灵活的地方就是控制器,这里可以验证数据,可以跳转视图,还可以访问数据库等等.所以,我们要先从这里说起. 1 控制器就是继承了Controller的类,一般来说,类名后面都会增 ...

  6. 各种加载效果，适合做加载loading动画效果 Eclipse版

    Animation.rar 链接: http://pan.baidu.com/s/1c0QkOz2 密码: kd57

  7. SGU 194 Reactor Cooling 无源汇带上下界可行流

    Reactor Cooling time limit per test: 0.5 sec. memory limit per test: 65536 KB input: standard output ...

  8. iOS xmpp协议实现聊天之openfire的服务端配置（一）

    今天弄这个openfire服务端的配置直接苦了一逼,只是好在最后最终配置好了.首先感谢@月光的尽头的博客给了我莫大的帮助. 切入正题,首先说一下iOS xmpp协议实现聊天openfireserver ...

  9. Arcgis Engine（ae）接口详解（2）：featureClass查询

    //属性查询~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //IQueryFilter代表查询条件,QueryFilterClass代表只限于属性查询(就是没有空间查询) ...

  10. MongoDB Spark Connector

    [在文件/usr/bin/yum./usr/libexec/urlgrabber-ext-down最上面的一行改为#!/usr/bin/python2.7] yum install git Note: ...