Menyesuaikan Tren Tata Letak Bootstrap, Alat & Kerangka Kerja

Bootstrap saat ini kerangka front-end nomor satu dan mudah cara tercepat untuk membangun tata letak. Sudah ada selama bertahun-tahun dan pengembang pihak ketiga bahkan menerbitkan sumber daya mereka sendiri secara online. Sumber daya ini berkisar dari tema gratis untuk plugin dan kerangka kerja terperinci.

Dalam artikel ini, saya ingin berbagi sedikit ini sumber daya dan praktik terbaik untuk pengembang yang ingin melangkah lebih jauh dengan Bootstrap.

Semua sumber daya dalam posting ini gratis, sehingga Anda dapat menggunakannya sesuka Anda. Bahkan jika Anda belum pernah menggunakan Bootstrap, Anda yakin akan menemukan sesuatu di sini yang akan membantu Anda memulai.

Restyling dengan Bootstrap

Pustaka Bootstrap default datang dengan desain unik sendiri itu terlihat fantastis. Ini dikenal luas di seluruh web dan Anda dapat dengan mudah mengetahui kapan sebuah situs web berada menggunakan elemen Bootstrap tradisional.

Tapi, kamu juga bisa Restyle elemen-elemen ini sendiri untuk menggunakan kode Bootstrap sebagai dasar untuk tata letak Anda.

Ada beberapa cara berbeda kamu bisa melakukan ini:

• Tambahkan stylesheet Anda sendiri untuk menimpa default.
• Kustomisasi output BootStrap, sehingga Anda hanya mendapatkan elemen yang Anda inginkan.
• Kombinasikan dengan add-on dan plugin / tema.

Opsi terakhir adalah yang paling umum dan itu salah satu alasan Bootstrap telah berkembang begitu cepat.

Memang saya juga penggemar mereka menyesuaikan alat karena ini benar-benar gratis dan memberi Anda banyak kendali fitur mana yang ingin Anda gunakan.

Ada banyak sumber daya untuk BootStrap 3/4, yang dibuat oleh pengembang pihak ketiga, jadi lebih mudah dari sebelumnya buat layout BootStrap unik Anda sendiri tanpa menulis banyak kode.

Plugin & add-on

Karena Bootstrap hadir dengan pustaka JavaScript yang besar, cukup mudah untuk melakukannya perluas fitur JavaScript. Dan pengembang tentu melakukannya dengan plugin mereka sendiri, banyak yang dirilis secara online gratis.

Ini adalah favorit saya mendukung Bootstrap secara asli. Banyak dari mereka berjalan di jQuery, jadi mereka juga mudah untuk dikustomisasi jika Anda tahu jalan di perpustakaan jQuery.

Formulir validator

Pertama adalah favorit saya plugin validasi formulir, Form Validator. Ini berjalan di jQuery dan mendukung seluruh tumpukan kerangka frontend: Bootstrap, Foundation, Pure, UIKit, dan lainnya.

Kamu bisa secara manual menambahkan sejumlah 51 validator ke segala bentuk di situs Anda. Ini berarti pengunjung harus memenuhi persyaratan validasi tersebut sebelum mereka dapat mengirimkan konten.

Banyak formulir kontak menggunakan validator ini untuk memerlukan alamat email yang berfungsi. Tetapi, Anda juga dapat menggunakannya untuk mengunggah gambar, atau kata sandi, hampir semua hal yang diinginkan hati Bootstrap Anda.

Pemilih datetime

Pemilih tanggal juga sangat menyakitkan untuk kode diri Anda. Banyak formulir hanya menggunakan menu dropdown untuk pengaturan hari / bulan / tahun tetapi Anda juga dapat menggunakan ini Plugin pemilih tanggal bootstrap untuk menyelamatkan diri dari kerumitan.

Ini sepenuhnya open-source dan berjalan di perpustakaan Bootstrap 3.x. Anda juga akan melihatnya mendukung kedua tanggal dan waktu dengan menggunakan plugin jQuery lain, Moment.js.

Secara keseluruhan, perpustakaan ini luar biasa untuk mengaktifkan pemilih tanggal kerja. Itu memang ada banyak ketergantungan tetapi, untungnya, Anda tidak perlu menulis banyak kode untuk membuatnya berfungsi.

Peringkat bintang

Inilah fitur keren lainnya untuk peringkat bintang di web. Kamu bisa tambahkan peringkat bintang satu-ke-lima di mana saja di situs Anda, menggunakan perpustakaan Bootstrap untuk perilaku JavaScript.

Ketika pengguna melayang di atas bintang-bintang ini, tampilan berubah menjadi apa pun peringkat berdasarkan posisi kursornya. Kemudian, dengan satu klik, pengguna memberikan suara dan menetapkan peringkat bintang, termasuk peringkat setengah bintang.

Plugin ini sudah pasti rumit untuk diatur karena kamu bisa mengubah banyak pengaturan default untuk teknik yang lebih maju. Namun, Anda dapat melihat demo langsung sederhana untuk mengukur apakah plugin peringkat bintang ini cocok dengan situs Anda.

WATable

Bootstrap hadir dengan gaya tata letak tabel sendiri untuk menampilkan data tabular di frontend. Tapi, dengan Plugin WATable, Anda dapat menambahkan sejumlah fitur tambahan ke tabel Bootstrap Anda.

Ini adalah salah satu plugin jQuery paling rinci di luar sana dan ini hanya beberapa fitur yang dapat Anda tambahkan:

• Pagination khusus.
• Penyortiran kolom.
• Pemfilteran data.
• Efek animasi tabel.
• Periksa-untuk-memilih seluruh baris.

WATable digambarkan sebagai a Pisau meja plugin dari Swiss Army dan saya harus setuju dengan deskripsi ini. Fakta bahwa ia mendukung Bootstrap hanyalah lapisan gula pada kue.

Ini adalah beberapa plugin favorit saya tetapi ada banyak sekali plugin lain di luar sana. Anda dapat menelusuri lebih banyak lagi di halaman ini jika Anda penasaran.

Kerangka kerja bootstrap

Bootstrap sebenarnya adalah kerangka kerja besar karena memungkinkan pengguna menyesuaikan gaya HTML dan CSS default dengan beberapa kelas.

Tapi, pengembang telah mengambil pustaka BootStrap default dan menambahkan gaya mereka sendiri untuk membuat kerangka kerja yang lebih besar lagi bekerja seperti tema, jadi Anda tidak perlu menata ulang Bootstrap dari awal.

Untungnya, semuanya gratis dan mereka semua berjalan di kelas BootStrap default.

Bootflat

Mungkin kerangka kerja BootStrap yang paling terkenal adalah UI Bootflat bahwa mengikuti tren desain datar.

Ini bekerja dengan semua fitur Bootstrap default, termasuk semua komponen JavaScript. Perbedaan utama lebih pada desain dan struktur di mana elemen halaman menggunakan skema warna datar untuk menjauh dari gaya gradien Bootstrap.

Bootflat belum digunakan secara berlebihan sangat banyak, sehingga Anda dapat menambahkan kerangka kerja ini pada halaman arahan atau beranda mana pun untuk membuat tampilan unik untuk situs Anda.

Ini 100% gratis dan bahkan dilengkapi dengan pemilih warna, sehingga Anda dapat menemukan skema warna datar agar sesuai dengan tata letak Anda.

Dapatkan Shit Done

Ini kit UI mengejutkan tumpul juga dibuat di atas perpustakaan Bootstrap 3 dan dirilis secara gratis di GitHub.

Get Shit Done berasal dari tim di Creative Tim di mana mereka menjual beberapa sumber daya premium. Kit UI khusus ini memang memiliki versi pro tetapi tidak diperlukan sama sekali.

Versi open-source memiliki lebih dari cukup untuk semua orang dan Anda dapat melihatnya demo langsung untuk melihat tampilannya di browser.

Desain bahan bootstrap

Tren desain populer lainnya adalah Desain material Google. Ini adalah bahasa desain yang awalnya dibuat untuk perancang aplikasi Android tetapi sudah sejak saat itu menyebar ke web dan mendapatkan banyak dukungan dari desainer UI / UX.

Kerangka kerja bahan Bootstrap yang luar biasa ini menggunakan fitur desain bahan untuk membangun gaya desain khusus keluar dari perpustakaan Bootstrap.

Secara default, itu mendukung semua yang ada di BootStrap 3 dan saat ini sedang dikerjakan ulang untuk juga mendukung Bootstrap 4. Anda dapat mempelajari lebih lanjut di beranda resmi yang memiliki dokumentasi dan demo.

Perpustakaan serupa yang mungkin Anda coba adalah MDBootstrap, meskipun saya menemukan ini sedikit lebih sulit untuk dikerjakan.

Bootplus

Google memang membuat bahasa desain materi tetapi mereka juga memiliki gaya mereka sendiri untuk banyak alat dan aplikasi web mereka.

Bootplus meniru gaya antarmuka Google+, bersama dengan banyak dokumen bantuan Google, Google Drive, dan aplikasi web serupa. Ini memiliki semua fitur yang sama dengan Bootstrap, termasuk kisi, gaya tata letak, gaya elemen, dan komponen JavaScript.

Anda bahkan dapat menelusuri demo di situs untuk melihat perbedaan antara Bootplus dan UI Bootstrap asli. Untuk sumber daya gratis, Bootplus luas dan sangat cocok untuk siapa saja yang suka teknik desain Google.

Alat & sumber daya

Terakhir, saya ingin menyelami banyak alat gratis untuk menyesuaikan dan membuat tata letak Bootstrap.

Alat-alat ini adalah semua aplikasi web dan banyak dari mereka bahkan bersumber terbuka di GitHub. Mereka dibuat untuk menghemat waktu Anda dan membantu Anda merancang tata letak Bootstrap yang luar biasa tanpa banyak kode.

Editor langsung

Bebas Editor langsung bootstrap adalah salah satu alat terbaik untuk desainer non-teknis. Jika Anda tidak tahu cara membuat kode, Anda masih bisa mengandalkan pembuat Bootstrap ini untuk membuat tata letak lengkap dari awal.

Saya t berjalan tepat di browser Anda dan Anda bahkan dapat memilih dari template yang sudah dibuat untuk memulai.

Opsi di bilah sisi memungkinkan Anda tambahkan nilai CSS tertentu jika Anda tahu beberapa coding frontend. Tapi, Anda juga bisa menggunakan GUI untuk mengubah warna, font, ukuran, dan apa pun yang Anda suka.

Setelah selesai, klik “Mendapatkan tema” dan Anda dapat menyalin / menempelkan gaya CSS yang diperbarui ke proyek Anda sendiri. Cara super mudah untuk menata ulang Bootstrap tanpa perlu menata ulang semuanya dari awal.

Pembangun formulir

Ini gratis Pembuat formulir Bootstrap adalah alat browser seret-dan-jatuhkan yang memungkinkan Anda membuat formulir Bootstrap dari awal.

Lagi-lagi itu membutuhkan pengetahuan nol coding dan Anda memiliki akses penuh ke semua elemen Bootstrap 3. Cukup pilih elemen yang Anda inginkan dan seret langsung ke kotak kiri. Dari sini, Anda bisa mengubah segalanya dari teks placeholder ke kelas CSS.

Sejauh ini pembangun bentuk paling keren yang pernah saya lihat dan ini 100% gratis!

BootSwatchr

Alat gratis lain yang sangat saya sukai adalah BootSwatchr. Itu bergantung pada kerangka Bootstrap dan memungkinkan Anda memperbarui warna, gaya tema, dan tata letak keseluruhan halaman.

Apa yang saya sukai dari aplikasi ini adalah bagaimana ia datang dengan galeri gratis gaya pra-desain.

Jadi, Anda bisa mengunduh desain itu orang lain sudah membuat atau Anda dapat menggunakannya sebagai titik awal untuk menyesuaikan tema Anda sendiri.

Bergerak kedepan

Bootstrap semakin populer, jadi sekarang adalah waktu terbaik untuk melakukannya selami kerangka ini. Untungnya, ada puluhan plugin, kerangka kerja, dan alat gratis yang dapat Anda gunakan untuk mempercepat proses dev.

Pada artikel ini, saya baru saja menunjukkan ujung gunung es, jadi jika Anda tidak melihat apa pun di sini yang berguna keluar ke Google dan lihat apa lagi yang bisa Anda temukan.