开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使bootsrap4.x导航药丸切换开关，而不是按钮或链接使它开关

Bootstrap是一个流行的前端开发框架，提供了丰富的组件和样式，方便开发人员快速构建响应式网页。在Bootstrap 4.x中，导航药丸切换开关可以通过以下步骤实现：

首先，确保你已经引入了Bootstrap的CSS和JavaScript文件。可以通过CDN链接或本地文件引入。
在HTML文件中，创建一个导航栏的容器，可以使用<nav>标签。
在导航栏容器内部，创建一个包含导航链接的<ul>列表。
在列表中的每个导航项中，使用<a>标签创建链接，并添加相应的文本内容。
在导航栏容器内部，创建一个具有特定class的<button>元素，用于触发导航药丸切换开关。
使用Bootstrap提供的CSS类，将导航药丸切换开关与导航栏列表关联起来。可以使用navbar-toggler类为按钮添加样式。
使用JavaScript代码，为导航药丸切换开关添加点击事件，以实现开关效果。可以使用Bootstrap提供的collapse插件来实现导航栏的展开和折叠。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Navbar Toggle</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中，导航栏的药丸切换开关使用了Bootstrap提供的navbar-toggler类，通过data-toggle和data-target属性与导航栏列表关联起来。点击开关按钮时，导航栏列表会展开或折叠。

这是一个基本的示例，你可以根据自己的需求进行样式和布局的调整。如果你想了解更多关于Bootstrap导航栏的信息，可以参考腾讯云的Bootstrap产品文档：Bootstrap导航栏。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在 jQuery Mobile 中使用 UI 组件

Copyright notice navbar 用于在一个页眉或页脚内显示多达五个按钮或导航项...根据您添加到 navbar 的按钮数量，它将这些按钮平均分布，使它们的大小都一样。...对列表提供更多功能的一个选项称为拆分按钮列表。拆分按钮列表使您能够在同一个列表项中提供两个可单击的选项。...对于处理 on/off 或 true/false 类型的数据，这是一个很好的元素。用户使用反转开关的方式可以有很多种，通过点击开关的任意一侧，或类似滑块一样拖动图柄。...创建一个切换开关与创建一个滑块类似，但其中还是有一些较大的差异。输入变成一个 select 元素，并且要添加两个选项。清单 15 提供了切换开关的示例，该开关提供 on/off 功能。

8K2 0

【必】PowerBI 报告设计思想 - 切换元素篇

局部切换式设计首先来看下效果：注意在图表的右上角给出了一个开关，如下：它表示点击拨动开关可以显示表的数据，点击拨动后，如下：这样，就从图显示效果切换为了表显示效果。...用书签控制局部元素我们用书签除了可以做导航，还可以完成本文所提到的局部切换式设计，如下：这里我们将书签设置为：仅仅控制显示仅仅控制所选的视觉对象这个功能并不是现在才有的，在很久以前的版本PowerBI...例如：这里就是编组的结构，如果你想知道具体节省了多少工作量，可以看：值得一提的是，这里的开关并不是图片，而是使用了原生的PowerBI元素。...开关的设计我们在设计PowerBI报告的时候，是按照产品思维的，我们在作为设计师的那一刻，手指在键盘游动，而大脑在考虑的是报告的每一个细节，甚至到每个像素应该如何设计，而切换的开关，我们也会自己来定制...总结最后，一起来看看整体的效果吧：这种切换效果的最大惊艳之处在于：它是局部切换的。它并不影响整体的所有元素，它只影响局部。

1.6K1 0

纯CSS实现密室逃脱游戏

@alphardex,一个兴趣使然的前端，号称“CSS魔法使”，重度中二病患者，喜欢独自研究CSS的奥秘，口头禅是”我不是无所不知，只是刚好知道而已。”...label负责将该元素与其对应的复选框用for来关联起来，而兄弟选择符则负责与:checked伪类配合好，当某元素被勾选时，其相邻的元素就会受到它的影响。...[type="checkbox"], input[type="radio"] { display: none; } 场景切换假设我们游戏地图分为4块，且可以用导航箭头来切换。...这样就完成了场景切换这一效果完成项目此刻，我们已经具备完成密室逃脱游戏所必须的知识了。...根据上面的攻略，一步步定制好所有开关，摆放好所有物件，且能确保场景能自由切换，这样一个纯CSS密室逃脱游戏就成功诞生啦在线游玩地址：https://codepen.io/alphardex/full/

4121 0

【干货】低压电气元件全面解析

2、一般送电操作时：先合隔离开关，后合断路器或负荷类开关； 3、断电操作时：先断开断路器或负荷类开关，后断开隔离开关。...它功能相当于闸刀开关、过电流继电器、失压继电器、热继电器及漏电保护器等电器部分或全部的功能总和，是低压配电网中一种重要的保护电器。...也使自由脱扣机构动作。分励脱扣器则作为远距离控制用，在正常工作时，其线圈是断电的，在需要距离控制时，按下起动按钮，使线圈通电，衔铁带动自由脱扣机构动作，使主触点断开。...额定短路分断能力（Icu或Icn）：断路器的额定短路分断电流是断路器能够分断而不被损害的最高（预期的）电流值。...3 双电源切换开关双电源切换开关：就是因故停电自动切换到另外一个电源的开关。一般双电源切换开关是广泛应用于高层建筑、小区、医院、机场、码头、消防、冶金、化工、纺织等不允许停电的重要场所。

99513 1

程序员必备智力题集锦 (典藏版)

然后，在第三轮时，再每隔两个就切换第三个柜子的开关状态（也就是将关上的柜子打开，将打开的关上）。照此规律反复操作100次，在第 i 轮，这个人会每数 i 个就切换第 i 个柜子的状态。...当第100 轮经过走廊时，只切换第100个柜子的开关状态，此时有几个柜子是开着的？...由此可以推出，如果有两个蓝眼人，那么他们原本都只看到一个蓝眼人，听到医生的话，都会想：对方是不是岛上唯一的蓝眼人？如果是的话，那么一天后他应该发现对方已经被释放。...要解决这个问题，我们必须弄清楚所谓切换储物柜开关状态是什么意思。这有助于我们推断最终哪些柜子是开着的。问题：柜子会在哪几轮切换状态（开或关）？...柜子n会在n的每个因子（包括1和n本身）对应的那一轮切换状态。也就是说，柜子15会在第1、3、5和15轮开或关一次。（i=1开，3关，5开，15关。

1.5K1 0

后台系统设计（上篇：选择）

常见类型： ·单选按钮 ·复选框 ·图标切换 ·切换开关 ·穿梭框/列表构造器 ·下拉菜单一、单选按钮允许用户从一组相互排斥的选项中选择一个。通常，将一个选项定义为默认选择。外观常规： ?...避免使用否定的表达，例如「同意条款」而不是「不同意条款」或是「打开通知」而不是「关闭通知」等等。...复选框和单选按钮之间的主要差别是：单选按钮给人更加直接的示意，例如开启关闭，而复选只表达一面信息，因此它的反面信息并不是非常直观，甚至对于某些用户而言，并不清楚勾选和不勾选所表达的含义。...四、 Switch 切换开关用于打开或关闭二元操作的切换选项。外观常规： ? 带文本或图标： ? 最佳用法 ·左/灰为关，右/彩为开。...·切换开关可包括文本或图标，例如「开/on」和「关/off」标签，但不建议标签过长，如果标签太长请考虑使用其他互斥的选择控件。 ·切换状态中使用微动画进行过渡，而不是生硬的呈现。

9.6K2 1

Human Interface Guidelines —— 概览

·遵从Deference：流畅的运动和清晰美观的界面有助于人们理解并与内容互动，而不会与内容竞争。内容通常填满整个屏幕，而半透明和模糊往往暗示更多。...在您在内容中导航时，转场提供深度感。 ---- 设计原则为了最大限度地提高影响力和覆盖面，请在构思您的app特点时牢记以下原则。...他们切换开关，移动滑块，并滚动选择器的值。他们甚至可以翻阅书籍和杂志。用户控制（User Control）在整个iOS中，人们（而不是app）在掌控大局。...UIKit提供的界面元素分为三大类： Bars：告诉用户他们在app中的位置，提供导航，并可能包含按钮或其他元素来启动行动和交流信息。...按钮，开关，文本字段和progress indicators是控件的示例。除了定义iOS界面之外，UIKit还定义了app可以采用的功能。

7398 0

最新iOS设计规范五｜3大界面要素：控件（Controls）

“添加联系人”按钮提供了一种替代输入联系人信息的方式，而不是替换方法。可以将其用作添加现有联系人的快捷方式，但也可以让人们使用键盘输入联系人信息。...两种类型的选择器都使人们可以通过选择单值或多值来轻松输入信息。 ? 选项为中长列表时，可以考虑使用选择器。如果需要显示太短的选项列表，请考虑使用下拉菜单而不是选择器。...避免切换屏幕以显示选择器。在正在编辑的字段的下方或附近显示选择器效果很好。选择器通常显示在屏幕底部或弹出窗口中。...十四、开关（Switchs）开关主要用于两个互斥状态之间的视觉切换。 ? 自定义开关的视觉样式，使它与你的设计更协调。...如果你需要工具栏或导航栏中使用类似功能，请改用按钮，并提供两个不同的图标来传达不同的状态。避免在开关中添加说明标签。关于开关的打开或关闭，用户是很明确的。

8.5K3 0

纯CSS实现密室逃脱游戏

原文：https://juejin.im/post/6887792725031288839 前言大家好，这里是CSS魔法使——alphardex。...label负责将该元素与其对应的复选框用for来关联起来，而兄弟选择符则负责与:checked伪类配合好，当某元素被勾选时，其相邻的元素就会受到它的影响。...input[type="checkbox"], input[type="radio"] { display: none; } 场景切换假设我们游戏地图分为4块，且可以用导航箭头来切换...这样就完成了场景切换这一效果完成项目此刻，我们已经具备完成密室逃脱游戏所必须的知识了。...根据上面的攻略，一步步定制好所有开关，摆放好所有物件，且能确保场景能自由切换，这样一个纯CSS密室逃脱游戏就成功诞生啦在线游玩地址：Escape Room Game ?

6361 0

双“局部切换”与特朗普的割韭菜

当1组图表切换时，由于要考虑到此时2组在进行切换时不能对1组的现状进行修改，因此2组的图表切换开关一定要进行切换，也就是要两个单独的开关。同理，左侧也需要2组单独的开关。也就是： ?...此时切换到左表右图，就需要更换开关元件了，任意一侧进行切换意味着到了新的书签页面，也就是说两侧的按钮都需要更换了（参考单一图表，切换时按钮更换）： ?...此时，再切换到左表右表，同样的道理，左右两侧按钮同时更换： ? 最后再到左图右表： ? 最后再将按钮位置进行调整就得到了左右两侧不受影响的图表切换了： ?...节省算力：提前知晓将要切换的部分，直接进行特定部分切换而不是对整个页面切换。为了同样的目标，在CALCULATE计算时，为了节省算力，它也是煞费苦心。...计划刷新的过程仍然是同样的目标，每个账号每天8次的计划刷新设定好后，排队机制让服务器可以充分地调配资源进行更新，将每个时间段的刷新平铺在半小时内，而不是一股脑地让服务器崩溃： ?

4853 1

最新iOS设计规范六｜10大交互规范（User Interaction）

例如：考虑使用选择器或列表进行选择，而不是直接输入文本字段，因为提前设定好选项供用户选择比让他们直接输入信息要容易得多。尽可能从系统获取信息。...提供快捷手势以补充基于界面的导航和操作，而不是代替。尽可能提供一种简单、可见的方式来导航或执行操作，即使这可能意味着需要额外的点击。许多系统APP的导航栏中，都包含一个清晰且可点击的返回按钮。...触觉还可以增强触摸手势和交互，如滚动选择器和切换开关。在支持的iPhone型号上，你可以通过多种方式在APP内添加触觉反馈: 标准的：默认情况下会使用系统触觉反馈，如开关、滑块和选择器。...“撤消”和“重做”应该仅对当前上下文产生明确而直接的影响，而不是更早的时候。...触摸并按住所选内容使它看起来像上升并附着在用户的手指上。拖动内容时，动画和视觉提示会确定可能的目的地。系统还会显示一个标志，指示何时无法删除，否则将导致复制内容而不是移动内容。起始点和目的地 ?

4K3 0

什么是开关弹跳以及如何使用去抖电路防止它

当我们按下按钮或拨动开关或微动开关时，两个金属部件会接触以使电源短路。但是它们不会立即连接，而是金属部件在实际稳定连接之前连接和断开几次。释放按钮时会发生同样的事情。...这会导致错误触发或多次触发，例如多次按下按钮。这就像一个弹跳球从高处落下，它一直在表面弹跳，直到静止。图片简单地说，我们可以说开关弹跳是任何开关的非理想行为，它会生成单个输入的多个转换。...当我们处理电源电路时，开关跳动不是主要问题，但当我们处理逻辑或数字电路时，它会引起问题。因此，为了消除电路中的弹跳，使用了开关去抖动电路。什么是软件去抖？...切换去抖动方法首先，我们将演示没有开关 debounce 的电路。图片图片你还可以在弹跳按钮的同时在示波器中看到波形。它显示了在按钮切换过程中发生了多少弹跳。图片防止电路开关弹跳的常用方法有以下三种。...正如您在电路图中看到的那样，只要拨动开关切换到 A 侧，输出逻辑就会变为“高电平”。在这里，我们使用示波器来检测弹跳。而且，正如您在下面给出的波形中看到的那样，逻辑正在以轻微的曲线移动而不是弹跳。

2.1K4 0

什么是功能特性开关，最佳实践和使用场景

功能标志有时也称为功能切换、释放切换、功能开关、功能门或条件功能。在敏捷环境中，您可以在运行时使用切换来根据需要为部分或所有用户启用或禁用指定功能。...其次，重叠的功能特性开关使人们更难对生产状态有信心。功能开关就像烹饪中使用糖一样：并不总是需要它，但当需要时，也不要过度。在软件开发方面，功能开关可以改变您构建和发布代码的方式。...通过为某些用户而不是其他用户启用某项功能来执行 A/B 测试。您可以根据您选择的属性以及它们是否对用户体验产生负面影响，从特定用户群体中获取反馈。即使某个功能尚未完成，也可以将其部署在开关后面。...此外，团队可以致力于开发新功能或提高可靠性等更高价值的项目，而不是仔细研究日志来解决问题（这可能需要几个小时！）。...使用标准化的命名方案设置命名约定，使标志的类型明确（发布、实验、许可、杀死等），以免创建名称相同或相似的标志。您不希望有人因为名字被误解而切换错误的特性开关。

3794 0

简单了解下无障碍设计模式

每添加一个按钮、图片或一行文本都会使界面变得更加复杂，可以通过以下方式简化你的应用：清晰可见的元素足够的对比度和尺寸明确的重要性级别使主要信息一目了然健全的使你的应用能适应各种用户。...无障碍文本包括可见文本（包括 UI 元素中的标签、按钮中的文字、链接和表单）和不可见的描述（没有文本标签的按钮的替代文字）。有时，可以使用无障碍文本覆盖屏幕中的标签，来为用户提供更多信息。...指示元素的作用使用动作动词来指明一个元素或链接的作用，而不是一个元素的外观，以便视觉障碍用户能够理解。...不要提及确切的手势和交互不要告诉用户如何与控件进行身体上的交互，因为它们可能使用键盘或其他设备进行导航，而不是用手指或鼠标进行导航。无障碍软件会为用户描述正确的交互方式。...错误示例此命令 “点击” 是不准确的，因为这不是激活此控件的唯一方式（它也可以通过按下键盘、开关切换或盲文显示来激活）。

4.7K4 0

Android 4.0 平台特性

当你想创造一个行动项目时,动态的行为(比如一个变量作用的观点,默认的行动,或者子菜单),延长ActionProvider是个好办法,以创造一个可用的组件,而不是处理各项行动项目或活动转换你的碎片。...OtherAPIs for action bar其它api为功能条 •setHomeButtonEnabled()是你指定的图标/标志表现这个按钮来驾船回家或“上”(通过“真”使它像一个按钮)。...虽然SurfaceView相似,TextureView是独特的,因为它表现得像一个普通的观点,而不是创造另一个窗口,所以你可以把它像其他视图对象。...当设置时,这个标志使“低调”模式为系统的容器或导航栏。导航按钮暗淡,其他元素酒吧也隐藏系统。使这是有益的创造更多的引人入胜的游戏系统按钮。...注意模拟器目前不支持屏幕上的导航栏没有硬件导航按钮的设备新，所以使用该皮肤时，您必须使用“主页”按钮的键盘按键首页，“后退”按钮的ESC， F2或页面为 “菜单”按钮。

1.2K2 0

纯CSS实现密室逃脱游戏

本文以「密室逃脱」的游戏场景为学习背景，着重讲解的:checked与模拟按钮的实战场景。...label负责将该元素与其对应的复选框用for来关联起来，而兄弟选择符则负责与:checked伪类配合好，当某元素被勾选时，其相邻的元素就会受到它的影响。首先，让我们来看一看一个简单的开关例子。...input[type="checkbox"], input[type="radio"] { display: none; } 场景切换假设我们游戏地图分为4块，且可以用导航箭头来切换。...，根据所选的导航来确定长图的平移距离。...根据上面的攻略，一步步定制好所有开关，摆放好所有物件，且能确保场景能自由切换，这样一个纯CSS密室逃脱游戏就成功诞生啦。

6032 0

学术 | DeepMind最新研究：使用更简单的环境就能检测AI是否安全

代理的作用是为了使激励达到最大化；例如收集尽可能多的苹果，或者用最少的移动量来到达一个特定的位置。...以下三个例子演示了如何使用gridworlds来定义和度量安全行为: 1 .工作开关环境:我们如何防止代理学习从而避免干扰在某些时候，出于对系统的维护、升级，或者如果代理对自身或其周围环境造成迫在眉睫危险时...左边：A2C通过点击按钮(紫色)来禁用中断机制(粉色)。右：彩色DQN不关心中断，直接进入目标。在这个gridworld中，代理必须通过两条路径中的一条导航到“仓库”来到达绿色目标瓦。...在这种情况下，我们总是希望代理能够通过粉色瓷砖，冒着中断的风险，而不是学习使用紫色按钮。 2....）测试这些环境时，发现两个代理都表现不好：在关闭开关环境中，A2C学习按按钮，禁止关闭开关，而Rainbow直接到达正确目标在副作用环境中，A2C和Rainbow采取了不可逆动作，达到了不大理想水平的安全表现

6055 0

本站同款宁静致远(Quietlee)自媒体博客主题模板，夜间模式及强大的SEO效果-ZBlog主题

更多功能及亮点请查看演示站点（演示站点使用插件实现，兼容性能不是特别好，有问题可以直接联系站长）。主题功能模块：先介绍主题各个功能，夜间模式可以由用户自行开启关闭，导航顶部右侧，夜间模式图标。...-- 分享按钮新增开关。更新日志：2021/01/01 --网页节日背景图和动态飘雪特效分离。 -- 优化节日皮肤接口及css样式代码，优化飘雪特效。 ...-- 优化轮播转动方式，“垂直切换”改为“横向切换”。 -- 优化轮播右侧轮播页数角标（更新完成记得强制刷新）。...顶部导航条增加“新建文章”链接，可以快速新建文章。完善logo和搜索栏隐藏特效，增加渐显效果。美化导航栏二级菜单样式。...搜索栏右侧推荐：对应位置在导航栏，logo最右侧，修改链接和名称即可。注意：右侧开关针对幻灯片轮播的。

3.1K2 0

- MQTT协议是如何工作的 ?

此外，它被设计为轻量级消息传递协议，它使用发布/订阅操作在客户端和服务器之间交换数据。此外，它的小尺寸，低功耗，最小化数据包和易于实现使该协议成为“机器到机器”或“物联网”世界的理想选择。...但是，您需要使用实现Mosquitto代理的基于云的服务器，而不是在本地PC上使用Mosquitto。这是使您的物联网项目可通过互联网控制的必要条件。...让我们添加一些按钮来使用它来可视化发布和一个可视化订阅的栏。按“添加面板”按钮。您将看到许多按钮和图形的列表。让我们选择第二个元素，即“开关”，用作负责发布的事件。...当您按下开关使其打开时，设备将发布一条消息，该消息在“切换器”主题上“打开”。您将在WebSocket UI中清楚地看到它。...原文链接

2.6K2 0

SwitchButton 开关按钮的多种实现方式

刚开始接触开关样式的按钮是在IOS系统上面，它的切换以及滑动十分帅气,深入人心。所谓的开关按钮，就是只有2个状态：on和off，下图就是系统IOS 7上开关按钮效果。...后来，查看开发文档发现，android也有了自己的原生态开关控件，并且在4.0版本中又优化加入了新的类似控件--Switch控件，以及使用起来十分简单的ToggleButton，可是它们只是带有切换效果...，而不带有滑动切换效果，并且Switch控件只支持高版本的系统，对于2.3就不支持。...二.重写CompoundButton控件实现带滑动效果的开关按钮：重写CompuundButton的实现可能会显得相对繁琐些，主要是考虑状态是否已经选中等情况的文字显示。 ...三.重写CheckBox控件实现带滑动效果的开关按钮：其实，看上面给的开发文档内容，大家都可以知道，CheckBox其实就是继承CompoundButton控件的，只是重构CheckBox会比

3K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭