Bootstrap 4 Fitur Baru & Keren yang Akan Anda Sukai

Rilis besar berikutnya dari kerangka kerja Bootstrap sudah dekat. Versi alpha sudah dapat diunduh dari situs web pengembangan Bootstrap, dan kode sumbernya juga tersedia di Github.

Twitter Bootstrap saat ini merupakan kerangka kerja frontend paling populer di luar sana. Ini memungkinkan pengembang untuk membangun situs web mobile-first dan responsif, dengan cepat. Bootstrap memungkinkan untuk memanfaatkan trio frontend HTML5, CSS3, dan Javascript secara cerdas. Saat ini digunakan oleh lebih dari 6 juta situs di web.

Meskipun Bootstrap 4 masih dalam tahap pengembangan (jadi jangan gunakan itu di situs langsung), para pengembang telah melakukan pekerjaan yang luar biasa. Dalam posting ini kita akan melihat versi baru yang mencakup banyak fitur hebat yang pasti merampingkan dan meningkatkan alur kerja pengembangan frontend.

1. Sass Alih-alih KURANG

Sampai sekarang Bootstrap telah menggunakan KURANG sebagai preposessor CSS utamanya, tetapi untuk rilis besar baru, aturan gaya akan dire-refored ke Sass, yang jauh lebih populer di kalangan pengembang frontend, memiliki basis kontributor besar, umumnya lebih mudah digunakan dan menawarkan lebih kemungkinan. Berkat Libsass Sass Complier yang kuat yang ditulis dalam C / C++ Bootstrap 4 akan mengkompilasi lebih cepat daripada sebelumnya.

2. Tier Jaringan Baru untuk Layar Lebih Kecil

Bootstrap memiliki sistem grid responsif yang canggih yang memungkinkan pengembang untuk menargetkan perangkat dengan berbagai viewports. Bootstrap 3 saat ini memiliki 4 kelas kisi untuk kolom, .col-xs-XX untuk ponsel, .col-sm-XX untuk tablet, .col-md-XX untuk desktop, dan .col-lg-XX untuk desktop yang lebih besar. Bootstrap 4 akan meningkatkan sistem grid dengan yang kelima yang akan memudahkan pengembang targetkan perangkat yang lebih kecil di bawah lebar viewport 480px.

Kelas grid baru telah mengambil nama yang terkecil sebelumnya, dan mendorong nama-nama saat ini dari tingkatan grid ke atas oleh satu takik. Di Bootstrap 4 desktop besar akan menggunakan .col-xl-XX pemilih kelas. Sangat penting untuk mengetahui bahwa meskipun nama baru mereka tidak menambahkan kelas baru untuk layar ekstra besar tetapi untuk yang ekstra kecil.

3. Memperkenalkan Unit CSS Relatif

Bootstrap 4 akhirnya menjatuhkan dukungan untuk Internet Explorer 8. Itu benar-benar langkah cerdas karena memungkinkan mereka untuk menyingkirkan polyfill yang sial, dan mengkonversi ke unit CSS relatif. Alih-alih piksel, rilis utama baru akan gunakan REM dan EM yang memungkinkan untuk menerapkan tipografi responsif di situs Bootstrap. Ini juga akan meningkatkan keterbacaan, dan membuat situs lebih mudah diakses oleh pengguna yang dinonaktifkan.

Jika Anda ingin mencoba cara unit relatif bekerja dengan Bootstrap 4 baru, lihat demo ini pada Codepen.

4. Kartu Bootstrap Baru

Tim pengembang memutuskan untuk menyatukan beberapa elemen antarmuka pengguna Bootstrap sebelumnya, sehingga mereka memutuskan untuk memperkenalkan a komponen UI baru yang disebut Kartu. Kartu akan menggantikan sumur lama, thumbnail, dan panel, dan akan memberi pengguna alur kerja yang lebih ramping. Jangan khawatir, kartu akan menyimpan elemen yang sudah dikenal, seperti judul, header dan footer dari sumur, thumbnail, dan panel.

Karena kartu akan lebih fleksibel daripada komponen UI saat ini, mereka akan memberikan ruang yang lebih besar untuk implementasi kreatif. Ada beberapa pelopor di luar sana yang telah melakukan percobaan pada Codepen dengan Kartu Bootstrap. Anda dapat memeriksanya, atau membuat kartu Anda sendiri.

5. Modul Reboot Baru

Modul Reboot baru menggantikan yang sebelumnya normalize.css atur ulang file. Itu tidak membuangnya; sebaliknya, ia membangun lebih banyak aturan di atasnya. Tujuan dari langkah ini adalah memasukkan semua penyeleksi CSS umum dan mengatur ulang gaya dalam a file SCSS tunggal, mudah digunakan. Anda dapat melihat kode sumber di sini jika Anda ingin lebih memahami cara kerja modul baru.

Adalah baik untuk mengetahui bahwa gaya reset baru secara pintar mengatur properti CSS ukuran kotak kotak perbatasan di elemen, yang karenanya diwariskan oleh setiap elemen anak di halaman. Aturan gaya baru membuat tata letak responsif lebih mudah dikelola. Jika Anda ingin mengalami perbedaan antara tipe kotak konten dan tata letak kotak batas, lihat demo praktis ini yang disediakan oleh CSS-Tricks.com (itu tidak dibuat untuk Bootstrap 4, itu hanya menunjukkan bagaimana ukuran kotak umumnya bekerja).

6. Dukungan Flexbox Opt-in

Bootstrap 4 memungkinkan untuk memanfaatkan Layout Flexbox CSS3, namun - karena Internet Explorer 9 tidak mendukung modul flexbox - versi default dari Bootstrap 4 memanfaatkan float dan menampilkan properti CSS untuk mengimplementasikan tata letak yang lancar.

Flexbox memiliki tata letak yang mudah digunakan yang dapat digunakan dengan sangat baik dalam desain responsif, karena menyediakan wadah fleksibel yang dapat mengembang atau menyusut sendiri untuk mengisi ruang yang tersedia dengan cara terbaik. Gunakan hanya fitur opt-in flexbox jika Anda jangan perlu memberikan dukungan untuk IE9.

7. Kustomisasi Variabel yang Disederhanakan

Semua variabel Sass yang digunakan dalam rilis Bootstrap baru termasuk dalam satu file bernama _variables.scss, yang secara signifikan akan merampingkan proses pengembangan. Anda tidak perlu melakukan hal lain selain menyalin pengaturan dari file ini ke file lain yang disebut _custom.scss untuk mengubah nilai default.

Kamu bisa menyesuaikan banyak hal seperti warna, jarak, gaya tautan, tipografi, tabel, breakpoint dan wadah kisi, jumlah kolom dan lebar selokan, dan banyak lainnya.

8. Kelas Utilitas Baru untuk Penempatan

Bootstrap 3 sudah memiliki banyak kelas utilitas praktis seperti yang mengubah floating atau clearfix, tetapi Bootstrap 4 menambahkan lebih banyak lagi. Itu kelas jarak baru memungkinkan pengembang untuk dengan cepat mengubah bantalan dan margin di situs mereka.

Sintaks untuk kelas-kelas baru cukup mudah, misalnya menambahkan .kelas m-a-0 mengaitkan aturan gaya itu set margin ke 0 di semua sisi elemen yang diberikan (margin-all-0). Sementara margin menggunakan m- awalan, paddings ditata dengan hal- awalan. Dalam dokumen pengembangan Anda dapat melihat semua kelas utilitas spasi baru.

9. Tooltips dan Popovers Didukung oleh Tether

Di Bootstrap 4, tooltips dan popovers memanfaatkan pustaka supercool Tether, mesin pemosisian yang memungkinkan untuk mempertahankan elemen yang benar-benar diposisikan tepat di sebelah elemen lain di halaman yang sama. Ini berarti tooltips dan popover akan secara otomatis ditempatkan dengan benar di situs web Bootstrap 4.

Jangan lupa bahwa karena Tether adalah pustaka JavaScript pihak ketiga, Anda harus memasukkannya secara terpisah dalam HTML sebelum file bootstrap.js Anda.

10. Plugin JavaScript yang telah di-refactored

Tim pengembang refactored setiap plugin JavaScript untuk rilis baru menggunakan EcmaScript 6. Dengan pemanfaatan cerdas spesifikasi terbaru dan peningkatan terbaru mereka bermaksud untuk meningkatkan pengalaman frontend.

Bootstrap 4 baru juga telah mengalami peningkatan JavaScript lainnya, seperti memeriksa jenis opsi, metode teardown generik, dan Dukungan UMD, yang semuanya akan bekerja sama untuk membuat kerangka frontend paling populer berjalan lebih lancar dari sebelumnya.

Sekarang Baca: 10 Alternatif Ringan Untuk Bootstrap & Foundation