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

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

方法1：网页包含id=main分区，该分区包含网页的实际内容。创建一个标记为“菜单”的按钮，该按钮触发openNav()函数。函数openNav()使用document.getElementById ()获取边栏分隔，并设置边栏和‘main’分隔的宽度。显示侧栏后，用户单击侧栏右上角的关闭按钮，这会触发closeNav()函数。函数closeNav()使用document.getElementById ()获取主分区，并将侧边栏的宽度设置为0，以将其从网页中隐藏起来，并且主分区的左边距设置为0，以使其占据屏幕的整个宽度。由于这两个函数都是javascript函数，因此它们被放置在script标签内。在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，这意味着它占据了整个屏幕。当用户再次单击该按钮时，将取消选中该复选框，并且“内容”划分的左边距设置为200px，并显示侧边栏。这种转换发生在CSS中，与前面的示例不同，整个示例都是由javascript函数执行的。

例子：

  

    

  

    
    

        
  
        
            Toggle
        
        

            
Menu Bar
            

                
Basic
                
Profile
                
Articles
                
Testimonial
                
Practice
            
        
  
        
        

            

                Welcome to GeeksForGeeks
            
        
    

  

输出

默认情况下，两个示例中的侧栏均保持关闭或隐藏状态。仅当用户单击侧栏上显示的按钮时。折叠式侧边栏节省了空间，并使网页看起来既干净又宽敞。边栏可以根据用户要求进行固定和滚动。但是，该文章演示了固定的侧边栏。