Bagaimana untuk Menyembunyikan Elemen dalam Reka Letak Responsif menggunakan Bootstrap?

Barbara Streisand
Lepaskan: 2024-11-06 03:03:02
asal
861 orang telah melayarinya

How to Hide Elements in Responsive Layouts using 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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan