Bootstrap 3 - Zusammenklappbare rechte Seite wie Google Drive Details/Aktivitätspanel

Question

Wir arbeiten an einem neuen Weblayout für unser bestehendes Produkt. Wir möchten, dass die integrierten Team-Chat- und Aktivitätsfeed-Anzeigen konsistent auf der rechten Seite jeder Seite angezeigt werden. Wir benutzen Bootstrap 3 und ich habe einen Mock, der ziemlich gut aussieht. Ich bin mit Vanille-Bootstrap 12-Säule Schlichte Arten, dies zu tun:

Jetzt wollen wir die Benutzer ermöglichen, die die rechte Seitenwand zum Einsturz (horizontal), insbesondere für Ansichten, in denen horizontale Immobilien wichtig sind (Rasteransichten usw.).

Gibt es einen Bootstrap-Weg, dies zu tun? Mir geht es gut mit einem vertikalen Splitter-Widget, oder eine Umschaltfläche im oberen Navigationsbereich, oder was auch immer andere Präsentation sinnvoll ist. Es ist mehr die Grid Sizing, die ich brauche Beratung.

Answer 1

Ich hatte einen ähnlichen Ansatz zu einem unserer Projekte benötigt und Vollbildansicht ist here.

Ich modifizierte das Skript und Layout ein wenig, um zu bekommen, was Sie versuchen zu erreichen. here ist der Code und Vollbild ist here. Ich habe jquery cookie verwendet, um den Ansichtszustand auch nach der Seitenaktualisierung beizubehalten. Ein Klick auf das Cog Icon schaltet die Seitenleiste um. Das Skript lautet:

$(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(); 
    }); 

Sie können das Layout/CSS anpassen, um genau das zu bekommen, was Sie bekommen wollten.

Answer 2

Ich habe gerade erreicht, was ich denke, dass Sie mit jquery die Bootstrap-Klassen hinzufügen und entfernen möchten. Ich habe eine Schaltfläche mit der ID collapse und wenn sie angeklickt wird, überprüft sie, ob die Sidebar geöffnet ist oder nicht und nimmt Änderungen am Layout vor. Das Markup:

<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> 

Die 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'); 
    } 
}); 

die einzige css ich hatte, war eine versteckte Klasse .hidden{display:none;} und die fiddle. habe ich xs in der Geige wegen der kleinen Fenster. funktioniert aber genauso.

Answer 3

Ich habe Layout-Plugin für 2 Projekte verwendet das hat mir sehr geholfen es gibt Ihnen volle Kontrolle. Meine Situation erforderte auch links, rechts und unten. Link ist,

http://layout.jquery-dev.net/

i'v auch bootstrap3 mit und klug sein, wenn Bootstrap modle make shur mit diesem Code setzen auf bald nach Body-Tag

glücklich Codierung.