Kumpulan Nama-Nama Class Bootstrap Yang HARUS
Kamu Ketahui
Setelah mempelajari beberapa tutorial dan tips Bootstrap di postingan-postingan sebelumnya dalam kategori Bootstrap, saat ini dapat kita kumpulkan nama-nama class Bootstrap yang tersedia dan pernah kita gunakan pada pos-pos sebelumnya agar tidak lupa atau untuk mengingatnya kembali.
Kumpulan Lengkap Nama class 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. Lihat: cara membuat table Bootstrap.
Membuat link paginasi menjadi aktif dan memberikan warna background berwarna biru (untuk menyorot halaman saat ini). Lihat: cara membuat pagination Bootstrap.
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. Lihat: cara membuat navbar Bootstrap.
Membuat animasi pada progress bar, lihat : cara membuat progress bar Bootstrap.
Memberikan warna background biru pada list item dan menjadikannya sebagai aktif pada list group, lihat : cara membuat list inline di Bootstrap.
Memberikan warna background biru pada tombol seolah telah / sedang diklik, lihat : cara membuat tombol di Bootstrap.
2. class affix (.affix) berfungsi untuk:
Membuat sebuah elemen menjadi terkunci/sticky pada suat halaman, .affix merupakan toggle fixed on/off. Lihat: cara membuat sticky navbar dan mengecil ketika scroll.
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. Lihat: cara membuat alert di Bootstrap.
4. class badge (.badge) berfungsi untuk:
.badge digunakan untuk membuat badge circle menyerupai bubble berwarna abu-abu dan biasa digunakan untuk menampilkan angka. Lihat: cara membuat badges Bootstrap.
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. Lihat: cara berikan warna background di Bootstrap.
6. class breadcrumb (.breadcrumb) berfungsi untuk:
Menampilkan halaman saat ini yang sedang dibuka dengan tampilan hirarki, lihat: cara membuat breadcrumb di Bootstrap.
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. Lihat: cara membuat 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. Lihat: cara membuat carousel di Bootstrap.
9. class center-block (.center-block) berfungsi untuk:
.center-block digunakan 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. Lihat: cara membuat checkbox di Bootstrap.
11.class clearfix (.clearfix) berfungsi untuk:
.clearfix digunakan untuk menghilangkan floats, lihat: cara membuat website menggunakan Bootstrap.
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. Lihat: perbedaan Bootstrap 3 dan 4.
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). Lihat : cara membuat collapse Bootstrap.
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:
.disabled dapat digunakan untuk beberapa hal. diantaranya:
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. Lihat: cara embed file responsive.
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. Lihat: cara membuat form di Bootstrap.
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:
.mark digunakan untuk membuat highlighted text (tulisan yang disoroti) sehingga memunculkan warna latar belakang, ini mirip seperti stabilo. Lihat: cara membuat highlighted text di Bootstrap.
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). Lihat: cara membuat media object sebagai kolom 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. Lihat: cara membuat modal popup Bootstrap responsive.
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. Lihat: cara membuat tab dan pill Bootstrap.
.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:
.pager digunakan untuk membuat tombol Next dan Previous, gunakan ini dalam elemen <ul>. Lihat: cara membuat pager Bootstrap.
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. Lihat: cara membuat panel Bootstrap.
27. class popover berfungsi untuk:
.popover digunakan untuk menampilkan konten dalam kotak popup yang akan tampil ketika mengkliknya, ini biasanya digunakan seperti ikon lonceng pemberitahuan di media sosial. Lihat: bagaimana cara membuat popover di Bootstrap.
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. Lihat: cara membuat progress bar Bootstrap.
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. Lihat: cara membuat tulisan otomatis menjadi huruf kecil semua.
.text-uppercase digunakan untuk membuat tulisan menjadi huruf besar semua. Lihat: cara membuat tulisan huruf besar semua.
31. class thumbnail (.thumbnail) berfungsi untuk:
.thumbnail digunakan untuk menambahkan border di sisi elemen, biasanya gambar atau video yang lebih sering digunakan sebagai thumbnail.
Itulah nama-nama class Bootstrap yang harus diketahui, setidaknya pernah tau dan kalo bisa jangan sampai lupa. Karena nama-nama class ini akan lebih sering digunakan dalam praktiknya. Jangan lupa boorkmark halaman ini untuk memantau update-nya !
sumber: https://www.posciety.com/nama-nama-class-bootstrap-yang-wajib-diketahui/
Kamu Ketahui
Setelah mempelajari beberapa tutorial dan tips Bootstrap di postingan-postingan sebelumnya dalam kategori Bootstrap, saat ini dapat kita kumpulkan nama-nama class Bootstrap yang tersedia dan pernah kita gunakan pada pos-pos sebelumnya agar tidak lupa atau untuk mengingatnya kembali.
Kumpulan Lengkap Nama class 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. Lihat: cara membuat table Bootstrap.
Membuat link paginasi menjadi aktif dan memberikan warna background berwarna biru (untuk menyorot halaman saat ini). Lihat: cara membuat pagination Bootstrap.
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. Lihat: cara membuat navbar Bootstrap.
Membuat animasi pada progress bar, lihat : cara membuat progress bar Bootstrap.
Memberikan warna background biru pada list item dan menjadikannya sebagai aktif pada list group, lihat : cara membuat list inline di Bootstrap.
Memberikan warna background biru pada tombol seolah telah / sedang diklik, lihat : cara membuat tombol di Bootstrap.
2. class affix (.affix) berfungsi untuk:
Membuat sebuah elemen menjadi terkunci/sticky pada suat halaman, .affix merupakan toggle fixed on/off. Lihat: cara membuat sticky navbar dan mengecil ketika scroll.
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. Lihat: cara membuat alert di Bootstrap.
4. class badge (.badge) berfungsi untuk:
.badge digunakan untuk membuat badge circle menyerupai bubble berwarna abu-abu dan biasa digunakan untuk menampilkan angka. Lihat: cara membuat badges Bootstrap.
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. Lihat: cara berikan warna background di Bootstrap.
6. class breadcrumb (.breadcrumb) berfungsi untuk:
Menampilkan halaman saat ini yang sedang dibuka dengan tampilan hirarki, lihat: cara membuat breadcrumb di Bootstrap.
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. Lihat: cara membuat 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. Lihat: cara membuat carousel di Bootstrap.
9. class center-block (.center-block) berfungsi untuk:
.center-block digunakan 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. Lihat: cara membuat checkbox di Bootstrap.
11.class clearfix (.clearfix) berfungsi untuk:
.clearfix digunakan untuk menghilangkan floats, lihat: cara membuat website menggunakan Bootstrap.
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. Lihat: perbedaan Bootstrap 3 dan 4.
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). Lihat : cara membuat collapse Bootstrap.
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:
.disabled dapat digunakan untuk beberapa hal. diantaranya:
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. Lihat: cara embed file responsive.
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. Lihat: cara membuat form di Bootstrap.
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:
.mark digunakan untuk membuat highlighted text (tulisan yang disoroti) sehingga memunculkan warna latar belakang, ini mirip seperti stabilo. Lihat: cara membuat highlighted text di Bootstrap.
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). Lihat: cara membuat media object sebagai kolom 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. Lihat: cara membuat modal popup Bootstrap responsive.
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. Lihat: cara membuat tab dan pill Bootstrap.
.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:
.pager digunakan untuk membuat tombol Next dan Previous, gunakan ini dalam elemen <ul>. Lihat: cara membuat pager Bootstrap.
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. Lihat: cara membuat panel Bootstrap.
27. class popover berfungsi untuk:
.popover digunakan untuk menampilkan konten dalam kotak popup yang akan tampil ketika mengkliknya, ini biasanya digunakan seperti ikon lonceng pemberitahuan di media sosial. Lihat: bagaimana cara membuat popover di Bootstrap.
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. Lihat: cara membuat progress bar Bootstrap.
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. Lihat: cara membuat tulisan otomatis menjadi huruf kecil semua.
.text-uppercase digunakan untuk membuat tulisan menjadi huruf besar semua. Lihat: cara membuat tulisan huruf besar semua.
31. class thumbnail (.thumbnail) berfungsi untuk:
.thumbnail digunakan untuk menambahkan border di sisi elemen, biasanya gambar atau video yang lebih sering digunakan sebagai thumbnail.
Itulah nama-nama class Bootstrap yang harus diketahui, setidaknya pernah tau dan kalo bisa jangan sampai lupa. Karena nama-nama class ini akan lebih sering digunakan dalam praktiknya. Jangan lupa boorkmark halaman ini untuk memantau update-nya !
sumber: https://www.posciety.com/nama-nama-class-bootstrap-yang-wajib-diketahui/
Komentar
Posting Komentar
This Message