Home-theater-designers
Bootstrap 5 hadir dengan perubahan besar, termasuk penurunan sokongan Internet Explorer (IE) dan ketergantungan jQuery. Dibangunkan oleh Twitter, Bootstrap adalah rangka kerja CSS yang paling popular di dunia. Rangka kerja antara muka pengguna sumber terbuka sedang melihat kedudukannya untuk masa depan, dan ini telah menjadikannya perubahan mendasar dalam v5.
Penurunan Bootstrap untuk IE menjadikannya alat pengembangan web pertama yang melakukan ini. Langkah itu berlaku apabila bahagian pasaran Internet Explorer terus berkurang, menyumbang kurang dari 3% daripada semua penyemak imbas web.
Teruskan membaca untuk melihat apa lagi penambahbaikan yang telah dibuat pada Bootstrap dan bagaimana ia mempengaruhi anda.
1. Sokongan jQuery
Bootstrap tidak lagi menggunakan pustaka jQuery. Pasukan pengembangan sebaliknya telah meningkatkan perpustakaan JavaScript untuk melaksanakan perubahan ini. Ketergantungan jQuery tidak semestinya perkara buruk dalam Bootstrap.
Sebenarnya, pengenalan jQuery secara radikal mengubah cara JavaScript digunakan. Ini mempermudah tugas menulis dalam JavaScript yang sebaliknya akan mengambil banyak baris kod.
Berkaitan: Ketahui Cara Membuat Elemen di jQuery
Walaupun semua ini, pasukan telah memutuskan untuk menghilangkannya. Ini hadir dengan kelebihan fail sumber yang lebih kecil dan masa muat halaman yang lebih tinggi. Ini adalah perubahan yang sangat diperlukan yang akan menyaksikan Bootstrap memperoleh gaya yang lebih mesra masa depan.
Ukuran fail sumber menjadi lebih ringan dengan 85KB JavaScript yang diperkecil, dan ini adalah penting kerana Google menganggap masa muat halaman untuk laman web mudah alih sebagai faktor peringkat.
Sebagaimana penggunaan jQuery tidak lagi diperlukan dalam Bootstrap 5, anda masih boleh menggunakannya jika anda mahu. Perlu juga diperhatikan bahawa semua plugin JavaScript tetap tersedia.
2. Hartanah Custom CSS
Dengan menjatuhkan sokongan Internet Explorer, sifat CSS khusus (pemboleh ubah) dapat digunakan. IE tidak menyokong sifat tersuai - hanya satu sebab mengapa ia menahan pembangun web sejak sekian lama.
Ciri khas CSS menjadikan CSS lebih fleksibel dan dapat diprogramkan. Pemboleh ubah CSS diawali dengan -b untuk mengelakkan konflik dengan CSS pihak ketiga.
Terdapat dua jenis pemboleh ubah yang tersedia: pemboleh ubah akar dan pemboleh ubah komponen.
Pemboleh ubah root boleh diakses di mana sahaja Bootstrap CSS dimuat. Pemboleh ubah ini terletak di _root.scss fail dan merupakan sebahagian daripada fail dist yang disusun.
Pemboleh ubah komponen digunakan sebagai pemboleh ubah tempatan dalam komponen tertentu. Mereka berguna untuk mengelakkan pewarisan gaya secara tidak sengaja dalam komponen seperti jadual bersarang.
3. Sistem Grid yang diperbaiki
Kerana terdapat beberapa masalah peningkatan dari versi 3 hingga 4, Bootstrap 5 mempertahankan sebahagian besar sistem kali ini, berdasarkan sistem yang ada dan bukannya mengubahnya sepenuhnya. Beberapa perubahan adalah:
- Kelas selokan ( budak lelaki ) telah diganti menjadi utiliti ( .g * ) seperti margin dan padding
- Kelas jarak menegak juga telah disertakan
- Lajur tidak lagi menjadi lalai kedudukan: relatif
4. Peningkatan Dokumentasi
Dokumentasi telah disempurnakan dengan lebih banyak maklumat terutama mengenai penyesuaian. Masalah umum ialah dengan banyak laman web yang menggunakan Bootstrap, anda dapat segera mengenal pasti bahawa ia menggunakan Bootstrap. Bootstrap 5 kini hadir dengan penampilan dan nuansa baru, dan dengan penyesuaian yang lebih baik.
Kini terdapat lebih banyak fleksibiliti untuk menyesuaikan tema anda agar tidak semua laman web atau aplikasi memiliki kemiripan yang sama. Halaman bertema v4 sebenarnya telah diperluas dengan lebih banyak kandungan dan coretan kod untuk membina fail di atas Sass (pra-pemproses CSS yang popular). Anda juga boleh mendapatkan projek starter npm di platform GitHub yang tersedia sebagai repositori templat.
Palet warna juga telah diperluas dalam versi 5. Sistem warna bawaan yang diperluas menyiratkan bahawa anda dapat dengan mudah menggayakan pewarnaan anda tanpa harus meninggalkan pangkalan kode anda. Lebih banyak kerja juga telah dilakukan untuk meningkatkan kontras warna, termasuk penambahan metrik kontras warna dalam dokumen warna Bootstrap.
5. Kawalan Borang yang Ditingkatkan
Bootstrap telah meningkatkan kawalan bentuknya, kumpulan input, dan banyak lagi.
Dalam v4, Bootstrap menggunakan kawalan bentuk khusus selain lalai yang disediakan oleh setiap penyemak imbas. Dalam v5, semuanya kini disesuaikan. Semua butang radio, kotak centang, fail, jarak dan banyak lagi untuk memberi mereka penampilan dan tingkah laku yang sama di pelbagai penyemak imbas.
Kawalan bentuk baru tidak lagi mengandungi markup berwarna-warni yang tidak perlu, tetapi lebih fokus pada ciri reka bentuk standard dan logik.
6. Bootstrap 5 Menambah Utiliti API
Mengikuti perpustakaan CSS baru seperti Tailwind CSS, Bootstrap kini juga menambah perpustakaan utiliti. Pasukan bootstrap mengatakan bahawa mereka gembira melihat bagaimana pembangun lain mencabar cara yang kami buat di web selama satu dekad terakhir.
Utiliti semakin mendapat tempat dalam komuniti pembangunan dan pasukan bootstrap telah mengambil perhatian. Pasukan itu sebelumnya telah menambah peruntukan untuk utiliti dalam v4 menggunakan global $ dayakan- * kelas. Dalam v5, mereka telah berubah menjadi pendekatan API dan bahasa dan sintaks baru di Sass. Ini akan memberi anda kekuatan untuk membuat utiliti baru sementara masih dapat menghapus atau mengubah lalai yang diberikan.
Sebagai cara untuk memberi organisasi yang lebih baik, beberapa utiliti yang ada di v4 telah dipindahkan ke bahagian Pembantu.
7. Perpustakaan Ikon Bootstrap Baru
Bootstrap kini mempunyai perpustakaan ikon sumber terbuka SVG sendiri dengan lebih daripada 1.300 ikon. Ia dibuat khas untuk komponen kerangka kerja tetapi anda masih boleh menggunakannya dengan projek apa pun.
Memandangkan mereka adalah gambar SVG, gambar dapat dengan cepat dan dapat dilaksanakan dengan berbagai cara dan juga digayakan dengan CSS.
Anda boleh memasang ikon menggunakan di atas paras laut:
$ npm i bootstrap-iconsPasang Bootstrap 5
Anda boleh pergi ke Halaman muat turun rasmi Bootstrap 5 jika anda mahu memasangnya. Sekiranya anda ingin mengikuti perkembangan terbaru yang boleh anda gunakan di atas paras laut untuk menariknya:
$ npm i bootstrap@next
Pada masa penulisan ini, kerangka ini terdapat dalam versi Beta 3-nya. Ini bermaksud bahawa perisian selamat digunakan tetapi masih dalam pembangunan. Jangan ragu untuk memberi maklum balas kepada pasukan dan memberikan sumbangan yang diperlukan.
Berkongsi Berkongsi Tweet E-mel Pengenalan Komponen Web dan Senibina Berasaskan KomponenMari lihat komponen web biasa dan lihat mengapa ia berguna.
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- Pembangunan Web
- JavaScript
- CSS
Jerome adalah Penulis Kakitangan di MakeUseOf. Dia merangkumi artikel mengenai Pengaturcaraan dan Linux. Dia juga peminat crypto dan selalu mengawasi industri crypto.
Lagi Dari Jerome DavidsonLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
bolehkah anda memulihkan mesej yang dipadam di messengerKlik di sini untuk melanggan