Home-theater-designers
Bootstrap 5 telah datang dengan perubahan besar, termasuk penurunan untuk dukungan Internet Explorer (IE) dan ketergantungan jQuery. Dikembangkan oleh Twitter, Bootstrap adalah kerangka kerja CSS paling populer di dunia. Kerangka kerja antarmuka pengguna open-source sedang melihat pemosisian dirinya untuk masa depan, dan ini telah membuatnya membuat perubahan terobosan di v5.
Penurunan Bootstrap untuk IE telah menjadikannya alat pengembangan web pertama yang melakukan ini. Langkah ini dilakukan karena pangsa pasar Internet Explorer terus menyusut, terhitung kurang dari 3% dari semua browser web.
Baca terus untuk melihat peningkatan apa lagi yang telah dilakukan pada Bootstrap dan bagaimana pengaruhnya terhadap Anda.
1. Dukungan jQuery
Bootstrap tidak akan lagi menggunakan perpustakaan jQuery. Tim pengembangan malah meningkatkan pustaka JavaScript untuk melakukan perubahan ini. Ketergantungan jQuery tidak selalu merupakan hal yang buruk di Bootstrap.
Faktanya, pengenalan jQuery secara radikal mengubah cara JavaScript digunakan. Ini menyederhanakan tugas penulisan dalam JavaScript yang seharusnya membutuhkan banyak baris kode.
Terkait: Pelajari Cara Membuat Elemen di jQuery
Terlepas dari semua ini, tim telah memutuskan untuk menyingkirkannya. Ini datang dengan manfaat dari file sumber yang lebih kecil dan waktu buka halaman yang lebih tinggi. Ini adalah perubahan yang sangat dibutuhkan yang akan membuat Bootstrap mendapatkan gaya yang lebih ramah masa depan.
Ukuran file sumber menjadi lebih ringan dengan 85KB JavaScript yang diperkecil, dan ini adalah kuncinya karena Google menganggap waktu pemuatan halaman untuk situs seluler sebagai faktor peringkat.
Selama penggunaan jQuery tidak lagi diperlukan di Bootstrap 5, Anda masih dapat menggunakannya jika Anda mau. Perlu juga dicatat bahwa semua plugin JavaScript tetap tersedia.
2. Properti Kustom CSS
Dengan menjatuhkan dukungan Internet Explorer, properti CSS khusus (variabel) dapat digunakan. IE tidak mendukung properti khusus - hanya satu alasan mengapa hal itu menahan pengembang web untuk waktu yang lama.
Properti kustom CSS membuat CSS lebih fleksibel dan dapat diprogram. Variabel CSS diawali dengan -bs untuk mencegah konflik dengan CSS pihak ketiga.
Ada dua jenis variabel yang tersedia: variabel root dan variabel komponen.
Variabel root dapat diakses di mana pun Bootstrap CSS dimuat. Variabel-variabel ini terletak di _root.scss file dan merupakan bagian dari file dist yang dikompilasi.
Variabel komponen digunakan sebagai variabel lokal pada komponen tertentu. Mereka membantu untuk menghindari pewarisan gaya yang tidak disengaja dalam komponen seperti tabel bersarang.
3. Sistem Grid yang Ditingkatkan
Karena ada beberapa masalah peningkatan dari versi 3 ke 4, Bootstrap 5 mempertahankan sebagian besar sistem kali ini, membangun sistem yang ada alih-alih mengubahnya sepenuhnya. Beberapa perubahannya adalah:
- Kelas selokan ( .anak laki-laki ) telah diganti menjadi utilitas ( .G* ) seperti margin dan padding
- Kelas jarak vertikal juga telah disertakan
- Kolom tidak lagi default ke posisi: relatif
4. Peningkatan Dokumentasi
Dokumentasi telah ditingkatkan dengan lebih banyak informasi terutama dalam hal penyesuaian. Masalah umum adalah bahwa dengan banyak situs yang menggunakan Bootstrap, Anda dapat segera mengidentifikasi bahwa itu menggunakan Bootstrap. Bootstrap 5 kini hadir dengan tampilan dan nuansa baru, dan dengan kustomisasi yang lebih baik.
Sekarang ada lebih banyak fleksibilitas untuk menyesuaikan tema Anda sehingga tidak setiap situs atau aplikasi memiliki kemiripan yang sama. Halaman bertema v4 sebenarnya telah diperluas dengan lebih banyak konten dan cuplikan kode untuk dibuat di atas file Sass (pra-prosesor CSS populer). Anda juga dapat menemukan proyek npm starter di platform GitHub yang tersedia sebagai repositori template.
Palet warna juga telah diperluas di versi 5. Sistem warna built-in yang diperluas menyiratkan bahwa Anda dapat dengan mudah menata pewarnaan Anda tanpa harus meninggalkan basis kode Anda. Lebih banyak pekerjaan juga telah dilakukan untuk meningkatkan kontras warna, termasuk penambahan metrik kontras warna dalam dokumen warna Bootstrap.
5. Kontrol Formulir yang Ditingkatkan
Bootstrap telah meningkatkan kontrol formulir, grup input, dan banyak lagi.
Di v4, Bootstrap menggunakan kontrol formulir khusus selain default yang disediakan oleh masing-masing browser. Di v5, ini semua sekarang disesuaikan. Semua tombol radio, kotak centang, file, jangkauan, dan lainnya untuk memberikan tampilan dan perilaku yang sama di berbagai browser.
Kontrol formulir baru tidak lagi berisi markup warna-warni yang tidak perlu, melainkan fokus pada fitur desain standar dan logis.
6. Bootstrap 5 Menambahkan API Utilitas
Mengikuti library CSS baru seperti Tailwind CSS, Bootstrap kini juga menambahkan library utilitas. Tim bootstrap mengatakan bahwa mereka senang melihat bagaimana pengembang lain menantang cara kami membangun web selama lebih dari satu dekade terakhir.
Utilitas mendapatkan momentum di komunitas pengembangan dan tim bootstrap telah memperhatikannya. Tim sebelumnya telah menambahkan ketentuan untuk utilitas di v4 menggunakan global $aktifkan-* kelas. Di v5, mereka telah berubah ke pendekatan API dan bahasa dan sintaks baru di Sass. Ini akan memberi Anda kekuatan untuk membuat utilitas baru sambil tetap dapat menghapus atau memodifikasi default yang diberikan.
Sebagai cara untuk memberikan organisasi yang lebih baik, beberapa utilitas yang ada di v4 telah dipindahkan ke bagian Pembantu.
7. Perpustakaan Ikon Bootstrap Baru
Bootstrap sekarang menawarkan perpustakaan ikon SVG open source-nya sendiri dengan lebih dari 1.300 ikon. Ini dibuat khusus untuk komponen kerangka kerja tetapi Anda masih dapat bekerja dengannya di proyek apa pun.
Mengingat bahwa itu adalah gambar SVG, mereka dapat dengan cepat menskalakan dan dapat diimplementasikan dalam banyak cara dan juga ditata dengan CSS.
Anda dapat menginstal ikon menggunakan di atas permukaan laut:
$ npm i bootstrap-iconsInstal Bootstrap 5
Anda bisa pergi ke Bootstrap 5 halaman unduhan resmi jika Anda ingin menginstalnya. Jika Anda ingin mengikuti perkembangan rilis terbaru, Anda dapat menggunakan di atas permukaan laut untuk menariknya:
$ npm i bootstrap@next
Pada saat penulisan ini, kerangka kerja tersebut dalam versi Beta 3. Ini berarti bahwa perangkat lunak tersebut aman untuk digunakan tetapi masih dalam pengembangan. Jangan ragu untuk memberikan umpan balik kepada tim dan memberikan kontribusi yang diperlukan.
Membagikan Membagikan Menciak Surel Pengantar Komponen Web dan Arsitektur Berbasis KomponenMari kita lihat komponen web umum dan lihat mengapa mereka berguna.
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- Pengembangan web
- JavaScript
- CSS
Jerome adalah Staf Penulis di MakeUseOf. Dia meliput artikel tentang Pemrograman dan Linux. Dia juga penggemar kripto dan selalu mengawasi industri kripto.
More From Jerome DavidsonBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
cara mengambil gambar dari videoKlik di sini untuk berlangganan