Bagaimana untuk Mencipta Laci Bar Sisi Navigasi Responsif dalam Bootstrap?

Membuat Laci Bar Sisi Navigasi Responsif dalam Bootstrap

Untuk mencapai bar sisi "laci" responsif seperti yang ada di MUICSS, Bootstrap sememangnya menyediakan alatan yang boleh digunakan tanpa mengubah dengan ketara CSS.

Melaksanakan Laci Bar Sisi menggunakan Runtuhkan, Pil Bertindan dan Kotak Flex:

1. Kandungan Sidebar: Gunakan elemen nav dengan kelas flex-column dan navbar-dark untuk mencipta kandungan bar sisi dengan pil bertindan.


2. Kelakuan Runtuh: Tambahkan kelas runtuh dan m-0 p-0 pada elemen induk bar sisi untuk menyembunyikannya pada mulanya dan mengawal paparannya menggunakan keruntuhan Bootstrap mekanik.


3. Butang Togol: Letakkan butang di luar bar sisi dengan data-toggle="collapse" untuk menogol keterlihatan bar sisi apabila diklik.


4. Ciri Tambahan: Untuk ciri pilihan, seperti menambahkan latar belakang yang lebih malap atau gelagat melekit, anda boleh menggunakan CSS atau JavaScript tersuai.

Penambahan untuk Menangani Jsfiddle Had:

• Reka Letak Responsif: Gunakan col-3 pada skrin yang lebih sempit dan col-md-3 pada skrin yang lebih luas untuk melaraskan bar sisi lebar.


• Navbar Melekit: Keluarkan bahagian atas melekit daripada elemen navigasi bar sisi untuk menghalang bar navigasi daripada menatal.

Butang Menu Melekit: Tambah bahagian atas melekit ke butang menu (togol) untuk kekal kelihatan.

• Latar Belakang Malap: Gunakan tindanan CSS yang hanya kelihatan apabila bar sisi dibuka (pilihan).< ;/li>
  

Tambahan Nota:

• Gunakan col dan bukannya col-auto untuk mengisi lebar apabila menu runtuh.
• Untuk meningkatkan kelancaran animasi, gantikan peralihan runtuh lalai Bootstrap, yang beroperasi pada ketinggian, dengan menganimasikan lebar sebaliknya.
• Untuk pelaksanaan laci yang lebih kompleks, pertimbangkan respons yang dikemas kini yang berikan dua contoh lebih dekat dengan demo MUICSS.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Laci Bar Sisi Navigasi Responsif dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!