bootstrap 侧导航栏

Bootstrap provides a simple and easy-to-use sidebar component that can be easily integrated into your web application. Here is an example of how to create a sidebar using Bootstrap: 1. Create a basic HTML structure for your sidebar: ```html <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="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> ``` 2. Add the necessary Bootstrap classes to style the sidebar: ```html <div class="sidebar bg-light"> <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="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> ``` In this example, we added the `bg-light` class to give the sidebar a light background color. 3. Use CSS to position the sidebar on the page: ```css .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; padding: 48px 20px; overflow-x: hidden; transition: all 0.3s; } .sidebar .nav { margin-bottom: 20px; } .sidebar .nav-link { color: #333; font-weight: 600; } .sidebar .nav-link.active { color: #f00; } ``` This CSS code positions the sidebar on the left side of the page and sets its width and height. The `padding` property adds some space between the content and the edges of the sidebar. The `overflow-x` property hides any content that overflows the sidebar. The `transition` property adds a smooth animation effect when the sidebar is opened or closed. 4. Add JavaScript to toggle the sidebar: ```html <button class="btn btn-primary" type="button" data-toggle="sidebar">Toggle Sidebar</button> <script> $('[data-toggle="sidebar"]').on('click', function() { $('.sidebar').toggleClass('active'); }); </script> ``` This code adds a button that, when clicked, toggles the `active` class on the sidebar, which triggers the CSS transition and opens or closes the sidebar. And that's it! You now have a fully functional Bootstrap sidebar that can be easily customized to fit your needs.