Bootstrap 구성 요소 드롭다운 menu_javascript 기술 알아보기-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Bootstrap 구성 요소 드롭다운 menu_javascript 기술 알아보기

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

드롭다운 메뉴

Bootstrap은 Twitter 엔지니어가 출시한 HTML, CSS 및 JAVASCRIPT를 기반으로 하는 간단하고 유연한 인기 프런트 엔드 프레임워크로, 라이브러리에 다양한 기능이 정의되어 있는 CSS 및 JS 라이브러리라고 상상할 수 있습니다. . 구성 요소 표시 효과 및 애니메이션.

.dropdown ——상위 요소를 드롭다운 메뉴 구성요소로 설정하고 하위 메뉴를 아래쪽으로 팝업합니다.
.dropup——상위 요소를 드롭다운 메뉴 구성요소로 설정하고 하위 메뉴를 팝업합니다.
.dropdown-toggle——버튼을 드롭다운 메뉴 토글 버튼으로 설정합니다.
.dropdown-menu——ul 요소를 드롭다운 메뉴로 설정합니다.
.dropdown-menu-right - 메뉴를 오른쪽으로 정렬합니다.
.pull-right - 메뉴 구성요소의 상위 요소를 오른쪽으로 정렬합니다.
.dropdown-header - 메뉴 항목에 제목을 추가합니다.
.divider——메뉴 항목 구분선을 추가합니다.
.disabled——해당 메뉴 항목을 비활성화합니다.

구현 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1"> 
 <title>CSS全局样式_下拉菜单</title> 
 <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> 
 <script src="jquery-1.11.1.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container"> 
 <div class="dropdown pull-right"> 
 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
 下拉菜单 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> 
 <li role="presentation" class="dropdown-header">中超Big4</li> 
 <li><a href="#" role="menuitem">上海上港</a></li> 
 <li><a href="#" role="menuitem">广州恒大</a></li> 
 <li><a href="#" role="menuitem">山东鲁能</a></li> 
 <li class="disabled"><a href="#" role="menuitem">北京国安</a></li> 
 <li role="presentation" class="divider"></li> 
 <li role="presentation" class="dropdown-header">中超5-8</li> 
 <li><a href="#" role="menuitem">上海申花</a></li> 
 <li><a href="#" role="menuitem">江苏舜天</a></li> 
 <li><a href="#" role="menuitem">长春亚泰</a></li> 
 <li><a href="#" role="menuitem">河南建业</a></li> 
 </ul> 
 </div> 
</div> 
 
</body> 
</html>

실현 효과:

위 내용은 이 기사의 전체 내용입니다. 부트스트랩 구성 요소를 사용하여 드롭다운 메뉴를 만드는 모든 사람에게 도움이 되기를 바랍니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

WPS表格下拉菜单怎么做Mar 21, 2024 pm 01:31 PM

WPS表格下拉菜单怎么做：选中要设置下拉菜单的单元格后，依次点击“数据”，“有效性”，再在弹出的对话框中进行相应设置后，以此来下拉我们的菜单。WPS作为一款功能强大的办公软件，其自身拥有的能够编辑文档、统计数据表格等的功能，为很多需要和文字、数据等打交道的人们提供了很多的方便。而要想熟练地运用WPS软件为我们提供很多方便，就需要我们能够先掌握住WPS软件的各种非常基本的操作，在这篇文章里，小编就给大家分享一下怎么在用WPS软件做出的WPS表格中进行下拉菜单的操作。在打开WPS表格后，首先用鼠标选

如何在 Microsoft Word 中添加艺术页面边框Apr 27, 2023 pm 08:25 PM

您是否厌倦了一直在Word文档上看到传统的黑色边框？您是否正在寻找如何为您的文档添加一些彩色和艺术边框以使其更具吸引力和乐趣的方法？在Word文档的不同页面中添加不同的艺术边框怎么样？或者一次将单个艺术边框应用于文档中的所有页面？我知道你和我们一样对这整个艺术边界的事情感到兴奋！直接阅读本文，了解如何成功地将艺术边框应用于Word文档。第1部分：如何将相同的艺术页面边框应用于Word文档中的所有页面第1步：打开Word文档，然后单击顶部功能区中的“设计”选项卡。在DESIGN选

如何打印不带注释的 Word 文档Apr 18, 2023 pm 02:19 PM

对于MicrosoftWord，注释很重要，尤其是当文档在多人之间共享时。每个人都可以通过他/她的评论在文档内容中添加一些内容，并且保留这些评论以供以后参考是非常重要的。但是当你需要打印文档时，你真的需要打印注释吗？在某些情况下，是的。但对于其他一些情况，这是一个很大的不！在本文中，我们通过2种不同的解决方案解释了如何轻松打印Word文档而不打印其上的评论。请记住，评论只是被隐藏，不会被删除。因此，您绝对不会在此处冒您文档的任何部分的风险，在没有评论的情况下打印它。希望你喜欢！解决方案1：通

在 Windows 11 上调整屏幕以监控的 5 种方法（和修复）Apr 14, 2023 pm 03:28 PM

由于最近世界各地的改进，PC部件现在以厂商建议零售价出售，这促使许多用户最终构建了他们梦想中的PC。构建PC可能会遇到挑战，其中一项任务是使您的屏幕适合显示器的显示。如果您无法将屏幕安装到Windows11上的显示器上，那么您需要了解的就是这一切。让我们开始吧。如何以5种方式调整屏幕以在Windows11上进行监控要使您的屏幕适合您的显示器，您可以根据当前设置调整分辨率、缩放比例或显示输出设置。我们建议您尝试调整分辨率大小以保持视觉质量和dpi。但是，如果这对您不起作用，您可以尝

如何在Google幻灯片中设置图像透明度？Apr 25, 2023 pm 06:52 PM

如何更改Google幻灯片中图像的透明度Google幻灯片允许您对图像进行微小的更改。您可以使用Google幻灯片中的“格式选项”菜单来更改您插入的任何图像的透明度级别。要使用Google幻灯片中的“格式选项”菜单使图像透明：打开您现有的Google幻灯片演示文稿或创建一个新的。在其中一张幻灯片的演示文稿中选择现有图像。或者，通过按“插入”> “图像” 并选择其中一个上传选项来添加图像。选择图像后，按工具栏中的格式选项按钮。或者，右键单击图像并选择格式选项。“ 格式选项”菜单

实现微信小程序中的下拉菜单效果Nov 21, 2023 pm 03:03 PM

实现微信小程序中的下拉菜单效果，需要具体代码示例随着移动互联网的普及，微信小程序成为了互联网开发的重要一环，越来越多的人开始关注和使用微信小程序。微信小程序的开发相比传统的APP开发更加简便快捷，但也需要掌握一定的开发技巧。在微信小程序的开发中，下拉菜单是一个常见的UI组件，实现了更好的用户操作体验。本文将详细介绍如何在微信小程序中实现下拉菜单效果，并提供具

如何在 Excel 中创建带有符号的下拉列表Apr 14, 2023 am 09:04 AM

在 Excel 工作表中创建下拉列表很容易，只要它是一个普通的下拉菜单即可。但是，如果您必须通过添加特殊符号使其特别，或者通过添加一些文本以及符号使其更加特别，该怎么办？好吧，听起来很有趣，但想知道这是否可能？当 Geek Page 随时为您提供帮助时，您有什么不知道的答案？这篇文章都是关于创建下拉菜单，带有符号以及符号和文本。希望你喜欢阅读这篇文章！另请阅读：如何在 Microsoft Excel 中添加下拉菜单第 1 部分：创建仅包含符号的下拉列表要创建带有符号的下拉菜单，我们首先需要创建源

如何在 Windows 11 上使用系统范围的实时字幕May 02, 2023 pm 01:19 PM

Windows辅助功能的功能和特性一直在缓慢增长。Windows1122H2更新带来了一些新功能，其中包括在您的系统上使用系统范围的实时字幕的能力。这是一个非常需要的功能，尤其是自去年其他平台开始包含它以来。让我们进一步了解它。什么是Windows11中的系统范围的实时字幕？顾名思义，系统范围的实时字幕可帮助您为系统上当前播放的任何音频生成字幕。对于听力受损的用户来说，这是一项重要的辅助功能，也可用于在不受支持的应用程序中生成字幕。您还可以使用实时字幕来转录音频文件并制作听不见的音

See all articles