Bagaimana untuk Menyembunyikan Elemen dalam Reka Letak Responsif menggunakan Bootstrap?

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:

• blok-xs kelihatan, xs tersembunyi: Sembunyikan elemen pada peranti kecil tambahan (kurang daripada 768px).
• visible-sm-block, hidden-sm: Sembunyikan elemen pada peranti kecil (768px dan ke atas).
• visible-md-block, hidden-md: Sembunyikan elemen pada medium peranti (992px dan ke atas).
• kelihatan-lg-block, hidden-lg: Sembunyikan elemen pada peranti besar (1200px dan ke atas).

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:

• tersembunyi-*-atas: Menyembunyikan elemen apabila port pandang berada pada titik putus yang diberikan atau lebih luas.
• tersembunyi-* -down: Menyembunyikan elemen apabila viewport berada pada titik putus yang diberikan atau lebih kecil.

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!