Setelah pada artikel sebelumnya kita membahas mengenai membuat form dasar menggunakan bootstrap, maka langkah selanjutnya kita akan membuat form horizonal menggunakan Bootstrap. Source code utama membuat form horizontal menggunakan Bootstrap adalah sebegai berikut: <form class=”form-horizontal”> <div class=”form-group”>
Form dasar dengan Bootstrap
Dalam website kita mungkin menyediakan form untuk menghubungi kita. Dalam aplikasi, form juga sangat penting untuk memasukkan data proses atau data transaksi. Saat ini kita akan membuat tampilan form menggunakan Bootstrap. Source code utama tampilan form dalam Bootstrap pada artikel
Mengarahkan tindakan dengan Bootstrap
Dalam melakukan informasi iklan atau penawaran terbatas, kita mungkin ingin menyampaikan kepada pengunjung website untuk mengambil suatu tindakan misalnya segera melakukan pembelian. Kita dapat membuat tampilan seperti itu pada Bootstrap dengan source utama seperti berikut ini: <h3>Diskon terbatas hanya
Menonjolkan paragraf dengan Bootstrap
Dalam memberikan penjelasan melalui tulisan, kita mungkin ingin menonjolkan paragraf-paragraf tertentu untuk menunjukkan nilai pentingnya. Dalam Bootstrap kita dapat menonjolkan suatu paragraf tertentu menggunakan class well. Source code utama menonjolkan suatu paragraf ini adalah : <div class=”well”>
Link dengan tampilan button menggunakan bootstrap
Dalam membuat aplikasi kita mungkin menemukan adanya suatu form dengan button yang kalau diklik akan masuk ke suatu halaman tertentu. Ini terjadi misalnya pada form Submit dan Cancel, pada submit melakukan pemrosesan data sedangkan pada Cancel akan masuk ke halaman
Posisi halaman dengan Bootstrap
Dalam melakukan disain website, kita ingin membuat navigasi yang nyaman bagi pengunjungnya. Salah satu komponen penting adalah informasi posisi halaman yang sedang kita baca. Inilah yang disebut breadcrumbs. Misal kita ingin membuat sebuah informasi posisi halaman dan juga nama halamannya
Navigasi responsive dengan Bootstrap
Pada tutorial kali ini kita akan membuat sistem navigasi menu yang responsif dengan menggunakan Bootstrap. Tampilan navigasi menu akan tampil dengan baik pada Mobile maupun Desktop. Kita akan merancang dengan tampilan: Tampilan MobileUntuk tampilan di atas coding utamanya adalah:
Navigasi yang mudah pada Bootstrap
Navigasi website merupakan komponen penting dalam website yang kita kembangkan. Navigasi berfungsi mengarahkan pengunjung website untuk mendapatkan informasi-informasi yang dibutuhkan. Dengan menggunakan framework Bootstrap, kita dengan mudah membuat navigasi pada website.Sebagai contoh kita membuat coding seperti ini: <ul class=”nav
Thumbnail advance menggunakan Bootstrap
Pada artikel sebelumnya kita telah membuat thumbnail dasar menggunakan Bootstrap. Pada artikel kali ini kita akan membuat thumbnail yang lebih advance. Thumbnail adavance kali ini akan dilengkapi dengan judul (captain) dan juga penjelasan singkat. Tampilan yang dihasilkan adalah seperti gambar
Membuat thumbnail dengan Bootstrap
Dengan menggunakan Bootstrap kita mudah membuat tampilan thumbnail. Misalnya kita ingin membuat tampilan seperti ini: Source utama adalah: <div class=”row”> <div class=”col-xs-3″> <a href=”#” class=”thumbnail”> <img src=”./images/g01.jpg”/>