Home » css » bootstrap » Membuat tampilan form & tombol (button) cantik dengan bootstrap

Membuat tampilan form & tombol (button) cantik dengan bootstrap

Bootstrap adalah salah satu framework css yang sanagt populer saat ini. Salah satu alasannya adalah bootstrap cukup ringan da kompatibilitas dengan framework lain yang sangat mudah. Banyak website- website besar diangun menggunakan bootstrap. mari kita bahas sedikit komponen dalam bootstrap yaitu form & tombol (button).

Tampilan Sederhana

kita buat dulu skrip standar html untuk tampilan form seperti berikut ini:

Simpan dengan nama index.html, kemudian lihat hasilnya. beginilah hasil dari skrip html di atas:

form tombol bootstrap

Percantik dengan Bootstrap

Sisipkan inisialisasi bootstrap CDN pada bagian head. Dengan CDN artinya kamu harus online, kalau pengen yang offline download dulu bootstrapnya ya 🙂

Sisipkan insisialisasinya pada skrip dasar di atas seperti ini:

Kemudian hapus border dan ukuran tabel, tambahkan class “table” pada tabel kamu:

Langkah selanjutnya adalah mengubah tampilan form isian, caranya tambahkan class “form-control” pada textfield seperti ini:

Selanjutnya kita akan mengubah tampilan tombolnya. Caranya dengan menambahkan class “btn” pada objek button.

yapp setelah kita rombak tampilannya menjadi seperti di bawah ini:

form tombol bootstrap

eits, tapi tampilan form di atas masih memenuhi satu halaman dan rasanya kurang bagus kalau terlalu lebar. Caranya dengan membagi tata letak sesuai grid system pada bootstrap. Perhatikan gambar di bawah ini:

bootstrap grid system

Nah kalau ingin form kita berada di tengah, berarti kita susun menjadi col-md ( 3 – 6 – 3 ). Dan kita tambahkan skrip padding-top agar form yang kita buat tidak terlalu mepet ke atas.

Tambahkan tag div pada konten kita. susunannya seperti ini:

Maka kodenya menjadi:

dan tampilan akhirnya adalah:

form tombol bootstrap

Bagaimana, lebih cantik bukan? Tampilan tersebut masih bisa dikreasikan lebih lanjut agar semakin bagus misalnya dengan menambah background atau menambah navbar.

Silakan tinggalkan komentar sebagai apresiasi kepada penulis. Sampai jumpa di artikel selanjutnya. Terima kasih. 🙂

loading...

About admin

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *