Gambar 1 dari 3
Untuk menemukan template ini, kunjungi halaman utama Bootstrap dan klik link Memulai di bagian atas. Klik Basic Template dari menu di sebelah kiri dan Anda akan melihat bagian HTML. Salin dan tempel ini ke editor HTML Anda dan simpan di folder situs web sebagai index.html. Buka file di browser Anda untuk melihat halaman Bootstrap pertama Anda.
Jika tampilannya biasa saja dan mengecewakan, ini karena kami belum menggunakan komponen Bootstrap apa pun: “Halo dunia!” pesan hanya menggunakan tag judul standar. Kita bisa membuatnya terlihat lebih menarik dengan menempatkannya di dalam div yang menggunakan kelas “well” Bootstrap. Untuk melakukan ini kita cukup menyertakan teks kita dalam tag div yang sesuai sebagai berikut:
Simpan perubahan Anda dan muat ulang halaman: Anda akan melihat judulnya sekarang tersembunyi di dalam sumur dengan latar belakang abu-abu. Anda dapat menggunakan kelas ini di mana pun Anda ingin memberikan penekanan ekstra pada elemen halaman. Bootstrap juga menyediakan dua pengubah yang dapat digunakan untuk menentukan lebih banyak atau lebih sedikit padding di sekitar tepi sumur Anda: Anda bisa menulis
class=”sangat besar” atau class=”well, baik-kecil”.Mari kita menjadi lebih ambisius: mari letakkan judul kita di panel dengan beberapa teks deskriptif dan tombol ajakan bertindak. Bootstrap menyebutnya sebagai 'unit pahlawan'. Untuk menerapkannya, ganti badan file HTML Anda dengan kode ini:
Simpan ini dan muat ke browser Anda untuk melihat efeknya. Anda akan melihat bahwa tombol tersebut merespons ketika Anda mengarahkan mouse ke atasnya dan mengkliknya, meskipun tombol tersebut belum mengarah ke mana pun karena kami belum menautkan apa pun ke tombol tersebut.
Kita dapat membuat tombol ini lebih menonjol dengan menggunakan pengubah, sama seperti sumur. Untuk membuatnya lebih besar dan memberi sedikit warna, ubahlah kelas tag a “btn” ke “btn btn-primer btn-besar”. Bootstrap mendukung segala macam gaya tombol dalam berbagai ukuran, warna dan pengaturan: dokumentasi online menjelaskan berbagai properti yang dapat diterapkan.
Menggunakan kisi-kisi
Kode yang kami buat sejauh ini membentang di seluruh lebar jendela browser Anda. Namun secara konseptual, Bootstrap membagi area kerja Anda menjadi grid 12 kolom, berukuran 940 piksel secara default. Hal ini memudahkan pembuatan tata letak yang lebih terstruktur dan memberikan kesan visual yang baik, meskipun Anda bukan seorang desainer.
Untuk melihat cara kerjanya, mari buat satu kolom dengan judul, teks, dan tombol standar. Tambahkan kode ini segera setelah akhir div “unit pahlawan”:
Muat ini ke browser Anda dan Anda akan melihat bahwa, sekali lagi, judul dan teks terbentang tepat di seluruh browser. (Kode HTML raquo menghasilkan simbol panah ganda yang berguna.) Ini karena kita telah menentukannya “rentang12” kelas, artinya isi div ini akan tersebar di seluruh 12 kolom. Mengubah “rentang12” ke “rentang6”, muat ulang halaman dan lihat apa yang terjadi. Judul dan teks sekarang menempati setengah dari lebar browser.
