Menyembunyikan Elemen dalam Reka Letak Responsif dengan Bootstrap
Seperti yang anda perhatikan, Bootstrap menawarkan sokongan asli untuk meruntuhkan item menu navigasi pada skrin yang lebih kecil. Walau bagaimanapun, anda juga mungkin ingin menyembunyikan elemen lain pada halaman dalam situasi yang sama.
Memperkenalkan Kelas Keterlihatan Bootstrap
Untuk menangani keperluan ini, Bootstrap menyediakan satu set keterlihatan kelas yang membolehkan anda mengawal kehadiran elemen berdasarkan saiz skrin. Kelas ini termasuk:
Penggunaan
Untuk menyembunyikan elemen pada skrin kecil, cuma tambahkan kelas tersembunyi yang sesuai padanya. Contohnya, untuk menyembunyikan pil navigasi yang anda nyatakan, anda boleh menggunakan yang berikut:
<code class="html"><ul class="nav nav-pills navbar-right hidden-sm"> ... </ul></code>
Pilihan Tambahan
Dalam Bootstrap 4, terdapat dua jenis tambahan kelas keterlihatan:
Nota: Versi lama Bootstrap menggunakan kelas seperti .hidden-phone dan . visible-tablet, yang kini sudah usang.
Kesimpulan
Dengan menggunakan kelas keterlihatan Bootstrap, anda boleh mengurus paparan elemen pada saiz skrin yang berbeza dengan berkesan. Fleksibiliti ini membolehkan anda membuat reka letak responsif yang menyesuaikan diri dengan pelbagai dimensi peranti.
Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Elemen dalam Reka Letak Responsif menggunakan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!