Mulai dengan BULMA

Sep 15, 2025
Bagaimana caranya
Bulma
(Kredit Gambar: Bulma)

Ingin mulai menggunakan Bulma? Anda berada di tempat yang tepat. Bulma adalah kerangka kerja CSS populer dengan sistem grid Flexbox sederhana. Ini berbeda dari kerangka kerja lain dengan mengambil pendekatan yang lebih ringan dan tidak termasuk javascript apa pun - meninggalkan keputusan itu sepenuhnya sampai ke pengembang (untuk mengeksplorasi opsi lain, lihat pilihan kami Kerangka CSS terbaik. ).

Dalam tutorial ini, kami akan menunjukkan cara menginstal Bulma, dan membangun situs web dengan berbagai kelasnya. Untuk membuktikan seberapa serbaguna kelas di Bulma, seluruh halaman tutorial telah dibangun tanpa menulis satu baris CSS. Ingin opsi lain? Coba sangat baik Pembangun Situs Web . Dan untuk memastikan situs Anda berjalan yang terbaik, pilih yang benar hosting web. layanan.

Generate flash sale

(Kredit Gambar: Masa Depan)

Hasilkan CSS adalah acara web terpanas di kota. Dari 20-22 September Anda dapat mengambil tiket untuk setengah harga menggunakan kode FlashSale5. Klik gambar untuk mengetahui lebih lanjut.

01. Mulai

Bulma: get started

(Kredit Gambar: Bulma)

Buat direktori baru, dan di dalamnya, buat index.html mengajukan. Buka file ini di editor kode dan buat dokumen Starter HTML sederhana, dengan HTML DOCTYPE dan tag viewport responsif. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; meta name = "viewport" konten =
"Width = Lebar Perangkat, skala awal = 1" & gt;
& lt; judul & gt; judul halaman & lt; / judul & gt;
& lt; / head & gt;
& lt; tubuh & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Instal Bulma.

Menggunakan BULMA OUT kotaknya secepat menambahkan file CSS tunggal. Menggunakan CDN Tambahkan tautan di HTML. Jika perlu untuk mengubah variabel dan memiliki lebih banyak kontrol atas kerangka kerja, NPM Instal Bulma. dapat digunakan (lihat dokumentasi penuh. ). Untuk pengalaman penuh, Font Awesome 5 juga harus dimasukkan. 

 & lt; tautan rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt;
& lt; script tunder src = "https://use.fontawesome.com/releasing/v5.3.1/js/all.js" & gt; & lt; / gt;

03. Bangun halaman

Bulma: hello world

(Kredit Gambar: Bulma)

Di dalam tag tubuh, buat elemen bagian dan div dengan kelas wadah . Dalam wadah, buat H1 dengan kelas judul Kemudian paragraf dengan kelas subtitle. . Untuk saat ini, masukkan 'Hello World' ke dalam judul dan beberapa teks ke paragraf. Kami sekarang memiliki template starter dasar untuk BULMA. 

 & lt; bagian bagian = "bagian" & gt;
& lt; div class = "wadah" & gt;
& lt; h1 class = "title" & gt;
Halo Dunia
& lt; / h1 & gt;
& lt; p class = "subtitle" & gt;
Ini adalah starter dasar
template untuk Bulma.
& lt; / p & gt;
& lt; / div & gt;
& lt; / section & gt;

04. Buat bar pahlawan teratas

Buat bagian baru di atas yang sebelumnya, dan bukannya kelas bagian , berikan kelas pahlawan . Kelas pahlawan memungkinkan penciptaan spanduk lebar penuh, dengan berbagai pilihan mengendalikan tinggi badannya. Dalam bagian baru ini buat div dengan kelas Pahlawan-tubuh dan kemudian seorang wadah Ini akan menampung konten. 

 & lt; bagian kelas = "pahlawan" & gt;
& lt; div class = "hero-body" & gt;
& lt; lt; div class = "wadah" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Tambahkan judul dan subtitle

Di dalam div kontainer, tambahkan tag H1 dan H2 dengan kelas judul dan subtitle. . Ini adalah kelas tipografi yang akan meningkatkan ukuran konten mereka. Bulma cerdas untuk mengetahui kapan judul dan subtitle digabungkan, dan akan membawanya lebih dekat.

06. Tambahkan splash of color

Bulma: colour

(Kredit Gambar: Bulma)

Tambahkan Kelas is-primer. ke bagian pahlawan. Ini akan menerapkan warna primer ke latar belakang, dan mengubah teks ke varian yang lebih ringan. Dari pada utama , info , keberhasilan , peringatan , bahaya , cahaya dan gelap juga bisa dipilih 

 & lt; bagian kelas = "pahlawan adalah-utama" & gt;

07. Pisahkan konten menjadi kolom

Area konten pertama dari situs web dibagi menjadi dua kolom. Buat bagian baru dengan bagian kelas dan tambahkan wadah. Untuk mengatur kolom, sebuah div ditambahkan dengan kolom. kelas. Setiap kolom ditambahkan dalam wadah induk. Kolom akan ruang sendiri sama-sama di ruang yang tersedia dengan celah kecil antara kecuali ditentukan.

Jika Anda punya banyak konten, pastikan Anda kembali aset Anda di penyimpanan cloud yang andal. 

 & lt; bagian bagian = "bagian" & gt;
& lt; div class = "wadah" & gt;
& lt; class div = "kolom is-vcumerer" & gt;
& lt; div class = "kolom" & gt;
...
& lt; / div & gt;
& lt; div class = "kolom" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / section & gt;

08. Buat gambar responsif

Bulma: responsive images

(Kredit Gambar: Bulma)

Kolom kedua akan berisi gambar. Bungkus gambar dalam elemen gambar, dan, jika memungkinkan, berikan angka rasio aspek dari gambar. Dalam contohnya, 16by9. telah digunakan (lihat Daftar lengkap rasio yang tersedia ). 

 & lt; div class = "kolom" & gt;
& lt; gambar kelas = "gambar adalah-16by9" & gt;
& lt; img src = "img / dog.jpg" & gt;
& lt; / gambar & gt;
& lt; / div & gt;

09. Sarankan tindakan dengan tombol

Kelas tombol membuat tombol warna-warni dan dapat diterapkan & lt; a & gt; elemen atau & lt; tombol & gt; elemen dalam bentuk. Dua tombol ke kolom pertama dan oleskan pengubah warna kepada mereka. Jika menggunakan lebih dari satu tombol, bungkus di div dengan kelas tombol. , yang mengoreksi celah dan memungkinkan aplikasi kelas sebagai grup. 

 & lt; div class = "tombol" & gt;
& lt; tombol kelas = "adalah-info" & gt;
Cari tahu lebih lanjut & LT; / A & GT;
& lt; tombol kelas = "adalah-bahaya diuraikan" & gt;
Beli sekarang & lt; / a & gt;
& lt; / div & gt;

10. Buat Konten Kotak

Bulma: boxed content

(Kredit Gambar: Bulma)

Tambahkan bagian baru di bagian bawah halaman dengan tiga kolom. Di dalam kolom, elemen kotak ditambahkan. Elemen kotak adalah wadah sederhana dengan perbatasan di sekitar mereka yang memisahkan mereka dari latar belakang halaman. 

 & lt; div class = "kolom" & gt;
& lt; kelas div = "kotak" & gt;
Uji
& lt; / div & gt;
& lt; / div & gt;

11. Gunakan kotak ikonik

Bulma terintegrasi dengan font yang luar biasa 5, tetapi kompatibel dengan semua perpustakaan font, dan memiliki kelas untuk memanggil ikon yang paling tersedia. Di dalam setiap kotak, tambahkan wadah konten, diikuti oleh elemen rentang dengan kelas ikon . Di dalam rentang, gunakan & lt; i & gt; elemen untuk memanggil kelas yang diperlukan untuk ikon yang diinginkan. Ikon diwarnai dengan cara yang sama seperti teks. 

 & lt; div class = "Konten" & gt;
& lt; span class = "ikon" & gt;
& lt; i class = "fa-lg fa-home
memiliki-teks-sukses "& gt; & lt; / i & gt;
& lt; / span & gt;
& lt; kelas div = "judul is-size-6" & gt; ... & lt; / div & gt;
& lt; div class = "subtitle is-size-6" & gt; ... & lt; / div & gt;
& lt; / div & gt;

12. Jadilah Bold.

Bulma: Be bold

(Kredit Gambar: Bulma)

Buat bagian pahlawan dua kolom baru di bagian bawah halaman, memberikan is-infon. kelas ke bagian. Untuk efek yang menarik, juga menerapkan Is-Bold. kelas ke bagian ini untuk gradien yang halus. Pengubah ini bekerja dengan ketujuh warna utama.

13. Ubah levelnya

Level adalah cara yang bagus untuk memastikan elemen terpusat secara vertikal berturut-turut. Dalam bagian baru di bagian bawah halaman, tambahkan div dengan kelas level dan sarang di dalam empat item level. Setiap konten yang ditambahkan dalam item level akan selaras secara vertikal. 

& lt; level div class = "level" & gt;
& lt; div class = "item-item memiliki-teks-teks" & gt;
...
& lt; / div & gt;
& lt; div class = "item-item memiliki-teks-teks" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Tambahkan dan kontrol formulir

Untuk menambahkan formulir ke bagian bawah halaman, buat bagian pahlawan dua kolom baru dengan is-primer. . Membaginya menjadi dua kolom, dan di kolom kanan, buat a bidang kelas. Kelas lapangan digunakan untuk mengelompokkan beberapa input formulir bersama-sama, memastikan mereka ditempatkan dengan benar. Setiap input juga harus dibungkus secara individu .kontrol kelas. 

 & lt; div class = "bidang" & gt;
& lt; div class = "kontrol memiliki-ikon-kiri
memiliki ikon-kanan "& gt;
& lt; input class = "input" type = "email"
placeholder = "email Anda" & gt;
& lt; span class = "ikon-kecil
tersisa "& gt;
& lt; i class = "fas fa-amplop" & gt; & lt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. Berikan umpan balik pengguna

Bulma: feedback

(Kredit Gambar: Bulma)

Setelah formulir diserahkan, itu harus mengembalikan pesan kepada pengguna sehingga mereka akan tahu apa yang terjadi selanjutnya. Meskipun Bulma tidak dapat mengontrol kapan pesan ini akan ditampilkan, ujung depan dapat dibangun dengan kelas pesan. 

 & lt; artikel class = "pesan is-info" & gt;
& lt; div class = "header pesan" & gt;
& lt; p & gt; terima kasih! & lt; / p & gt;
& lt; / div & gt;
& lt; div class = "Message-Body" & gt;
... & lt; / div & gt;
& lt; / artikel & gt;

16. Tambahkan footer

Kelas footer fleksibel memungkinkan elemen apa pun ditambahkan di bagian bawah halaman, menyediakan tempat untuk info hak cipta dan navigasi bawah, serta membawa selesai ke situs web. 

 & lt; footer class = "footer" & gt;
& lt; div class = "Konten memiliki-teks-teks" & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;
& lt; / footer & gt;

17. Kustomisasi variabel

Sebagian besar proyek, di luar prototipe, akan memiliki persyaratan untuk bekerja dengan pedoman dan warna merek. Demikian pula, aman untuk mengasumsikan seorang desainer perlu mengubah font, warna atau aspek lain dari BULMA. Bagian utama dari Bulma adalah bahwa itu dapat disesuaikan dan modular. Modul tidak hanya dapat diimpor secara selektif, tetapi hingga 415 variabel SASS dapat diubah dalam kerangka kerja.

Penggunaan variabel berarti menetapkan warna baru sebagai primer akan mengubah warna itu di seluruh kerangka kerja Bulma untuk proyek itu. Mengatur ini bisa rumit pada awalnya, tetapi panduan telah disediakan menggunakan tiga metode berbeda. dalam dokumentasi.

Artikel ini awalnya diterbitkan dalam Edisi 289 dari Majalah Desain Web Kreatif Desainer web . Beli Masalah 289. atau berlangganan di sini .

Baca lebih lajut:

  • 5 Studi Kasus Desain Web Inspirasi
  • Alat desain UI terbaik
  • Desain Situs Web Master Minimalis

Bagaimana caranya - Artikel Terpopuler

Persiapan dengan Flame Painter

Bagaimana caranya Sep 15, 2025

Flame Painter adalah paket cat dan efek partikel mandiri yang memungkinkan Anda untuk dengan cepat dan mudah membuat lukisan asli, efek cahaya, desain tidak konvensional atau latar belakang f..

Cara menggambar mawar: tips pemula dan lanjutan

Bagaimana caranya Sep 15, 2025

Cara menggambar mawar - Cara menggambar video mawar - Cara menggambar mawar: pemula - Cara menggam..

Buat halaman arahan 3D WebGL

Bagaimana caranya Sep 15, 2025

(Kredit Gambar: Masa Depan) Membuat halaman arahan WebGL 3D adalah salah satu cara untuk membuat kesan pertama yang h..

Cara membuat formulir web yang dapat diakses

Bagaimana caranya Sep 15, 2025

Formulir adalah komponen penting dari web karena mereka menghubungkan pengguna ke bisnis Anda dan membantu mereka mencapai apa ya..

Langkah-demi-langkah: Cara Mimik Cat Minyak di Corel Painter

Bagaimana caranya Sep 15, 2025

Rasanya seperti kemarin ketika saya bermain peran dengan teman-teman sekolah menengah di dunia fantasi yang penuh dengan ksatria, penyihir, barbar dan harta karun yang tersembunyi di ruang ba..

Bagaimana cara melukis zombie berwarna-warni

Bagaimana caranya Sep 15, 2025

Saya selalu menyukai mayat hidup itu, dan akan sering root untuk underdog yang compang-camping yang sering dikurangi menjadi targ..

5 Tips Untuk Meningkatkan Kreasi VR Anda

Bagaimana caranya Sep 15, 2025

Pemimpin lokakarya vertex. Glen Southern. Berbagi tips teratas untuk membantu Anda mening..

Master alat pisau

Bagaimana caranya Sep 15, 2025

Kadang-kadang kembali ke dasar-dasarnya sangat penting untuk tetap di atas permainan Anda, karena memperbarui keterampilan Anda d..

Kategori