Pada kesempatan kali saya ingin memberikan sedikit tutorial singkat tentang Framework Bootstrap pada tutorial kali ini hanya akan saya bahas sampai dengan Text/Typography dan akan saya lanjutkan ke materi selanjutnya pada postingan berikutnya. Tanpa perlu berpanjang lebar langsung saja ke persiapan awal.
Persiapan
Langkah pertama untuk memulai adalah men download file framework bootstrap, download dimana di situs resminya di www.getbootstrap.com . dan langkah kedua adalah download jquery, download di situs resminya di www.jquery.com. yang sudah melakukan ini sebelumnya silahkan step ini di skipp aja. Langkah selanjutnya ialah menaruh file bootstrap dan jquery tadi di dalam folder. Jadi silahkan buat folder di ( saya disini mengunakan xampp ) silahkan disesuaikan saja ya dengan yang anda pakai. Buat folder baru di c:/xampp/htdocs/ dan kasih nama “belajar” . jadi urutannya jadi c:/xampp/htdocs/belajar
Pada defaultnya susunan file bootstrap seperti ini .
Silahkan kalian pindah pindah / copy semua file ini kedalam folder “ belajar “ yang sudah di buat tadi. Dan untuk file jquery yang sudah di download tadi silahkan pindah juga kedalam folder “ js “ bawaan bootstrap tersebut dan rename menjadi “ jquery.js “ agar memudahkan pemanggilan nantinya, pada defaultnya nama jquery masih ada embel embel di belakangnya sesuai dengan versi yang anda download, jadi lebih baik rename aja menjadi “ jquery.js “ taruh di dalam folder /belajar/js/jquery.js.
Memulai
Silahkan buat file baru dengan editor kesayangan kalian ( disini saya menggunakan sublimetext2 free version ) simpan di folder c:/xampp/htdocs/belajar beri nama index.html jadi c:/xampp/htdocs/belajar/index.html
Langkah pertama ialah membuat code awalan seperti biasa, silahkan ketikan kode di bawah ini.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>belajar bootstrap</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet”href=”css/bootstrap.css”>
<script src=”js/jquery.js”></script>
<script src=”js/bootstrap.js”></script>
</head>
<body>
</body>
</html>
Penjelasan :
jadi standard dokumen pertama adalah seperti code di atas, please jangan buka karna tidak akan ada apa apa nya melainkan hanya ada title. Perhatikan code ini
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
code di atas adalah code agar desain kita responsive. Dan perlu di perhatikan pemanggilan bootstrap.js harus sesudah pemanggilan jquery.js , jadi jangan sekali kali memanggil file bootstrap.js terlebih dahulu sebelum jquery.js kalau javascript bootstrap ingin berjalan.
Container
Container di bootstrap ada dua class, pertama .container container ini lebarnya tidak full kedua .container-fluid. container ini lebar nya full langsung ke code nya aja yah biar faham, saya juga bingung jelasinnya :p.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet”href=”css/bootstrap.css”>
<script src=”js/jquery.js”></script>
<script src=”js/bootstrap.js”></script>
</head>
<body>
<div class=”container”> <h1>halaman pertama belajar bootstrap</h1>
<p>hallo. . ini adalah halaman pertamaku menggunakan bootstrap</p>
</div>
</body>
</html>
Coba code di atas modifikasi, yaitu class=”container”> ubah mejadi class=”container-fluid”> .
Sudah tau bedanya ?
Column Bootstrap
Ini adalah hal penting dan hal yang sangat berguna dari framwork bootsrap itu sendiri.
Bootstrap menggunakan sampai dengan 12 column. yaitu:
column 3 , column 4 , column 6 , column 8 , column 12.
Itu sih sudah standard lebar lebar yang biasanya kita gunakan saat desain website. Sebenarnya bisa saja kita gunakan column 1 , column 2 dst jika di butuhkan.
Contoh lengkapnya seperti ini:
Jadi bisa kita simpulkan, jika di dalam web kita menginginkan ada konten dan sidebar, kita bisa gunakan column 8 untuk konten, dan column 4 untuk sidebar. Bisa di pahami kan ? gunakan sesuai kebutuhan aja, struktur Kodenya seperti ini.
<div class=”row”>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
…
</div>
Class row memungkinkan kita menyusun column menjadi rowspan / kebawah, Column di bootstrap itu sendiri ada beberapa , ada extra small, small, medium dan large. Implementasinya seperti ini.
<div class=”col-xs-4”> column extra small </div>
<div class=”col-sm-4”> column small </div>
<div class=”col-md-4”> column medium </div>
<div class=”col-lg-4”> column large </div>
Di antara column empat di atas lebarnya sama, perbedaannya di hal responsive desain. Jadi jika di device ekstra small, gunakan “ xs “ jika di device small, maka gunakan “ sm “ dan seterusnya sesuai kebutuhan,
Bisa juga anda gunakan semua, contohnya
<div class=”col-xs-4 col-sm-4 col-md-4 col-lg-4”> </div>
Untuk menggunakan column column di bootstrap cukup memanggil seperti di atas, misal column 4 <div class=”col-md-4”> artikel dsb disini </div> misal column 8 <div class=”col-md-8”> artikel dsb disini </div> dan seterusnya sesuai kebutuhan . biar ga bingung akan saya kasih contohnya silahkan di praktekan.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet”href=”css/bootstrap.css”>
<script src=”js/jquery.js”></script>
<script src=”js/bootstrap.js”></script>
</head>
<body>
<div class=”container”>
<div class=”col-md-8”>
<h1>ini adalah konten pertama</h1>
<p>hallo. . ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap </p>
</div>
<div class=”col-md-4”>
ini adalah sidebar pertama ku
ini adalah sidebar pertama ku
ini adalah sidebar pertama ku
ini adalah sidebar pertama ku
ini adalah sidebar pertama ku
ini adalah sidebar pertama ku
</div>
</div>
</body>
</html>
Bisa di pahami ? jika belum faham, sayang sekali saya sudah malas mebahas column di bootstrap ini. Semoga bisa di pahami 🙂
Text/Typography
Teks di bootstrap , pada defaultnya ukuran secara global di bootstrap ialah 14px . kita mulai dari heading yah. Lihat ilustrasinya di bawah ini
<h1> sampai <h6>
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
bagaimana dengan <p> / paragraph ? di bootstrap paragraph font-size nya adalah 10px.
Tag <mark> memungkinkan kita membuat teks highlight, ketik code ini
<body>
<div class=”container”>
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
</body>
Tag <abbr> memungkinkan kita menulis dengan style footer . <abbr> pencipta lagu kebangsaan </abbr> <blockquote>
Untuk menulis quote. Contohnya seperti ini
<div class=”container”>
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote>
<p>indonesia merdeka sejak tahun 1945, sampai sekarang masih saja belum merdeka dari kemiskinan , kapan indonesia ini akan merdeka sesungguhnya ahhh sudahlah. . .</p>
<footer>From Fatkhan</footer>
</blockquote>
</div>
Untuk menampilkan quote rata kanan silahkan tambahkan class .blockquote-reverse di <blockquote class=”blockquote-reverse”>
<dl>
Coffee
– black hot drink
Milk
– white cold drink
Code nya :
<div class=”container”>
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
<code>
Kita bisa menggunakan tag <code> jika kita ingin menulis teks code di web kita.
<kbd>
gunakan ctrl + p untuk print buku kamu. Tag <kbd> memungkinkan kita mebuat teks seperti contoh di atas
WARNA TEKS DI BOOTSTRAP
Di bootstrap ada beberapa class untuk warna teks kita.
.text-muted, .text-primary, .text-success, .text-info,.text-warning, and .text-danger
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Penggunaannya seperti ini.
<p class=”text-danger”> This text represents danger.</p>
Dan begitu juga lainnya
BACKGROUND DI BOOTSTRAP
Ada beberap warna background di bootstrap yg tersedia, kita tinggal memanggil class nya sama seperti warna teks, hanya saja beda nama awalnya, jika untuk text kita menggunakan .text-success
Tapi jika warna background, kita gunakan
.bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Mudah bukan ??
BEBERAPA CLASS TYPOGRAPHY DI BOOTSTRAP
.lead
Untuk teks stand out
.small
Untuk teks kecil
.text-left
Untuk teks align kiri / rata kiri
.text-center
Untuk teks align tengah / rata tengah
.text-right
Untuk teks aligh kanan / rata kanan
.text-justify
Untuk teks justify / rata kanan kiri
.text-nowrap
Untuk teks no wrapp / tanpa enter.
.text-lowercase
Untuk teks huruf kecil semua
.text-uppercase
Untuk teks huruf besar semua
.text-capitalize
Untuk teks capital / huruf depannya besar semua
.list-unstyled
Untuk me remove list untuk tag <ul> atau <ol> seperti list-style dsb
.list-inline
Untuk list agar inline contoh code nya :
<p>The class .list-inline places all list items on a single line:</p>
<ul class=”list-inline”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Sebenarnya masih banyak lagi, saya hanya membahas yang biasa di gunakan saja, mohon maaf jika ada yang terlewat.
Demikian postingan saya tentang Tutorial Framework Bootstrap hanya sampai pada Text/Typography, InsyaAllah pada postingan berikutnya akan saya ulas lanjutannya seperti Bootstrap Table, Bootstrap Images, Jumbotron dll. Semoga bermanfaat dan bisa dijadikan referensi.
