Sebagai permulaan bagi teman-teman yang belum tahu. Bootstrap itu adalah framework frontend yang sangat populer saat ini. Bootstrap Menyediakan berbagai tampilan untuk memudahkan kita dalam pengembangan aplikasi web yang responsive. Show Saat ini, sudah banyak sekali template-template website yang sudah terintegrasi dengan bootstrap, dari yang gratis hingga yang berbayar. Sebagai rujukan teman-teman bisa klik tautan ini untuk melihat berbagai template bootstrap https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/ atau https://www.creative-tim.com/bootstrap-themes/free ada banyak model template yang bisa kita gunakan. Dan template-template ini biasanya menyediakan fitur yang sangat lengkap, dari mulai tampilan dashboardnya, tombolnya, formnya, tabelnya dan komponen-komponen lainnya biasa sudah tersedia untuk langsung kita gunakan. Bagaimana Cara Mengintegrasikan Template Bootstrap di LocalhostCara ini bisa kita terapkan hampir di semua template website yang menggunakan html, css, javascript dan Php. jadi teman-teman jangan bingung. cara ini bisa kita gunakan untuk memasang template-template lainnya. Pada tutorial kali ini saya akan mengintegrasikan template admin-LTE ke project localhost kita. Teman-teman bisa download terlebih dahulu templatenya disini "download". Sebelum kita mulai saya asumsikan teman-teman sudah menginstall xampp terlebih dahulu di komputernya masing-masing.
Dan untuk diperhatikan, saat kita menjalankan localhost/namafolder di browser, maka program akan otomatis mencari file index, jadi pastikan file index teman-teman ada dan tersimpan di dalam project yang kita buat, karena jika tidak maka tampilannya akan seperti gambar di bawah ini. Di tutorial-tutorial selanjutnya, insyaAllah saya akan membuat aplikasi webnya secara bertahap dengan template yang sudah kita implementasikan pada tutorial kali ini. Sekian tutorial Cara Pasang Template Bootstrap di Localhost Server Cepat dan Mudah. Dan mudah-mudahan tulisan saya ini membantu teman-teman sekalian. Ada pertanyaan, kritik, dan saran bisa disampaikan di kolom komentar di bawah ini. Happy Coding !!!. 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 ?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.
Bagaimana cara melakukan instalasi bootstrap?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.. Model form bootstrap dimana posisi label dan input form terletak dalam bentuk baris dinamakan?form dengan model inline adalah sebuah form yang label dan form inputnya terletak sebaris.
Apa itu Bootstrap dan CSS?Bootstrap merupakan salah satu jenis framework untuk CSS (Cascading Style Sheet) yang digunakan untuk perancangan situs website. Pengunaan bootstrap sangatlah membantu progammer dalam membangun tampilan sebuah website. Hal tersebut tertulis di buku Bootstrap: Responsive Web Development karangan Jake Spurlock.
|