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!
twitter-bootstrap-3
bootstrap-4
sidebar
collapse
Chris Kami
sumber
sumber
Jawaban:
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.
Juga, ada beberapa contoh sidebar Bootstrap di sini
Bootstrap 4
Buat "laci" bilah sisi navigasi responsif di Bootstrap 4?
sumber
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:
sumber
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
sumber
Via Angular: menggunakan
ng-class
Angular, kita bisa menyembunyikan dan menampilkan side bar.http://jsfiddle.net/DVE4f/359/
.
sumber
Ini tidak disebutkan di doc, tetapi sidebar kiri di Bootstrap 3 dimungkinkan menggunakan metode "Ciutkan".
Seperti yang disebutkan oleh bootstrap.js:
Artinya, menambahkan kelas "lebar" ke dalam target, akan meluas menurut lebar, bukan tinggi:
http://jsfiddle.net/2316sfbz/2/
sumber