TUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP

Transkripsi

1 TUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP Oleh : Nama : Badiah Setyowati Nim : Prodi : Teknik Informatika - Malam

2 Bootsnipp A. Pengertian Bootsnip Bootsnipp. Apa sih itu Bootsnipp? Untuk Web Developer yang sudah terbiasa dengan Bootstrap pasti sudah tak asing lagi dengan Bootsnipp. Tapi, untuk pemula seperti saya yang baru belajar soal Web, pasti penasaran kan apa itu Bootsnipp? Oke. Singkatnya, Bootsnipp itu kepanjangan dari Bootstrap Snippet. Artinya, Bootsnipp merupakan potongan-potongan skrip yang diselipkan ke dalam framework Bootstrap. Potongan-potongan itu atau lebih dikenal dengan Snippet, contohnya seperti login, tab, form, user interface, tooltip, table, dll. Terlalu banyak jika kita harus membahas semuanya di sini, karena itulah pada tutorial kali ini, saya hanya akan membahas mengenai Snippet Tab pada Bootstrap. Namun, sebelum itu, perlu diketahui bahwa Bootsnipp pertama kali dibuat oleh Maks Surguy pada September 2012 sebagai gudang potongan HTML yang digunakan untuk pengembang web menggunakan framework Bootstrap. Lalu, pada bulan Oktober 2013 Bootsnipp mulai dijadikan sebagai Bootstrap Playground dengan kemampuan yang lebih yang biasa dipakai untuk mempercantik tampilan Bootstrap. Nah, untuk mulai membuatnya, ada dua hal yang kita perlukan di antaranya adalah Bootstrap yang bisa didownload di dan Snippet tab Bootsnipp yang juga bisa didownload di Dalam link download tersebut, ada banyak variasi dari menu tab, jadi Anda bisa pilih mana yang Anda sukai. B. Langkah-langkah Pembuatan Begitu dua file itu sudah Anda download, maka langkah selanjutnya adalah membuat snippet tab agar bisa dimasukkan ke dalam Bootstrap. Berikut ini langkah-langkahnya : 1. Buat folder. Misal, Bootstrap lalu letakkan di Drive D: 2. Ekstrak Bootstrap yang sudah didownload dan letakkan di dalam folder yang sudah dibuat tadi.

3 3. Buka text editor. Contoh notepad Ketik kode html di bawah ini pada text editor. Sesuaikan dengan tempat file css berada Sesuaikan dengan tempat file css berada

4 Pada <! content--> dan <! end content-->, nantinya kode untuk nav tab diketikkan. 5. Pada bagian ganti dengan tempat file bootstrap.min.css berada. Misal kalau pada contoh itu ada di folder CSS maka linknya berupa css/bootstrap.min.css. Intinya sesuaikan dengan tempat file Anda berada. 6. Begitu pula dengan skrip dan skrip sesuaikan dengan letak file jquery.min.js, bootstrap.min.js dan tab.js berada. Seperti contoh ketiga file tersebut terletak pada folder js. 7. Kemudian antara komen <!--content--> dan <!--end content-->, sisipkan kode html seperti pada gambar di bawah ini.

5

6 Semua class css untuk tab dimasukkan ke dalam class container dan saya menggunakan <div>. 8. Save file dengan nama index.html pada folder yang sudah Anda buat. Contoh di folder dist. 9. Buka file bootstrap.min.css yang ada pada folder dist/js dengan text editor.

7 10. Ketikkan kode CSS seperti yang ada di bagian paling bawah pada file bootstrap.min.css 11. Save file bootstrap.min.css 12. Coba buka file index.html pada browser seperti mozilla firefox. Maka akan muncul tampilan seperti di bawah ini. C. Hasil Akhir Setelah selesai semua skrip ditulis, maka hasil akhirnya akan berupa seperti gambar di bawah ini.

8 Ketika klik salah satu menu seperti Content misalnya maka akan muncul menu dropdwonnya. Begitu pula dengan menu-menu lainnya. Sekilas tutorial dari saya mengenai Snippet Tab pada Bootstrap. Jika Anda kebingungan dalam mengetik skrip-skrip di atas, tenang Anda bisa mendownload file yang saya buat di atas di Selamat mencoba dan memodifikasi. Terima kasih, semoga bermanfaat dan sampai ketemu lagi di tutorial berikutnya.