开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Bootstrap -默认情况下折叠的侧边栏

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。它提供了一系列预定义的 CSS 类和 JavaScript 插件，简化了网页设计和开发过程。

折叠的侧边栏（Collapsed Sidebar）是 Bootstrap 中常见的一种布局方式，通常用于导航菜单。默认情况下，侧边栏是折叠的，用户可以通过点击某个按钮（如汉堡图标）来展开或折叠侧边栏。

相关优势

响应式设计：Bootstrap 的折叠侧边栏能够自动适应不同的屏幕尺寸，确保在不同设备上都能提供良好的用户体验。
易于实现：通过简单的 HTML 和 CSS，结合 Bootstrap 提供的 JavaScript 插件，可以轻松实现折叠侧边栏功能。
高度可定制：Bootstrap 提供了丰富的配置选项和自定义样式，可以根据项目需求灵活调整侧边栏的外观和行为。

类型

Bootstrap 的折叠侧边栏通常有以下几种类型：

左侧折叠侧边栏：侧边栏位于页面左侧，折叠后显示一个图标，点击图标展开侧边栏。
右侧折叠侧边栏：侧边栏位于页面右侧，折叠和展开方式与左侧类似。
顶部折叠导航栏：导航栏位于页面顶部，折叠后显示一个下拉菜单，点击下拉菜单展开导航项。

应用场景

折叠侧边栏广泛应用于各种网站和应用中，特别是需要节省屏幕空间、提供简洁导航的场景，如：

管理后台系统
移动端应用
博客和新闻网站

示例代码

以下是一个简单的 Bootstrap 折叠侧边栏示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapsed Sidebar Example</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .sidebar {
      height: 100vh;
      position: sticky;
      top: 0;
      z-index: 100;
      padding-top: 20px;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>

  <div class="collapse navbar-collapse" id="sidebar">
    <div class="sidebar">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Settings</a>
        </li>
      </ul>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

参考链接

常见问题及解决方法

侧边栏无法折叠或展开：
- 确保引入了 Bootstrap 的 CSS 和 JavaScript 文件。
- 检查 data-toggle 和 data-target 属性是否正确设置。
- 确保 jQuery 和 Popper.js 已正确引入。

侧边栏样式问题：
- 检查自定义样式是否与 Bootstrap 样式冲突。
- 使用浏览器的开发者工具检查元素的样式，确保没有遗漏或错误的样式应用。

通过以上步骤，你应该能够成功实现和调试 Bootstrap 的折叠侧边栏功能。

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

有帮助

没帮助

相关·内容

Flutter 的 Drawer 侧边栏以及侧边栏布局

简而言之就是，新建一个Drawer组件，然后配置给Scaffold组件的drawer属性，这样就实现侧边栏抽屉视图了。.../DrawerHeader（可以自己定义，想实现啥功能就实现啥功能） // child: DrawerHeader( // //侧边栏的头部...关于上面代码，有以下几点需要说明： 1，通过配置Scaffold的drawer属性，我们可以实现左侧侧边栏；通过配置Scaffold的endDrawer属性，我们可以实现右侧侧边栏。...4，我们可以自己来配置抽屉视图，一般是通过Column组件来定义侧边栏的内容。 5，Divider组件可以用来实现分割线。...9，当点击抽屉视图中的某个组件来跳转到另外一个页面，然后从这个页面返回的时候，默认情况下，抽屉视图是不会消失的，也就是说，再返回回来的时候，抽屉视图效果还是存在的。

5.5K2 0

Widgetize 侧边栏的登录窗口

前面介绍了如何在侧边拦设置登录窗口，其中 Brezeck 由于使用 Widget 不好使用这个插件，于是今天去查了下怎么写 Widget 插件（可能需要代理才能访问），花了1个小时写了这个 Widget...当然还要到 Presentation 的 Widgets 设置显示位置。以下谈谈这个插件的制作过程：基本的 Widget 语法：的标题，然后把 'Hello, World!' 替换成自己的内容即可。...> 你愿意的话可以把其中的英文改成中文就可以成为中文版。hoho 参考文档：这个插件的制作基本参考了喵爸爸的窩的 Wordpress widget 習作：FIFA CountDown。...Crystown 的两篇关于 Widget 研究也写的很不错，很大的参考作用。

5085 0

EasyGBS实时调阅侧边栏在数据很多的情况下无法加载的优化

为了方便用户对通道的归类管理和筛选，EasyNVR、EasyGBS等平台的实时调阅页面设立了树状图分组，且同时具有云台控制、语音对讲功能。...我们在进行新版本测试的时候，发现侧边栏是循环渲染只请求一次，但返回数据过多，导致系统运行符合较大，于是在新版本更新当中就把这个问题进行了优化。...SubCount; arr.Type = 2; arr.rank = 3; aa.push(arr); } a++ return resolve(aa); }); }, 100); 但是如上设置会导致分组不能关闭的情况...，于是我们又对该行代码进行分析，得知是因为不断往数组里添加空数据导致的，因此再增加一层代码，判断请求为空数据的时候就停止请求。...最终的预览如下：

4102 0

从你的侧边栏移除 Meta

2b2ce75f-76c4-405d-b128-cfadf6c4256b 如果你浏览过一些 WordPress 博客，特别是最近新开张的，你会注意到很多人会保留来随他们选用主题而来的侧边栏中的 Meta...当然了这些链接可能对博客的所有者非常是有用的，但是它们对你的读者根本没有任何作用。...有时候，它甚至会给你带来反作用，因为它同时带来了 Wordpress RSS 源的链接，如果你使用 Feedburner 烧制的 RSS 源，你的一些读者可能会因为点击这些链接而得到一个错误的链接（译者注...下一次当你当你建立 WordPress 博客，把 Meta 这部分从你的侧边栏移除。翻译自：Remove the Meta from your Sidebar! ----

3201 0

玩不转的企业微信侧边栏

前言如果你不知道企业微信侧边栏是什么，那就可以划走这篇文章了。如果你知道这是个啥，那你一定非常苦恼要怎么开始。从去年就开始就一直有在做企业微信侧边栏的应用。...当然本文也不是简单的水文，所以下面简单来聊聊企业微信侧边栏一些重要的部分吧。是什么企业微信侧边栏（下称企微侧栏）其实就是企业微信右边的一个侧栏（WebView）。...为什么只有在这种情况下才能打开呢？这就要说到侧栏到底要解决的什么问题。为什么侧栏真正要解决的痛点其实是社群/客户运营和管理。...所以，总得来说，侧边栏看似是前端的东西，但其实它的基础架构起码有侧边栏、业务服务端和企微服务端。企微的服务端已经由企业微信提供了，那我们要实现的就是侧边栏和业务服务端了。...:5000 不过，在企业微信侧边栏上调试我们的应用还是很麻烦，我们更希望的是可以直接在浏览器上调试程序，等开发差不多了，再去真实的侧边栏环境下调试。

4.2K3 1

基于Bootstrap的CSS3响应式滑动侧边栏布局代码解析附源码下载

bootstrap-vertical-menu是一款基于Bootstrap的CSS3响应式滑动侧边栏布局模板。...该滑动侧边栏布局在大屏幕中以侧边栏的形式存在，在小屏幕设备中，菜单会被移动到屏幕的底部，只显示菜单的图标。 ?...使用方法使用该滑动侧边栏布局模板需要引入Boostrap相关依赖文件，制作图标需要引入font-awesome.css字体图标文件，以及模板本身需要的bootstrap-vertical-menu.css...该滑动侧边栏的HTML结构使用作为包裹容器，里面使用无序列表来制作需要的菜单选项。... CSS样式侧边栏菜单的宽度可以通过.navbar-vertical-left来控制，默认是宽160像素（菜单展开后的宽度）。默认侧边栏菜单的高度和屏幕一样高。

3.4K1 0

Discourse 的左侧边栏可以修改吗

在默认的 Discourse 配置中，我们左侧的边栏可以根据自己的要求进行修改吗？解决办法针对自己登录的用户，你是可以自己调整左侧边栏的配置。单击右上角你的个人头像，然后选择属性。...在切换的界面中，选择属性。在出现的配置界面中，选择 Sidebar【边栏】。在弹出的界面中，选择分类选项。你可以在这个选择选项中对自己希望显示的分类进行调整。然后单击保存就可以了。...无法进行排序需要注意的是，这部分的调整是没有办法进行排序的。如果上图显示，新添加的分类在这里标记显示了。 https://www.ossez.com/t/discourse/14221

5742 0

Discourse 的左侧边栏可以修改吗

在默认的 Discourse 配置中，我们左侧的边栏可以根据自己的要求进行修改吗？解决办法针对自己登录的用户，你是可以自己调整左侧边栏的配置。单击右上角你的个人头像，然后选择属性。...在切换的界面中，选择属性。在出现的配置界面中，选择 Sidebar【边栏】。在弹出的界面中，选择分类选项。你可以在这个选择选项中对自己希望显示的分类进行调整。然后单击保存就可以了。...无法进行排序需要注意的是，这部分的调整是没有办法进行排序的。如果上图显示，新添加的分类在这里标记显示了。https://www.ossez.com/t/discourse/14221

6484 0

解决Ubuntu 侧边栏菜单消失的问题

结束后，如果侧边栏没有立即出现，重启即可。

3K3 0

超好看的30款网站侧边栏设计

第一部分：为什么需要网站侧边栏？侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。...Goltz group Goltzgroup的侧边栏具有少许透明的效果，缓和了和整体界面的分割。 ? 更多网站侧边栏设计 21....Elizabethy lin Elizabethylin的侧边栏和整体设计融为一体，颜值很高。 ? 第三部分：如何创建侧边栏？...侧边栏近来年更加流行，但要设计一个好的边栏也并不容易，不仅有很多设计原则，还需要充分考虑网站整体的布局和排版，甚至要考虑网站的性质。...此外，使用一些现成的导航模板也是一个不错的方法，推荐这30个优秀Bootstrap导航模板，用户访问又快又准。设计+协作，摹客就够了！

12.7K1 0

Atom 在 linux 下安装有几率侧边栏默认显示在右侧，移动到左侧的设置方法

Atom 在 linux 下安装有几率侧边栏默认显示在右侧，移动到左侧的设置方法遇到一个奇葩的事情。没有macbook了。...我及其讨厌windows，于是给新来的前端一台笔记本，安装上了archlinux系统。在安装好atom编辑器之后，发现，侧边栏显示在右侧，恶心坏了。通过一番摸索，终于找到了设置选项。...如下：打开设置 → Packages → 一直往下翻，找到 tree-view → 点击 setting 或设置 → 去掉Show On Right Side 的勾选，然后就立即生效了。...在中文网络上应该是我第一个解决这个问题的。除了archlinux ，在 ubuntu 上应该也有几率出现。不知道什么原因。版权申明：本文由FungLeo原创，允许转载，但转载必须附注首发链接。谢谢。

1.4K2 0

zblogPHP智能侧边栏跟随固定范围浮动的效果

还有“additionalMarginTop”值为 30元素，只是侧栏浮动距离网站顶端的距离，我也说不明白了，看图。 ? 嗯哪，就这如图这样婶儿的！...可用配置参数及说明： containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。 additionalmarginTop：可选值。...指定侧边栏的顶部margin值，单位像素，默认为0像素。 additionalMarginBottom：可选值。指定侧边栏的底部margin值，单位像素，默认为0像素。...updateSidebarHeight：是否更新侧边栏的高度。默认为true。 minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为0。...（该选项用于响应式设计） defaultPosition：侧边栏必须是非static的定位方式。默认为relative定位方式。 namespace：绑定事件的命名空间。默认为TSS。

8302 0

实现emlog侧边栏标签组件的标签随机显示

emlog侧边栏标签组件调用的标签根据标签的tid升序排列显示，即是先创建的标签排在前面，这种情况对于侧边栏调用了所有标签的网站不会有什么影响，但是如果设置了标签显示数量的话，那么侧边栏调用的标签就会总是先创建的几个...操作步骤： 1、编辑当前使用的emlog模板的module.php文件，找到代码： 1$tag_cache = $CACHE->readCache('tags'); shuffle($tag_cache...>readCache('tags'); shuffle($tag_cache); $tag_cache = array_slice($tag_cache,0,10); //10是要调用的标签数量...> 知识扩展： shuffle(array)函数的作用是把数组中的元素按随机顺序重新排序，上述代码中的$tag_cache便是网站标签组成的一个数组。

6143 0

js带模糊效果的隐藏滑动侧边栏代码教程

简要教程 pushbar.js是一款带模糊效果的js隐藏滑动侧边栏插件。pushbar.js能制作上下左右四个方向的滑动侧边栏效果，并且在侧边栏菜单显示的时候，主页面会带有炫酷的模糊特效。...href="dist/css/pushbar.css" rel="stylesheet"> HTML结构该js隐藏滑动侧边栏菜单的...span> Bottom js带模糊效果的隐藏滑动侧边栏插件...var pushbar = new Pushbar({ blur:true, overlay:true, }); 配置参数该js隐藏滑动侧边栏菜单的可用配置参数如下： blur：是否在打开侧边栏时主页面带模糊效果...overlay：是否在打开侧边栏时主页面带遮罩层。

6.2K4 0

「Shiny」应用程序布局指南

侧边栏布局侧边栏布局是许多应用非常有用的起点。该布局提供了一个侧边栏用于放置输入控件和一个大的主区域放置输出控件。 ?...：它由多个不同的子组件组成（每个组件都有自己的侧边栏、选项卡或其他布局结构）。...collapsable 当浏览器的宽度小于940像素（对于在较小的触摸屏设备上查看很有用）时，自动将导航元素折叠为菜单。...固定系统默认占用940像素的固定宽度，当引导响应式布局启动时（例如在平板电脑上），可能会假定其他宽度。以下部分是官方Bootstrap 3网格系统文档的翻译，其中HTML代码被 R 代码取代。...固定网格系统固定网格系统也使用12列，并在默认情况下保持940像素的固定宽度。

7.1K3 2

基于element-ui的侧边栏及其使用方法

基于element-ui的侧边栏及其使用方法基于element-ui的侧板栏。效果展示代码讲解代码结构 .el-aside { background-color: #545c64; color: #fff; padding-top: 20px; } 使用的时候需要注意...，需要加上一个container属性的div，包裹，这样才可以正常布局。

700 0

分享本站右侧 “类Metro风格侧边栏” 的实现方法

本站DeveWork.com 右侧边栏有个“类Metro风格侧边栏”的小工具，半年前的时候微软所带来的“Metro风格”（也叫Modern 风格、Windows UI）还挺流行，因此当初在设计这个主题的时候想着运用一下...综合使用两种方法的好处是，减少了http 请求数，进而减少服务器负载，实现加速的效果。经过多次测试，兼容性非常不错。...“类Metro风格侧边栏” 实现思路首先Jeff 的话先上网找了一下Windows Phone 的一些图片，看看在竖屏的手机界面Metro 的格子是如何摆放的，最后确定了如下： ? ?...想着为某些格子加上些“动画”效果（如最后的“联系”与“WordPress”的格式，鼠标移动上去会有“动画”），于是便设计了hover 后的图片，打算用CSS Sprite，先合并在原来的图片上。...代码 CSS /*metro侧边栏*/ #metroside{background:url(images/8.jpg) no-repeat;width:300px;height:446px;margin

1.1K9 0

如何屏蔽侧边栏最新评论中博主的回复

博主需要经常和访客互动,博主的回复也作为一条评论在最新评论处显示,这样一来,如果博主如果一次回复好几条评论留言,那么在最新评论的地方显示的都是自己的评论,这样不太好。...于是博主想把博主自己的最新评论显示屏蔽掉。 ...那么怎么在最新评论那里屏蔽掉博主自己的回复评论呢,其实很简单,就是通过检测邮箱或者用户名,如果是博主的邮箱或者用户名,则不显示在最新评论处即可,方法如下：找到根目录“include/lib”目录下的...='sheli@shuyong.net' ORDER BY date DESC LIMIT 0, $index_comnum"); 其中sheli@shuyong.net是博主自己的邮箱,你换成你的即可...如果你还有更多的小号,中间重复 AND mail!='你的邮箱' 即可。如果修改后无任何变化的话，请到后台数据中更新缓存即可。

3312 0

Opera浏览器推出集成ChatGPT的AI侧边栏

5 月 24 日消息，Opera 浏览器宣布，正在测试名为 Aria 的 AI 侧边栏功能。该功能由 OpenAI 的 ChatGPT 驱动，可以生成文本、写代码、回答问题等等。...Opera 称，这是浏览器领域的一项创新，将为用户提供更智能、更便捷的网络体验。据 Opera 官方网站介绍，Aria 位于浏览器左侧的边栏中，用户点击图标后就可以与之交互。...Aria 的推出建立在 Opera 已有的一些 AI 功能之上。IT之家此前报道，早在今年二月，Opera 就在其边栏中加入了 ChatGPT，可以生成用户当前访问的网页或文章的摘要。...Opera 的新侧边栏与微软对 Edge 浏览器所做的 AI 升级有些相似。...目前，用户只能通过在桌面上下载最新的开发人员版本的 Opera One 或在 Android 上下载最新的 Opera beta 来访问 Opera 的 AI 侧边栏。

2581 0

Bootstrap3 修改tooltip默认的颜色

.tooltip-inner { background-color: #f7df4b; color: black...

9823 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭