Latest web development tutorials

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
terlihat
.hidden-print terlihat

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

<Div class = "container" style = "padding: 40px;" > <Div class = "row terlihat-on" > <Div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8; box-shadow: inset 1px -1px 1px # 444, inset -1px 1px 1px # 444;"> <Span class = "tersembunyi-xs"> Mini khusus </ span> <Span class = "terlihat-xs">dalam perangkat kecil khususnya terlihat </ span> </ Div> <Div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8; box-shadow: inset 1px -1px 1px # 444, inset -1px 1px 1px # 444;"> <Span class = "tersembunyi-sm"> Kecil </ span> <Span class = "terlihat-sm">terlihat pada perangkat kecil </ span> </ Div> <Div class = "clearfix terlihat-xs" > </ div> <Div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8; box-shadow: inset 1px -1px 1px # 444, inset -1px 1px 1px # 444;"> <Span class = "tersembunyi-md"> Medium </ span> <Span class = "terlihat-md">pada perangkat midrange terlihat </ span> </ Div> <Div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8; box-shadow: inset 1px -1px 1px # 444, inset -1px 1px 1px # 444;"> <Span class = "tersembunyi-lg"> Besar </ span> <Span class = "terlihat-lg">terlihat pada peralatan besar </ span> </ Div> </ Div> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

Utilitas responsif

Tanda centang (✔) menunjukkan bahwa elemen terlihat di viewport saat ini.