Bagaimana untuk Menyembunyikan Elemen dalam Reka Letak Responsif dengan Bootstrap?

Menyembunyikan Elemen dalam Reka Letak Responsif dengan Bootstrap

Apabila mereka bentuk reka letak responsif, mengurus ruang menjadi penting, terutamanya pada skrin yang lebih kecil. Bootstrap menyediakan sokongan untuk meruntuhkan item bar menu untuk peranti mudah alih, tetapi bagaimana jika anda mahu menyembunyikan elemen halaman lain secara serupa?

Penyelesaian:

Bootstrap menawarkan kelas yang membolehkan anda untuk menyembunyikan elemen berdasarkan saiz skrin:

• Peranti Kecil Tambahan: Telefon (<768px) - .visible-xs-* (tunjukkan), .hidden-xs (sembunyikan )
• Peranti Kecil: Tablet (≥768px) - .visible-sm-* (tunjuk), .hidden-sm (sorok)
• Peranti Sederhana : Desktop (≥992px) - .visible-md-* (show), .hidden-md (sorok)
• Peranti Besar: Desktop (≥1200px) - .visible -lg-* (tunjukkan), .hidden-lg (sorok)

Contoh Penggunaan:

Untuk menyembunyikan elemen .nav-pills pada skrin kecil :

  ...
Nota Tambahan:

Untuk Bootstrap 4, gunakan hidden-*-up (sorok untuk titik putus yang lebih besar) atau hidden-*-down (sembunyi untuk titik putus yang lebih kecil).
Bootstrap 3.2.0 ditamatkan .hidden-* berbanding .visible-*.
Dalam versi Bootstrap yang lebih lama, .hidden-phone dan .hidden-tablet sudah usang.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Elemen dalam Reka Letak Responsif dengan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!