bootstrap侧边栏收缩

Bootstrap的侧边栏收缩可以通过使用JavaScript/jQuery来实现。具体步骤如下：

1.在HTML中添加一个按钮，用于触发侧边栏的收缩和展开操作。

<button class="btn btn-default toggle-sidebar">
    <i class="glyphicon glyphicon-menu-hamburger"></i>
</button>

2.添加侧边栏结构，包括导航栏和内容区域。

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Dashboard</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Analytics</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-md-10 main">
            <h1 class="page-header">Dashboard</h1>
            <p class="lead">Welcome to your dashboard!</p>
        </div>
    </div>
</div>

3.添加CSS样式，定义侧边栏的宽度和过渡效果。

.sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
    width: 220px;
    -webkit-transition: width .35s ease-in-out;
    -moz-transition: width .35s ease-in-out;
    -o-transition: width .35s ease-in-out;
    transition: width .35s ease-in-out;
}

.sidebar.collapsed {
    width: 60px;
}

.main {
    padding: 20px;
}

4.添加JavaScript/jQuery代码，实现侧边栏的收缩和展开。

$(document).ready(function() {
    $('.toggle-sidebar').on('click', function() {
        $('.sidebar').toggleClass('collapsed');
        $('.main').toggleClass('col-sm-9 col-md-10 col-sm-12 col-md-12');
    });
});

在这个示例中，我们使用了一个按钮来触发侧边栏的收缩和展开操作。点击按钮时，侧边栏的宽度会从220px变为60px，同时内容区域的宽度也会相应变化。这里我们使用了Bootstrap的栅格系统来实现内容区域的自适应布局，当侧边栏收缩时，内容区域会占据整个页面的宽度。