implementasi Dari Bootstrap

 

 
 
 
 
 
 
 
Setelah kita membuat mock up dan juga wireframe kemaren, sekarang kita akan meng implementasi bootstrap kedalam web, di dalam post sebelumnya aku telah menjelaskan ap aitu bootstrap dan kegunaan-kegunaanya, disini aku akan menjelaskan cara pemakaiannya.
1. Navigation Bar
      Navigation Bar, terletak di atas dari halaman web yang fungsinya untuk mempermudah perpindahan dari satu halaman pokok ke halaman lainnya. Halaman pokok yang dimaksud adalah halaman home, about me, kategori dsb. Dengan diberinya navbar maka akan meningkatkan nilai UI dan UX website kamu nantinya. Navbar dapat ditemukan pada kolom komponen, yaitu pada table navbar, disana terdapat berbagai macam navbar yang dapat kita pilih.
2. Badge (Logo)
      Komponen ini juga penting, karena jika website kamu memiliki logo maka website kamu akan diingat oleh pengunjungnya. Apalagi jika desain logomu itu yang menarik dan tidak berlebihan. Badge juga dapat ditemukan pada area component.
3. Dropdown
      Dropdown ini sebenarnya bagian dari navbar. Jadi jika ada 10 menu navigasi di navbar kamu tentu akan sangat penuh kelihatannya. Untuk mengatasinya, beberapa komponen yang sejenis dapat dijadikan satu navigasi kategori misalnya. Dengan dropdown kamu dapat membuat menu-menu sejenis menjadi turunan dari satu komponen induk.
4. Jumbotron
      Jumbotron ini merupakan komponen yang bisa dijadikan tampilan header ataupun tampilan body. Dalam jumbotron yang disediakan bootstrap ada 2 varian, jumbotron biasa yang dengan tombol dan jumbotron-fluid yang tidak ada button.
5. Carousel
      Nah, carousel ini mirip seperti jumbotron tapi ada perbedaan mendasarnya. Apa itu? letak perbedaannya adalah pada jika pada jumbotron kita hanya dapat memasukkan 1 gambar, nah dengan carousel dapat lebih dari 1 gambar yang nantinya gambar-gambar tersebut akan ter-slide otomatis.
6. Modal (Pop-up)
      Pop-up ini diperlukan jika kamu hanya ingin menampilkan suatu konten yang sifatnya tanpa perlu berganti halaman. Jadi saat dibuka maka akan muncul tampilan baru yang menimpa tampilan sebelumnya secara sementara sampai tampilan tersebut ditutup kembali.
7. Buttons
      Button merupakan salah satu komponen bootstrap komponen yang harus ada, karena jika website kamu tidak memiliki 1 button pun artinya website kamu tidak memiliki respon timbal balik terhadap pengunjung.
8. Scrollspy
      Scrollspy ini berguna jika tampilan web kamu tergolong yang dalam 1 halaman memanjang. Kenapa demikian? karena scrollspy fungsinya untuk memberi tau pengunjung bahwa di navbar bagian mana ia berada. Ini akan meningkatkan UX untuk website kamu.
9. Forms
      Jangan sepele dengan komponen satu ini, karena dengan menyediakan form artinya kita menyediakan tempat untuk bertanya atau tempat pengunjung untuk berinteraksi dengan website kita.
10. Pagination
      Nah, komponen satu ini berguna untuk memberi penomoran jika halaman website kamu mengandung banyak konten atau banyak halaman. Pagination juga banyak tersedia di website-website di internet, disana biasannya telah disertakan html dan juga cssnya, sehingga kita hanya perlu mengcopy paste saja.
baca juga komponen bootstrap disini
Terimakasih sudah membaca implementasi bootstrap.

 

Baca Juga:  Bangga Menjadi Mahasiswa S1 TI UNRI 2018

Leave a Reply

Your email address will not be published. Required fields are marked *