Apakah perbezaan antara bootstrap4.0 dan 3.0

Perbezaan: 1. Bootsrap3 menggunakan susun atur apungan, dan Bootstrap4 menggunakan susun atur fleksibel 2. Sistem grid dalam Bootstrap4 tidak perlu menambah bilangan lajur yang ditentukan, tetapi Bootsrap3 tidak boleh; , dan Bootstrap4 melakukan 5 jenis grid.

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

Perbezaan antara Bootstrap4 dan Bootstrap3

• Bootsrap3 menggunakan susun atur terapung, manakala Bootstrap4 menggunakan susun atur flex

• Sistem grid dalam Bootstrap4 tidak perlu menambah nombor tertentu lajur seperti baris Terdapat 2 kol di dalamnya, yang akan membahagikan baris sama rata pada sebarang saiz

• Bootstrap3 hanya mempunyai 4 jenis raster: col-xs ekstra kecil, col-sm kecil , col-md, col-lg sederhana besar)

• Bootstrap4 mempunyai 5 kelas raster, (col-extra small, col-sm-small, col-md-medium, col-lg -large, col -xl-extra large)

• Bootstrap4 menggunakan rem sebagai unit

• Bootstrap4 menetapkan lajur mengimbangi melalui offset-sm- 4, manakala Bootstrap3 melepasi col-sm-offset-4

• Bootstrap4 menambah bekas responsif seperti container-sm, container-md..., yang akan menduduki keseluruhan skrin apabila skrin saiz lebih kecil daripada kelas grid

Nota:

Anda tidak boleh menggunakan kelas hidden-xs dan visible-xs dalam Bootstrap 3 Bootstrap 4 Jika anda ingin bersembunyi di bawah saiz tertentu, anda harus merujuk kepada jadual berikut

Perlu dinyatakan bahawa menggunakan hidden-sm dalam B3 hanya akan bersembunyi di bawah saiz sm, manakala saiz lain akan menjadi Paparan biasa, dalam B4, jika anda hanya menyatakan d-sm-none, elemen akan disembunyikan dalam saiz sm, tetapi saiz di atas sm juga akan disembunyikan, dan saiz di bawah sm akan dipaparkan secara normal isu keserasian ke atas , jadi anda perlu menetapkan paparan saiz md apabila menetapkan elemen sm untuk disembunyikan, seperti yang ditunjukkan dalam jadual di atas, dan seterusnya untuk yang lain

Bootstrap3	Bootstrap4
hidden-xs	d-sm-block
hidden-sm	d-sm-none d-md-block
hidden-md	d-md-none d-lg-block
hidden-lg	d-lg-none d-xl-block
hidden-xl	d-xl-none
visible-xs	d-sm-none
visible-sm	d-sm-block d-md-none
visible-md	d-md-block d-lg-none
visible-lg	d-lg-block d-xl-none
visible-xl	d-xl-block

Sembunyikan serasi ke atas, paparan serasi ke bawah

[Cadangan berkaitan: "

tutorial bootstrap

》】

Atas ialah kandungan terperinci Apakah perbezaan antara bootstrap4.0 dan 3.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!