Apa itu Bootstrap ?
A. Pengertian dan Penjelasan Bootstrap
Bootstrap merupakan sebuah library framework CSS untuk mengembangkan front end sebuah website dengan cepat. Bootstrap juga dikenal sebagai salah satu framework CSS, HTML, Javascript yang begitu populer di kalangan website developer atau pengembang website.
Bootstrap menerapkan konsep mobile first yang artinya di dalam pembuatan dan pengembangan mulai dari layar yang terkecil dahulu (mobile / handphone/ smartphone) dan secara bertahap pada tampilan yang paling besar Bootstrap menyediakan semua modul dasar untuk membuat website, di antaranya adalah - Grid, Tipografi, Tabel, Formulir, Tombol, dan Responsiveness.
Selain itu, ada sejumlah besar komponen front-end berguna lainnya seperti Dropdown, Navigasi, Modals, Typehead, Pagination, Carousal, Breadcrumb, Tab, Thumbnail, Headers dll. Selain itu, karena seluruh framework berbasis modul, pengembang dapat menyesuaikannya dengan CSSnya sendiri atau bahkan melakukan perombakan total.
A. Pengertian dan Penjelasan Bootstrap
Bootstrap merupakan sebuah library framework CSS untuk mengembangkan front end sebuah website dengan cepat. Bootstrap juga dikenal sebagai salah satu framework CSS, HTML, Javascript yang begitu populer di kalangan website developer atau pengembang website.
Bootstrap menerapkan konsep mobile first yang artinya di dalam pembuatan dan pengembangan mulai dari layar yang terkecil dahulu (mobile / handphone/ smartphone) dan secara bertahap pada tampilan yang paling besar Bootstrap menyediakan semua modul dasar untuk membuat website, di antaranya adalah - Grid, Tipografi, Tabel, Formulir, Tombol, dan Responsiveness.
Selain itu, ada sejumlah besar komponen front-end berguna lainnya seperti Dropdown, Navigasi, Modals, Typehead, Pagination, Carousal, Breadcrumb, Tab, Thumbnail, Headers dll. Selain itu, karena seluruh framework berbasis modul, pengembang dapat menyesuaikannya dengan CSSnya sendiri atau bahkan melakukan perombakan total.
Pengetahuan tentang HTML+CSS tetap diperlukan untuk dapat menyesuaikan konten dan style dari website yang kita buat.
Kegunaan Bootstrap :
Bootstrap sangat bagus untuk membuat layout (tata letak), karena CSS responsifnya dirancang agar sesuai dengan perangkat yang berbeda. Ini dapat digunakan untuk memastikan konsistensi, menghilangkan masalah lintas browser, dan sebagainya.
Syarat Membuat Halaman Bootstrap
Bootstrap Template :
Bootstrap sangat bagus untuk membuat layout (tata letak), karena CSS responsifnya dirancang agar sesuai dengan perangkat yang berbeda. Ini dapat digunakan untuk memastikan konsistensi, menghilangkan masalah lintas browser, dan sebagainya.
Syarat Membuat Halaman Bootstrap
- Mereferensikan Bootstrap CSS library
- Mereferensikan jQuery library
- Mereferensikan popper library
- Mereferensikan Bootstrap Javascript library
Bootstrap Template :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"crossorigin="anonymous">{codeBox}
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
jQuery & Popper Library
jQuery adalah library JavaScript yang paling populer. Salah satu alasannya adalah karena kemampuan lintas platformnya. Animasi dapat dibuat lebih mudah dengan jQuery. Popper,js adalah library JavaScript yang memudahkan untuk mengatur poppers, tooltip, dan popovers.
Library ini termasuk ringan ~ 3 kB, bertujuan untuk menyediakan mesin pemosisian yang andal dan dapat diperluas yang dapat digunakan untuk memastikan semua elemen popper ditempatkan di tempat yang tepat.
Bootstrap 4 menggunakan jQuery dan Popper.js untuk komponen-komponen JavaScript. Jika kita hanya menggunakan bagian CSS untuk Bootstrap, berarti kita tidak memerlukannya.
Struktur Isi dari Bootstrap
jQuery adalah library JavaScript yang paling populer. Salah satu alasannya adalah karena kemampuan lintas platformnya. Animasi dapat dibuat lebih mudah dengan jQuery. Popper,js adalah library JavaScript yang memudahkan untuk mengatur poppers, tooltip, dan popovers.
Library ini termasuk ringan ~ 3 kB, bertujuan untuk menyediakan mesin pemosisian yang andal dan dapat diperluas yang dapat digunakan untuk memastikan semua elemen popper ditempatkan di tempat yang tepat.
Bootstrap 4 menggunakan jQuery dan Popper.js untuk komponen-komponen JavaScript. Jika kita hanya menggunakan bagian CSS untuk Bootstrap, berarti kita tidak memerlukannya.
Struktur Isi dari Bootstrap
Cara Kustomisasi Bootstrap
- Membuat stylesheet baru, misal custom.css
- Membuat modul untuk kustomisasi style pada file custom.css
- Tambahkan link akses ke stylesheet custom.css pada file HTML setelah link akses ke stylesheet Bootstrap.
contoh :
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
B. Komponen-komponen Bootstrap
Bootstrap menyediakan komponen-komponen yang siap digunakan oleh developer, beberapa di antaranya adalah Bootstrap Grids, Bootstrap Typography, Modal, Bootstrap Tables, Forms, Images and Icons, Bootstrap Alerts, Buttons, Button Groups, and Button Dropdowns, dan lain-lain.
Containers
Bootstrap memerlukan elemen containers untuk membungkus content situs. Containers digunakan untuk mengisi konten di dalamnya, dan ada dua kelas container yang tersedia:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
B. Komponen-komponen Bootstrap
Bootstrap menyediakan komponen-komponen yang siap digunakan oleh developer, beberapa di antaranya adalah Bootstrap Grids, Bootstrap Typography, Modal, Bootstrap Tables, Forms, Images and Icons, Bootstrap Alerts, Buttons, Button Groups, and Button Dropdowns, dan lain-lain.
Containers
Bootstrap memerlukan elemen containers untuk membungkus content situs. Containers digunakan untuk mengisi konten di dalamnya, dan ada dua kelas container yang tersedia:
- Kelas .container menyediakan fixed width container yang responsive
- Kelas .container-fluid menyediakan full width container, yang mencakup seluruh lebar viewport.
Containers - styling
Pada containers dapat ditambahkan style, baik itu padding, margin, background color, text color, atau yang lainnya.
Pada bootstrap terdapat shortcut class untuk beberapa style tersebut, contoh :
Pada containers dapat ditambahkan style, baik itu padding, margin, background color, text color, atau yang lainnya.
Pada bootstrap terdapat shortcut class untuk beberapa style tersebut, contoh :
Bootstrap 4 Grid System
Sistem grid Bootstrap dibangun dengan flexbox dan memungkinkan hingga 12 kolom di seluruh halaman. Jika kita tidak ingin menggunakan semua kolom yang berjumlah 12, kita dapat mengelompokkan kolom untuk membuat kolom yang lebih luas. Grid System ini responsif dan kolom akan diatur kembali secara otomatis sesuai dengan ukuran layar.
Sistem grid Bootstrap dibangun dengan flexbox dan memungkinkan hingga 12 kolom di seluruh halaman. Jika kita tidak ingin menggunakan semua kolom yang berjumlah 12, kita dapat mengelompokkan kolom untuk membuat kolom yang lebih luas. Grid System ini responsif dan kolom akan diatur kembali secara otomatis sesuai dengan ukuran layar.
Grid System memiliki 5 class :
- .col- (untuk perangkat berukuran extra small, lebar layar <576px)
- .col-sm- (untuk perangkat berukuran small, lebar layar >=576px)
- .col-md- (untuk perangkat berukuran medium, lebar layar >=768px)
- .col-lg- (untuk perangkat berukuran large, lebar layar >=992px)
- .col-xl- (untuk perangkat berukuran extra large, lebar layar >=1200px)
Class yang disebutkan di atas dapat dikombinasikan untuk menciptakan layout yang lebih dinamis dan fleksibel.
Membuat Kolom dengan Grid
1. Membuat baris dengan ukuran kolom yang sama
<div class="container-fluid">
<h1>3 Kolom yang sama</h1>
<div class="row">
<div class="col" style="backgroundcolor: red;">.col</div>
<div class="col" style="backgroundcolor: orange;">.col</div>
<div class="col" style="backgroundcolor: yellow;">.col</div>
</div>
</div>
1. Membuat baris dengan ukuran kolom yang sama
<div class="container-fluid">
<h1>3 Kolom yang sama</h1>
<div class="row">
<div class="col" style="backgroundcolor: red;">.col</div>
<div class="col" style="backgroundcolor: orange;">.col</div>
<div class="col" style="backgroundcolor: yellow;">.col</div>
</div>
</div>
2. Membuat baris dengan ukuran kolom yang responsif
Kolom akan secara otomatis menyesuaikan dengan layar saat lebar layar kurang dari 576px.
<div class="container-fluid">
<h1>Responsive Columns</h1>
<div class="row">
<div class="col-sm-3" style="backgroundcolor: pink;">.col-sm-3</div>
<div class="col-sm-3" style="backgroundcolor: lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="backgroundcolor: pink;">.col-sm-3</div>
<div class="col-sm-3" style="backgroundcolor: lavenderblush;">.col-sm-3</div>
</div>
</div>
3. Membuat baris dengan ukuran kolom yang berbeda
Kolom akan secara otomatis bertumpuk satu sama lainnya saat lebar layar kurang dari 576px.
<div class="container-fluid">
<h1>2 kolom responsive dengan ukuran berbeda</h1>
<div class="row">
<div class="col-sm-4" style="backgroundcolor: pink;">.col-sm-4</div>
<div class="col-sm-8" style="backgroundcolor: lavenderblush;">.col-sm-8</div>
</div>
</div>
Styling Grid
Vertical Alignment
1. Middle Alignment
tambahkan class align-items-center pada elemen yang ingin ditengahkan.
contoh : <div class="row align-items-center">
2. Top and Bottom Alignment
top : tambahkan class align-items-start pada elemen yang ingin diterapkan alignment atas
contoh : <div class="row align-items-start">
bottom : tambahkan class align-items-end pada elemen yang ingin diterapkan alignment bawah
contoh : <div class="row align-items-end">
Bootstrap Typography
Pengembang pemula sering berasumsi bahwa HTML mereka yang murni dan tidak dikenakan style akan terlihat sama di semua browser. Sayangnya, setiap browser memiliki stylesheet defaultnya sendiri yang diterapkan ke HTML, dan tidak ada browser yang memiliki default yang sama.
Misalnya, ukuran font heading tidak konsisten di seluruh browser, tombol ditampilkan secara berbeda di seluruh browser, dan lain-lainnya. Untuk mengatasi semua ketidakkonsistenan ini, aturan "reset" CSS yang berbeda lahir dan aturan tersebut menentukan style default yang konsisten.
Bootstrap Default Typography
font-size : 16px
line-height : 1.5.
font-family : "Helvetica Neue", Helvetica, Arial, sans-serif.
Semua elemen <p> memiliki margin-top: 0 dan margin-bottom: 1rem (defaultnya 16px).
Bootstrap Typography
Modal
- HTML Headings (<h1> hingga <h6>) pada Style Bootstrap 4 memiliki font-weight yang lebih tegas dan font-size yang lebih tinggi.
- Display Headings digunakan supaya lebih menonjol dibandingkan dengan heading secara normal ( font-size yang lebih besar and font-weight yang lebih ringan ). Terdapat 4 class display heading, di antaranya adalah : .display-1, .display-2, .display-3, .display-4.
- Secondary text adalah elemen yang membuat heading menjadi lebih ringan. Pada Bootstrap 4 elemen HTML <small> digunakan untuk membuat secondary text.
- Untuk meng-highlight suatu teks, digunakan elemen <small>
- Untuk menggarisbawahi teks dengan titik-titik digunakan elemen <abbr>
- Untuk membuat kutipan, gunakan class .blockquote pada elemen <blockquote>
- Untuk menulis kode, gunakan elemen <code>
- dan lain-lain.
Modal
Komponen Modal adalah box dialog atau popup window yang ditampilkan di atas halaman yang dibuka. Modal terdiri dari bagian header, body, dan footer. Pada CSS, diperlukan beberapa class berikut untuk membuat Modal : .modal, .modal-dialog, .modal-content, .modal-header, .modaltitle, .close, .modal-body, .modal-footer, .btn, .btn-danger, dan lainnya.
Contoh Kode :
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Judul</h4>
<button type="button" class="close" datadismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Konten
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
Animasi
Pada modal ini dapat ditambahkan animasi untuk menambahkan efek saat membuka dan menutup modal. Tambahkan class .fade pada elemen modals supaya efek fade in dan fade out diterapkan pada modal.
Ukuran Modal
Untuk mengatur ukuran modal, terdapat class .modal-sm (small), .modal-lg (large), dan modal-xl (extra large) yang dapat ditambahkan pada elemen yang mengandung class .modal-dialog.
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
Animasi
Pada modal ini dapat ditambahkan animasi untuk menambahkan efek saat membuka dan menutup modal. Tambahkan class .fade pada elemen modals supaya efek fade in dan fade out diterapkan pada modal.
Ukuran Modal
Untuk mengatur ukuran modal, terdapat class .modal-sm (small), .modal-lg (large), dan modal-xl (extra large) yang dapat ditambahkan pada elemen yang mengandung class .modal-dialog.
Centered-Modal
Untuk membuat posisi modal berada di tengah secara vertikal ataupun horizontal, dapat ditambahkan class .modal-dialog-centered.
Scroll
Untuk membuat modal dengan ukuran tetap tetapi memiliki konten panjang tentunya memerlukan scrollbar untuk dapat mencapai seluruh konten modal. Hal tersebut dapat dilakukan dengan menambahkan class .modal-dialog-scrollable pada box modaldialog.
Untuk membuat posisi modal berada di tengah secara vertikal ataupun horizontal, dapat ditambahkan class .modal-dialog-centered.
Scroll
Untuk membuat modal dengan ukuran tetap tetapi memiliki konten panjang tentunya memerlukan scrollbar untuk dapat mencapai seluruh konten modal. Hal tersebut dapat dilakukan dengan menambahkan class .modal-dialog-scrollable pada box modaldialog.
Bootstrap Table
Basic Table
Tabel Bootstrap memiliki padding yang ringan dan garis horizontal yang membagi baris. Basic bootstrap dapat diterapkan pada file HTML dengan menempatkan class .table pada elemen <table>.
Tabel bootstrap dapat dikenakan style lain seperti menambahkan efek stripe pada baris-baris tabel dengan menggunakan class .table-striped, memberikan border padatabel dengan menggunakan class .table-bordered, menambahkan efek hover pada tabel yang dipilih dengan menggunakan class .table-hover, dan style lainnya.
Basic Table
Tabel Bootstrap memiliki padding yang ringan dan garis horizontal yang membagi baris. Basic bootstrap dapat diterapkan pada file HTML dengan menempatkan class .table pada elemen <table>.
Tabel bootstrap dapat dikenakan style lain seperti menambahkan efek stripe pada baris-baris tabel dengan menggunakan class .table-striped, memberikan border padatabel dengan menggunakan class .table-bordered, menambahkan efek hover pada tabel yang dipilih dengan menggunakan class .table-hover, dan style lainnya.
Bootstrap Forms
Class .form-controls secara otomatis menerima semua styling dengan bootstrap. Semua elemen <input>, <textarea>, dan <select> dengan class .formcontrol memiliki width 100%.
Terdapat 2 layout untuk form :
- Stacked : bentuk formulir adalah bertumpuk, lebar(width) tiap elemen 100%
- Inline : dalam satu baris dapat diisi dengan beberapa elemen formulir, lebar (width) elemen tidak harus 100%
Bootstrap Forms
1. Stacked Form : tambahkan class .form-group pada elemen yang membungkus elemen form (seperti input, textarea, select) yang memiliki class .form-control supaya margin yang diterapkan tepat.
contoh :
<div class="form-group">
<label for="email">Email / Username:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter email/username" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
2. Inline-form : Tambahkan class .form-inline pada elemen <form>.
contoh :
<form class="form-inline" action="/action_page.php">
<label for="email">Email / Username :</label>
<input type="email" class="form-control" id="email" placeholder="Enter email/username" name="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btnprimary">Submit</button>
</form>
Form-Row/Grid
Kita juga dapat membuat formulir yang rapi tanpa menggunakan spacing utilities, yaitu menggunakan fasilitas grid dari bootstrap dengan menggunakan class .row dan .col untuk mengontrol lebar dan alignment dari elemen-elemen formulir.
Contoh :
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email/username" name="email">
</div>
</div>
Form Validation
Kita dapat menggunakan class validation yang berbeda untuk memberikan masukan yang berharga kepada pengguna. Tambahkan class .was-validated atau .needsvalidation ke elemen <form>, jika ingin memberikan masukan validasi sebelum atau setelah mengirimkan formulir (menekan tombol submit).
Input akan memiliki batas hijau (valid) atau merah (tidak valid) untuk menunjukkan apa yang belum terisi dengan benar di formulir. Anda juga dapat menambahkan pesan .valid-feedback atau .invalid-feedback untuk memberi tahu pengguna secara eksplisit apa yang hilang, atau yang perlu dilakukan sebelum mengirimkan formulir.
Bootstrap Images
Bentuk Images pada Bootstrap :
- Sudut membulat : tambahkan class .rounded pada elemen <img>
- Lingkaran : tambahkan class .rounded-circle pada elemen <img>
- Thumbnail : tambahkan class ,img-thumbnail pada elemen <img>
Menerapkan align pada Images :
- Center : tambahkan class .mx-auto dan .d-block pada elemen <img> untuk menengahkan image.
- Right and Left : tambahkan class .float-right untuk menempatkan image di sebelah kanan, dan tambahkan class .float-left untuk menempatkan image di sebelah kiri. Membuat Image menjadi responsive : image akan menyesuaikan ukuran layar perangkat pengguna. Gunakan class .img-fluid
Bootstrap Alerts
Alert adalah pesan yang muncul untuk memperingati atau memberikan informasi kepada pengguna. Alert dibuat dengan menerapkan class .alert pada div dan kemudian dapat diikuti dengan menambahkan class .alert-success, .alertinfo, .alert-warning, .alert-danger, .alert-primary, .alertsecondary, .alert-light atau .alert-dark tergantung fungsi alert. Variasi class .alert tersebut menampakkan perbedaan warna untuk fungsi alert yang berbeda.
contoh :
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Kita juga dapat menambahkan link pada alert dengan menambahkan class .alert-link . Link akan berubah sesuai dengan warna latar alert.
Bootstrap Alerts
Menambahkan fitur close pada alert : gunakan class .alert-dismissible dan tambahkan button untuk close. Menambahkan efek animasi pada saat close : gunakan class .fade dan .show.
Contoh :
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" datadismiss=" alert">×</button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
Bootstrap Buttons
Button (tombol) adalah salah satu hal yang ditampilkan berbeda di setiap browser. Bootstrap memiliki solusi elegan untuk tombol. Selain membuatnya konsisten, bootstrap juga menawarkan banyak variasi untuk dimainkan.
Style button yang dimiliki bootstrap ada banyak, beberapa di antaranya adalah style button dengan berbagai fungsi ( success, danger, info, dan lain-lain ), outline button, block button (tombol dengan lebar 100% halaman), active/disabled button, spinner button, dan lain-lain.
Bootstrap Button Groups
Jika beberapa tombol ingin dikelompokkan, maka bisa diterapkan class .btn-group pada elemen <div> yang di dalamnya terdapat kumpulan tombol. Beberapa style juga dapat diterapkan untuk button group, salah satunya adalah dengan mengubah bentuk button group menjadi dropdown dengan menerapkan class .dropdown-toggle, .dropdown-menu, dan .dropdown-item.
Untuk mempelajari komponen bootstrap lainnya bisa merujuk ke referensi W3Schools