Bootstrap merupakan kerangka kerja pengembangan untuk membangun situs web yang gratis framework bootstrap berbasis html mendukung Css dan juga Javascript
Tidak hanya itu bootstrap memiliki kemampuan untuk desain responsif yang bisa menyesuaikan dengan layar komputer dengan sistem grid 12 kolom
Cara membuat tata letak dasar bootstrap 2 kolom
Kita dapat membuat dua tata letak kolom untuk perangkat besar seperti laptop, desktop, tablet, dll. Tetapi pada perangkat seluler kecil, kolom secara default akan horisontal. pada dasarnya sistem grid Bootstrap didasarkan pada 12 kolom dan untuk menjaga kolom berdampingan, jumlah kolom kotak di setiap baris harus sama dengan 12 menggunakan col-sm- * .
Kode untuk membuat tata letak 2 kolom adalah di bawah ,ini adalah tutorial learn html 5 yang saya bagi lagi lewat blog ,supaya lebih mudah lagi
Dibawah adalah contoh kode html
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' rel='stylesheet'/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css' rel='stylesheet'/>
<b:skin></b:skin><script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<style type="text/css">
/* Some custom styles to beautify this example */
.demo-content {
padding: 15px;
font-size: 18px;
min-height: 300px;
background: #dbdfe5;
margin-bottom: 10px;
}
.demo-content.bg-alt {
background: #abb1b8;
}
</style>
</head>
<body>
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-6">
<div class="demo-content">.col-sm-6</div>
</div>
<div class="col-sm-6">
<div class="demo-content bg-alt">.col-sm-6</div>
</div>
</div>
<hr>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-sm-4">
<div class="demo-content">.col-sm-4</div>
</div>
<div class="col-sm-8">
<div class="demo-content bg-alt">.col-sm-8</div>
</div>
</div>
<hr>
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-sm-3">
<div class="demo-content">.col-sm-3</div>
</div>
<div class="col-sm-9">
<div class="demo-content bg-alt">.col-sm-9</div>
</div>
</div>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'/>
</body></html>
Catatan :
Kode warna kuning dan biru : merupakan kode yang harus ada di dalam pembuatan template bootstrap karna kode itu merupakan kode reset untuk memanggil kode html supaya bisa berjalan
Silahkan uji coba
Terima kasih telah membaca artikel tentang Cara membuat tata letak (layout) 2 kolom dengan Bootstrap di blog successful blogger jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.
