cover

Belajar Bootstrap Episode 1

This entry was posted on Monday, June 17th, 2013.

Hai, pembaca yang budiman, jumpa lagi dengan saya… orang paling ganteng sedunia versi nenek saya, yang nggak percaya tanya aja, ntar saya kasih nomor hp-nya.

HMmmm……..

*Tarik napas……. haaaaahhh*

*Sebentar gue minum dulu, agak grogi*

*berdoa dulu, supaya seandainya gue gak sanggup menghadapi ini semua, gue bisa khusnul khotimah dan masuk surga tanpa hisab*

Nggak kerasa, ternyata udah 5 abad kita nggak ketemu. Barusan pas saya login, saya sempet bingung, soalnya udah banyak rumput ilalang yang ada di form login-nya saking udah lama saya nggak tengok. Mau klik tombol loginnya aja susah, soalnya udah banyak gembel yg numpang tidur di situ. Namun walau demikian saya bersyukur, blog itu nggak kayak cewek. Kebayang kalo cewek, nggak usah ditinggal 5 abad-lah, 2 minggu aja niscaya udah berubah jadi monster paling mengerikan seantero dunia, yang dengan kekuatannya mampu menghancurkan bumi dengan satu kali kamehameha.

Sekali lagi mohon maaf ya, maklum sebagai seorang penyelamat dunia kadang saya butuh hibernasi dan itu sering kali membutuhkan waktu berabad-abad.

Artikel kali ini pada hakikatnya adalah buat ngelunasin utang saya di artikel sebelumnya yang berjudul “Bootstrap – Mendesain Web Menjadi Lebih Mudah (Twitter Style)”. Janji tetaplah janji, walaupun web udah berubah tampilan. Lagi pula ternyata banyak juga yang nungguin artikel ini, ada yang nanya via email, ada juga via fans page facebook. So mau dan harus mau, artikel ini harus lahir ke dunia, minimalnya dunia internet.

Di artikel sebelumnya, kita udah kenalan dengan Bootstrap. Kita udah tau siapa bapaknya, di mana rumahnya, apa makanan kesehariannya, dan kapan jadwal mandinya. So, kali ini kita akan mencoba PDKT supaya lebih deket lagi. Percuma dong, kalo tamat hanya sebatas kenalan. Syukur-syukur kalo sampe jadian dan bisa nyicipin gimana legitnya make Bootstrap.

Sebagai pembukaan dan ada gambaran, nanti kita akan bikin yg kayak beginian: Demo Bootstrap 1.

Belajar Bootstrap Episode 1 Demo

Demo-nya sederhana aja dulu, namanya juga episode 1.

Saya anggap pembaca sekalian udah paham tentang HTML ya, jadi saya nggak usah bahas tentang HTML lagi. Buat yang belum paham atau belum kenal tentang HTML, mangga dibaca-baca dulu aja, biar nggak bingung.

Okay langsung aja jou, sebelum saya berubah pikiran dan membenturkan kepala saya ke bantal :D

 

Tahap Persiapan

Pertama-tama download dulu paket bootstrap disini.

Selanjutnya, ekstrak file bootstrap.zip, akan ada satu buah folder bernama bootstrap dan di dalamnya terdapat 3 buah folder, yaitu: css, img dan js. Nah itulah paket bootstrap yang nanti akan membuat hidup kita menjadi lebih indah.

FYI, kamu boleh rename folder bootstrap kalo kamu mau, kalo pun nggak juga nggak jadi masalah.

 

Tahap Penulisan Kode HTML

Buka texteditor, kemudian tulis kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Belajar Bootstrap 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Belajar Bootstrap Twitter 1">
    <meta name="author" content="Kresna Galuh D. Herlangga">

	<link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>

    <div class="container">

		<div class="masthead">
			<h3 class="muted">Belajar Bootstrap 1</h3>
			<div class="navbar navbar-inverse">
				<div class="navbar-inner">
					<div class="container">
						<ul class="nav">
							<li class="active"><a href="#">Home</a></li>
							<li><a href="#">Projects</a></li>
							<li><a href="#">Services</a></li>
							<li><a href="#">Downloads</a></li>
							<li><a href="#">About</a></li>
							<li><a href="#">Contact</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
      
		<div class="hero-unit">
			<h1>Lorem ipsum dolor!</h1>
			<p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
			<a class="btn btn-large btn-success" href="#">Get started today</a>
		</div>

		<hr>

		<div class="row-fluid">
			<div class="span4">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
				<p><a class="btn btn-success" href="#">View details &raquo;</a></p>
			</div>
			<div class="span4">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
				<p><a class="btn btn-success" href="#">View details &raquo;</a></p>
			</div>
			<div class="span4">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
				<p><a class="btn btn-success" href="#">View details &raquo;</a></p>
			</div>
		</div>

		<hr>

		<div class="footer">
			<p>&copy; Copyright 2013</p>
		</div>

    </div>

</body>
</html>

Selanjutnya simpan dengan nama index.html

 

Tahap Pembahasan Kode

Biar nggak bingung, mari kita bahas kode di atas.

Pada tag <head> terdapat kode berikut:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Itu berfungsi untuk menyesuaikan lebar web dengan layar device. Kode itulah yang bikin responsive bisa mulus.

Selanjutnya kode:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

Kode itu adalah untuk memanggil style bootstrap.css yg akan menangani ketika web ditampilkan di layar laptop, sedangkan bootstrap-responsive.css itu style yang akan menangani responsive untuk layar device mobile atau tablet.

Ke bawah sedikit, kita akan menemukan ada kode berikut:

<div class=”container”>

Itu berfungsi untuk membentuk area box, supaya lebar web tidak penuh. Ini akan membuat halaman web menjadi lebih rapih.

Tag div dengan class “masthead” untuk membentuk header, yang di dalamnya ada navbar. Kode lengkapnya seperti berikut:

<div class="masthead">
	<h3 class="muted">Belajar Bootstrap 1</h3>
	<div class="navbar navbar-inverse">
		<div class="navbar-inner">
			<div class="container">
				<ul class="nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Projects</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Downloads</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</div>
	</div>	
</div>

 

Selanjutnya, untuk menambahkan headline kita bisa menggunakan hero-unit. Kodenya seperti berikut:

<div class="hero-unit">
	<h1>Lorem ipsum dolor!</h1>
	<p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
	<a class="btn btn-large btn-success" href="#">Get started today</a>
</div>


Untuk memisahkannya dengan garis, kita memerlukan tag <hr>.

Selanjutnya, untuk membentuk area 3 kolom, kita membutuhkan sebuah wadah fluid, maka kita bisa menggunakan class “row-fluid”. Dan untuk membentuk 3 kolom yang sama besar, dikarenakan Bootstrap menganut 12 Grid, maka, 12 / 3 = 4. Artinya kita akan membuat 3 buah kolom dengan ukuran 4 span untuk masing-masing kolom. Grid penuh itu terdiri dari 12 span. Jadi kodenya seperti berikut:

<div class="row-fluid">
	<div class="span4">
		<h2>Heading</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		<p><a class="btn btn-success" href="#">View details &raquo;</a></p>
	</div>
	<div class="span4">
		<h2>Heading</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		<p><a class="btn btn-success" href="#">View details &raquo;</a></p>
	</div>
	<div class="span4">
		<h2>Heading</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		<p><a class="btn btn-success" href="#">View details &raquo;</a></p>
	</div>
</div>

Biar lebih rapih mari kita beri pembatas dengan garis <hr>.

Dan untuk footer bisa menggunakan kode berikut:

<div class="footer">
	<p>&copy; Copyright 2013</p>
</div>

Jadi deh, coba buka hasilnya (index.html) via browser. Kalo kamu beruntung maka tampilannya akan sama kayak demo tadi, tapi jika nggak sama, berarti kamu nggak beruntung dan ada yang salah, silahkan gosok sekali lagi….

Oke demikian untuk episode kali ini, sampe ketemu di episode 2.

Demo Download

SUBSCRIBE TO NEWSLETTER

About

Seorang makhluk bulan yang sedang bertamasya di Bumi. Untuk mengisi waktu luang di Bumi, doi menghabiskan waktu dengan coding, nonton anime dan tidur. Nggak suka makan sayur-sayuran. Dan punya pendapat bahwa sayur-sayuran diciptakan Tuhan bukan untuk dimakan, tapi untuk menghias makanan. Berbakat untuk mengundang perhatian. Bersama teman-temannya di Bumi, membuat sebuah website yang disebut CodePolitan. Bersama CodePolitan, doi melakukan banyak hal keren dan menyenangkan.