Berkenalan dengan Framework CSS Bulma

Bulma yakni CSS Framework Modern dengan menggunakan Flexbox Open Source, Memiliki tampilan yang dinamis bagi Mobile Device dan Modular kita dapat import apa yang kita butuhkan dengan menggunakan SASS. bagi menggunakan nya kalian dapat unduh di link berikut https://bulma.io/. Bulma berisi seluruh unsur yang lazim kita gunakan seperti Buttons, form controls, fitur, tabs, titles, notifications, dll. Bulma hadir dengan aplikasi grid sederhana (lumayan tambahkan kolom, mereka akan mengubah ukurannya sendiri), Navigasi bar yang fleksibel(seluruh jenis unsur, mereka akan tetap sejajar vertikal), membangun unsur Kamu hanya dengan mengubah class dan objek. teman teman dapat kunjungi link ini bagi membaca documentasi nya https://bulma.io/documentation/.





pertama-tama kita bikin file index. html dan bikin struktur berikut



<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Vue jS</title>

</head>
<body>


</body>
</html>


setelah itu kita pasang framework css bulmanya, pasang dnegan cara online.



<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Vue jS</title>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css>
</head>
<body>


</body>
</html>


coba kita akan membangun blog dengan 3 kolom. bagi memulai nya kita mesti membuatkan class container dan di dalamnya ada class yang bernama columns dan di dalamnya pun ada class column yang tugasnya membagi. berikut contohnya.



<div class=container>
<h1 class=title is-2 has-text-centered>Situs 3 Kolom</h1>
<div class=columns>
<div class=column has-background-success>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ratione tempora illum consectetur ducimus excepturi, explicabo, placeat laboriosam labore cupiditate distinctio consequuntur. Rerum expedita, placeat assumenda enim hic nihil porro.</p>
</div>
<div class=column has-background-warning>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ratione tempora illum consectetur ducimus excepturi, explicabo, placeat laboriosam labore cupiditate distinctio consequuntur. Rerum expedita, placeat assumenda enim hic nihil porro.</p>
</div>
<div class=column has-background-danger>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ratione tempora illum consectetur ducimus excepturi, explicabo, placeat laboriosam labore cupiditate distinctio consequuntur. Rerum expedita, placeat assumenda enim hic nihil porro.</p>
</div>
</div>
</div>


hasilnya akan seperti berikut



kita



dikala di buku di ukuran hp



kita



memiliki tampilan yang dinamis pun bukan, demikian panduan Berkenalan dengan Framework CSS Bulma, semoga bermanfaat yah teman teman.



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more