Desain Web Menjadi Lebih Menyenangkan
Telusuri Lebih Lanjut
Carousel berbentuk slider yang setiap itemnya akan bergeser secara otomatis berdasarkan waktu yang sudah ditentukan. Website banyak menggunakan Carousel untuk mendukung tampilan agar lebih menarik
Telusuri Lebih Lanjut
And Choose
Bootstrap menggunakan Grid System untuk menghasilkan halaman website yang responsif. Konsep design layout website menggunakan grid system bootstrap yaitu dengan cara membagi sebuah halaman website menjadi beberapa baris dan kolom. Jumlah kolom sebuah halaman website sudah ditentukan dengan maksimal 12 kolom(grid).
Bootstrap menyediakan banyak class yang sangat membantu didalam mendesain sebuah web, contohnya class-class dibawah ini didalam membuat sebuah tabel
| No. | Nama Superhero | Asal |
|---|---|---|
| 1. | Superman | Planet Crypton |
| 2. | Batman | Gotham City |
| 3. | Robin | Pinggiran Gotham City |
| 4. | Iron Man | New York |
| 5. | Thor | Asgard |
Dengan menggunakan class-class bootstrap, maka kita dapat merancang form yang lebih dinamis. Contohnya ketika membuat validasi inputan maupun kontrol, kita dapat sisipkan keterangan maupun icon tertentu. Cara penggunaan classnya bisa di lihat pada kode berikut
class btn-lg untuk membuat button ukuran besar, btn-md untuk membuat button ukuran sedang, btn-sm untuk membuat button ukuran kecil dan class btn-xs untuk membuat button ukuran mini.
Bootstrap menyediakan class untuk pengaturan gambar sehingga kita dapat dengan mudah menampilkan gambar dengan bentuk rounded, circle dan thumbnail maupun responsif mengikuti resolusi layar pengguna.
Alert biasa digunakan ketika kita selesai menjalankan sebuah proses pada form. Sebagai contoh, kita sedang melakukan penginputan data kemudian setelah menekan tombol simpan maka akan dikeluarkan alert berupa pesan bahwa data berhasil di simpan ataupun bisa saja pesan yang memberitahukan penyimpanan gagal.
Bootstrap sudah tersedia class khusus untuk menampilkan alert. Penggunaanya cukup mudah, kita cukup memanggil class alert kemudian menambahkan jenis class alert yang ingin digunakan.
Cara memanggil glyphicon yaitu <'span class="glyphicon jenis-glyphicon">. Jadi pertama harus kita panggil terlebih dahulu class glyphicon kemudian disertai jenis glyphicon.
glyphicon glyphicon-heart
glyphicon glyphicon-music
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-send
glyphicon glyphicon-off
glyphicon glyphicon-ok
Untuk membuat panel, terlebih dahulu harus diberikan class panel dan class jenis panelnya. Struktur panel dimulai dari class panel beserta jenis panelnya, kemudian class heading-panel, class body-panel dan class footer-panel.
Content Panel
Content Panel
Untuk membuat list, bootstrap juga menyediakan class yang dapat kita gunakan, baik itu hanya sekedar list tanpa link, terdapat link, mengubah warna list maupun list yang di sertakan keterangan singkat. Semua class Css tersebut sudah siap saji. 🙂 List yang disertai icon juga memungkinkan dengan bootstrap
Selain menggunakan Navbar, Pills dan Tabs dapat dijadikan alterlatif lain dalam membuat navigasi menu website. Pills dan Tabs dapat juga digunakan pada content website sehingga content langsung di tampilkan berdasarkan kategori dalam bentuk tab.
Saya Adalah Konten Bootstrap Pada Menu Tabs
Saya Adalah Konten PHP Pada Menu Tabs
Saya Adalah Konten VB.Net Pada Menu Tabs
Saya Adalah Konten Bootstrap Pada Menu Pills
Saya Adalah Konten PHP Pada Menu Pills
Saya Adalah Konten VB.Net Pada Menu Pills
Jumbotron umumnya ditempatkan pada halaman utama website. Content (isi) pada jumbotron khusus di design berbeda; berbeda dari segi bentuk, ukuran font, warna background karena memang fungsinya untuk menonjolkan sebuah informasi sehingga menarik perhatian pengunjung.