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

Bootstrap 是软件开发人员使用的最流行的响应式和开源 CSS 框架。侧边栏是一个小部件，其中包含指向网站其他部分的导航链接。侧边栏通常用于显示菜单项列表。本文演示了两种创建网页侧边栏的方法，其中侧边栏默认保持关闭或隐藏。第一种方法在单击菜单按钮时显示侧边栏，稍后可以通过单击右上角的 X 图标关闭侧边栏。第二种方法演示了默认情况下保持隐藏的切换侧边栏。单击菜单按钮显示侧边栏，再次单击菜单按钮隐藏侧边栏。

方法一：网页包含一个id=main分区，这个分区包含了网页的实际内容。创建一个标记为“菜单”的按钮，它触发 openNav()函数。函数openNav()使用document.getElementById ()获取侧边栏分区，并设置侧边栏和“主”分区的宽度。侧边栏显示后，用户点击侧边栏右上角的关闭按钮，触发closeNav()函数。函数closeNav()使用document.getElementById ()获取主分区并将侧边栏的宽度设置为 0 将其隐藏在网页中，并且主分区的左边距设置为 0 使其占据屏幕的整个宽度.由于这两个函数都是 javascript 函数，因此它们被放置在脚本标签中。在 style 标签中指定的 CSS 可实现侧边栏和主分区的正确定位和过渡。

示例 1：

  

    
        /* The sidebar menu */
        .sidebar {
            height: 100%;
            /* 100% Full-height */
            width: 0;
            /* 0 width */
            position: fixed;
            /* Fixed place */
            z-index: 1;
            /* Stay on top */
            top: 0;
            left: 0;
            background-color: black;
            /* Disable horizontal scroll */
            overflow-x: hidden;
            /* Place content 60px from the top */
            padding-top: 60px;
            /* Transition effect to slide 
                in the sidebar */
            transition: 0.5s;
        }
  
        /* The sidebar links */
        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 20px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
  
        /* Mouse over the navigation 
          links, to change their color */
        .sidebar a:hover {
            color: green;
        }
  
        /* Position and style the close 
          button at top right corner */
        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
  
        /* The button used to open the sidebar */
        .openbtn {
            font-size: 20px;
            cursor: pointer;
            background-color: #111;
            color: white;
            padding: 10px 15px;
            border: none;
        }
  
        .openbtn:hover {
            background-color: #444;
        }
  
        /* Style page content - pushes the
          page content to the right when the 
          sidebar is opened */
        #main {
  
            /* If you want a transition effect */
            transition: margin-left 0.5s;
            padding: 20px;
        }
  
        /* On smaller screens, where height is 
          less than 450px, change the style of
          the side-nav (less padding and a 
          smaller font size) */
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }
  
            .sidebar a {
                font-size: 18px;
            }
        }
    

  

    
        
            ×
        
        My Account
        My Articles
        Interests
        Practice
        Testimonials
        About Us
        Contact Us
    
    
    
        
            Welcome to GeeksForGeeks
        
        Menu
        
          
        
            This is a demonstration of collapsed
            sidebar by default. The sidebar opens
            on clicking the Menu button.
        
    
  
    
        function openNav() {
            document.getElementById(
                "mySidebar").style.width = "200px";
            document.getElementById(
                "main").style.marginLeft = "200px";
        }
  
        /* Set the width of the sidebar to 0 
        and the left margin of the page content to 0 */
        function closeNav() {
            document.getElementById(
                "mySidebar").style.width = "0";
            document.getElementById(
                "main").style.marginLeft = "0";
        }
    

  

输出

方法 2：此方法使用类型为“复选框”和角色为“按钮”的输入字段的切换功能显示侧边栏。当用户单击按钮时，复选框被选中，它将“内容”分区的左边距设置为 0，这意味着它占据了整个屏幕。当用户再次点击按钮时，复选框被取消选中，“内容”划分的左边距设置为 200 像素，并显示侧边栏。这种转换发生在 CSS 中，与前面的示例不同，整个操作由 javascript 函数执行。

例子：

  

    

  

    
    

        
  
        
            Toggle
        
        

            
Menu Bar
            

                
Basic
                
Profile
                
Articles
                
Testimonial
                
Practice
            
        
  
        
        

            

                Welcome to GeeksForGeeks
            
        
    

  

输出

默认情况下，两个示例中的侧边栏保持关闭或隐藏。只有当用户单击侧边栏显示的按钮时。折叠侧边栏节省空间，使网页看起来干净宽敞。侧边栏可以根据用户要求进行固定和滚动。然而，这篇文章展示了固定的侧边栏。