Mandailing Natal - Cara Menggunakan Bootstrap Framework - bootstrap merupakan salah satu dari framework yang banyak di gunakan untuk membuat website, di karenakan kemudahannya dalam menggunakannya. Tulisan Cara Menggunakan Bootstrap Framework saya ambil dari web w3schools.com saya terjemah bebas, agar mudah di gunakan dan di fahami anak-anak tkj-trpl Smk swasta teruna padangsidimpuan.
Bootstrap menggunakan elemen html dan properti css dan merupakan prasyarat utama dalam html5. Untuk memberitahukan kepada browser bahwa code yang kita buat merupakan html5 dalam dokument html yang kita buat harus di sertakan <doctype html5>
Beberapa hal yang harus di kenal dan di hapal adalah selektor-selektor yang sudah tersedia didalam bootstrap, berikut merupakan selektor-selektor yang digunakan dan harus di fahami serta hapal luar kepala.
.container
.container-fluidcontoh penggunakan selektor kelas .container
<!DOCTYPE html>
<html lang="en">
<head>
<title> BOOTSTRAP </title>
<link href="css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1> Gunawan</h1>
<h5> Test bootstrap</h5>
</div>
</div>
</body>
</html>
Contoh penggunaan selektor kels .container-fluid
<!DOCTYPE html>
<html lang="en">
<head>
<title> BOOTSTRAP </title>
<link href="css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1> Gunawan</h1>
<h5> Test bootstrap</h5>
</div>
</div>
</body>
</html>
Bootstrap Grid View SystemBootstrap memiliki 12 grid kolom, jika kita tidak ingin menggunakan ke-12 kolom tersebut kita bisa menggabungnya, sehingga kolom-kolom tersebut sesuai dengan keinginan kita. Misalnya ingin menampilkan 2 kolom saja, maka masing-masing kolom kiri dan kanan kita bagi 2 dari ke-12 kolom tersebut, dapat kita lihat pada gambar berikut:
 |
| gambar grid-coloumn w3schools.com |
|
Untuk membagi halaman kedalam beberapa bagian, kita bisa menggunakan kelas
.col-namakelasnya-jumlahkolomyangdigabung . Dalam gambar diatas kita melihat kolom-kolom kecil sebanyak 12kolom. masing-masing dibagi atas 4buah kolom.
Format code kelas kolom diatas saya karang-karang sendiri, untuk mudah digunakan. namakelasnya secara default telah di sediakan oleh bootstrap, pada tulisan namakelasnya bisa kita ganti dengan yang telah di sediakan oleh bootstrap diantaranya:
- xs (untuk phones)
- sm (untuk tablets)
- md (untuk desktops)
- lg (untuk desktops yang lebih besar)
Kita dapat menggunakan kelas yang ada dengan bebas-sebebas-bebasnya. Tentunya tergantung target kontent kita mau di buka dengan apa. Nah untuk menggunakan kolom grid, kita harus memanggil sebuah selektor kelas bernama
row untuk contohnya kita sambung dari contoh sebelumnya saja.
<!DOCTYPE html>
<html lang="en">
<head>
<title> BOOTSTRAP </title>
<link href="css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1> Gunawan</h1>
<h5> Test bootstrap</h5>
</div>
<div class="row"> <!-- selektor kelas row, wajib katanya ada kalau mau membagi halaman jadi 3 bagian -->
<div class="col-md-4"> <!-- nih bagian yang membagi 12 masing-masing 4kolom -->
<h2> Kolom 1 </h2>
<p> Kolom 1 merupakn gabungan 4 buah kolom dari 12 kolom yang ada didalam bootstrap </p>
<p> Mudahkan menggunakannya... </p>
</div>
<div class="col-md-4">
<h2> Kolom 2 </h2>
<p> Kolom 2 merupakn gabungan 4 buah kolom dari 12 kolom yang ada didalam bootstrap, Masih ingatkan kolom bootstrap ada 12 kolom, berikut kolom nomor 5-8 </p>
<p> Mudahkan menggunakannya... </p>
</div>
<div class="col-md-4">
<h2> Kolom 3 </h2>
<p> Kolom 3 merupakn gabungan 4 buah kolom dari 12 kolom yang ada didalam bootstrap,nah berikut kolom nomor 9-12 </p>
<p> Mudahkan menggunakannya... </p>
</div>
</div>
</div>
</body>
</html>
Tampilannya seperti gambar di bawah
Nah kalo kelas
.col-md-4 saya ganti misalnya dengan
.col-xs-8 atau
.col-lg-6 bagaimana ?. Kamu bisa exprimentkan sendiri ya. Gunakan aja editor text notepad++ biar asyik utak-atik kodeknya, pake sublime juga bisa. download di internet.
Bootstrap Text/TypographyKonon katanya si w3schools, bootstrap sudah memiliki ukuran yang di defaultkan, termasuk untuk ukuran huruf, paragraf dan macam-macamnya, misalnya saja untuk jarak paragrap, tag
pmemiliki line-height 10px; sedangkan ukuran huruf (
font-size) sekitar 14px dengan line-height 1.428.
Untuk elemen
h1 -
h6 seperti berikut:
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Selain yang sudah ada diatas, masih banyak lagi, element html dan property css yang sudah di format sedemikian rupa dan default menjadi bawaan dari bootstrap, untuk mempersingkat tulisan Cara Menggunakan Bootstrap Framework, saya rasa sampai disini dulu. Insya Allah saya coba nanti lanjutkan, dan bagi yang ingin mencoba silahkan kunjungi w3schools.com saya juga membacanya dari sana.
