Membuat Website dengan Bootstrap 4
Halllo apa kabar ? Artikel kedua saya. Dirasa rasa asik juga bikin tulisan tulisan seperti ini. Jadi sambil belajar saya juga bisa sambil sharing. Yuk langsung aja sekarang kita akan belajar gimana cara membuat website dengan Bootstrap.
BOOTSTRAP
Apa itu bootstrap ? Bootsrap itu Library framework CSS yang di buat untuk mempermudah kita dalam pembuatan website. Dalam hal ini kita kaya di bantuin gitu pas membuat website. jadi kita ga perlu repot repot ngoding css atau javascript untuk menampilkan sesuatu.
Okey hal pertama buka dulu website bootsrapnya https://getbootstrap.com/. Kita Download bootsrapnya dulu. Sebenernya ada cara lain untuk menggunakan bootsrap tanpa download tapi dalam artikel ini saya pakai yang download saja biar mudah di mengerti. Dalam tutorial ini saya menggunakan bootsrap versi 4.5.3. Dan pentingnya dalam pemakaian bootstrap kita harus sambil melihat documentation ( https://getbootstrap.com/docs/4.5/getting-started/introduction/ ) yg ada di websitenya. Cuma kalo udah terbiasa pakai sih kayanya gausah :D.
Setelah di download Copy paste semua folder yg ada di dalamnya ke dalam folder website kita. Dan jangan lupa persiapkan di dalamnya file index.html dan style.css . Lho katanya kita di bantuin CSSnya sama bootstrap kenapa masih buat file Css lagi ?. Tujuannya biar nanti kalo ada penyesuaian kita bisa overriding lewat file Css punya kita.
Wait sebelum memulai untuk lebih mudahnya kita gunakan desain yg sama dengan artikel sebelumnya ya. biar kita bisa tahu kemudahan apa yang kita dapatkan di saat pakai bootstrap.
KERANGKA HTML
Sebelum memulai kita sambungkan terlebih dahulu ya file Html kita dengan CSS bootsrap. Lihat pada line 9, cara untuk menghubungkannya sama dengan css biasa.
Dan satu lagi jangan lupa untuk copy paste bundle untuk JS nya ya.
NAVBAR
Ada banyak pilihan NAVBAR yg ditawarkan bootsrap kita tinggal search aja di kolom pencarian di pojok kiri atas. Nanti apapun yg kita butuhkan muncul. Nah tampaknya kita dapet nih yg kita butuhin. Setelah dapat langsung copy paste saja codenya ke dalam file html kita. Seperti biasa semua yg ada kita bungkus dulu ya ke dalam container.
Tapi jangan senang dulu yaa ada beberapa bagian dalam code nya yg harus kita modifikasi sesuai yg kita inginkan.
Pada Area yg saya beri Comment itu yg di hapus dan ada beberapa part yg di ganti seperti Nama link pada nav-link. Saya ganti sesuai dengan kebutuhan kita.
Waah tapi belom ditengah nih masih di pinggir. Nah ada solusinya menggunakan Justify-content. Kita searching lagi. Cara penggunaannya kita bungkus code kita dari line 15 sampai 39 menggunakan <div class="d-flex justify-content-around">...</div>
HERO IMAGE
Disini kita akan memuncul kan gambar penuh menutupi lebar dari website yg biasa di sebut hero image. Nah untuk di kerangka htmlnya kita hanya menuliskan <div> beserta classnya saja. untuk lebih lanjutnya nanti di css kita aturnya.
ARTICLE
Lakuan juga hal yang sama pada Article. Didalam article kita punya Judul yang kita bungkus dengan <h1> dan paragraf dengan <p>.
PORTFOLIO
Dalam Portfolio kita punya 4 gambar sejajar. kita bungkus dengan <div> dan tiap masing masing gambar di panggil dengan tag <img>.
Pastikan kita sudah menyiapkan foto sebelumnya dan di tempatkan di folder img. Saran saya gunakan penamaan yang mudah untuk di panggil seperti punya saya.
CONTACT US
Untuk contact us kita memerlukan form. Tinggal cari lagi. terus copy paste lalu edit sesuai kebutuhan kita.
dan coba buka file index.html kalian di browser.
wooow berantakan banget yaa.. :(
nah di sini kita beraksi menggunakan CSS. Guna dari CSS itu mempercantik tampilan dari html. jadi mereka saling melengkapi untul menjadi sempurna. :D
CSS
Buat memulai kita cari font dulu yu di https://fonts.google.com/ . Saya lagi tertarik pake “Montserrat”. Nah setelah pilih style apa saja yg kita mau ambil masuk kekolom sebelah kanan pilih “@import” dan copy yg ada di dalam tag <style>. Lalu paste di file css kalian.
Sebelum kita masuk kedalam bagian bagian htmlnya. Kita tetapkan dulu dasar stylenya dengan menggunakan *.
NAVBAR
Pada bagian navbar karena kita akan menganti warna biru dengan warna putih. tinggal kita panggil saja nav-link.
HERO IMAGE
Untuk di bagian Hero Image kita bisa panggil dengan background-image: url. Kita isi urlnya dengan lokasi tempat penyimpanannya. Tentukan tingginya dan setting background-size: cover agar mengisi secara keseluruhan.
ARTICLE
Untuk bagian Article disini kita akan sedikit merapihkan tulisannya agar lebih enak dilihat dengan menambahkan padding dan margin.
PORTFOLIO
Disini kita akan menyusun photo yg sudah di siapkan sejajar dan mengatur ukuran fotonya. Pertama kita tambah kan d-flex justify-content-around pada class di html kita.
Lalu tambahkan ukuran foto di dalam file css nya.
Selesaii deh.
Kesimpulan
Coba kita bandingkan dengan penulisan CSS sebelumnya dengan menggunakan Bootstrap.
Bisa dilihatkan perbedaannya ? lebih simple lebih cepat jika kita memakai library bootstrap tinggal copy paste edit sedikit jadi deeh. Yang paling penting semua akan mudah jika kita mempersiapkan desainnya terlebih dahulu. oi satu lagi. kalo kita menggunakan bootstrap website kita otomatis responsive lho. Jadi kita ga usah ada tambahan code dari mediaquery. Selesai deh website sederhananya. Kalian bisa memodifikasi sesuai selera kalian. Secara tidak sadar kita sudah banyak menggunakan tag tag html dan css. So jangan cepat menyerah untuk belajar ya. mohon maaf atas kekurangan dalam penyampaiannya. Terima kasih !!
Source Code dapat di clone di akun gitlab saya ya.