Bootstrap 下拉菜单(Dropdowns)_bootstrap dropdown-程序员宅基地

技术标签: 前端  Bootstrap  

一、Bootstrap 下拉菜单(Dropdowns)

1.1 基本下拉框

.dropdown 类用来指定一个下拉菜单。
我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。
<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类。

<div class="container">
    <h2>下拉菜单</h2>
    <p>.dropdown 类用来指定一个下拉菜单。</p>
    <p>.dropdown-menu 类来设置实际下拉菜单。</p>
    <p>我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。</p>
    <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Dropdown button
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
        </div>
    </div>
</div>

在这里插入图片描述

1.2 下拉菜单中的分割线

.dropdown-divider类用于定义下拉菜单中的分割线

<div class="container">
  <h2>下拉菜单中</h2>
  <p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Another link</a>
    </div>
  </div>
</div>

在这里插入图片描述

1.3 下拉菜单中的禁用项

<div class="container">
  <h2>下拉菜单</h2>
  <p>.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。</p>
  <p>如果要禁用下拉菜单的选项,可以使用.disabled 类。</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Normal</a>
      <a class="dropdown-item active" href="#">Active</a>
      <a class="dropdown-item disabled" href="#">Disabled</a>
    </div>
  </div>
</div>

在这里插入图片描述

1.4 指定向上弹出的下拉菜单

如果你希望下拉菜单向上弹出,可以将 <div> 元素的 class=“dropdown” 替换为 “dropup”:

<div class="container">
  <h2>下拉菜单</h2>
  <p> .dropup 类用于设置下拉菜单向上弹出:</p><br>
  <div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
</div>

在这里插入图片描述

1.5 下拉菜单中添加标题

.dropdown-dropdown-header 下拉菜单中添加标题

<div class="container">
  <h2>下拉菜单中</h2>
  <p>.dropdown-header 类用于在下拉菜单中添加标题:</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <h5 class="dropdown-header">Dropdown header</h5>
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
      <h5 class="dropdown-header">Dropdown header</h5>
      <a class="dropdown-item" href="#">Another link</a>
    </div>
  </div>
</div>

在这里插入图片描述

1.6 按钮中设置下拉菜单

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>按钮中的下拉菜单</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
  
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
</div>
</body>
</html>

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_27870421/article/details/97043787

智能推荐

部署FTP(二)——用户权限配置与配置文件详解_allow_writeable_chroot-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏26次。目录结构说明默认安装路径:/etc/vsftpd/文件名称说明vsftpd.confftp核心配置文件ftpusers黑名单配置文件(此文件中的用户无法登陆ftp服务)user_list黑白名单配置文件。详情请看下方解释chroot_list是否限制访问主目录之下的用户配置文件(初始安装没有可自行创建)vsftpd.chroot_list是..._allow_writeable_chroot

originPro2021(2)工作簿中添加新列且图中添加线_origin新增一列,怎么更新图-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏7次。方法1:右键工作簿的空白处“添加新列”方法2:快捷键ctrl+D右键图层内容 选中添加的列_origin新增一列,怎么更新图

Redis、Kafka、Storm_redis kafka叫什么-程序员宅基地

文章浏览阅读704次。一、Redis【1】Redis指令查询手册:https://redis.io/commands#hash【2】Redis 是一个完全开源免费的高性能的key-value数据库,常常用作缓存,它有丰富的API接口,其使用类似类似于普通数据库操作,先进行redis客户端的链接,然后进行相应的类似增删改查操作,相关API接口与命令行命令基本是一一对应的。maven依赖:&lt;depe..._redis kafka叫什么

Nginx配置TCP请求转发_stream ssl_ciphers high-程序员宅基地

文章浏览阅读6.8k次。https://www.cnblogs.com/baolin2200/p/7803511.htmlNginx配置TCP请求转发1.TCP请求转发基于stream在1.9版本前,需要单独编译安装该组建:# 依赖服务[root@baolin conf]#yum -y install pcre-devel openssl openssl-devel library_stream ssl_ciphers high

python wmic_使用 Python 玩转 WMI-程序员宅基地

文章浏览阅读1k次。来源:伯乐在线专栏作者 - Prodesire链接:http://python.jobbole.com/86349/最近在网上搜索Python和WMI相关资料时,发现大部分文章都千篇一律,并且基本上只说了很基础的使用,并未深入说明如何使用WMI。本文打算更进一步,让我们使用Python玩转WMI。1 什么是WMI具体请看微软官网对WMI的介绍。这里简单说明下,WMI的全称是Windows Mana..._python wmic

css 的优先级以及设置css的优先级_滚动条优先级-程序员宅基地

文章浏览阅读1.5k次。1.多个选择器可能会选择同一个元素,有3个规则,从上到下重要性降低: !important的用户样式 !important的作者样式 作者样式 用户样式 浏览器定义的样式 2. CSS规范为不同类型的选择器定义了特殊性权重,特殊性权重越高,样式会被优先应用。 权重设定如下: html选择器,权重为1; 类选择器,权重_滚动条优先级

随便推点

php接收json字符串有问题_PHP中,从服务器端接收到的json字符串前端有乱码如何解决...-程序员宅基地

文章浏览阅读156次。classJson{publicstaticfunctionencode($str){$code=json_encode($str);returnpreg_replace("#\\u([0-9a-f]+)#ie","iconv('UCS-2','UTF-8',pack('H4','\1'))",$code);}publicstaticfunctiondecode($..._php中,从服务器端接收到的json字符串前端有乱码如何解决

4个网页翻译工具,一键就能将网页英文翻译成中文_网站如何快速中译英-程序员宅基地

文章浏览阅读1.1w次。这里就给大家分享4个好用的网页翻译插件和工具,每个工具都有自己的优点,大家根据自己的翻译需要去选择使用。_网站如何快速中译英

电子学会-全国青少年编程等级考试真题Scratch一级(2019年12月)在线答题_201912 青少年软件编程等级考试scratch一级真题 答案-程序员宅基地

文章浏览阅读709次。一、小航答题助手预览二、答题页面详细说明三、如何开通使用_201912 青少年软件编程等级考试scratch一级真题 答案

RadioButton的样式设置 以及使用_android中自定义radiobutton的样式怎么设置width-程序员宅基地

文章浏览阅读2.8k次。RadioButton通常要配合RadioGroup使用 基础的RadioButton使用的xml代码如下 &lt;RadioGroup android:id="@+id/act_test_radioGroup" android:layout_width="wrap_content" android:orientation="hor..._android中自定义radiobutton的样式怎么设置width

python 自动点击网页上按钮_python selenium自动化(一)点击页面链接测试-程序员宅基地

文章浏览阅读6.5k次,点赞2次,收藏13次。需求:现在有一个网站的页面,我希望用python自动化的测试点击这个页面上所有的在本窗口跳转,并且是本站内的链接,前往到链接页面之后在通过后退返回到原始页面。要完成这个需求就必须实现3点:1. 找到原始页面上面所有的在本窗口内跳转的链接2. 跳转到目标页面之后,“后退”到原始页面3. 在原始页面上继续点击后续的链接首先,要找到页面上的所有链接并不困难。selenium为我们提供了find_elem..._python 自动点击网页按钮

解决外网与内网或内网之间的通信,NAT穿透_nat是一个孔插入到局域网 一个孔插互联网-程序员宅基地

文章浏览阅读1.2k次。http://www.cnblogs.com/lidabo/p/3828846.html在网络编码中会发现程序在局域网中是可以适用的,但是在外网与内网之间和内网与内网之间就不可行。问题就在于NAT。首先介绍下NAT。 NAT的作用NAT(Network Address Translator),网络地址转换。顾名思义,它是一种把内部私有网络IP地址翻译成公有网络IP地址的技术_nat是一个孔插入到局域网 一个孔插互联网