Bagaimana untuk Mengawal Keterlihatan Elemen dalam Reka Letak Responsif Bootstrap?

Barbara Streisand
Lepaskan: 2024-11-06 10:06:03
asal
229 orang telah melayarinya

How to Control Element Visibility in Bootstrap Responsive Layouts?

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

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