Setelah pada tutorial sebelumnya STEP#2 Membuat Rancangan Layout Bootstrap langkah selanjutnya kita akan memilih template yang pas/cocok dengan rancangan layout kita. Twitter bootstrap sendiri menyediakan template beragam jenisnya antara lain: starter template, Bootstrap template, Grids, Jumbotron, Narrow Jumbotron, Navbar, Static Top Navbar, Carousel, blog dll.
Untuk dapat menggunakan template tersebut, keahlian copy paste menjadi hal penting pada bagian ini. Berikut langkah-langkahnya:
- Kunjungi getbootstrap.com/getting-started/. Lakukan Scroll kebawah atau CTRL F untuk mencari Using the framework. Ada beberapa list template.
- Pilih salah satu template yang diinginkan. Untuk tutorial kali ini aku menggunakan versi Carousel Template.
Sampel Template Bootstrap - Kilik pada gambar diatas tulisan Carousel Template untuk preview template.
- Setelah tampil, klik kanan mouse, kemudian pilih View Page Source
- Copy seluruh script ke notepad, simpan dengan nama index.html. Simpan index.html dalam satu folder di drive yang kita punya misal drive E.
Kita akan berinama folder tersebut myweb.
Penyimpanan file index dalam satu folder - Kita coba melakukan running file index.html pada browser. Dapat dilihat hasilnya masih berantakan tidak sama seperti yang terdapat pada web bootstrap. Mengapa demikian? Hal ini terjadi karena kita belum menyertakan beberapa file css maupun javascript pada folder tersebut.
- Kembali ke halaman view page source Lakukan copy satu persatu file css maupun javascript yang ada dengan cara klik link berwarna biru. setelah terbuka select all script kemudian copy tempatkan di notepad kemudian simpan di folder yang sama (myweb). di folder my web buatlah satu folder baru dengan nama CSS, simpan file tadi dalam folder CSS dengan nama bootstrap.min.css. Lakukan hal yang sama dengan file lain, untuk ketentuan penamaan file nya silakan ambil baris kata setelah tanda slash (/) terakhir. Untuk file yang berekstensi *.js buatlah folder dengan nama JS simpan di folder tersebut
<!-- Bootstrap core CSS --> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
- Sehingga dalam folder myweb dapat dirinci terdapat satu file index.html dan 2 folder yaitu folder CSS dan folder JS.
Folder Isi file CSS bootstrap.min.css,ie10-viewport-bug-workaround.css, carousel.css JS ie-emulation-modes-warning.js, jquery.min.js, bootstrap.min.js, holder.min.js, ie10-viewport-bug-workaround.js - Setelah file css maupun javascript kita sertakan dalam folder, saatnya kita memanggil file -file tersebut. caranya
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
ganti dengan <link href="css/bootstrap.min.css" rel="stylesheet">
artinya link pada folder css pada file bootstrap.min.css
lakukan hal yang sama dengan file-file lain.
- Lakukan uji coba dengan merunning file index.html. dan sampai dengan saat ini template sudah bisa dipakai tinggal kita melakukan beberapa modifikasi agar web yang kita bangun tampak lebih dinamis.
Tutorial sebelumnya STEP#2 Membuat Rancangan Layout Bootstrap
0 Comments