bewoksatukosong.com | Halo semuanya balik lagi dengan om bewok, kali ini Tutorial Terakhir Mengenai Belajar Bootstrap, Yaitu Final Cara Membuat Template Bootstrap 4, sebenarnya sudah kita buat dari part 1 sampai part 9, nah di part terakhir ini, om bewok akan menggabungkan tutorial yang pembuatan template tersebut, ga ngerti ya ? Show Jadi di tutorial dari part 1 sampai part 9, om bewok sedikit demi sedikit membuat template, pasti ada di bagian bawahnya, nah tapi terpisah semua di part 1 - part 9, nah kali ini kita satuin semua, nah penasaran kan hasilnya jadi seperti apa, hehe. Masih ga ngerti ya, kalian bisa check dulu DAFTAR TUTORIAL BOOTSTRAP 4. Intinya kita mau belajar buat template yang sebelumnya kita sudah buat di part - part tersebut. Seperti Tutorial sebelumnya kita buat folder terlebih dahulu dengan nama Part 10 Final Belajar Membuat Template Bootstrap 4 Lalu buat file dengan nama index.html Seperti biasa kita buat folder css lalu buat file bernama style.css dan membuat folder img, kalau kamu bingung bisa check di github om bewok, untuk menyamai-Nya. Mari kita ngoding sedikit demi sedikit untuk index.html Pertama - tama kita buat html dan buat include css bootstrap, font awesome ,include css kita yang berada di folder css/style.css dan jangan lupa untuk include js-Nya juga ya. kalian bisa copy aja dari github om bewok atau copy dibawah ini Let's code Kalau kalian lihat tidak ada hasilnya, ya memang tidak ada. hehehePertama kita akan membuatkan navigation bar seperti dibawah ini yang dimaksud navbar Gambar 2. Navbar Bootstrap 4Kodingan-Nya seperti dibawah ini ya (inget! di dalam <body>di sini</body>
Perhatikan ! Pada bagian navbar ada button sign up dan login agar ketika diklik muncul popup. Gambar 3. Popup Login Gambar 4. Popup Signup kita tambahkan pada index.html sebelum </body> Selanjutnya kita akan membuat jumbotron yang didalamnya fitur pencarian artikelGambar 5. Jumbotron fitur pencarian artikelKodingan-Nya seperti dibawah ini ya (dibawah setelah </navbar>.
Oke selanjutnya kita akan menampilkan 3 kategori DAFTAR TUTORIAL BOOTSTRAP 4 Penampilan 3 kategori yang kita buat seperti dibawah ini ya. Selanjutnya kita akan menampilkan artikel static yaKita menampilkan 6 artikel dengan cara yang mirip sama menampilkan categories, bedanya om bewok menambahkan gambar juga. Gambar 7. Menampilkan ArtikelKodingan-Nya seperti dibawah ini ya
Selanjutnya kita membuatkan sebuah fitur Top author, kita menampilkan-Nya seperti dibawah ini ya dan tidak lupa kita menambahkan social media-Nya dengan mengunakan ul-list-item. Kodingan-Nya seperti dibawah ini ya
Selanjutnya kita membuatkan sebuah form contact, ini digunakan jika ingin memberikan saran atau kritik kepada pemilik website tersebut. Gambar 9. Form ContactKodingan-Nya seperti dibawah ini ya
Terakhir kita tambahkan footer.
Full code-Nya seperti dibawah ini
jangan lupa kalian tambahkan css-Nya juga, ada di folder css/style.css Kodingan-Nya seperti dibawah ini ya 0Hasilnya seperti dibawah ini Gambar 10. Full Version Tampilan Website Bootstrap 4 DONETerimakasih sudah membaca tutorial series bootstrap 4 ini, semoga bisa bermanfaat bagi teman - teman, jangan lupa share like, comment dan subscribe haha. Senang sekali rasanya menyelesaikan Tutorial Bootstrap 4 ini. Kamu bisa download source kode nya dan melihatApakah Bootstrap termasuk template?Bootstrap merupakan framework CSS yang di dalamnya berisi template HTML, CSS, dan JavaScript yang untuk membuat sebuah website yang responsif dengan cepat dan mudah.
Apakah Bootstrap gratis?Bootstrap adalah framework front-end gratis yang cukup populer di kalangan developer saat ini, khususnya yang bekerja di bidang desain web. Framework ini mudah digunakan dan membantu developer bekerja lebih cepat tanpa harus menulis kode HTML, CSS, dan JavaScript secara manual.
Bagaimana menggunakan Bootstrap secara offline?Dan berikut cara menginstal Bootstrap secara Offline.. Download terlebih dahulu file bootstrap melalui laman resminya. ... . Selanjutnya bukalah teks editor Anda. ... . Kemudian klik menu File yang ada di bagian toolbar aplikasi Sublime. ... . Selanjutnya simpanlah file tersebut dengan cara klik menu File lalu pilih menu Save.. Apa itu file Bootstrap?Bootstrap merupakan framework HTML, CSS, Javascript populer untuk membangun situs web yang responsive. RWD (Responsive Web Design) adalah desain situs yang otomatis akan menyesuaikan diri agar tampil baik di semua perangkat dari ponsel sampai dekstop. Bootstrap terdiri dari satu set file css, javascript, dan jquery.
|