Bu sayfayı http://www.elmastudio.de/ ziyaret ettim ve Bootstrap 3 ile sol kenar çubuğu çöküşünü oluşturmanın mümkün olup olmadığını merak ettim.

Kenar çubuğunu üstten daraltma kodu (yalnızca telefon):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

Kenar çubuğunun kendisi gizli xs sınıfına sahiptir. Aşağıdaki js ile kaldırılır

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

Düğmeye tıklarsanız, üst kısımdan kenar çubuğunu değiştirir. Kenar çubuğunun yukarıdaki web sitesinde gösterildiği gibi davrandığını görmek harika. Herhangi bir yardım takdir edilmektedir!

Önyükleme 3

Evet mümkün. Bu "tuval dışı" örnek, başlamanıza yardımcı olacaktır.

https://codeply.com/p/esYgHWB2zJ

Temel olarak, düzeni bir dış div olarak sarmalamanız ve düzeni daha küçük ekranlarda değiştirmek için medya sorgularını kullanmanız gerekir.

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

Ayrıca, burada birkaç tane daha Bootstrap kenar çubuğu örneği var

Önyükleme 4

Bootstrap 4'te duyarlı bir navbar kenar çubuğu "çekmecesi" oluştursun mu?

http://getbootstrap.com/examples/offcanvas/

Resmi örnek bu, bazıları için daha iyi olabilir. Deney örnekleri bölümünün altındadır, ancak resmi olduğu için mevcut önyükleme sürümü ile güncel tutulmalıdır.

Örneklerinde kullanılan tuval dışı bir css dosyası ekledikleri anlaşılıyor:

http://getbootstrap.com/examples/offcanvas/offcanvas.css

Ve bazı JS kodu:

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});

DÜZENLEME: Önyükleme kenar çubukları için bir seçenek daha ekledim.

Önyükleme 3 kenar çubuğu yapabileceğiniz aslında üç yöntem vardır. Kodu olabildiğince basit tutmaya çalıştım.

Sabit kenar çubuğu

Burada , sayfayla aynı yükseklikte geliştirdiğim basit bir sabit kenar çubuğunun bir demosunu görebilirsiniz.

Bir sütundaki kenar çubuğu

Ayrıca, bir kap içinde iki veya üç sütunlu bir sayfada çalışan oldukça basit bir sütun kenar çubuğu geliştirdim. En uzun kolonun uzunluğunu alır. Burada bir demo görebilirsiniz

Gösterge Paneli

Google bootstrap panosunu kullanıyorsanız, bunun gibi birden fazla uygun gösterge tablosu bulabilirsiniz . Ancak çoğu, çok fazla kodlama gerektirir. Ek javascript olmadan çalışan bir gösterge tablosu geliştirdim (bootstrap javascript yanında). İşte bir demo

Üç örnek için de elbette jquery, bootstrap css, js ve theme.css dosyalarını dahil etmelisiniz.

Slayt çubuğu

Bu da sadece küçük javascript.Here ile mümkün olduğu bir düğmeye basarak üzerinde postu için kenar çubuğunu isterseniz olduğunu demo

Açısal ile: Angular'ı kullanarak ng-classkenar çubuğunu gizleyebilir ve gösterebiliriz.

http://jsfiddle.net/DVE4f/359/

<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

.

function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}

Doc'ta belirtilmemiştir, ancak Bootstrap 3'te Sol kenar çubuğu "Daralt" yöntemi kullanılarak mümkündür.

Bootstrap.js'de belirtildiği gibi:

Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

Bu, hedefe "genişlik" sınıfının eklenmesi, yükseklik yerine genişliğe göre genişletileceği anlamına gelir:

http://jsfiddle.net/2316sfbz/2/