Apakah kelas tersembunyi yang disertakan dengan bootstrap?

Kelas tersembunyi Bootstrap sendiri ialah: “.hidden”, “.visible-xs-*”, “.visible-sm-*”, “.visible-md-*”, “.visible- lg- *", ".hidden-xs", ".hidden-sm", dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Bootstrap menyediakan beberapa kelas tambahan untuk menjadikannya lebih pantas untuk membolehkan pembangunan mesra mudah alih. Ini boleh digabungkan dengan peranti besar, kecil dan sederhana melalui pertanyaan media untuk membolehkan kandungan ditunjukkan dan disembunyikan pada peranti.

Alat ini perlu digunakan dengan berhati-hati untuk mengelak daripada mencipta versi yang sama sekali berbeza bagi tapak yang sama. Utiliti reaktif pada masa ini hanya berfungsi dengan pensuisan blok dan meja.

类	描述
.show	强制元素显示
.hidden	强制元素隐藏

	超小屏幕            手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面 (≥992px)	大屏幕 桌面 (≥1200px)
.visible-xs-*	可见	隐藏	隐藏	隐藏
.visible-sm-*	隐藏	可见	隐藏	隐藏
.visible-md-*	隐藏	隐藏	可见	隐藏
.visible-lg-*	隐藏	隐藏	隐藏	可见
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

Bermula dari v3.2.0, kelas bentuk .visible-*-* mempunyai tiga varian untuk setiap saiz skrin, setiap satu menyasarkan paparan berbeza dalam CSS Properties, senarainya adalah seperti berikut :

类组	CSS display
.visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

Oleh itu, mengambil skrin ultra-kecil (xs) sebagai contoh, kelas .visible-*-* yang tersedia ialah: .visible-xs-block, .visible-xs-inline dan . visible-xs-inline-block.

Kelas .visible-xs, .visible-sm, .visible-md dan .visible-lg juga wujud. Walau bagaimanapun, penggunaannya tidak lagi disyorkan bermula dari v3.2.0. Mereka kebanyakannya sama dengan .visible-*-block, kecuali untuk kes khas elemen berkaitan

Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !

Atas ialah kandungan terperinci Apakah kelas tersembunyi yang disertakan dengan bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!