Fungsi hidden pada Bulma Framework

Di setiap framework css pasti ada class yang berfungsi menyembunyikan konten sesuai dengan resolusi perangkat yang kita pakai untuk membuka website tersebut. Contoh kita pada saat kita mebuka website di desktop ada satu konten yang tidak ada apabila kita membuka websitenya di smartphone. Pada artikel kali ini saya akan membahs tentang fungsi hidden pada bulma framework.

Di sini saya akan memberikan contohnya untuk membahas fungsi hidden pada bulma framework. Langsung saja teman-teman buka text editor teman-teman untuk mencoba contoh yang saya berikan, berikut langkah-langkahya:

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

– Kedua, anda ketikan kode html di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Bulma Helper</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="column">
<h1 class="title is-1 has-text-centered">Fungsi is-hidden</h1>
  <div class="columns">
    
    <div class="column is-hidden-mobile">
      <div class="box notification is-danger">
        <p class="title is-4"><b>Kolom Mobile</b></p>
        <p class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>

    <div class="column is-hidden-tablet-only">
      <div class="box notification is-info">
        <p class="title is-4"><b>Kolom Tablet</b></p>
        <p class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>

    <div class="column is-hidden-desktop-only">
      <div class="box notification is-warning">
        <p class="title is-4"><b>Kolom Desktop</b></p>
        <p class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>

    <div class="column is-hidden-widescreen">
      <div class="box notification is-success">
        <p class="title is-4"><b>Kolom Wide Screen</b></p>
        <p class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>

  </div>
</div>

<br>
	
</body>
</html>

Coba teman-teman buka di browser teman-teman lalu buka menu developer untuk merubah resolusinya. Di sini saya menggunakan firefox sebagai browser bawaannya.

Pertama ubah resolusinya sebesar 1339px maka tampilannya akan menjadi seperti berikut:

Kolom wide screen tidak akan tampil di layar.

Kedua ubah resolusinya sebesar 1000px maka tampilannya akan menjadi seperti berikut:

Kolom desktop tidak akan tampil di layar.

Ketiga ubah resolusinya sebesar 770px maka tampilannya akan menjadi seperti berikut:

Kolom tablet tidak akan tampil di layar.

Keempat ubah resolusinya sebesar 768px maka tampilannya akan menjadi seperti berikut:

Kolom mobile tidak akan tampil di layar.

Berikut adalah batas masing-masing resolusi perangkat pada bulma:

Wide Screen : >= 1192px
Desktop : >= 1000px sampai 1191px
Tablet : >= 770px sampai 998px
Mobile : 0 sampai 768px

Dengan adanya fungsi hidden pada bulma kita teman-teman dapat menyembunyikan beberapa konten sesuai resolusi yang teman-teman inginkan untuk membuat tampilan website menjadi lebih baik, cukup dengan menambahkan class is-hidden-mobile untuk contohnya pada konten yang akan disembunyikan saat keadaan di buka dalam perangkat mobile.

Sekian artikel kali ini tentang fungsi hidden pada bulma framework.

Kategori