Kelas Pendukung CSS di Bootstrap

03 March 2016
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>

    contextual class bootstrap 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

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

INFORMASI PENTING

Apabila ada script atau tips & trik yang tidak bisa digunakan, silahkan beritahu kami melalui kolom komentar atau email kami di psnpenting@gmail.com

papa wardi
papa wardi Updated at: 12:38

2 komentar

terima kasih saya ucapkan pada papawardi.com, setelah membaca hanya kurang lebih 2jam saya jadi paham betul cara penggunaan bootstrap serta pemahaman bootstrap yang dalam. 8-)

Balas Hapus

Terima kasih juga gan Achmad Nizar, sudah mau berkunjung kesini..

Balas Hapus

Kolom komentar adalah tempat untuk Tanya-Jawab, Kritik-Saran dan tempat untuk berbagi ilmu, BUKAN TEMPAT PROMOSI.
Maaf jika saya tidak bisa membalas satu per satu komentar sahabat semua. Harap maklum.

Copyright 2016 © papawardi