Untuk mengatur kolom pada halaman Bootstrap, kita masukkan snytax seperti dibawah ini
<div class="row">
<div class="col-md-2">
Selamat datang Bootstrap, saya akan belajar untuk memahamimu.
</div>
<div class="col-md-10">
<div class="col-md-2">
Selamat datang Bootstrap, saya akan belajar untuk memahamimu.
</div>
<div class="col-md-10">
Bootstrap adalah sebuah framework yang membantu mempermudah dalam
mendesain web. Sesuai dengan slogan yang diusungnya yakni mendesain
sebuah website dengan lebih rapi, cepat dan mudah. Dalam tampilan
halaman website yang menggunakan Bootstrap ini akan tampak tetap rapi,
baik versi mobile maupun desktop.
</div>
</div>
</div>
Pengaturan kolom pada Bootstrap dibagi menjadi 12 bagian. Pada contoh diatas dalam satu baris, kita bagi menjadi dua kolom. Ukuran kolom masing- masing adalah pada kolom kiri = 2, pada kolom kanan = 10. Untuk mencoba ukuran bisa diubah-ubah dengan hasil penjumlahannya =12.
Syntax selengkapnya adalah seperti di bawah ini (pengaturan kolom bagian yang berwarna biru):
<html>
<head>
<title>Coba</title>
<meta name="viewport" content="device-width,initial-scale=1.0">
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<head>
<title>Coba</title>
<meta name="viewport" content="device-width,initial-scale=1.0">
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">
Selamat datang Bootstrap, saya akan belajar untuk memahamimu.
</div>
<div class="col-md-10">
Bootstrap adalah sebuah framework yang membantu mempermudah dalam mendesain web. Sesuai dengan slogan yang diusungnya yakni mendesain sebuah website dengan lebih rapi, cepat dan mudah. Dalam tampilan halaman website yang menggunakan Bootstrap ini akan tampak tetap rapi, baik versi mobile maupun desktop.
</div>
</div>
<div class="row">
<div class="col-md-2">
Selamat datang Bootstrap, saya akan belajar untuk memahamimu.
</div>
<div class="col-md-10">
Bootstrap adalah sebuah framework yang membantu mempermudah dalam mendesain web. Sesuai dengan slogan yang diusungnya yakni mendesain sebuah website dengan lebih rapi, cepat dan mudah. Dalam tampilan halaman website yang menggunakan Bootstrap ini akan tampak tetap rapi, baik versi mobile maupun desktop.
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
setelah itu simpan kembali di index.html
Tidak ada komentar:
Posting Komentar