Belajar Bootstrap Dasar Part 2 : Membuat Baris , Kolom dan Menerapkan Konsep Mobile First
rabu 7 november 2016
Bootstrap sangat terkait erat dengan HTML5 dalam membuat sebuah layout halaman web. pada umumnya , sebuah html template dasar akan tampak seperti berikut ini apabila menggunakan HTML5 :
di sini saya akan menjelaskan bagian-bagian script dan penjelasanya :
dan ini scriptnya :
<!DOCTYPE html>penjelasan script :
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=davice-width,initial-scale=1">
<title>Template dasar HTML5</title>
</head>
<body>
<h1>Hello world !!!</h1>
</body>
</html>
- <html lang="id"> : menunjukan bahwa bahasa yang digunakan oleh situs ini adalah bahasa inggris , jika kita menggunakan bahasa indonesia ganti atribut en menjadi id atau in.
- <meta charset="utf-8"> : menunjukan character encoding yang digunakan adalah Unicode utf-8 .
- <meta http-equiv="X-UA-Compatible" content="IE=edge"> : tag ini digunakana untuk memaksa browser internet explorer (IE) menampilkan dokumen html menggunakan versi terkini (edge) dari redering engine-nya.
- <meta name="viewport" content="width=davice-width,initial-scale=1"> : tag viewport adalah bagian dari sebuah alat ( notebook , destop pc , handpone dan lain-lain ) yang dapat menampilakan web ( windows ). Meta tag Viewport ini digunakana untuk mengatur tampilan browser pada mobile davice dan juga tablet . untuk tag content="width=davice-width" untuk mengatur lebar layar mobile davice , sedangkan pernyataan "initial-scale=1" untuk mengatur level zoom dari tampilan pada saat ditampilkan ,semakin besar nilai initial-scale , semakin besar tampilan ( zoom in ).
ada dua hal utama untuk menggubah template dasar HTML5 menjadi template dasar Bootstrap ,yaitu :
1. tambahkan link ke file bootstrap dan file bootstrap theme :
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="stylesheet">digunakan untuk menglink ke file css bootstrap .dan kita letakan di atas baris atau elmen yang memengil script dalam file html5shiv.min.js dan respond.min.js
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="stylesheet">
2. tambahkan link ke file javascript bootstrap :
<script type="text/javascript" src="js/bootstrap.min.js"></script>link ini biasanya di letakkan paling bawah dari script ,hal ini untuk mempercepat browser dalam me-render halaman web sesuai rekomendasi .
ini scriptnya :
Membuat File CSS sendiri secara Terpisah :
Biasanya di file sendiri harus mengunakan .css dan kita bisa mengedit sendiri dan membuat file css sendiri .misalnya :
.navbar {dan simpan letakkan file style.css di folder bootstrap/css selanjutnya ,pada halaman utama , kita buat link ke file tersebut di bawah baris link ke file css agar tidak mengacaukan fungsi responsive Bootstrap .
min-height: 80px;
border: 1px solid transparent;
border-radius: 0;
}
dan jika ingin memangil file css tersebut adalah :
<link rel="stylesheet" type="text/css" href="css/style.css" rel="stylesheet">Membuat kontainer
untuk menghasilkan kontainer , digunakan elemen <div> dengan class .container atau .container -fluid .contoh :
script container
<div class="container"> . . . </div>script container-fluid
<div class="container-fluid"> . . . </div>
perbedaan antara container dengan container-fluid adalah :
.container , maka lebar kontainer maksimum tergantung pada jenis alat yang digunkan contoh: HP ( <768px) , Tablet ( > 768px ) , Destop (> 992px ) , Destop ( >1200px ) .
.container-fluid , maka lebar kontainer maksimum akan selalu sama dengan layar alat yang digunakana untuk menempilkan halaman web contoh : ( HP , Tablet , Notebook , PC dan lain-lain ).
Membuat Baris
untuk membuat baris digunakan elmen <div> dengan class .row
container satu baris
<div class="container">jika menampilkan beberapa baris , tinggal memperbanyak elmen <div> tersebut.
<div class="row"></div>
</div>
container tiga baris atau lebih
jika inggin menggukana lebih dari tiga baris tinggal menambahkan .row
<div class="container">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
Membuat kolom
dalam satu baris , jumlah kolom minimum 1 kolom dan maksimum adalah 12 kolom . Apabila jumlah kolom lebih dari 12 , maka kolom 13 dan seterusnya akan di geser atau di tumpuk ke bawah .
jika membuat kolom , maka kita gunakakan elemen <div> dengan empat class berikut ini :
- Class .col-xs-x digunakan untuk mengatur lebar kolom pada layar sangat kecil.
- Class .col-sm-x digunakan untuk mengatur tampilan kolom pada layar kecil .
- Class .col-md-x digunakan untuk mengatur tampilan kolom pada layar ukuran sedang .
- Class .col-lg-x digunakan untuk mengatur tampilan kolom pada layar dengan lebar mulai dari 1200 px ke atas.
jika kolom tidak diberi salah satu class di atas ,maka kolom akan di tampilkan vertikal.
coba perhatikan script di bawah ini:
<div class="container">
<div class="row" style="background-color: black">
<div class="col-xs-1" style="background-color: black;color: white">bima</div>
<div class="col-xs-1" style="background-color: black;color: white">bima</div>
<div class="col-xs-1" style="background-color: black;color: white">bima</div>
</div>
</div>
pada script di atas kita membuat container dengan class .container yang berisai satu baris yang masing masing menggunakan class .col-xs-1 dan saya akan memberikan penjelasan tentang scriptnya .style="background-color:black" adalah untuk menentukan background tulisan , sedangkang color:white untuk menentukan warna teks .
Menerapkan Konsep Mobile First
Bootstrap sudah menerapkan konsep mobile frist ,yaitu dalam mengatur tata letak ( layout ) kolom yang diutamakan terlebih dahulu adalah pengaturan untuk tampilan pada alat - alat yang bersifat mobile .adapun class yang digunakan adalah .col-xs-x dan class .col-sm-x, kemudian tambahkan pengaturan tata letak kolom untuk layar yang lebih besar .
Contoh 1 :
kita akan membuat tata letak 2 kolom dalam satu baris untuk semua ukuran layar .
karena ingin tampilan sama di semua ukuran layar , maka kita tinggal mengatur tata letak untuk layar sangat kecil dengan class .col-xs-x , maka tampi;an di ukur ain akan mengikuti peraturan tersebut . Karena ingin tampilan dua kolom dalam satu baris , maka kita gunakaan class .col-xs-6 untuk kedua kolom tersebut .
Script nya :
<div class="container">
<div class="col-xs-6" style="background-color: blue ; color: white">header 1</div>
<div class="col-xs-6" style="background-color: red ; color: white">header 2</div> </div>
kesimpulan :
bootstrap adalah platform baru yang dikembangkan tim twitter . Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan . Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat webside yang powerfull mengikuti perkembangan browser .Webside yang menggunakan bootstrap akan menjadi webside fleksibel , nyaman dan cara membuatnya cepat.
No comments