Bootstrap menyediakan fasilitas layouting konten web dengan Sistem Grid, cara kerjanya mirip seperti penggunaan <table> pada html. Dengan menggunakan sistem grid pembuatan struktur konten jadi lebih rapih dan mudah. Nah, cara menggunakannya kita hanya perlu mengeset atribut class pada div yang berisi konten yang dikehendaki, ada class yang bernama “row” dan “col-x-xx”. Show Struktur dasarnya seperti ini : <!-- <table> --> <div class="container"> <!-- <tr> --> <div class="row"> <!-- <td> --> <div class="col-x-xx">Kolom 1 baris 1</div> <!-- </td> --> <!-- <td> --> <div class="col-x-xx">Kolom 2 baris 1</div> <!-- </td> --> </div> <!-- </tr> --> <!-- <tr> --> <div class="row"> <!-- <td> --> <div class="col-x-xx">Kolom 1 baris 2</div> <!-- </td> --> <!-- <td> --> <div class="col-x-xx">Kolom 2 baris 2</div> <!-- </td> --> </div> <!-- </tr> --> <!-- </table> --> </div> Mirip dengan penggunaan tabel kan ? Untuk bagian x dari col-x-xx diisi dengan atribut yang sudah disediakan oleh bootstrap berikut:
Dalam tutorial kali ini, coba kita gunakan atribut md untuk desktop standar. Untuk melihat lebar setiap kolom dengan lebar yang berbeda – beda coba ketikan potongan kode berikut : <!DOCTYPE html>
<html>
<head>
<title>Latihan Bootstrap 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap-3.1.1-dist/css/bootstrap.min.css">
<style type="text/css">
.col{
box-shadow : inset 1px -1px 1px #444, inset -1px 1px 1px #444;;
background-color: #dedef8;
}
</style>
</head>
<body>
<div class="container">
<div class="row" align="center">
<div class="col-md-1 col">1</div>
</div>
<div class="row" align="center">
<div class="col-md-2 col">2</div>
</div>
<div class="row" align="center">
<div class="col-md-3 col">3</div>
</div>
<div class="row" align="center">
<div class="col-md-4 col">4</div>
</div>
<div class="row" align="center">
<div class="col-md-5 col">5</div>
</div>
<div class="row" align="center">
<div class="col-md-6 col">6</div>
</div>
<div class="row" align="center">
<div class="col-md-7 col">7</div>
</div>
<div class="row" align="center">
<div class="col-md-8 col">8</div>
</div>
<div class="row" align="center">
<div class="col-md-9 col">9</div>
</div>
<div class="row" align="center">
<div class="col-md-10 col">10</div>
</div>
<div class="row" align="center">
<div class="col-md-11 col">11</div>
</div>
<div class="row" align="center">
<div class="col-md-12 col">12</div>
</div>
</div>
</body>
</html>
Hasilnya seperti berikut : 
Sehingga untuk mengisi satu baris penuh dibutuhkan kolom dengan total lebar 12, misal 3 buah kolom dengan lebar 4 , 2 buah kolom dengan lebar 6 dan sebagainya. Contohnya tambahkan kode ini di dalam div container dari kode yang sudah ada di atas : <div class="row" align="center"> <div class="col-md-3 col">3</div> <div class="col-md-3 col">3</div> <div class="col-md-3 col">3</div> <div class="col-md-3 col">3</div> </div> <div class="row" align="center"> <div class="col-md-4 col">4</div> <div class="col-md-4 col">4</div> <div class="col-md-4 col">4</div> </div> <div class="row" align="center"> <div class="col-md-6 col">6</div> <div class="col-md-6 col">6</div> </div> <div class="row" align="center"> <div class="col-md-12 col">12</div> </div> Hasilnya : Kita juga dapat membubuhkan lebih dari satu kelas untuk atribut kolom, misalnya : <div class="container"> <div class="row"> <div class="col-sm-3 col-md-6 col"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> </div> <div class="col-sm-9 col-md-6 col"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p> <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> </div> </div> </div> Maka ketika device yang digunakan adalah small device, konten akan dirender dengan panjang kolom 3 dan 9 lalu akan dirender dengan panjang 6 dan 6 bila device yang digunakan termasuk kategori medium device. Skala 6 :6 (atas) dan 3 : 9 (bawah) Nested ColumnsGrid System ini juga mendukung penempatan kolom secara bersarang artinya memasukkan kolom di dalam kolom atau baris lagi. Penggunaannya sama seperti <table> juga, langsung lihat saja contohnya : <div class="container"> <div class="row"> <div class="col-md-3 col"> <h4>Kolom Pertama</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-md-9 col"> <h4>Kolom kedua yang dibagi menjadi 4</h4> <div class="row"> <div class="col-md-6 col"> <p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis. </p> </div> <div class="col-md-6 col"> <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="row"> <div class="col-md-6 col"> <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-md-6 col"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p> </div> </div> </div> </div> </div> Menghasilkan : Column OffsetLalu bagaimana caranya jika kita ingin menampilkan kolom dengan panjang 6 tapi berada di tengah layar? Cukup dengan menambahkan offset pada kolom.. Offset berfungsi menggeser kolom ke kanan sepanjang kolom yang diberikan, contohnya jika panjang 6 dan ingin di posisikan di tengah berarti offsetnya 3.. Syntax-nya col-x-offset-xx . <div class="container"> <div class="row" align="center"> <div class="col-md-6 col-md-offset-3 col">6</div> </div> <div class="row" align="center"> <div class="col-md-5 col-md-offset-7 col">5</div> </div> <div class="row" align="center"> <div class="col-md-10 col-md-offset-1 col">10</div> </div> </div> Bisa diibaratkan seperti menambahkan kolom kosong di depan. Column OrderingAda satu lagi nih fitur yang cukup menarik, yaitu column ordering. Kita dapat mengubah posisi atau letak kolom dalam satu baris, ada dua operasi yaitu : Apa itu container dalam bootstrap?Container berfungsi untuk membungkus blok di dalamnya, sehingga terlihat rapi terhadap ukuran layar. Container juga memiliki breakpoint. Ukuran kontainer akan 100% pada breakpoint tertentu. Misalnya, jika kita menggunakan class container-md maka lebar kontainer akan 100% pada layar Extra Small dan Small.
Apa itu class Row?Class row berfungsi untuk mengubah sifat dari div di dalamnya yang semula akan ditampilkan secara block, akan dapat ditampilkan secara inline. Maka dari itu div di dalamnya dapat dipaparkan secara horizontal. Class col berfungsi untuk mengubah div tersebut menjadi responsif terhadap lebar viewport.
Apa itu gutter dalam sistem grid?Gutters adalah ruang yang memisahkan kolom dan baris. Dengan adanya gutters, maka ruang kosong antara kolom dan baris akan tercipta. Grid system yang dibuat menjadi dasar dari layout slide presentasi.
Apakah kamu tahu sistem yang merupakan pengaturan lebar untuk masing masing komponen pada bootstrap disebut?Grid system adalah sistem pengaturan lebar untuk masing-masing komponen yang ingin kita buat. pengaturan ini bertujuan untuk mengatur ke-responsive-an website yang kita buar. Jadi kita bisa mengaturnya sesuai yang kita inginkan dengan sangat mudah.
|
Cara membuat layout dengan bootstrap
Pos Terkait
Copyright © 2024 apacode Inc.
