Cara Membuat Panel Menggunakan Bulma Framework

Dalam membuat suatu panel pada website kadang-kadang teman-teman sangat susah untuk membuatnya namun sekarang kita di suguhkan kemudahan untuk membuat panel tersebut, maka dari itu saya akan membagi Cara Membuat Panel Menggunakan Bulma Framework.

Pada kasus ini saya akan membuat panel untuk paket kursus sehingga teman-teman dapat melihat paket apa saja yang tersedia. Langsung saja saya akan memberikan langkah-langkah Cara Membuat Panel Menggunakan Bulma Framework:

1. Pertama,

anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.

2. Kedua,

anda ketikan kode html di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Panel Bulma Framework</title>
	<!--link ke css bulma-->
	<link rel="stylesheet" href="bulma-0.4.0/css/bulma.css">
	<!--link ke font-awesome-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<br>

<div class="columns">
  
      <div class="column column is-4 is-offset-4">
        <nav class="panel">
          <p class="panel-heading has-text-centered">
            Paket Kursus Dumetschool
          </p>
          <div class="panel-block">
            <p class="control has-icons-left">
              <input class="input is-small" type="text" placeholder="Search">
            </p>
          </div>
          <p class="panel-tabs">
            <a class="is-active">All</a>
            <a>Web Master</a>
            <a>Web Design</a>
            <a>Graphic Design</a>
            <a>Digital Marketing</a>
          </p>
          <a class="panel-block is-active">
            <span class="panel-icon">
              <i class="fa fa-book"></i>
            </span>
            Web Master
          </a>
          <a class="panel-block">
            <span class="panel-icon">
              <i class="fa fa-book"></i>
            </span>
            Web Design
          </a>
          <a class="panel-block">
            <span class="panel-icon">
              <i class="fa fa-book"></i>
            </span>
            Graphic Design
          </a>
          <a class="panel-block">
            <span class="panel-icon">
              <i class="fa fa-book"></i>
            </span>
            Digital Marketing
          </a>
          <div class="panel-block">
            <button class="button is-primary is-outlined is-fullwidth">
              Reset all filters
            </button>
          </div>
        </nav>
      </div>
    
</div>	

</body>
</html>

Coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:

Didalam membuat panel menggunakan bulma kita di sediakan beberapa class sperti class panel-heading untuk membuat judul dari panel tersebut dan ada panel-block yang bisa kita isi dengan paket kursus yang ada lalu ada panel-tabs yang membuat isi dari panel tersebut berjajar seperti menu.

Dengan bulma kita dapat dengan mudah membuat panel tentunya dengan class yang sudah di sediakan oleh bulma. Bagaimana teman-teman cukup mudahkan membuat panel pada bulma.

Sekian pembahasan kali ini tentang Cara Membuat Panel Menggunakan Bulma Framework. Semoga bermanfaat.