Saya baru saja mengunjungi halaman ini http://www.elmastudio.de/ dan bertanya-tanya apakah mungkin membuat runtuhnya sidebar kiri dengan Bootstrap 3.

Kode untuk menutup sidebar dari atas (khusus ponsel):

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

Sidebar sendiri memiliki kelas hidden-xs. Ini dihapus dengan js berikut

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

Jika Anda mengklik tombol tersebut, maka sidebar dari atas akan berubah. Sangat menyenangkan melihat sidebar berperilaku seperti situs web di atas. Setiap bantuan dihargai!

Bootstrap 3

Iya itu mungkin. Contoh "di luar kanvas" ini akan membantu Anda memulai.

https://codeply.com/p/esYgHWB2zJ

Pada dasarnya Anda perlu membungkus tata letak di div luar, dan menggunakan kueri media untuk mengalihkan tata letak di layar yang lebih kecil.

/* 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;
  }
}

Juga, ada beberapa contoh sidebar Bootstrap di sini

Bootstrap 4

Buat "laci" bilah sisi navigasi responsif di Bootstrap 4?

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

Ini adalah contoh resmi, mungkin lebih baik untuk beberapa orang. Itu ada di bawah bagian contoh Eksperimen mereka, tetapi karena ini resmi, itu harus selalu diperbarui dengan rilis bootstrap saat ini.

Sepertinya mereka telah menambahkan file css di luar kanvas yang digunakan dalam contoh mereka:

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

Dan beberapa kode JS:

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

EDIT: Saya telah menambahkan satu opsi lagi untuk sidebar bootstrap.

Sebenarnya ada tiga cara untuk membuat 3 sidebar bootstrap. Saya mencoba untuk menyimpan kode sesederhana mungkin.

Sidebar tetap

Di sini Anda dapat melihat demo dari bilah sisi tetap sederhana yang telah saya kembangkan dengan ketinggian yang sama dengan halaman

Sidebar di kolom

Saya juga telah mengembangkan sidebar kolom yang agak sederhana yang berfungsi di halaman dua atau tiga kolom di dalam wadah. Ini membutuhkan panjang kolom terpanjang. Di sini Anda dapat melihat demo

Dasbor

Jika Anda menggunakan dasbor google bootstrap, Anda dapat menemukan beberapa dasbor yang sesuai, seperti yang ini . Namun, kebanyakan dari mereka membutuhkan banyak pengkodean. Saya telah mengembangkan dasbor yang berfungsi tanpa javascript tambahan (di sebelah javascript bootstrap). Ini demo

Untuk ketiga contoh tersebut tentunya Anda harus menyertakan file jquery, bootstrap css, js dan theme.css.

Slidebar

Jika Anda ingin sidebar bersembunyi saat menekan tombol, ini juga dimungkinkan hanya dengan sedikit javascript. Berikut demo

Via Angular: menggunakan ng-classAngular, kita bisa menyembunyikan dan menampilkan side bar.

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

Ini tidak disebutkan di doc, tetapi sidebar kiri di Bootstrap 3 dimungkinkan menggunakan metode "Ciutkan".

Seperti yang disebutkan oleh bootstrap.js:

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

Artinya, menambahkan kelas "lebar" ke dalam target, akan meluas menurut lebar, bukan tinggi:

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