Bootstrap adalah framework CSS untuk membuat tampilan web, bootstrap menyediakan class dan komponen yang siap dipakai, sehingga kita tidak perlu menulis kode CSS dari nol.
Berikut merupakan nama-nama class pada Bootstrap :
1. class active (.active)
Berfungsi untuk banyak hal, diantaranya :
- Membuat row atau cell pada table menjadi aktif dan menjadikan backgroundnya berwarna abu-abu, warna yang sama saat hover.
- Membuat link paginasi menjadi aktif dan memberikan warna background berwarna biru (untuk menyorot halaman saat ini).
- Membuat item menu menjadi aktif dan memberikan warna background biru pada item menu di dropdown menu.
- Membuat link menjadi aktif dan memberikan warna abu-abu pada default navbar, memberikan warna putih dan background hitam pada inverted navbar.
- Membuat animasi pada progress bar.
- Memberikan warna background biru pada list item dan menjadikannya sebagai aktif pada list group.
- Memberikan warna background biru pada tombol seolah telah / sedang diklik.
2. class affix (.affix)
Berfungsi untuk membuat sebuah elemen menjadi terkunci/sticky pada suat halaman, .affix merupakan toggle fixed on/off.
3. alert classes
Berfungsi untuk:
- .alert digunakan untuk membuat kotak pesan peringatan / pemberitahuan.
- .alert-dismissable digunakan untuk membuat alert yang tidak dapat ditutup dengan overlay click, perlu menggunakan .close agar alert dapat ditutup.
- .alert-danger, .alert-info, .alert-warning, .alert-success, .alert-link, dan .alert-info merupakan contextual classes untuk .alert.
4. class badge (.badge)
Berfungsi untuk membuat badge circle menyerupai bubble berwarna abu-abu dan biasa digunakan untuk menampilkan angka.
5. Background classes
Berfungsi untuk :
- .bg-danger digunakan untuk memberikan background warna merah pada elemen, merepresentasikan bahaya atau error.
- .bg-warning digunakan untuk memberikan background warna oranye pada elemen, merepresentasikan peringatan.
- .bg-success digunakan untuk memberikan background warna hijau pada elemen, merepresentasikan berhasil atau sukses.
- .bg-primary digunakan untuk memberikan background warna biru pada elemen, merepresentasikan default atau utama.
- .bg-info digunakan untuk memberikan background warna biru muda pada elemen, merepresentasikan notifikasi atau informasi.
6. class breadcrumb (.breadcrumb)
Berfungsi untuk menampilkan halaman saat ini yang sedang dibuka dengan tampilan hirarki.
7. Button classes
Berfungsi untuk:
- .btn digunakan untuk membuat tombol basic, berwarna abu-abu dan rounded corner.
- .btn-block digunakan untuk membuat tombol basic yang lebarnya menghabiskan semua lebar parent (full width).
- .btn-group digunakan untuk membuat sekelompok tombol dalam satu barisan.
- .btn-group-justified digunakan untuk membuat sekelompok tombol memiliki lebar yang full.
- .btn-group-xs, .btn-group-sm, dan .btn-group-lg merupakan size untuk sekelompok tombol.
- .btn-group-vertical digunakan untuk membuat sekelompok tombol berdiri tegak vertikal.
- .btn-default, .btn-info, .btn-danger, .btn-warning, .btn-info, dan .btn-link merupakan contextual classes untuk tombol.
- .btn-lg, .btn-sm, dan .btn-xs merupakan ukuran (size) untuk tombol Bootstrap.
8. carousel classes
Berfungsi untuk:
- .carousel digunakan untuk membuat carousel (slideshow).
- .carousel-caption digunakan untuk membuat caption (catatan) untuk setiap slideshow di carousel tersebut.
- .carousel-control digunakan untuk membuat container untuk link Next dan Previous.
- .carousel-indicators digunakan untuk menampilkan titik kecil (indikator) di bawah slide carousel yang mengindikasi berapa jumlah slide pada carousel tersebut.
- .carousel-inner digunakan untuk membuat container untuk masing-masing slide.
9. class center-block (.center-block)
Berfungsi untuk memusatkan elemen ke tengan (menjadikannya display:block; dengan margin kana kiri auto).
10. Checkbox classes
Berfungsi untuk:
- .checkbox digunakan untuk membuat container Checkbox.
- .checkbox-inline digunakan untuk membuat beberapa Checkbox tampil dalam satu baris yang sama.
11. class clearfix (.clearfix)
Berfungsi untuk menghilangkan floats.
12. class close (.close)
Berfungsi untuk menampilkan ikon close (tanda silang, x), misalnya untuk menutup modal popup.
13. col classes
berfungsi untuk:
- .col-*-* digunakan untuk membuat responsive grid.
- .col-*-offset-* digunakan untuk memindahkan kolom ke sisi kanan, memberikan jarak antar kolom menggunakan * kolom.
- .col-*-push-* digunakan untuk mengganti susunan grid.
- .col-*-pull-* digunakan untuk mengganti susunan grid.
14. collapse classes
Berfungsi untuk:
- .collapse digunakan untuk membuat konten yang dapat disembunyikan / ditampilkan ketika di klik, defaultnya disembunyikan (hidden).
- .collapse in digunakan untuk membuat konten yang dapat disembunyikan / ditampilkan ketika di klik, defaultnya ditampilkan (shown).
15. container classes
Berfungsi untuk:
- .container digunakan untuk membuat container (bungkusan) dengan margin sisi kiri dan kanan yang sama.
- .container-fluid digunakan untuk membuat container (pembungkus) dengan lebar penuh selayar.
16. disabled class (states)
Berfungsi untuk :
- Membuat list pada item list group tidak dapat diklik dan memberikan warna background abu-abu.
- Membuat tombol tidak dapat diklik dan menampilkan tanda merah ketika di hover.
- Meniadakan tombol paginasi sehingga tidak dapat diklik dan membuatnya berwarna abuabu (buram), akan menampilkan ikon merah ketika dihover.
- Membuat item di dalam dropdown menjadi pudar dan tidak dapat diklik.
17. dropdown classes
Berfungsi untuk:
- .dropdown digunakan untuk membuat tombol menu yang didalamnya dapat disisipkan item.
- .dropdown-menu digunakan untuk menambahkan style untuk container dropdown menu.
- .dropdown-menu-right digunakan untuk membuat dropdown menu rata kanan.
18. embed-responsive classes
Berfungsi untuk:
- .embed-responsive digunakan untuk menyematkan konten, skalanya akan menyesuaikan di seluruh perangkat.
- .embed-responsive-item digunakan di dalam .embed-responsive untuk membuat video di dalamnya berskala tepat sesuai induknya (parent).
- .embed-responsive-4by3 digunakan untuk menyematkan konten dengan aspect raiot 4:3.
- .embed-responsive-16by9 digunakan untuk menyematkan konten dengan aspect ratio 16:9.
19. form classes
Berfungsi untuk:
- .form-control digunakan pada textarea, input, dan select untuk membuatnya responsive..form-group digunakan sebagai container label dan input / elemen form.
- .form-horizontal digunakan untuk membuat elemen form dalam tata letak horizontal.
- .form-inline digunakan untuk membuat elemen-elemen form dalam satu barisan yang sama sehingga rata ke kanan (left-align), setidaknya harus memiliki lebar layar 768px.
- .form-control-static digunakan untuk menambahkan text di sebelah label pada form horizontal.
20. label classes
Berfungsi untuk:
- .label digunakan untuk membuat kotak kecil sebagai informasi tambahan pada elemen bersangkutan, ini seperti help text.
- .label-warning, .label-success, .label-info, dan .label-danger merupakan textual classes label untuk memberikan warna latar pada label. Cara pembuatannya tidak berbeda jauh dengan Badges di atas.
21. class mark (.mark
Berfungsi untuk membuat highlighted text (tulisan yang disoroti) sehingga memunculkan warna latar belakang, mirip seperti stabilo.
22. media classes
Berfungsi untuk:
- .media digunakan untuk penjajaran media seperti gambar / video, biasanya digunakan pada kolom komentar.
- .media-object mengindikasikan bahwa itu adalah gambar / video.
- .media-body digunakan untuk menampilkan konten / isi dari .media (biasanya berupa tulisan) yang nantinya akan tmapil disebelah media.
- .media-heading digunakan untuk membuat judul / heading pada .media.
- .media-list digunakan untuk nested media list (seperti sistem kolom komentar yang membalas komentar).
23. modal classes
berfungsi untuk:
- .modal digunakan untuk membuat popup.
- .modal-dialog digunakan untuk mengatur lebar dan margin dari konten popup.
- .modal-header digunakan untuk membuat header pada popup, biasanya berisi tombol close dan judul.
- .modal-body digunakan untuk membuat bagian konten / isi dari popup tersebut.
- .modal-footer digunakan untuk membuat bagian bawah dari popup, biasanya digunakan untuk menampilkan tombol.
- .modal-content merupakan pembungkus dari header, body, dan footer, ini akan memberikan style default pada popup.
- .modal-open digunakan untuk menghindari scroll ketika popup muncul (overflow: hidden;).
- .modal-sm dan .modal-lg merupakan modal size untuk menentukan ukuran modal, sedang atau besar.
24. nav classes
Berfungsi untuk:
- .navbar digunakan untuk membuat navigation bar.
- .navbar-brand digunakan untuk menyisipkan link di ujung navigation bar yang biasanya digunakan untuk menampilkan logo situs.
- .nav .nav-pills digunakan untuk membuat navigasi pill.
- .nav .nav-tabs digunakan untuk membuat menu manvigasi untuk tab.
- .navbar-btn digunakan untuk menampilkan tombol di dalam navigation.
- .navbar-default digunakan untuk membuat default navigation, berwarna abu-abu.
- .navbar-inverse digunakan untuk membuat navigation berwarna hitam
- .navbar-fixed-top digunakan untuk membuat navigation diam dan tampil di atas meskipun di scroll ke bawah.
- .navbar-fixed-bottom digunakan untuk membuat navigation diam dan tampil di bawah meskipun di scroll ke atas.
- .navbar-toggle digunakan untuk menampilkan toggle burger menu, ini berfungsi pada layar berukuran kecil misalnya smartphone.
25. class pager
Berfungsi untuk membuat tombol Next dan Previous, gunakan ini dalam elemen <ul>.
26. panel classes
Berfungsi untuk :
- .panel digunakan untuk garis border pada kotak dengan padding.
- .panel-collapse digunakan untuk toggle panel, bisa ditampilkan dan disembunyikan.
- .panel-group digunakan untuk membuat beberapa panel sekaligus, ini akan menghilangkan arak bawah antar panel.
- .panel-heading digunakan untuk membuat header dalam panel.
- .panel-title digunakan untuk menampilkan judul panel, ini dieltakkan dalam .panel-heading.
- .panel-body digunakan untuk membuat bungkusan konten . isi dari panel tersebut.
- .panel-footer digunakan untuk membuat footer panel, memiliki warna yang berbeda.
- .panel-success, .panel-info, dan .panel-warning merupakan contextual classes untuk panel, memberikan warna pada panel dengan cepat.
27. class popover
Berfungsi untuk menampilkan konten dalam kotak popup yang akan tampil ketika mengkliknya, ini biasanya digunakan seperti ikon lonceng pemberitahuan di media sosial.
28. progress bar classes
Berfungsi untuk:
- .progress digunakan sebagai container sebuah progress bar.
- .progress-bar digunakan untuk membuat progress bar.
- .progress-bar-striped digunakan untuk membuat progress bar dengan desain bergaris-garis.
- .progress-bar-warning, .progress-bar-info, .progress-bar-danger, dan .progress-bar-success merupakan contextual classes untuk progress bar yang mampu memberikan warna pada perogress bar dengan cepat.
29. table classes
Berfungsi untuk:
- .table digunakan untuk membuat table dan menambahkan style basic table Bootsrap.
- .table-bordered digunakan untuk menambahkan garis border disetiap sisi row dan cell table.
- .table-responsive digunakan untuk membuat table menjadi responsive.
- .table-hover digunakan untuk membuat warna row menjadi abu-abi ketika dihover
- .table-condensed digunakan untuk membuat table lebih compact dengan menghilangkan padding pada cell.
30. text classes
Berfungsi untuk:
- .text-center digunakan untuk membuat tulisan berjajar tengah
- .text-capitalize digunakan untuk huruf kapital.
- .text-justify digunakan untuk membuat tulisan justify, rata kiri dan kanan.
- .text-lowercase digunakan untuk membuat tulisan huruf kecil semua.
- .text-uppercase digunakan untuk membuat tulisan menjadi huruf besar semua.
31. class thumbnail (.thumbnail)
Berfungsi untuk menambahkan border di sisi elemen, biasanya gambar atau video yang lebih sering digunakan sebagai thumbnail.
Referensi :
- https://www.posciety.com/nama-nama-class-bootstrap-yang-wajib-diketahui/
Be the first to comment