Bootstrap Utilities Responsif
Bootstrap menyediakan beberapa kelas pembantu untuk mencapai pembangunan untuk perangkat mobile yang ramah cepat. pertanyaan ini dapat menggabungkan alat-alat besar, kecil dan menengah melalui media, untuk mewujudkan isi perangkat untuk menunjukkan dan bersembunyi.
Menggunakan alat ini harus berhati-hati untuk menghindari menciptakan versi yang sama sekali berbeda dari situs yang sama.utilitas responsif saat ini hanya tersedia di blok dan meja switching.
layar ultra-kecil Telepon (<768px) | layar kecil Tablet (≥768px) | sedang Layar Desktop (≥992px) | Layar lebar Desktop (≥1200px) | |
---|---|---|---|---|
Visible-xs- * | terlihat | menyembunyikan | menyembunyikan | menyembunyikan |
Visible-sm- * | menyembunyikan | terlihat | menyembunyikan | menyembunyikan |
Visible-md- * | menyembunyikan | menyembunyikan | terlihat | menyembunyikan |
Visible-lg- * | menyembunyikan | menyembunyikan | menyembunyikan | terlihat |
.hidden-xs | menyembunyikan | terlihat | terlihat | terlihat |
.hidden-sm | terlihat | menyembunyikan | terlihat | terlihat |
.hidden-md | terlihat | terlihat | menyembunyikan | terlihat |
.hidden-lg | terlihat | terlihat | terlihat | menyembunyikan |
Dari rilis v3.2.0, berbentuk seperti Visible - * - * ukuran kelas untuk setiap layar memiliki tiga varian, masing-masing untuk tampilan CSS daftar properti yang berbeda adalah sebagai berikut:
cluster | display CSS |
---|---|
Visible - * - block | display: block; |
Visible - * - inline | display: inline; |
Visible - * - inline-block | display: inline-block; |
Oleh karena itu, layar ultra-kecil (xs), misalnya, tersedia Visible - * - * kelas adalah: Visible-xs-blok, Visible-xs-inline dan Visible-xs-inline-block.
Visible-xs, Visible-sm, Visible-md dan kelas Visible-lg juga ada. Tapi dari versi v3.2.0 mulai tidak lagi dianjurkan. Dalam kasus khusus <table> elemen yang berhubungan dengan luar, mereka Visible - * - blok yang sama.
kategori cetak
Tabel berikut berisi daftar kategori cetak. Gunakan ini untuk beralih konten cetak.
kelas | Browser | pencetak |
---|---|---|
Visible-print-blok Visible-print-inline Visible-print-inline-block | menyembunyikan | terlihat |
.hidden-print | terlihat | menyembunyikan |
contoh
Contoh berikut menunjukkan tercantum di atas penggunaan kelas pembantu. Sesuaikan ukuran jendela browser, atau memuat contoh pada perangkat yang berbeda, tes responsif kelas utilitas.
contoh
Coba »
Hasilnya adalah sebagai berikut:
Tanda centang (✔) menunjukkan bahwa elemen terlihat di viewport saat ini.