Dalam Bootstrap mengizinkan kita membagi sebanyak 12 kolom pada suatu halaman website. Dan juga sebagaimana dalam excel kita kenal merger cell, maka dalam Bootstrap kita kenal dengan nama SPAN untk menggabungkan kolom. Untuk lebih jelasnya pembagian kolom bisa kita lihat gambar di bawah ini
Web Design | Cara Membagi Kolom Pada Halaman Website Bootstrap - Kali ini kabelantena akan melanjutkan pembahasan mengenai bootstrap, halaman Cara Membagi Kolom Pada Halaman Website Bootstrap adalah Langkah kedua dalam mempelajari Bootstrap setelah potingan Langkah Awal Sebelum Mempelajari Bootstrap.
Cara Membagi Kolom Pada Halaman Website Bootstrap - Untuk lebih mudahnya mempelajari Cara Membagi Kolom Pada Halaman Website Bootstrap, kita bisa lihat pada microsoft excel, kita semua tentu tahu microsoft excel yang terdiri dari kolom dan baris, dalam Bootstrap bisa juga mengenal kolom yang hampir serupa dengan excel.
Cara Membagi Kolom Pada Halaman Website Bootstrap - Dalam Bootstrap mengizinkan kita membagi sebanyak 12 kolom pada suatu halaman website. Dan juga sebagaimana dalam excel kita kenal merger cell, maka dalam Bootstrap kita kenal dengan nama SPAN untk menggabungkan kolom. Untuk lebih jelasnya pembagian kolom bisa kita lihat gambar di bawah ini :
Class untuk kolom pada Bootstrap
Dalam Bootstrap kita mengenal 4 macam penulisan class, untuk lebih jelasnya penulisan class pada CSS anda bisa baca pada postingan Cara Menghubungkan CSS dengan HTML. Berikut ini jenis penulisan class untuk kolom pada Bootstrap :
- xs (digunakan untuk phone)
- sm (digunakan untuk tampilan pada tablet)
- md (digunakan untuk mendesign tampilan pada desktop seperti pc dan laptop)
- lg (digunakan untuk mendesign tampilan pada monitor layar lebar maksudnya di atas standar pc dan laptop)
Untuk cara menuliskannya bisa dilihat pada kode dibawah ini, dan perhatikan pada col-sm-4 di mana angka 4 adalah Span 4 seperti pada gambar kolom di atas, kita membagi halaman menjadi 3 untuk tampilan desktop.
[<!DOCTYPE html> <html lang="en">
<head>
<title>Contoh Halaman Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Contoh Halaman Bootstrapku</h1>
<p>Silakan Minimize browser untuk melihat hasilnya.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html> ]
Post A Comment: