Senin, 27 Februari 2017

Mengenal Bootstrap Grid

Assalamualaikum Wr.Wb

Oke teman - teman kali ini saya ingin mengajak teman semua untuk mengenal bootstrap grid,apa itu? Bootstrap Grid yaitu ukuran untuk mengatur besar kecl bagian elemet pada tampilan web yang ingin kita buat,selain itu juga bisa mempermudah kita untuk membuat tampilan layout sebuah web dan bisa untuk mengatur keresponsivan tampilan web yang kita buat.Ada 4 jenis grid pada bootstrap yaitu:
  • col-lg
Di gunakan untuk mengatur grid pada layar monitor komputer yang berkuran besar.
  • col-md
Di gunakan untuk mengatur grid pada layar monitor komputer yang berukuran medium.
  • col-sm
Di gunakan untuk mengatur grid pada layar tablet.
  • col-xs
Di gunakan untuk mengatur grid pada layar handphone.

Selain itu ada 12 size grid pada bootstrap,di mulai dari size 1 yaitu paling kecil 
sampai 12 merupakan size paling lebar.Mari kita coba untuk lebih jelasnya,kali ini saya akan menggunakan grid col-sm dengan size 1,2,3,4,dan 12.

Tuliskan tag di bawah ini,oh ya ini sudah saya tambahkan style css agar lebih jelas tampilannya antara element yang satu dengan yang lain

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
      div{
          background-color: #0066ff;
          color: white;
          border: 1px solid #fff;
          text-align: center;
          padding: 10px;
      }
  </style>
</head>
<body>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>

<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>

<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>

<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>


<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>

<div class="col-md-12">col-md-12</div>
</body>
</html>
Bila kurang jelas silakan lihat ss coding di bawah
 
Dan inilah hasilnya
 

Ya mungkin sekian dulu postingan kali ini semoga bermanfaat sampai jumpa dipostingan berikutnya terimakasih sudah mau berkunjung.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Share:

0 komentar:

Posting Komentar