Part 5 Content - BAGAIMANA CARA MEMBUAT TEMPLATE BOOTSTRAP 4 SENDIRI

Assalaikum wr wb

Apa kabar teman sekalian, kali ini kita akan membahas tentang bagaimana cara membuat NavBar menggunakan Bootstrap 4 yang telah disediakan. Seperti yang kalian ketahui bahwa Bootstrap 4 menyediakan beberapa fitur css yang sudah ada dan juga responsive pada smartphone, jadi kita mudah dalam pembuatan template website.

Kali ini saya akan bahas tentang cara membuat konten menggunakan bootstrap 4, begitu banyak hal yang harus diperhatikan dalam pembuatan konten pada tutorial ini, perhatikan pembukaan atribut dan juga penutupnya contohnya seperti ini, <div class="Content"> ini adalah satu pembuka dalam sebuah struktur css <div> adalah penanda bahwa itu adalah awal dari  pembukaan dalam css, sedang kan tag </div> adalah menandakan bahwa itu adalah batas css yang dibuat sedang diluar tersebut berbeda css yang ada.

Hal-hal tersebut harus kita perhatikan karena itu jika tidak diperhatikan maka akan terjadi ketidak sesuaian struktur css atau tata letak template yang akan dibuat. Lihat gambar dibawah ini adalah contoh konten yang saya buat.

Versi Full

Versi Mobile

Ok langsung saja kita masuk kepembahasan tentang Bagaimana cara membuat Content menggunakan bootstrap 4. Liat langkah dibawah ini bagaimana cara Bagaimana cara membuat Content menggunakan bootrtrap 4.

1. Pertama seperti tutorial sebelumnya Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap kalian harus menyiapkan bahannya. Bagi teman yang belum mengikuti langkah awal silakan klik artikel ini Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap.
2. Langkah kedua anda kita masukan koding content dibawah tag penutup </div> ASIDE KIRI atau bisa dilihat gambar dibawah ada tulisan <!-- Penutup Side Kiri --> kemarin letakan dibawahnya seperti contoh koding dibawah ini.
3. Lalu simpan dengan didalam folder yang sudah dibuat pada tutotial yang sebelumnya Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap dengan format namafile.html, setelah itu coba jalankan.

Beberapa koding untuk membuat Aside yang akan saya jelaskan fungsinya.

Seperti yang terlihat diatas saya akan menjelaskan beberapa koding yang utama dalam pembuatan konten menggunakan bootstrap 4, yang pertama adalah tag <div class="container-fluid text-center">, koding ini adalah yang pertama, container-fluid itu adalah sebuat struktur konten yang mewakili batas paging dll dalam css untuk memberi batas antara struktur yang lain. Bisa dilihat gambar ini. Ini adalah bagian kontent.

Dari gambar diatas bisa terlihat posisi content dikiri dan juga tulisan content tengah, kenapa tulisan kontent disebut ketengah, itu karena menggunakan class bootstrap 4 yaitu tag text-aligin maka posisi tulisan akan menjadi ketengah, kawan-kawan pasti bertanya bagaimana cara membedakan aside strukturnya yang ada coba lihat gambar ini.

Dari penjelasan yang ada diatas bisa kita lihat bahwa itu adalah struktuk CONTENT yang di kiri. Bagaimana teman-teman bisa mengerti, kemudian bisa kita kita lihat class col-sm-2 sidenav, tag ini berfungsi membuat tampilan akan menjadi responsive ketika dibuka pada smartphone. Tag class col-sm-2 artinya bagian layout berukuran small-2 pada ukuran pixel  tertentu maka ia akan menjadi responsive pada smartphone, kemudian sidenav jika diperhatikan warna pada konten abu-abu itu karena ada koding class sidenav, tag bootstrap 4 membuatnya menjadi ke abu-abuan.

Seperti yang sudah saya jelaskan mungkin kawan-kawan bisa mengerti, yah mungkin saya tidak bisa menjelaskan keseluruhan koding yang ada karena terlalu banyak. Mungkin saya akan menbuat kembali artikel dan menjelaskan satu persatu pada kesempatan yang akan datang.

Dan jika kalian ingin melihat kodingnya seperti apa, lihat web ini klik link ini. Jika kawan-kawan mau mendownload lengkap coding silakan download yang sudah saya sediakan klik disini.

Ada pun kawan kurang memahami bisa download full koding yang sudah saya sediakan klik disini.

Jika kawan-kawan kurang jelas silakan tonton video ini.

Itulah pemaparan yang saya buat jika ada kata-kata yang salah saya mohon maaf saya akhiri, wasalamulaikum wr wb.