Raster Bootstrap4 dibahagikan kepada beberapa kategori

Raster bootstrap4 dibahagikan kepada 5 kategori: 1. ".col", untuk semua peranti; 2. ".col-sm", untuk peranti tablet; monitor desktop ; 4. ".col-lg", untuk monitor desktop besar 5. ".col-xl", untuk monitor desktop yang lebih besar.

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

Bootstrap menyediakan satu set responsif, mudah alih Sistem grid bendalir (grid) pertama peranti yang dibahagikan secara automatik kepada sehingga 12 lajur apabila saiz skrin atau port pandangan meningkat.

Kami juga boleh menentukan bilangan lajur mengikut keperluan kami sendiri:

Sistem grid Bootstrap 4 adalah responsif, dan lajur akan melaraskan secara automatik mengikut saiz skrin.

Sistem grid Bootstrap 4 mempunyai 5 kelas berikut:

• .col - untuk semua peranti

• .col-sm- Tablet - lebar skrin sama dengan atau lebih besar daripada 576px

• .col-md- Monitor desktop - lebar skrin sama dengan atau lebih besar daripada 768px)

• .col-lg- Monitor desktop besar - lebar skrin sama dengan atau lebih besar daripada 992px)

• .col-xl- Extra monitor desktop besar - lebar skrin sama dengan atau lebih besar daripada 1200px)

Jadual berikut meringkaskan cara sistem grid Bootstrap berfungsi pada peranti yang berbeza:

	超小设备	平板        ≥576px	桌面显示器        ≥768px	大桌面显示器        ≥992px	超大桌面显示器        ≥1200px
容器最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数量和	12
间隙宽度	30px （一个列的每边分别 15px）
可嵌套	Yes
列排序	Yes

Peranti ultra-kecil

  th>

Tablet ≥576px

Monitor desktop ≥768px

Monitor desktop yang besar ≥992px

Monitor desktop yang lebih besar ≥1200px

Lebar maksimum bekas th>

Tiada (auto )

540px

720px

960px

1140px

Awalan kelas

.col-

.col-sm -

.col-md-

.col-lg-

.col-xl-

Bilangan lajur dan

12

Lebar jurang

30px (15px pada setiap sisi lajur)

Boleh bersarang

Ya

Isih lajur

Ya

Untuk pengetahuan lanjut tentang bootstrap, sila lawati: Tutorial Asas Bootstrap! !

Atas ialah kandungan terperinci Raster Bootstrap4 dibahagikan kepada beberapa kategori. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!