Bootstrap 3 - 可折叠的右侧面板,如Google Drive Details/Activity面板

Question

为我们现有的产品开发新的Web布局.我们希望集成的团队聊天和活动供稿显示始终显示在每个页面的右侧.我们正在使用Bootstrap 3,我有一个看起来很不错的模拟器.我正在使用vanilla Bootstrap 12列大小调整样式来执行此操作:

现在我们希望允许用户折叠右侧面板(水平),特别是对于水平不动产很重要的视图(网格视图等).

有没有Bootstrap方法来做到这一点？我可以使用垂直分割器小部件,或顶部导航中的切换按钮,或任何其他有意义的演示.这更像是我需要建议的网格大小.

Answer 1

我需要对我们的一个项目采用类似的方法,全屏视图就在这里.

我修改了脚本和布局,以获得您想要实现的目标.这是代码,全屏在这里.我使用jquery cookie来保持视图状态,即使页面刷新后也是如此.单击Cog图标将切换侧栏.该脚本是:

    $(function () {
        var $menu = $('#sidebar-wrapper');
        var $content = $('#main-wrapper');
        if ($.cookie('offcanvas') == 'hide') {
            $content.addClass('no-transition');
            $menu.hide();
            $menu.css('right', -($menu.outerWidth() + 10));
            $content.removeClass('col-md-10').addClass('col-md-12');
        }
        else if ($.cookie('offcanvas') == 'show') {
            $menu.show(500).animate({ right: 0 });
            //  $menu.show();
            $content.removeClass('no-transition');
            $content.removeClass('col-md-12').addClass('col-md-10');
        }


        $('.toggle-button').click(function () {
            $content.removeClass('no-transition');
            if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
                // Slide out
                $menu.animate({
                    right: -($menu.outerWidth() + 10)
                }, function () {
                    $menu.hide(1000);
                });
                $content.removeClass('col-md-10').addClass('col-md-12');
                $.cookie('offcanvas', 'hide');
            }
            else {
                // Slide in
                $menu.show(500).animate({ right: 0 });
                $content.removeClass('col-md-12').addClass('col-md-10');
                $.cookie('offcanvas', 'show');
            }
            if ($content.hasClass('col-md-12') && $menu.is(':hidden')) {
                $menu.animate({
                    right: 0
                }, function () {
                    $menu.show(1000);
                });
                //  $menu.show();
                $content.removeClass('no-transition');
                $content.removeClass('col-md-12').addClass('col-md-10');
            }
        });
        $('.bs-tooltip').tooltip();
    });

您可以自定义layout/css以获得您想要的内容.

Answer 2

我刚刚用jquery添加和删除bootstrap类来完成我认为你想要的东西.我有一个带id的按钮,collapse当点击它时,它会检查侧边栏是否打开并更改布局.标记:

<div class="container">
    <div class="row">
        <div class="row">
            <div class="col-md-12"><button class="btn-primary btn-large btn" id="collapse">Collapse sidebar</button></div>
        </div>
        <div class="row">
            <div class="col-md-8" id="content" style="height:400px;border:2px solid black">Hello, I'm a 3/4 width Div.</div>
            <div class="col-md-4 open" id="sidebar"  style="height:400px;border:2px solid blue">Hey There, I'm a 1/4 width Div</div>
        </div>
    </div>
</div>

jQuery:

$('#collapse').click(function(){
    if($('#sidebar').hasClass('open'))
    {
        $('#sidebar').removeClass('col-md-4');
        $('#sidebar').removeClass('open');
        $('#sidebar').addClass('hidden');
        $('#content').addClass('col-md-12');
        $('#content').removeClass('col-md-8');
    }
    else
    {
        $('#sidebar').addClass('col-md-4');
        $('#sidebar').addClass('open');
        $('#sidebar').removeClass('hidden');
        $('#content').removeClass('col-md-12');
        $('#content').addClass('col-md-8');
    }
});

我唯一的css是一个隐藏的阶级.hidden{display:none;}和小提琴.由于小窗口,我在小提琴中使用了xs.但工作方式相同.