开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使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导航栏。

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

有帮助

没帮助

相关·内容

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

大家好，我是梦想家 Alex 。在我技术群的小伙伴们都知道，我从今年 3月8日开始，在技术群里发起了一个计划。为了跟其他技术群有所区别，并且能调动得起大家的学习热情，我成立了一个出题组。每天早上，我会让管理员在技术群里的公告栏放上3道题目，分别是1道基础题，1道思考题和1道智力题，所有的答案均为群友讨论得出。后面为了让题目更加丰富，我们还添加过算法题，SQL题。一直积累到 8月份，这个日更计划暂时停止，但是我们的题库已经积攒了不少的题目。一开始我的想法是这个在线的知识库只对我们技术群的朋友开放，但是后面想到可以精选出好的问题开放给更多的朋友，一起参与学习和思考，于是我便想到了用文章来记录的方式来打破壁垒。所以，我开设了“每日主题讨论”专栏，想用有限的文章，为大家带去更多的思考。本期文章，我为大家带来的是一点轻松愉快的内容，那便是常见的智力题集锦

01

在 jQuery Mobile 中使用 UI 组件

jQuery Mobile JavaScript 库是一种强大的方式，允许用户通过 Web 浏览器直接连接到触摸友好的应用程序，从而让移动和平板设备可以访问移动应用程序。

02

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

宁静致远(Quietlee)自媒体博客、新闻、资讯互动类主题模板及强大的SEO优化效果，此款主题源自《小灯泡设计》，移植TY程序的Spimes主题，致敬原作者，这是一款非常nice的主题模板，风格简约，兼容多媒体移动端显示，拥有独立的分享代码，不在依赖百度（想依赖也不行，百度分享官网都挂了），支持一键生成海报模式，还移植了源主题模板的阅读模式，优化了夜间模式代码，增加了网站首页底部CMS列表模块，后台自带开关，更多功能介绍请听我一一道来。

02

纯CSS实现密室逃脱游戏

大家好，以下是前端大佬「alphardex」授权笔者转发的内容。本文以「密室逃脱」的游戏场景为学习背景，着重讲解<input>的:checked与<label>模拟按钮的实战场景。

02

html --- bootstrap 框架（栅格系统布局）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,minimal-ui"/> <title>标题</title> <link rel="stylesheet" h

02

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

在设计了布局和导航后，所有界面的元素都可以一一排布了。在制作PowerBI报表的过程中，会有一个核心的问题：信息密度。

01

自用Chrome插件推荐

它允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 JavaScript 程序，可用于向网页添加新功能或修改现有功能。使用油猴，您可以轻松在任何网站上创建、管理和运行这些用户脚本。

02

微信小程序----侧滑菜单（Popup----左侧不动，右侧滑动）（MUI侧滑导航）

实现的目标----YDUI的Popup组件点击列表图标----左侧的菜单栏显示----点击关闭按钮或者右侧的遮罩层----左侧菜单栏关闭实现方案1：左侧菜单和右侧展示页面分为上下两层 wxm

02

RP原型资源分享-购物类App

本套UI Kit是商品展示页面的模板，可供购物类App参考和复用，设计简洁，添加了必要的交互。

05

Bootstrap框架的简单使用

Bootstrap 是由 Twitter 公司开发维护的简洁、直观、强悍的前端开发 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果，让web开发更迅速、简单。

01

Layui常用功能整理

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

02

Z-BlogPHP开运锦鲤前来报道（更新说明及操作教程，必看文章）

历时一个多月的锦鲤主题，终于完成了。2019首发Z-blogPHP锦鲤主题模板（Koilee · 开运锦鲤），部分模块移植WP主题，目前主题已经完善，主题简洁、大气，适合个人博客及文章写作等，先介绍主题吧。

04

分享一个扁平化UI风格网站

「网址」：https://www.runoob.com/manual/Flat-UI/

02

typecho 导航主题webstack 钻芒博客二开美化版新增暗黑模式全屏切换等

2023年5月---前排提示：钻芒博客已更换域名，新博客URL：www.zuanmang.net

02

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

一款设计良好的产品可供所有能力的用户使用，包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性，这是非常值得做的事情。

04

李洋个人博客《mxlee》zblog主题-梦想家（精品推荐）

这款主题制作了好久，历时一个多月，曾经几度要放弃这个主题了，最终还是不舍，至于原因嘛，，，因为我感觉越来越像《知更鸟》主题，最开始我打算做一款自用主题，把自己喜欢的元素都添加在内，但是做完才发觉主题真的很不错，精简美观，响应式一应俱全，所以决定放出。

02

Python Django个人网站搭建4-配置使用 Bootstrap 4 并改写模板文件

作者： zifanwang 发布于2020-05-08

03

纯CSS实现密室逃脱游戏

“密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。玩家常常会被困在一间密室中，而过关的目的就是想法设法逃出这件密室。以下是笔者玩的最早的一个密室逃脱游戏——深红房间，它也可以说是密室逃脱类游戏的先祖。

01

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

在单个选项下，存在多组互斥选项，且互斥选项组之间存在一定关系，可以考虑混用分段控件和常规按钮，由于分段控件在视觉上占用更大的面积，故给人在层级上更加置前。

02

前端-10款web动画插件

今天分享的这款就是基于jQuery的瀑布流图片筛选插件，我们可以点击图片分类名称，即可将对应分类下的图片以瀑布流的方式展示出来，这款插件在筛选图片上使用还是比较方便的。

05

jQuery点击图片来回切换功能

在项目里，有时候会写这样的开关效果，点击开关来回切换，也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。

02

纯CSS实现密室逃脱游戏

昨天分享了一个学习 CSS Flexbox 属性的游戏，感兴趣可以去看看：CSS Flexbox 青蛙游戏，今天分享多一个密室逃脱的游戏。

01

Z-BlogPHP开运锦鲤前来报道（更新说明及操作教程，必看文章）

历时一个多月的锦鲤主题，终于完成了。2019首发Z-blogPHP锦鲤主题模板（Koilee · 开运锦鲤），部分模块移植WP主题，目前主题已经完善，主题简洁、大气，适合个人博客及文章写作等，先介绍主题吧。

03

Flutte部件目录-Material Components 顶

底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。 BottomNavigationBar小部件实现此组件。

04

[工具] Chrome插件-CSDN助手

无意间发现了 CSDN 官方出品的 Chrome插件，试用了一下感觉不错，今天分享给大家。

02

保姆级教程：写出自己的移动应用和小程序（篇一）

工欲善其事必先利其器，一个 Mac 设备必不可少（ iMac、MacBook皆可），接下来下载最新版本的 Xcode 作为 iOS 开发的IDE（Integrated Development Environment ，集成开发环境，就是编辑、编译、链接、调试统统包含的一揽子开发环境，移动开发的 IDE 一般还会包含移动设备的模拟器）。

00

ZBP旗舰主题博览《Expolee》，新年新气象我的风格就是独“鼠”一帜！

HI,不好意思2020新款旗舰主题来晚了，，，金鼠献瑞新年就要有新的气象，祝大家在新的一年有"鼠"不尽的收获、"鼠"不尽的快乐、"鼠"不尽的笑容、 "鼠"不尽的幸福、 "鼠"不尽的钞票和 "鼠"不尽的美满生活！接下来为您介绍一款令人惊叹的昼夜双版设计，精心打磨的一处处细节，一切从心出发，从零开始，只为让您的爱站拥有速度与优雅兼具的极致体验，这就是今年的首款旗舰主题《Expolee-博览2020》。

02

【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

animating bool型显示指示器(true，默认的)还是隐藏它(false)；

04

【Java 进阶篇】深入了解 Bootstrap 插件

Bootstrap 是一个流行的前端框架，提供了各种强大的插件，用于增强网页和应用程序的功能和交互性。本篇博客将深入介绍 Bootstrap 插件，适用于那些刚刚开始学习前端开发的小白。

03

Android 4.0 平台特性

Android 4.0 平台特性 API等级：14 Android4.0 是一次重要的平台发布版，为用户和应用程序开发者增加了大量的新特性。在下面我们将讨论的所有新特性和API中，因为它将 Android 3.x 版本中广泛使用的API和全息图像主题带给了小屏幕设备，因此我们说 Android 4.0 是一次重要的平台发布版。作为一名开发者，现在你拥有了单一的平台和统一的 API 框架，使你可以开发，并通过一个APK 来发布你的应用程序，并且可以为运行相同版本Android(Android 4.0[API级别14]或以上版本) 的手机、平板电脑和其他设备提供优化了的用户体验。

02

zblog明信片主题类型模板全新绽放，R角、透明、森系您想要的我都有

HI，大家好，首先先介绍下大家比较关心的几个问题，首先需要安装zblogPHP版本（一般来说安装最新版即可），不会安装的查看此地址：zblog安装图文教程，附zblog主题下载及使用教程，程序安装完成之后，需要下载和开启主题，如果您是在应用中心购买的，可以忽略前半部分，直接查看主题设置内容接口，否则请继续查看教程。

02

接口测试|Charles的界面介绍

在发送网络请求的时候，charles工具界面会展示所有发送的请求数据包，如下图展示，本篇文章会对此界面逐一进行介绍。

02

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

当我们按下按钮或拨动开关或微动开关时，两个金属部件会接触以使电源短路。但是它们不会立即连接，而是金属部件在实际稳定连接之前连接和断开几次。释放按钮时会发生同样的事情。这会导致错误触发或多次触发，例如多次按下按钮。这就像一个弹跳球从高处落下，它一直在表面弹跳，直到静止。

04

ToggleButton和Switch使用大全

上期学习了CheckBox和RadioButton，那么本期来学习Button的另外两个子控件ToggleButton和Switch，在开发中同样比较重要。一、ToggleButton ToggleButton（开关按钮）是Android系统中比较简单的一个组件，是一个具有选中和未选中双状态的按钮，并且需要为不同的状态设置不同的显示文本。当用户在两种状态间进行切换时会触发一个OnCheckedChange事件。 ToggleButton所支持的XML属性和相关方法如下表所示。 XM

05

bootstrap框架基础知识点整理

注意: 任意元素使用了布局容器的样式，都会称为布局容器，建议使用div作为布局容器

04

SwiftUI案例：自定义加载动画

案例通过在间隔时间内不断控制变量 animateBall:Bool 与 animateRotation:Bool 的值来间接地实现动画效果；

01

BootStrap应用开发学习入门1

什么是字体图标？答:字体图标是在 Web 项目中使用的图标字体,可以通过基于项目的 Bootstrap 来免费使用这些图标。

03

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能，例如：漂亮的图片幻灯片、下拉菜单、弹出框等，都可以结合JavaScript和CSS实现。在这章，我们将讨论一些Bootstrap 3 提供的随时可用的JavaScript插件，很容易创建一些高级的网页功能。

04

Darkmode.Js 一键为网站添加黑暗模式

Darkmode.Js 是一款开源项目，非常易于使用，只需一段代码就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式

03

【Java 进阶篇】深入理解 Bootstrap 导航条与分页条

Bootstrap 是一个强大的前端框架，为网页和应用程序开发提供了丰富的组件和工具。其中，导航条和分页条是两个常用的组件，用于创建网站的导航和分页功能。本篇博客将深入探讨 Bootstrap 导航条和分页条的使用，适用于那些希望提升网页设计技能的初学者。

02

黑马vue电商后台管理系统总结[通俗易懂]

后端是已经写好了的，采用 express 搭建的 API 服务，返回的数据是 JSON 格式的数据，只需要导入数据库，并配置一下数据库信息，就可以跑起来了，也有对应的api文档

02

BootStrap应用开发学习入门1

什么是字体图标？答:字体图标是在 Web 项目中使用的图标字体,可以通过基于项目的 Bootstrap 来免费使用这些图标。

02

Mirages主题帮助文档

将压缩包内1.主题文件文件夹中的Mirages文件夹完整上传到服务器上 Typecho 的/usr/themes/文件夹内，然后到 Typecho 后台，启用主题即可。

02

iOS支持展开折叠的弹出菜单（水平方向弹出菜单视图）【修订版】

文章：https://kunnan.blog.csdn.net/article/details/106406160

03

ionic之AngularJS扩展2 移动开发

可能你没有注意过，HTML中常用的script标签在AngularJS中被重新定义了：除了原来的脚本声明功能之外，如果script元素的type属性定义为text/ng-template，则被称为内联模板。例如：

02

【Java Web_06】Bootstrap

一、CSS全局样式 1. 文本对其方式 ① text-left : 左对齐 ② text-center : 居中 ③ text-right : 右对齐 2. 文本大小写转换 ① text-lowercase : 转小写 ② text-uppercase : 转大写 ③ text-capitalize : 首字母大写 3. 列表样式 ① list-unstyled : 取消前置图标，将左边距设置为0 ② lis

01

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

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。本文是iOS设计规范系列第5篇，介绍3大界面要素（栏、视图、控件）中的控件（Controls）。首先让我们回顾一下iOS的3大界面要素。 3大界面要素 (Interface Essentials) 大多数iOS应用都是由UI Kit中的组件构建的。UI Kit是一种定义通用界面元素的编程框架，这个框架不仅让APP在视觉外观上保持一致，同时也为个性化设计留有很大空间。UI Kit提供的界面组件有三类：栏（Bars），视图（Views），控件（Controls）。

03

【Java 进阶篇】深入浅出：Bootstrap 轮播图

在现代网页设计中，轮播图是一个常见的元素。它们可以用于展示图片、广告、新闻、产品或任何您希望吸引用户注意力的内容。要实现一个轮播图，您通常需要一些复杂的HTML、CSS和JavaScript代码，这对于初学者来说可能会感到困难。但幸运的是，有一些强大的工具可以帮助我们轻松创建漂亮的轮播图，其中之一就是 Bootstrap。

03

快速修改bootstrap

Bootstrap并不是单单意味着HTML/CSS界面框架，更确切的说，它改变了整个游戏规则。这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许多，而且它将大量的HTML框架普及成了产品。但是，Bootstrap的真谛是“基石”。Bootstrap框架，并不意味着它是全部终结解决方案。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭