Bolehkah Bootstrap Membantu Menyembunyikan Elemen pada Skrin yang Lebih Kecil?

Menyembunyikan Elemen untuk Reka Letak Responsif

Bootstrap menyediakan sokongan yang mencukupi untuk meruntuhkan item navigasi dalam saiz skrin yang lebih kecil, tetapi bagaimana pula dengan elemen lain pada halaman ? Bolehkah Bootstrap membantu menyembunyikan elemen apabila skrin menjadi lebih kecil?

Tambahan Baharu dalam Bootstrap

Bootstrap 3.2.0 memperkenalkan kelas baharu yang boleh dilihat untuk meningkatkan responsifnya:

Peranti sederhana: .boleh dilihat-md-blok, .tersembunyi-md

Peranti besar: .bolehlihat-lg-blok, .hidden-lg

Kelas ini membenarkan kawalan yang lebih besar ke atas keterlihatan elemen pada saiz skrin tertentu.

Menyembunyikan Elemen dengan Kelas

Untuk menyembunyikan elemen pada skrin kecil, contohnya, tambah kelas .hidden-sm:

Alternatif kepada Bootstrap

Bootstrap bukan satu-satunya penyelesaian untuk menyembunyikan elemen dalam susun atur responsif. Pertimbangkan alternatif ini:

<code class="html"><div class="hidden-sm">This element will be hidden on small screens</div></code>

Pertanyaan Media: Gunakan pertanyaan media CSS untuk menyasarkan saiz skrin tertentu dan menggunakan peraturan keterlihatan.

JavaScript:

Sembunyikan elemen secara pengaturcaraan menggunakan fungsi JavaScript.

• Kelas Tersuai: Cipta kelas tersuai anda sendiri dan gunakannya pada elemen untuk penyembunyian responsif.
• Dengan menggunakan teknik ini, anda boleh menyembunyikan elemen dengan berkesan untuk mengoptimumkan pengalaman pengguna tapak web anda untuk saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bolehkah Bootstrap Membantu Menyembunyikan Elemen pada Skrin yang Lebih Kecil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!