Bootstrap入门（十）组件4：按钮组与下拉菜单结合

时间：2022-03-04 23:05:11
Bootstrap入门（十）组件4：按钮组与下拉菜单结合
 
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>

<script src="bootstrap.min.js" type="text/javascript"></script>
 
1.按钮组与下拉菜单
把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。 只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。
　　　　 <div class='btn-group'>

            <button type="button" class="btn btn-default">1</button>

            <button type="button" class="btn btn-default">2</button>

            <button type="button" class="btn btn-default">3</button>

            <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="#">dianwo1</a>

                    <li><a href="#">dianwo2</a>

                </ul>

            </div>

        </div>
效果：
Bootstrap入门（十）组件4：按钮组与下拉菜单结合
 Bootstrap入门（十）组件4：按钮组与下拉菜单结合
2.颜色
修改button的class，可以改变按钮式下拉菜单的颜色，（详细可以看入门（六）按钮与图片）
 
比如我们添加 btn-info属性
　　　　　　 <div class='btn-group'>

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

                    xiala1

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

                </button>

                <ul class='dropdown-menu' role='menu'>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                </ul>

            </div>
效果
Bootstrap入门（十）组件4：按钮组与下拉菜单结合
Bootstrap入门（十）组件4：按钮组与下拉菜单结合
 
3.分裂式下拉菜单
修改上一段代码，用一个新的button来代替span
 
　　　　　　  <div class='btn-group'>

                <button type="button" class="btn btn-info dropdown-toggle">xiala2</button>

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

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

                </button>

                <ul class='dropdown-menu' role='menu'>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                </ul>

            </div>
效果，明显是分裂开来了
Bootstrap入门（十）组件4：按钮组与下拉菜单结合
 Bootstrap入门（十）组件4：按钮组与下拉菜单结合
4.大小
跟前面的一样，响应式，自然也有不同的大小（btn-lg 、btn-sm 、btn-xs ）
（如果是运用在分裂式下拉菜单中，需要在两个button都添加属性，否则两个的大小会不一样大的）
　　　　　　　<div class='btn-group'>

                <button type="button" class="btn btn-info dropdown-toggle btn-lg" data-toggle='dropdown'>

                    xiala1

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

                </button>

                <ul class='dropdown-menu' role='menu'>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                </ul>

            </div>

            <div class='btn-group'>

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

                    xiala1

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

                </button>

                <ul class='dropdown-menu' role='menu'>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                </ul>

            </div>

            <div class='btn-group'>

                <button type="button" class="btn btn-info dropdown-toggle btn-sm" data-toggle='dropdown'>

                    xiala1

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

                </button>

                <ul class='dropdown-menu' role='menu'>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                </ul>

            </div>

            <div class='btn-group'>

                <button type="button" class="btn btn-info dropdown-toggle btn-xs" data-toggle='dropdown'>

                    xiala1

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

                </button>

                <ul class='dropdown-menu' role='menu'>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                </ul>

            </div>
效果：
Bootstrap入门（十）组件4：按钮组与下拉菜单结合
 Bootstrap入门（十）组件4：按钮组与下拉菜单结合
 
5.内容向上
有时候按钮式处于下方的，希望点击后内容是向上显示的
修改div的class，添加一个dropup属性
　　　　　　　<div class='btn-group dropup'>

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

                    xiala1

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

                </button>

                <ul class='dropdown-menu' role='menu'>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                    <li><a href="#">1</a></li>

                </ul>

            </div>
效果
Bootstrap入门（十）组件4：按钮组与下拉菜单结合
 Bootstrap入门（十）组件4：按钮组与下拉菜单结合
 
 
 
 
 

Bootstrap入门（十）组件4：按钮组与下拉菜单结合的更多相关文章

  1. Bootstrap历练实例：标签页内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  3. bootstrap 响应式导航条模板（含下拉菜单，弹出框）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Delphi 工具条按钮上的下拉菜单

    制作步骤: 1.添加一个 TImageList: ImageList1, 然后载入些图标; 2.添加两个 TPopupMenu: PopupMenu1.PopupMenu2, 并分别添加些菜单项; 3 ...

  5. Bootstrap入门（八）组件2：下拉菜单

    Bootstrap入门(八)组件2:下拉菜单   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：内嵌下拉菜单的按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Bootstrap&lt&semi;基础十四&gt&semi; 按钮下拉菜单

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

  8. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  9. Bootstrap入门（六）按钮和图片

    Bootstrap入门(六)按钮和图片   先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="styleshe ...

随机推荐

  1. Hawk 2&period; 软件界面介绍

    2. 软件界面介绍 1. 基本组件 Hawk采用类似Visual Studio和Eclipse的Dock风格,所有的组件都可以悬停和切换.包括以下核心组件: 左上角区域:主要工作区,任务管理. 下方: ...

  2. &lbrack;BZOJ2795&rsqb;&lbrack;Poi2012&rsqb;A Horrible Poem

    2795: [Poi2012]A Horrible Poem Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 261  Solved: 150[Subm ...

  3. Java基础知识强化之IO流笔记51：IO流练习之 键盘录入学生信息按照总分排序写入文本文件中的案例

    1.  键盘录入学生信息(姓名,语文成绩,数学成绩,英语成绩),按照总分排序写入文本文件中 分析:   A:创建学生类   B:创建集合对象      TreeSet<Student>   ...

  4. python icmp&bsol;dns&bsol;http监控网络各个节点状态，并记录日志

    配置文件如下:支持多节点: { "dns":[{"domainname":"www.baidu.com","dnsserver&q ...

  5. 人脸识别准备 -- 基于raspberry pi 3b &plus; movidius

    最近准备系统地学习一下深度学习和TensorFlow,就以人脸识别作为目的. 十年前我做过一些图像处理相关的项目和研究,涉及到图像检索.记得当时使用的是SIFT特征提取,该特征算子能很好地抵抗图像旋转 ...

  6. flashfxp v3&period;7 注册码

    -------- FlashFXP Registration Data START --------FLASHFXPvwBW1S4QvwAAAAC5W5MNJwXnsl73i3CxcVAAvAyagF ...

  7. python&plus;Django框架运用（二）

    Django应用 与 模板 应用就是网站中的一个独立的程序模块,在Django 中,主目录一般不处理用户的具体请求, 主目录主要做的是项目的初始化和设置,以及请求的分发. 创建应用 1. 创建应用命令 ...

  8. OC基础--常用类的初步介绍与简单实用之集合类

    集合类的异同点 一.NSArray\NSMutableArray *有序 *快速创建(只有不可变数组可以):@[obj1, obj2, obj3]; *快速访问元素:数组名[i] *只能存放对象 二. ...

  9. windows系统查看端口占用程序方法

    开始---->运行---->cmd,或者是window+R组合键,调出命令窗口   输入命令:netstat -ano,列出所有端口的情况.在列表中我们观察被占用的端口,比如是49157, ...

  10. OA&lowbar;1界面

    <%@ page language="java" contentType="text/html;charset=GB18030" pageEncoding ...

相关文章