Cara Memahami Grid Layout Bootstrap 4 Part 2 - Tutorial Programming & Digital Marketing

Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Tuesday, February 26, 2019

Home bootstrap 4 Cara Memahami Grid Layout Bootstrap 4 Part 2

Cara Memahami Grid Layout Bootstrap 4 Part 2


bewoksatukosong.com | Oke sekarang sudah part 2 (wih ga terasa ya), netizen say "apaan orang baru juga part 2". sabar sabar jangan ngegas dong 😁😁

Untuk memahami layout bootstrap 4 kita harus mempelajari dahulu bahwa bootstrap ini mempunyai 12 grid. artinya apa tuh ?. jadi dari ujung ke ujung kita mempunyai 12 grid. mari om bewok kasih contohnya

Kalian copy aja folder yang di tutorial pertama cara install bootstrap, terus tinggal rename namanya seperti gambar dibawah ini

Gambar 1. Buat Folder Baru Copy Dari Part 1 
Oke Case-Nya misalnya kita akan membuat 3 kolom menggunakan grid bootstrap. inget ga tulisan diatas sebelumnya agar dari ujung ke ujung grid-Nya 12. berarti kalau untuk di bagi 3 kolom tinggal menggunakan grid 4 + grid 4 + grid 4 = 12. maka kita menggunakan col-md-4

col = column
md = medium devices
4   = jumlah grid-Nya

Oke kita coba aja ya biar ga bingung

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Grid Bootstrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      .row {
        border: 4px solid aqua;
        color: #000;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <!-- Example row of columns -->
      <div class="row p-3">
        <div class="col-md-4">
            <p class="text-center">Ini adalah col md 4 </p>
        </div>
        <div class="col-md-4">
            <p class="text-center">Ini adalah col md 4 </p>
        </div>
        <div class="col-md-4">
            <p class="text-center">Ini adalah col md 4 </p>
        </div>
      </div>
      <hr>
    </div> <!-- /container -->

   
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

Maka tampilan-Nya akan seperti ini
Gambar 2. Tampilan 3 column
Kita bedah satu persatu ya
<div class="col-md-4">
<div class="col-md-4">
<div class="col-md-4">
Artinya ini yang dibilang grid nya 4, nah kan ada 3 class jika di jumlahkan 4 + 4 + 4 = 12, oleh karena itu berhasil menjadi 3 column.

 Masih bingung ? Oke kita buat contoh lagi.
Kali ini kita akan membuat 4 column. inget ya dari ujung ke ujung berjumlah 12 gridnya. berarti untuk membuat 4 column. tinggal bagi aja 12 / 4 = 3. artinya kita buat seperti ini
<div class="col-md-3">
<div class="col-md-3">
<div class="col-md-3">
<div class="col-md-3">
Kodingan full-Nya seperti dibawah ini ya

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Grid Bootstrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      .row {
        border: 4px solid aqua;
        color: #000;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <!-- Example row of columns -->
      <div class="row p-3">
        <div class="col-md-3">
            <p class="text-center">Ini adalah col md 3 </p>
        </div>
        <div class="col-md-3">
            <p class="text-center">Ini adalah col md 3 </p>
        </div>
        <div class="col-md-3">
            <p class="text-center">Ini adalah col md 3 </p>
        </div>
        <div class="col-md-3">
            <p class="text-center">Ini adalah col md 3 </p>
        </div>
      </div>
      <hr>
    </div> <!-- /container -->

   
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>
Maka hasil-Nya seperti gambar dibawah ini
Gambar 3. Membuat 4 Column
Kita berhasil membuat 4 column.

 Kalian bisa bereksperimen sendiri - sendiri kita memahami-Nya lebih dalam. kamu bisa mengubah nomor - nomor yang kaian suka misalnya
<div class="col-md-4">
<div class="col-md-5">
<div class="col-md-3">
Kalian bisa coba sendiri seperti diatas, apa yang terjadi jika kalian membuat seperti itu.

 kalau hasil kreasi om bewok seperti di bawah ini. kalian tulis kodingan-nya dibawah ini ya karena bakalan ada lanjutanya terus sampai membuat website. jadi ini di sebut learning by doing 😁😁 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Grid Bootstrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      .row {
        background: #2980b9;
        color: #fff;
      }

      h2  {
        font-family: 'Times New Roman', Times, serif;
      }
      .btn {
        border: 1px solid #fff;
      }
      

    </style>
  </head>
  <body>
    <div class="container-fluid">
      <!-- Example row of columns -->
      <div class="row p-3">
        <div class="col-md-4">
          <h2>Cara Install Bootstrap 4 Part 1</h2>
          <p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering digunakan oleh para developer. Ada 2 cara untuk install boostrap 4. 
              Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p> 
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Cara Menambahkan Emoji</h2>
          <p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan       emoji. om bewok tidak tau apakah ini resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
              tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
               </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Cara Install Codeigniter 2018</h2>
          <p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
          Kamu kunjugi website https://www.codeigniter.com/download.</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>
      <hr>
    </div> <!-- /container -->

   
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

Maka hasil-Nya akan seperti dibawah ini
Gambar 4. Hasil 
Itu saja Tutorial mengenai Layout Grid Bootstrap 4. 

 Tutorial selanjutnya mengenai

 Kalau kalian ingin melihat daftar Tutorial Bootstrap bisa lihat dibawah ini
Daftar Belajar Bootstrap 4
Download Source Kode Github
Tags
Share This
By di
Label:

2 comments:

  1. AnonymousJuly 15, 2019 at 12:44 PM

    source kode di github, tidak bisa di download..

    ReplyDelete
    Replies
    1. bewoksatukosongJuly 19, 2019 at 7:52 PM

      bisa kok
      kamu ke sini dulu
      https://github.com/geraldprambudi/Belajar-Bootstrap-4

      terus ada button hijau tulisan nya Clone or Download. Selamat mencoba

      Delete

Subscribe to: Post Comments (Atom)