Kelas Pendukung CSS di Bootstrap

Selain dari kelas-kelas yang sudah kita pelajari pada artikel saya sebelumnya, CSS pada Bootstrap juga menyediakan kelas-kelas pendukung untuk memudahkan kita dalam membuat rancangan situs yang bagus. Oleh karena itu, kali ini kita akan bersama-sama mempelajari kelas-kelas pendukung tersebut.

Contextual Colors

Digunakan untuk merubah warna pada suatu kata atau kalimat.
Format penggunaannya:


<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Hasilnya seperti ini:


Kelas pendukung CSS Kelas pendukung CSS Kelas pendukung CSS Kelas pendukung CSS Kelas pendukung CSS Kelas pendukung CSS

Contextual backgrounds

Hampir sama dengan contextual colors, bedanya disini warna yang berubah adalah warna latarnya (background).
Format penggunaannya:


<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Hasilnya seperti ini:


Kelas pendukung CSS Kelas pendukung CSS Kelas pendukung CSS Kelas pendukung CSS Kelas pendukung CSS

Close icon

Untuk menampilkan tanda silang (biasanya digabungkan dengan tombol Buttons).
Formatnya seperti ini:


<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>


Hasilnya:

Carets

Biasanya digunakan pada dropdown menu.
Formatnya:

<span class="caret"></span>

Hasilnya:

Quick floats

Untuk menempatkan elemen kekiri ataupun kekanan. Penggunaan !important untuk menghindari masalah spesifisitas. Kelas ini juga bisa digunakan dengan gabungan elemen lain.
Formatnya seperti ini:


<div class="pull-left">...</div>
<div class="pull-right">...</div>




// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}


Hasilnya:


Berada di kiri Berada di kanan

Center content blocks

Untuk mengatur elemen display: block dan center dengan margin. Bisa digunakan pada kelas dan digabungkan.
Formatnya:


<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Hasilnya:


Ini hasilnya

Clearfix

Format penggunaan:


<!-- Usage as a class -->
<div class="clearfix">...</div>




// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}


Hasilnya:


Mode clearfix

Menampilkan dan menyembunyikan konten

Formatnya:


<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Hasil:


Ditampilkan Disembunyikan

Screen reader dan keyboard navigation content

Formatnya:


<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Hasilnya:


Skip to main content

Image replacement

Mengubah elemen teks konten dengan gambar background/
Formatnya:


<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Hasilnya:


Custom heading

INGAT!!!

jika ingin mencobanya secara offline, masukkan script diatas pada template dasar diantara kelas .container atau .container-fluid (hapus tulisan <!-- AWAL KONTEN --> sampai <!-- AKHIR KONTEN -->). Jika belum punya template dasar, anda bisa membacanya disini