📌  相关文章
📜  如何使用 Bootstrap 默认关闭侧边栏？(1)

📅  最后修改于: 2023-12-03 15:08:17.425000             🧑  作者: Mango

如何使用 Bootstrap 默认关闭侧边栏？

Bootstrap 是一款非常流行的前端开发框架，提供了众多实用的工具和组件，方便开发人员快速构建响应式网站。其中，侧边栏是网站主要的导航菜单之一，如何实现默认关闭侧边栏呢？下面我们来详细介绍。

登录页面

首先我们需要一个登录页面来控制侧边栏的打开和关闭状态。代码如下：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QLQaXm5IOW/eODN5uW+gx3I5KkAd" crossorigin="anonymous">

    <title>Login Page</title>
  </head>
  
  <body>
    <div class="container-fluid vh-100 d-flex flex-column">
      <div class="row flex-grow-1">
        <div class="col-md-3 px-0 bg-dark">
          <!-- Sidebar -->
          <div class="sidebar-sticky">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="#">
                  <span data-feather="home"></span>
                  Dashboard <span class="sr-only">(current)</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-9 bg-light">
          <p class="text-center mt-3">Content goes here.</p>
        </div>
      </div>
    </div>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper-core.min.js" integrity="sha256-2G+csUtzvKiBZo449zVj9F8kwLlun82t4yzhVK7LOas=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QLQaXm5IOW/eODN5uW+gx3I5KkAd" crossorigin="anonymous"></script>
  </body>
</html>

我们可以看到，页面分为两个部分，一个是侧边栏（左侧，使用了 Bootstrap 的 Flex 布局和 Navbar 组件实现），一个是内容区域（右侧）。

使用 Cookie 控制侧边栏状态

我们可以使用 Cookie 来记录用户打开或关闭侧边栏的状态，从而实现默认关闭侧边栏的效果。具体代码如下：

$(document).ready(function() {
  // 判断 Cookie 是否存在
  var sidebar = getCookie("sidebar");
  if (sidebar == "closed") {
    // 侧边栏关闭
    $('body').addClass('sidebar-closed');
    $('.sidebar-collapse').addClass('show');
    $('.sidebar-sticky').addClass('collapsed');
  } else {
    // 侧边栏打开
    $('body').removeClass('sidebar-closed');
    $('.sidebar-collapse').removeClass('show');
    $('.sidebar-sticky').removeClass('collapsed');
  }

  // 点击侧边栏收起/展开按钮
  $('.sidebar-collapse').on('click', function() {
    if ($('.sidebar-collapse').hasClass('show')) {
      // 关闭侧边栏
      $('body').addClass('sidebar-closed');
      $('.sidebar-collapse').removeClass('show');
      $('.sidebar-sticky').addClass('collapsed');

      // 设置 Cookie
      setCookie("sidebar", "closed", 30);
    } else {
      // 打开侧边栏
      $('body').removeClass('sidebar-closed');
      $('.sidebar-collapse').addClass('show');
      $('.sidebar-sticky').removeClass('collapsed');

      // 设置 Cookie
      setCookie("sidebar", "", 30);
    }
  });
});

// 获取 Cookie
function getCookie(name) {
  var cookies = document.cookie.split("; ");
  for (var i = 0; i < cookies.length; i++) {
    var arr = cookies[i].split("=");
    if (arr[0] == name) {
      return unescape(arr[1]);
    }
  }
  return "";
}

// 设置 Cookie
function setCookie(name, value, days) {
  var date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  var expires = "expires=" + date.toGMTString();
  document.cookie = name + "=" + escape(value) + "; " + expires;
}

我们在页面中通过 jQuery 的方式，判断 Cookie 是否存在，根据 Cookie 的值来设置侧边栏的关闭或打开状态，并在点击收起/展开按钮时，设置相应的 Cookie。

CSS 样式

最后，我们需要为侧边栏添加一些 CSS 样式，以实现侧边栏的关闭和打开动画效果。样式代码如下：

.sidebar-sticky:not(.collapsed) {
  height: 100%;
}

.sidebar-sticky.collapsed {
  height: auto;
  overflow: hidden;
}

.sidebar-sticky.collapsed .nav-item {
  display: none;
}

.sidebar-sticky.collapsed .nav-link {
  border-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.sidebar-closed .sidebar-sticky:not(.collapsed) {
  width: 0;
  transition: width .35s ease-in-out;
}

.sidebar-closed .sidebar-collapse {
  left: -1rem;
}

.sidebar-closed .sidebar-sticky.collapsed {
  margin-left: -2.5rem;
  margin-right: 1rem;
}

.sidebar-closed .sidebar-sticky.collapsed .nav-item {
  display: none;
}

.sidebar-closed .sidebar-collapse .navbar-toggler-icon {
  transform: rotate(-90deg);
}

.sidebar-closed .sidebar-collapse.show .navbar-toggler-icon {
  transform: rotate(0deg);
}

我们可以看到，侧边栏关闭时，通过设置宽度为 0，同时设置过渡效果，来实现侧边栏一步步收起的动画效果。同时，我们也对侧边栏的 Navbar 组件的样式进行了调整，以适应侧边栏关闭或打开时的显示情况。

总结

通过上面的步骤，我们就可以实现 Bootstrap 的默认关闭侧边栏功能了。我们使用了 Cookie 来记录侧边栏的打开或关闭状态，并借助 CSS 样式实现了用户友好的侧边栏动画效果。这样，我们就可以为用户提供更加舒适、可控的使用体验。