Bagaimana untuk Mengawal Keterlihatan Elemen dalam Reka Letak Responsif Bootstrap?

Menyembunyikan Elemen dalam Reka Letak Responsif Bootstrap

Tingkatkan reka bentuk Bootstrap anda dengan mengoptimumkan keterlihatan kandungan merentas pelbagai saiz skrin. Bootstrap menawarkan ciri untuk memaparkan item menu pada peranti yang lebih kecil, tetapi bagaimana pula dengan elemen halaman lain?

Untuk menangani perkara ini, Bootstrap menyediakan kelas "kelihatan" dan "tersembunyi" yang membolehkan anda memaparkan atau menyembunyikan elemen secara dinamik berdasarkan skrin saiz. Kelas yang tersedia termasuk:

Kelas Kelihatan:

• .visible-xs-block: Tunjukkan pada peranti kecil tambahan (telefon)
• .visible-sm-block: Tunjukkan pada peranti kecil (tablet)
• .visible-md-block: Tunjukkan pada peranti sederhana (desktop)
• .visible-lg-block: Tunjukkan pada besar peranti (desktop)

Kelas Tersembunyi:

• .hidden-xs: Sembunyikan pada peranti yang lebih kecil (telefon)
• .hidden-sm: Sembunyi pada peranti kecil (tablet)
• .hidden-md: Sembunyi pada peranti sederhana (desktop)
• .hidden-lg: Sembunyikan pada peranti besar (desktop)

Untuk menyembunyikan pil navigasi anda pada skrin yang lebih kecil, cuma tambah kelas .hidden-xs pada bekas masing-masing.

<code class="html"><div class="nav-pills hidden-xs float-right">...</div></code>

Sebagai alternatif, anda boleh menggunakan "hidden-*-down " kelas, yang menyembunyikan elemen pada titik putus yang ditentukan atau lebih kecil.

<code class="html"><div class="nav-pills hidden-sm-down float-right">...</div></code>

Ingat untuk menggunakan kelas "visible-*-up" jika anda ingin menunjukkan elemen pada titik putus yang ditentukan atau lebih luas.

Untuk mendapatkan maklumat lanjut tentang kelas utiliti responsif Bootstrap, rujuk dokumentasi rasmi mereka di http://getbootstrap.com/css/#responsive-utilities.

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