Menyesuaikan Latihan Bootstrap Trend, Alat & Rangka

Bootstrap kini ialah nombor satu kerangka depan dan dengan mudah cara paling cepat untuk membina susun atur. Telah bertahun-tahun dan pemaju pihak ketiga telah pun menerbitkan sumber-sumber sendiri secara dalam talian. Sumber-sumber ini berkisar dari tema percuma kepada plugin dan kerangka terperinci.

Dalam artikel ini, saya ingin berkongsi beberapa perkara ini sumber dan amalan terbaik untuk pemaju yang ingin pergi lebih jauh dengan Bootstrap.

Semua sumber dalam siaran ini adalah percuma, jadi anda boleh menggunakannya tetapi anda sepatutnya sesuai. Walaupun anda tidak pernah menggunakan Bootstrap, anda pasti dapat mencari sesuatu di sini yang akan membantu anda memulakannya.

Bersabar dengan Bootstrap

Perpustakaan Bootstrap lalai disertakan dengannya Reka bentuk yang unik sendiri yang kelihatan hebat. Ia dikenali secara meluas di web dan anda boleh dengan mudah memberitahu apabila sebuah laman web menggunakan unsur Bootstrap tradisional.

Tetapi, anda juga boleh restyle elemen ini sendiri untuk menggunakan kod Bootstrap sebagai asas untuk susun atur anda.

Disana ada beberapa cara yang berbeza anda boleh melakukan ini:

Tambahkan lembaran gaya anda sendiri untuk menulis ganti lalai.
Peribadikan output BootStrap, jadi anda hanya dapat mendapatkan elemen yang anda mahu.
Gabungkan dengan tambahan dan plugin / tema.

Pilihan terakhir adalah yang paling biasa dan itu salah satu sebab Bootstrap telah berkembang begitu cepat.

Diberikan saya juga peminat besar mereka menyesuaikan alat kerana ia benar-benar percuma dan memberi anda lebih banyak kawalan yang mempunyai ciri yang anda ingin gunakan.

Terdapat banyak sumber untuk BootStrap 3/4, yang dibuat oleh pemaju pihak ketiga, jadi lebih mudah dari sebelumnya membuat susun atur BootStrap unik anda sendiri tanpa menulis banyak kod.

Plugin & add-on

Oleh kerana Bootstrap mempunyai pustaka JavaScript yang besar, ia cukup mudah memperluaskan ciri JavaScript. Dan pemaju sudah pasti melakukannya dengan plugin mereka sendiri, ramai yang dibebaskan secara online secara percuma.

Ini adalah kegemaran saya semua menyokong Bootstrap secara asli. Ramai daripada mereka berjalan di jQuery, jadi mereka juga mudah untuk menyesuaikan jika anda tahu cara anda mengelilingi perpustakaan jQuery.

Pengesah borang

Pertama adalah kegemaran saya form validation plugin, Form Validator. Ia berjalan di jQuery dan ia menyokong keseluruhan timbunan rangka frontend: Bootstrap, Foundation, Pure, UIKit, dan lain-lain.

Awak boleh secara manual menambah apa-apa bilangan 51 sahih ke mana-mana borang di laman web anda. Ini bermakna pelawat perlu memenuhi keperluan pengesahan sebelum mereka boleh menyerahkan kandungannya.

Banyak borang hubungan menggunakan pengesahan ini kepada memerlukan alamat e-mel yang berfungsi. Tetapi, anda juga boleh menggunakannya untuk muat naik imej, atau kata laluan, apa-apa yang anda inginkan dari Bootstrap-hati.

Pemetik Datetime

Pemetik tarikh juga kesakitan yang besar untuk mengetepikan diri anda. Banyak bentuk hanya menggunakan menu dropdown untuk tetapan hari / bulan / tahun tetapi anda juga boleh menggunakannya Plugin pemetik tarikh bootstrap untuk menyelamatkan diri anda kerumitan.

Ia benar-benar sumber terbuka dan berjalan di perpustakaan Bootstrap 3.x. Anda juga akan melihatnya menyokong kedua-dua tarikh dan masa dengan menggunakan plugin jQuery lain, Moment.js.

Secara keseluruhan, perpustakaan ini hebat untuk mendapatkan pemilih tarikh kerja yang aktif. Ia ada banyak kebergantungan tetapi, bersyukur, anda tidak perlu menulis banyak kod untuk mendapatkannya berfungsi.

Penilaian bintang

Berikut adalah satu lagi ciri sejuk untuk rating bintang di web. Awak boleh tambah penarafan satu-ke-lima bintang di mana sahaja di laman web anda, menggunakan perpustakaan Bootstrap untuk tingkah laku JavaScript.

Apabila pengguna melayang ke atas bintang-bintang ini paparan berubah kepada apa jua penarafan berdasarkan kedudukan kursor mereka. Kemudian, dengan satu klik, pengguna menghantar undian mereka dan menetapkan penarafan bintang, termasuk penilaian separuh bintang.

Plugin ini sudah tentu rumit untuk ditubuhkan sebab awak boleh menukar banyak tetapan lalai untuk teknik yang lebih maju. Tetapi, anda dapat melihat demo langsung sederhana untuk mengukur jika plugin rating bintang ini sesuai dengan laman web anda.

WATable

Bootstrap datang dengannya gaya susun atur meja sendiri untuk memaparkan data jadual pada bahagian hadapan. Tetapi, dengan Plugin WATable, anda boleh menambah sekumpulan ciri tambahan untuk jadual Bootstrap anda.

Ini adalah salah satu plugin jQuery yang paling terperinci di luar sana dan ini hanya beberapa ciri yang boleh anda tambahkan:

Penomboran khusus.
Penyisihan ruangan.
Penapisan data.
Kesan animasi meja.
Seluruh baris semak pilih-pilih.

WATable digambarkan sebagai a Pisau tentera Swiss daripada plugin jadual dan saya perlu bersetuju dengan penerangan ini. Hakikat bahawa ia menyokong Bootstrap hanyalah lapisan gula pada kek.

Ini adalah beberapa plugin kegemaran saya tetapi terdapat banyak orang lain di luar sana. Anda boleh menyemak imbas lebih lanjut di halaman ini jika anda ingin tahu.

Rangka kerja bootstrap

Bootstrap sebenarnya merupakan rangka kerja yang besar kerana ia membolehkan pengguna menyesuaikan gaya lalai HTML dan CSS dengan beberapa kelas.

Tetapi, pemaju telah mengambil perpustakaan BootStrap lalai dan menambah gaya mereka sendiri untuk mewujudkan rangka kerja yang lebih besar lagi kerja seperti tema, jadi anda tidak perlu restyle Bootstrap dari awal.

Syukurlah, mereka semua percuma dan semuanya berjalan pada kelas BootStrap lalai.

Bootflat

Mungkin rangka kerja BootStrap yang paling terkenal adalah Bootflat UI itu mengikuti trend reka bentuk rata.

Ia berfungsi dengan semua ciri Bootstrap lalai, termasuk semua komponen JavaScript. Perbezaan utama lebih dalam reka bentuk dan struktur di mana elemen halaman menggunakan skema warna rata untuk bergerak dari gaya kecerunan Bootstrap.

Bootflat tidak digunakan terlalu banyak sangat banyak, jadi anda boleh menambah rangka kerja ini pada mana-mana halaman arahan atau laman web untuk membuat penampilan unik untuk laman web anda.

Ia 100% percuma dan juga datang dengan a pemetik warna, jadi anda boleh mencari skema warna rata untuk memadankan susun atur anda.

Dapatkan Shit Selesai

Ini kit UI mengejutkan juga dibina di atas perpustakaan Bootstrap 3 dan ia dikeluarkan secara percuma di GitHub.

Dapatkan Shit Done datang dari pasukan di Tim Kreatif di mana mereka menjual beberapa sumber premium. Kit UI khusus ini mempunyai versi pro tetapi ia tidak perlu sama sekali.

Versi sumber terbuka mempunyai lebih daripada cukup untuk semua orang dan anda boleh menyemaknya demo hidup untuk melihat bagaimana ia kelihatan seperti dalam penyemak imbas.

Reka bentuk bahan Bootstrap

Satu lagi trend reka bentuk popular adalah Reka bentuk bahan Google. Ini bahasa reka bentuk yang asalnya dibuat untuk pereka aplikasi Android tetapi sejak itu menyebarkan ke web dan mendapat banyak sokongan daripada pereka UI / UX.

Rangka kerja bahan Bootstrap yang luar biasa ini menggunakan ciri reka bentuk bahan untuk membina gaya reka bentuk tersuai dari perpustakaan Bootstrap.

Secara lalai, ia menyokong segala-galanya dalam BootStrap 3 dan kini sedang diolah semula untuk juga menyokong Bootstrap 4. Anda boleh mengetahui lebih lanjut di laman utama rasmi yang mempunyai dokumentasi dan demo.

Perpustakaan yang sama yang mungkin anda cuba ialah MDBootstrap, walaupun saya mendapati yang ini sedikit lebih sukar untuk bekerja dengan.

Bootplus

Google mencipta bahasa reka bentuk bahan tetapi mereka juga mempunyai gaya mereka sendiri untuk banyak alat dan aplikasi web mereka.

Bootplus meniru gaya antara muka Google+, bersama dengan banyak dokumen bantuan Google, Google Drive, dan aplikasi web yang serupa. Ia mempunyai semua ciri yang sama seperti Bootstrap, termasuk grid, gaya susun atur, gaya unsur, dan komponen JavaScript.

Anda juga boleh melayari demo di laman web ini untuk melihatnya perbezaan antara Bootplus dan UI Bootstrap asal. Untuk sumber bebas, Bootplus sangat luas dan sesuai untuk sesiapa sahaja yang suka teknik rekaan Google.

Alat & sumber

Terakhir, saya ingin menyelam ke banyak alat percuma untuk menyesuaikan dan membina susun atur Bootstrap.

Alat ini adalah semua aplikasi web dan kebanyakannya adalah sumber terbuka pada GitHub. Mereka dibuat untuk menjimatkan masa anda dan membantu anda merancang susun atur Bootstrap yang luar biasa tanpa banyak kod.

Editor langsung

Percuma Bootstrap editor secara langsung adalah salah satu alat terbaik untuk pereka bukan teknikal. Jika anda tidak tahu bagaimana untuk kod anda masih boleh bergantung kepada pembina Bootstrap ini untuk membuat susun atur keseluruhan dari awal.

Ia berjalan betul-betul di pelayar anda dan anda juga boleh memilih dari templat pra-dibuat untuk bermula.

Pilihan di bar sisi membolehkan anda tambah nilai CSS tertentu jika anda tahu beberapa pengekalan frontend. Tetapi, anda juga boleh menggunakan GUI untuk menukar warna, fon, saiz, dan banyak lagi yang anda suka.

Sebaik sahaja anda selesai, klik “Dapatkan tema” dan anda boleh menyalin / tampal gaya CSS yang dikemas kini ke dalam projek anda sendiri. Cara super mudah untuk restyle Bootstrap tanpa perlu mengulang semula semua dari awal.

Pembina borang

Ini percuma Pembina borang Bootstrap ialah alat penyemak imbas drag-and-drop yang membolehkan anda membuat borang Bootstrap dari awal.

Sekali lagi, ia memerlukan pengetahuan kod sifar dan anda mempunyai akses penuh ke semua elemen Bootstrap 3. Hanya pilih elemen yang anda mahu dan seretnya ke dalam kotak sebelah kiri. Dari sini, anda boleh mengubah segala-galanya dari teks pemegang tempat ke kelas CSS.

Setakat ini pembina bentuk paling keren yang pernah saya lihat dan 100% percuma!

BootSwatchr

Satu lagi alat percuma yang saya suka BootSwatchr. Ia bergantung kepada rangka kerja Bootstrap dan ia membolehkan anda mengemas kini warna, gaya tema, dan juga susun atur keseluruhan halaman.

Apa yang saya suka tentang aplikasi ini adalah bagaimana ia juga datang dengan galeri percuma gaya pra-reka bentuk.

Jadi, anda boleh memuat turun reka bentuk itu orang lain sudah dibuat atau anda boleh menggunakannya sebagai titik permulaan untuk menyesuaikan tema anda sendiri.

Bergerak ke Hadapan

Bootstrap hanya bertambah popular, jadi sekarang adalah masa terbaik untuk menyelam ke dalam rangka kerja ini. Syukurlah, terdapat puluhan plugin, rangka kerja, dan alat percuma yang boleh anda gunakan untuk mempercepatkan proses dev.

Dalam artikel ini, saya hanya menunjukkan hujung gunung es, jadi jika anda tidak melihat apa-apa di sini yang berguna keluar dari Google dan melihat apa lagi yang anda boleh cari.