1. Siapkan
folder bootstrap di komputer anda, jika belum ada silakan download disini. Jika sudah ada buka folder tersebut.
2. Aktifkan Xampp atau AppServ yang sudah
terinstall di komputer anda.
3. Buat folder baru di Xampp-htdocs
dengan nama Online_shop. Copy kan folder zip bootstrap-4.0.0-dist ke dalam
folder Online_shop, lalu Extract folder tersebut.
4. Setelah di Extract hapus folder zip bootstrap-4.0.0-dist,
lalu copy kan kembali file jquery yang ada difolder bootstrap ke folder Online_shop
dan simpan difolder js.
5. Siapkan text editor anda, disini saya
menggunakan Sublime. Kemudian, buat halaman baru dan beri nama index.php. Ketikkan
koding dibawah ini dan simpan dibawah <title>..</title>
6. Disini saya menggunakan bootstrap
versi offline, maka klik foldernya lalu buka salah satu file html di browser
anda.
7. Setelah terbuka, scroll ke bawah pada
menu Components dan pilih navbar untuk tampilan menu diatas. Anda bisa
menambahkan menu apa saja di halaman web anda.
8. Setelah itu, ketikkan source kode ini
untuk menu navbar.
9. Maka tampilannya akan seperti ini.
10. Kemudian ketikkan lagi source kode
untuk Jumbotron.
11. Dan tampilannya akan seperti ini.
12. Setelah itu, untuk menambahkan gambar beserta
keteragannya klik menu card pada bootstrap lalu ketikkan source kode nya.
13. Simpan gambar yag akan ditambahkan ke
dalam folder Online_shop di htdocs.
14. Tampilannya akan seperti ini.
15. Dan ini adalah tampilan akhirnya.
Sekian dan terimakasih.. Selamat mencoba, tunggu postingan saya selanjutnya yaa :)
Komentar
Posting Komentar