Bootstrap 4 Ada di sini! Apa yang Baru?

Bootstrap, salah satu kerangka front-end paling populer di kalangan web designer, baru-baru ini meluncurkan versi 4 yang sangat ditunggu-tunggu! Mari kita lihat apa baru, apa yang telah dihapus, dan apa yang dapat Anda lakukan dengan itu.

Kami tidak pernah berhenti percaya, dan berharap Anda juga tidak! Bootstrap 4.0.0 akhirnya mendarat! https://t.co/zFAOxpyhvD

— Bootstrap (@getbootstrap) 18 Januari 2018

Versi 4.0.0

Iterasi Bootstrap ini, menurut Mark Otto dan timnya, adalah "penulisan ulang utama keseluruhan proyek". Itu menjanjikan banyak perbaikan, dan juga menyarankan ada banyak masalah jika Anda berencana untuk memindahkan proyek yang ada ke versi baru ini. Tidak ada "perubahan yang melanggar", tapi ada banyak hal yang harus diperhatikan. Waktunya melompat masuk dan memeriksa fitur yang paling penting.

Bootstrap 4 Ada di sini!

1. New: Flexbox by Default

Tata letak Bootstrap secara tradisional telah didukung oleh gaya berbasis float. Pada versi terbaru alternatif flexbox tersedia, namun mengingat dukungan browser flexbox yang meluas sekarang merupakan master dari grid Bootstrap. Teknologi CSS di balik grid Bootstrap tidak membuat perbedaan besar, namun flexbox memang menawarkan fleksibilitas lebih banyak daripada floats, jadi grid berbasis flexbox memang hadir dengan beberapa opsi lagi. Misalnya, menggunakan flexbox berarti Anda bisa menentukan satu kolom dan memiliki saudaranya secara otomatis mengubah ukurannya di sekitarnya.

2. New: Focused Browser Support

Langkah menuju favoring flexbox benar-benar mendorong perubahan lain: dukungan browser. Bootstrap v4 secara resmi telah menjatuhkan dukungan untuk Internet Explorer 8, 9, dan iOS 6. Ini secara efektif berarti situs web Bootstrap Anda hanya akan mendukung IE10 + dan iOS 7+. Perlu dicatat.

3. New: LESS to Sass

Penggemar Sass dengan senang hati akan mendengar bahwa Bootstrap sekarang secara resmi merupakan proyek Sass-pertama. Jika Anda mendownload sumber Bootstrap Anda akan menemukan sebuah folder bernama "Sass" di mana Anda akan melihat semua partial yang diperlukan. "_variables.scss" berisi semua variabel dan pengaturan yang Anda perlukan, lalu "bootstrap.scss" menampung semua arahan @import, yang memungkinkan Anda menyesuaikan pemasangan Bootstrap dengan menyertakan atau mengecualikan komponen mana pun yang Anda inginkan.

4. New: REM

Di semua tempat selain media queries, Bootstrap v4 telah menjatuhkan piksel yang mendukung unit pengukuran relatif seperti rem. Hal ini membuat semuanya lebih terukur, jadi jika Anda belum terbiasa dengan unit rem sekarang akan menjadi saat yang tepat untuk melihat sumber daya ini:

• 
  CSS
  7 Unit CSS yang Mungkin Tidak Anda Ketahui Tentang
  Jonathan Cutrell
• 
  Responsive Web Design
  Panduan Komprehensif: Kapan Menggunakan Em vs. Rem
  Kezz Bracey
• 
  CSS
  Mengapa Anda Harus Menggunakan Layout Berbasis Rem
  Kezz Bracey

5. New: Additional Breakpoint Tier

Selain langkah Bootstrap dari layout berbasis float, responsifnya sekarang juga hadir dengan tingkat ekstra. Mulai sekarang, Anda dapat menyesuaikan kelima default ini:

1

$grid-breakpoints: (

2

    xs: 0px,

3

    sm: 576px,

4

    md: 768px,

5

    lg: 992px,

6

    xl: 1200px

7

) !default;

6. New: Reboot

Perubahan penting berikutnya datang dalam bentuk file reset baru. "Reboot" mengambil Normalize's resets, yang hanya menggunakan penyisipan elemen, kemudian membangunnya dengan beberapa gaya reset berbasis kelas yang sesuai (Anda akan temukan .tabel dan .table-bordered tertimbun di sana dengan beberapa lainnya).

7. Dropped: Custom Builder

Jika Anda pernah mendownload Bootstrap versi sebelumnya, Anda akan terbiasa dengan customiser online. Alat ini memungkinkan Anda untuk memeriksa dan menghapus centang berbagai aspek kerangka Bootstrap untuk membuat versi ideal Anda.

Nah, itu hilang.

Sebagai gantinya, Bootstrap sekarang berfokus pada struktur modularnya sendiri, yang memungkinkan Anda memanfaatkan Sass dari akhirmu, hanya memasukkan apa yang Anda butuhkan, dan mengumpulkan hasil akhir yang dapat Anda ambil.

8. Dropped: Glyphicons

Bootstrap tidak lagi memasukkan Glyphicons. Sebagai gantinya, Anda disarankan untuk menemukan favorit Anda sendiri dan memasukkannya sesuai keinginan Anda. Tim Bootstrap sendiri lebih menyukai rangkaian berikut, yang sebaiknya Anda terapkan sebagai SVG daripada menggunakan font ikon web:

• Iconic
• Octicons

9. Dropped: Grunt

Versi Bootstrap sebelumnya termasuk dukungan Grunt untuk mengotomatisasi banyak tugas umum; itu sekarang hilang Sebagai gantinya, Bootstrap sekarang hadir dengan sejumlah skrip npm yang akan Anda temukan di file "package.json". Anda dapat menggunakan ini untuk melakukan hal-hal seperti watch file Sass Anda untuk perubahan, melakukan tes lint pada JavaScript Anda, atau gunakan saja run npm dist untuk melakukan semuanya dan mengkompilasi versi distribusi dari situs Anda yang telah selesai.

Untuk detail lebih lanjut tentang cara kerja Bootstrap dan Node.js lihat dokumentasi alat perancang, atau lihat tutorial berikut ini:

• 
  Terminal
  The Command Line for Web Design: Grasping the Basics
  Kezz Bracey
• 
  Terminal
  Cara Memasang NPM dan Bower
  Kezz Bracey

Kesimpulan

Seiring dengan perubahan besar ini, ada sejumlah perubahan kecil pada Bootstrap terbaru. Penggemar komponen seperti panel, thumbnail, dan wells akan kecewa mengetahui bahwa ini telah dihapus. Namun, mereka telah membuat jalan untuk komponen yang mencakup semua yang disebut "card", yang sebenarnya merupakan peningkatan besar. Anda dapat membaca semua tentang perubahan ini, dan banyak lagi, di halaman Migrasi.

Nantikan lebih banyak tutorial Bootstrap 4 dan kursus pada Tuts +, dan saya akan menemuimu lain kali!

Sumber Berguna

• Pemberitahuan Bootstrap 4 di blog Bootstrap
• getbootstrap.com
  
• Migration docs