Bootstrap 4 Ciri-ciri Baru & Sejuk Anda Akan Suka

Pembukaan utama utama rangka kerja Bootstrap adalah sekitar sudut. Versi alpha sudah boleh dimuat turun dari laman web pembangunan Bootstrap, dan kod sumber juga boleh didapati di Github.

Twitter Bootstrap kini rangka kerja frontend yang paling popular di luar sana. Ia membolehkan pemaju untuk membina laman web mudah alih pertama dan responsif, dengan cepat. Bootstrap membolehkan anda dengan bijak menggunakan standard HTML5, CSS3 dan Javascript frontend trio standard. Ia kini digunakan oleh lebih daripada 6 juta tapak di web.

Walaupun Bootstrap 4 masih dalam fasa pembangunan (jadi tidak menggunakannya di tapak langsung), pemaju telah melakukan kerja yang luar biasa. Dalam catatan ini kita akan melihat versi baru yang merangkumi banyak ciri hebat yang pasti menyelaraskan dan meningkatkan alur kerja pembangunan frontend.

1. Sass Sebaliknya kurang

Sehingga sekarang Bootstrap telah menggunakan LESS sebagai prepcessor CSS utamanya, tetapi untuk pelepasan utama baru, peraturan gaya akan diubahsuai kepada Sass, yang lebih popular di kalangan pemaju frontend, mempunyai asas penyumbang besar, biasanya lebih mudah digunakan dan menawarkan lebih banyak kemungkinan. Terima kasih kepada Libsass Sass Complier berkuasa yang ditulis dalam C / C++ Bootstrap 4 akan menyusun lebih pantas daripada sebelumnya.

2. Tahap Grid Baru untuk Skrin Kecil

Bootstrap mempunyai sistem grid responsif yang canggih yang membolehkan pemaju menargetkan peranti dengan pemandangan viewport yang berbeza. Bootstrap 3 kini mempunyai 4 kelas grid untuk lajur, .col-xs-XX untuk telefon bimbit, .col-sm-XX untuk tablet, .col-md-XX untuk komputer meja, dan .col-lg-XX untuk desktop yang lebih besar. Bootstrap 4 akan meningkatkan sistem grid dengan yang kelima yang akan memudahkan pemaju untuk sasarkan peranti kecil di bawah lebar paparan 480px.

Kelas grid baru telah mengambil nama yang terkecil terdahulu, dan menolak nama semasa tier grid ke atas oleh satu takik. Dalam Bootstrap 4 desktop besar akan menggunakan .col-xl-XX pemilih kelas. Adalah penting untuk mengetahui bahawa walaupun nama baru mereka tidak menambah kelas baru untuk skrin besar tetapi lebih kecil.

3. Memperkenalkan Unit CSS Relatif

Bootstrap 4 akhirnya jatuh sokongan untuk Internet Explorer 8. Itu benar-benar langkah pintar kerana ia membolehkan mereka untuk menyingkirkan polyfills yang menjengkelkan, dan menukar kepada unit CSS relatif. Daripada piksel, siaran utama baru akan gunakan REM dan EM yang menjadikannya mungkin melaksanakan tipografi responsif di laman Bootstrap. Ini juga akan meningkatkan kebolehbacaan, dan membuat laman web lebih mudah diakses untuk pengguna kurang upaya.

Jika anda ingin mencuba bagaimana unit relatif bekerja dengan Bootstrap 4 baru, lihat demo ini di Codepen.

4. Kad Baru Bootstrap Jenama

Pasukan pembangunan memutuskan untuk menyatukan beberapa elemen sebelumnya antara muka pengguna Bootstrap, jadi mereka memutuskan untuk memperkenalkan komponen UI baru yang dipanggil Kad. Kad akan menggantikan bekas telaga, imej kecil dan panel, dan akan menyediakan pengguna dengan aliran kerja yang lebih diperkemas. Jangan risau, kad akan menyimpan elemen biasa, seperti tajuk, tajuk dan kaki telaga, lakaran dan panel.

Memandangkan kad akan lebih fleksibel daripada komponen UI semasa, mereka akan membenarkan ruang yang lebih besar untuk pelaksanaan kreatif. Terdapat beberapa perintis di luar sana yang telah menjalankan eksperimen di Codepen dengan Kad Bootstrap. Anda boleh menyemaknya, atau buat kad anda sendiri.

5. Modul Reboot Baru

Modul Reboot baru menggantikan sebelumnya normalize.css menetapkan semula fail. Ia tidak mengalirnya; sebaliknya, ia membina lebih banyak peraturan di atasnya. Matlamat langkah ini adalah untuk memasukkan semua pemilih CSS generik dan menetapkan semula gaya dalam a fail SCSS tunggal, mudah digunakan. Anda boleh melihat kod sumber di sini jika anda ingin lebih memahami bagaimana modul baru berfungsi.

Adalah baik untuk mengetahui bahawa gaya reset baharu dengan bijak mengesetkan sifat CSS kotak saiz kepada kotak sempadan pada elemen, yang oleh itu diwarisi oleh setiap elemen kanak-kanak di halaman. Peraturan gaya baru membuat susun atur responsif lebih mudah diurus. Sekiranya anda ingin mengalami perbezaan di antara kotak kandungan dan jenis susun atur kotak sempadan, lihat demo berguna ini yang disediakan oleh CSS-Tricks.com (ia tidak dicipta untuk Bootstrap 4, ia hanya menunjukkan bagaimana kotak ukuran biasanya berfungsi).

6. Sokongan Flexbox masuk

Bootstrap 4 memungkinkan untuk mengambil leverage CSS Layout Flexbox, bagaimanapun - kerana Internet Explorer 9 tidak menyokong modul flexbox - versi lalai Bootstrap 4 agak menggunakan ciri apungan dan paparan CSS untuk melaksanakan susun atur bendalir.

Flexbox mempunyai susun atur yang mudah digunakan yang boleh digunakan dengan baik dalam reka bentuk responsif, kerana ia menyediakan bekas yang fleksibel yang sama ada mengembang atau mengecut sendiri untuk mengisi ruang yang ada dengan cara yang terbaik. Hanya gunakan ciri flexbox opt-in jika anda jangan perlu memberi sokongan untuk IE9.

7. Penyesuaian Variable yang disederhanakan

Semua pembolehubah Sass yang digunakan dalam pelepasan Bootstrap baru dimasukkan dalam satu fail yang dipanggil _variables.scss, yang akan menyelaraskan proses pembangunan dengan ketara. Anda tidak perlu melakukan apa-apa selain menyalin tetapan dari fail ini ke yang lain yang dipanggil _custom.scss untuk menukar nilai lalai.

Awak boleh menyesuaikan banyak perkara seperti warna, jarak, gaya pautan, tipografi, jadual, titik putus grid dan bekas, nombor lajur dan lebar saluran, dan banyak lagi.

8. Kelas Utiliti Baru untuk Spasi

Bootstrap 3 sudah mempunyai banyak kelas utiliti praktikal seperti yang mengubah terapung atau pembaikan jelas, tetapi Bootstrap 4 menambah lebih banyak lagi. The kelas jarak baru membenarkan pemaju cepat menukar paddings dan margin di laman web mereka.

Sintaks untuk kelas baru agak mudah, contohnya .kelas m-a-0 menghubungkan peraturan gaya itu menetapkan margin kepada 0 pada semua sisi unsur yang diberikan (margin-all-0). Sementara margin menggunakan m- awalan, paddings digayakan dengan p- awalan. Dalam dokumen pembangunan, anda boleh melihat semua kelas utiliti jarak yang baru.

9. Petua dan Popovers Dikuasakan oleh Tether

Dalam petua Bootstrap 4 dan pop masuk menggunakan perpustakaan Tether supercool, sebuah enjin penentuan kedudukan yang memungkinkan untuk memastikan elemen yang benar-benar diposisikan tepat di sebelah unsur lain pada halaman yang sama. Ini bermakna petua dan pop akan diletakkan secara automatik dengan betul di laman web Bootstrap 4.

Jangan lupa bahawa sebagai Tether adalah pustaka JavaScript pihak ketiga, anda perlu memasukkannya secara berasingan dalam HTML sebelum fail bootstrap.js anda.

10. Plugin JavaScript Refactored

Pasukan pembangunan telah memperbaharui setiap plugin JavaScript untuk pelepasan baru menggunakan EcmaScript 6. Dengan pemakaian pintar spesifik terkini dan peningkatan terbaru yang mereka berniat untuk meningkatkan pengalaman frontend.

Bootstrap 4 baru juga telah melalui pembaikan JavaScript yang lain, seperti pemeriksaan jenis opsyen, kaedah pemadaman generik, dan Sokongan UMD, yang akan bekerja bersama-sama untuk membuat kerangka frontend yang paling popular berjalan lebih lancar daripada sebelumnya.

Sekarang Baca: 10 Alternatif Ringan Untuk Bootstrap & Foundation