Apa yang baru di bootstrap 5?

Bootstrap adalah salah satu open source yang disukai banyak developer, termasuk saya. Jadi apa yang kita harapkan dari perubahan baru ketika Bootstrap 5 dilepaskan?

rata-rata temukan ponsel saya

Kursus Singkat Bootstrap 5 untuk Pemula
Kursus Lengkap Bootstrap 5 dengan Contoh

Di Bootstrap 5: jQuery akan dihapus.

jQuery adalah library JavaScript yang cepat, kecil, dan kaya fitur. Itu membuat hal-hal seperti traversal dan manipulasi dokumen HTML, penanganan acara, animasi, dan Ajax jauh lebih sederhana dengan API yang mudah digunakan yang bekerja di banyak browser. Dengan kombinasi fleksibilitas dan ekstensibilitas, jQuery telah mengubah cara jutaan orang menulis JavaScript.

Namun, dengan tren penulisan Aplikasi Halaman Tunggal dengan React, Angular, Vue…, jQuery sudah tidak populer lagi. Jadi Bootstrap 5 akan sepenuhnya menghapus jQuery.

Bootstrap 5 yang tersisa untuk dilakukan setelah penghapusan jQuery #28342

Ukuran font responsif dengan RFS |_+_| penerapan

Di Bootstrap 5, kami telah mengaktifkan ukuran font responsif secara default, memungkinkan teks untuk diskalakan secara lebih alami di seluruh perangkat dan ukuran viewport.

Fitur:

• Ukuran font responsif sekarang diaktifkan secara default
• Integrasi API utilitas
• Penskalaan ulang cairan juga diterapkan pada utilitas jarak (opsi dapat dinonaktifkan)
• Jatuhkan |_+_|, |_+_|, |_+_| dan |_+_| keperluan
• Baru |_+_|, |_+_|, |_+_| dan |_+_| keperluan

Proyek sampingan Bootstrap RFS adalah mesin pengubahan ukuran unit yang awalnya dikembangkan untuk mengubah ukuran ukuran font (maka singkatannya untuk Ukuran Font Responsif). Saat ini RFS mampu mengubah skala sebagian besar properti CSS dengan nilai unit seperti |_+_|, |_+_|, |_+_|, atau bahkan |_+_|.

Mekanisme secara otomatis menghitung nilai yang sesuai berdasarkan dimensi viewport browser. Ini akan dikompilasi menjadi |_+_| fungsi dengan campuran |_+_| dan unit viewport untuk mengaktifkan perilaku penskalaan responsif.

Menggunakan mixin
|_+_| mixin memiliki singkatan untuk |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_|, |_+_ |, |_+_|, |_+_|, dan |_+_|. Lihat contoh di bawah untuk Sass sumber dan CSS yang dikompilasi.

Properti lainnya dapat diteruskan ke |_+_| campur seperti ini:

|_+_| juga dapat ditambahkan ke nilai apa pun yang Anda inginkan:

Menggunakan fungsi

Saat Anda tidak ingin menggunakan penyertaan, ada juga dua fungsi:

• |_+_| mengonversi nilai menjadi |_+_| nilai jika a |_+_| nilai dilewatkan, dalam kasus lain mengembalikan hasil yang sama.
• |_+_| mengembalikan versi nilai yang dapat disesuaikan jika properti perlu diubah skalanya.

Dalam contoh ini, kami menggunakan salah satu mixin breakpoint responsif bawaan Bootstrap untuk hanya menerapkan gaya di bawah |_+_| titik putus.

Tambahkan ukuran Layar Penuh ke variasi Modal dan Responsif untuk breakpoints

Bootstrap 5 kisi

Setel lebar talang di |_+_| bukannya |_+_|

Lebar talang sekarang |_+_| bukannya |_+_|. Dengan cara ini kita akan dapat menggunakan utilitas spasi untuk menyelaraskan berbagai hal dengan grid.

Perbaikan #27072

Ubah pendekatan tentang bagaimana bantalan kolom disetel

Kelas col diperpanjang mengarah ke daftar ini 60 pemilih di |_+_|. Dengan menggunakan |_+_|, kita bisa menyederhanakannya. Perubahan ini akan menerapkan padding ke semua turunan |_+_|. Kekhususan tidak akan terpengaruh oleh perubahan ini.

Kolom: beralih ke |_+_| bukannya |_+_| dan |_+_|

Menggunakan lebar saja sudah memberikan manfaat |_+_| kelas dapat digunakan tanpa perlu |_+_| kelas. Ini juga bagaimana pertama bekerja.

Ini juga memberikan solusi untuk ukuran utilitas # 21943 . Karena kami hanya menyetel padding untuk mengarahkan anak-anak |_+_|, cols tidak akan memiliki padding saat mereka tidak berada di |_+_|.

Tutup #28312

Tutup #29505

Lebih banyak kontrol atas lebar talang & talang vertikal

PR ini memperkenalkan kelas selokan responsif baru. Ada 3 jenis kelas talang yang tersedia:

• |_+_| kelas mengontrol lebar talang horizontal/kolom
• |_+_| kelas mengontrol lebar talang vertikal/baris
• |_+_| kelas mengontrol lebar talang horizontal & vertikal

Kelas selokan ini dapat ditambahkan ke |_+_| dan mempengaruhi margin negatif pada baris dan padding pada kolom.

Varian responsif juga tersedia untuk mendapatkan kontrol per breakpoint. Dengan perubahan ini kami mungkin mempertimbangkan untuk membuang (atau menonaktifkan secara default) margin negatif yang meningkatkan ukuran file kami cukup banyak.

Bagaimana cara kerja selokan?

Cara talang diatur dalam arah horizontal tetap sama seperti pada v4 (margin negatif pada baris dan bantalan pada kolom). Talang vertikal bekerja sedikit berbeda. Margin ditambahkan ke bagian atas setiap kolom dan untuk melawan margin atas, margin negatif ditambahkan ke baris. Kami menggunakan margin alih-alih bantalan untuk mencegah masalah yang tumpang tindih (seperti yang kami miliki dengan bantalan horizontal).

Dukungan bersarang yang lebih baik

Dalam |_+_|, |_+_|s tidak dapat disarangkan, setelah Anda mencoba menambahkan |_+_| ke |_+_|, margin dan padding menyebabkan beberapa konflik. Dengan menghapus padding & margin dari baris bersarang (|_+_|), kita dapat membuat baris bersarang dengan cara yang lebih fleksibel.

Daftar gaya dihapus secara default

|_+_| ditambahkan ke |_+_|s secara default. Dengan cara ini, Anda tidak perlu menambahkan |_+_| ke |_+_|s.

Penghapusan |_+_|

|_+_|s memiliki lebar talang yang lebih kecil, tetapi karena kita sekarang memiliki kelas talang, kita dapat menggunakannya untuk kontrol yang lebih besar terhadap lebar talang.

Penghapusan |_+_|

|_+_| dihapus demi grid yang lebih fleksibel. Anak-anak sekarang dapat dibungkus |_+_| div bila diperlukan. Dengan kelas selokan, kita dapat lebih mudah mengontrol jarak vertikal daripada menggunakan utilitas margin responsif.

Hapus |_+_| dari cols

Tutup #25254

Tutup #26512

Penghapusan dek kartu

Saat ini kami memiliki deck kartu sebaik sistem grid, tetapi grid kami menawarkan kontrol yang lebih responsif, jadi sebenarnya tidak ada alasan untuk menyimpan deck.

Penghapusan |_+_|

Grid juga mencakup kasus ini.

cara menggunakan perintah cp di linux

Hapus |_+_| global global setel ulang dari |_+_|

Dalam |_+_|, |_+_| diwariskan yang memperkenalkan masalah ini: #22872 . Di sisi lain, pengaturan global |_+_| perilaku dapat memperkenalkan perilaku tak terduga untuk CSS khusus. Dengan hanya menambahkan |_+_| ke kolom, kami hanya menerapkan |_+_| ke elemen di mana itu dibutuhkan.

Pengoptimalan bilah navigasi

• Hapus |_+_| . yang berlebihan dari anak-anak flex
• Hapus |_+_| yang merupakan nilai default |_+_|
• Gunakan singkatan fleksibel
• Tingkatkan steno latar belakang
• Perbaiki margin merek yang dihapus karena memerlukan wadah di navbars

Kapan tanggal rilis Bootstrap 5?

Tidak yakin hari apa yang pasti, tetapi dengan beban kerja yang selesai, Bootstrap 5 kemungkinan akan dirilis pada Q4 2020. Mari kita tunggu.

Kursus Singkat Bootstrap 5 untuk Pemula
Kursus Lengkap Bootstrap 5 dengan Contoh

#bootstrap #responsif