Bootstrap

(1)

G G

P

A

N

D

U

A

N

B

O

T

S

T

R

A

P

B

U

K

U

“ Twitter Bootstrap adalah kode yang paling banyak

enalan yuk, jangan sampai kita nggak kenal sama

enalan yuk, jangan sampai kita nggak kenal sama tt ikembangkan oleh Twitter ini.

ikembangkan oleh Twitter ini.”” – Wahyu Widyanto – Wahyu Widyanto

1

di unduh di github. di unduh di github. olkit yang olkit yang o (penulis) o (penulis)

(2)

2

…Ku persembahkan buku ini

untuk Agamaku,

Negaraku,

Almamaterku,

Ibuku, Bapakku,

Adikku,

Sahabatku, Mantan-mantanku serta ilmu pe

ngetahuan

dan teknologi.

(3)

3

Lisensi Dokumen

Seluruh isi dalam

Seluruh isi dalam dokumen ini dapat digunakan, dimanfaatkan dandokumen ini dapat digunakan, dimanfaatkan dan disebarluaskan secara bebas untuk tujuan pendidikan, pembelajaran

disebarluaskan secara bebas untuk tujuan pendidikan, pembelajaran dan bukandan bukan komersial (non profit), dengan syarat

komersial (non profit), dengan syarat tidak menghilangkan, menghapus atautidak menghilangkan, menghapus atau mengubah atribut penulis dokumen ini dan

mengubah atribut penulis dokumen ini dan pernyataan dalam lisensi dokumenpernyataan dalam lisensi dokumen yang disertakan di setiap dokumen. Tidak

yang disertakan di setiap dokumen. Tidak diperbolehkan melakukan penulisandiperbolehkan melakukan penulisan ulang atau mengkomersialkan buku ini kecuali mendapatkan ijin

ulang atau mengkomersialkan buku ini kecuali mendapatkan ijin terlebih dahuluterlebih dahulu dari penulis.

(4)

4

KATA PENGANTAR

Melihat perkembangan tampilan website yang lebih clean, responsive, dan simple Melihat perkembangan tampilan website yang lebih clean, responsive, dan simple

dengan tampilan icon, font dan beberapa logo

dengan tampilan icon, font dan beberapa logo atau slide image yang kuat.atau slide image yang kuat. Beberapa vendor layanan seperti google, facebook,

Beberapa vendor layanan seperti google, facebook, twitter, microsoft pun sudahtwitter, microsoft pun sudah mengadopsi design se

mengadopsi design seperti itu. perti itu. Dengan kata lain, disain tDengan kata lain, disain tampilan website tahun-ampilan website tahun-tahun mendatang jadi sema

tahun mendatang jadi semakin beragam dan cros platform. kin beragam dan cros platform. Dan sebagai seorangDan sebagai seorang developer mungkin agan agak

developer mungkin agan agak mengesampingkan tampilan website. Padahalmengesampingkan tampilan website. Padahal disain website yang kita buat itu menunjukkan

disain website yang kita buat itu menunjukkan profesionalisme kita juga loh. Tapi,profesionalisme kita juga loh. Tapi, agak capek juga ya kalo kita

agak capek juga ya kalo kita udah menghafal banyak core program dan kita judah menghafal banyak core program dan kita jugauga harus “mengurusi” disain tampilannya juga. Iya kalo punya

harus “mengurusi” disain tampilannya juga. Iya kalo punya webdisainer sendiri sihwebdisainer sendiri sih nga pa-pa. Tapi kalo kita

nga pa-pa. Tapi kalo kita kerja ganda gimana gan? Belom lagi kalo kerja ganda gimana gan? Belom lagi kalo harus analisaharus analisa juga. Misalnya tugas

juga. Misalnya tugas Skripsi gitu ? Wah bisa makan waktSkripsi gitu ? Wah bisa makan waktu banyak gan.u banyak gan. Akhirnya, penulis berharap buku ini

Akhirnya, penulis berharap buku ini dapat bermanfaat bagi perkembangan ilmu didapat bermanfaat bagi perkembangan ilmu di Indonesia, khususnya sebagai media referensi dan

Indonesia, khususnya sebagai media referensi dan dokumentasi tutorialdokumentasi tutorial Bootstrap. Mulai dari pengenalan bootstrap sampai dengan mengupas cara Bootstrap. Mulai dari pengenalan bootstrap sampai dengan mengupas cara menggunakan toolkit ini. Tentunya

menggunakan toolkit ini. Tentunya source codesource code dalam buku ini sudah penulis uji dalam buku ini sudah penulis uji coba dan berjalan dengan baik.

coba dan berjalan dengan baik. Tapi, namanya juga manusia pasti ada khilaf Tapi, namanya juga manusia pasti ada khilaf gan.gan. Apalagi ini Cuma buku

Apalagi ini Cuma buku kedua penulis yang membahas tentang teknologikedua penulis yang membahas tentang teknologi informasi, wah pasti masih awam sekali nih!

informasi, wah pasti masih awam sekali nih!

Jika ditemukan kesalahan, penulis mengharapkan saran dan kritik dari pembaca. Jika ditemukan kesalahan, penulis mengharapkan saran dan kritik dari pembaca.

Saran dan kritik bisa di

Saran dan kritik bisa di sampaikan melalui email kesampaikan melalui email ke [email protected]

[email protected]

Semoga penulis bisa menuliskan kembali buku selanjutnya. Amin Semoga penulis bisa menuliskan kembali buku selanjutnya. Amin 

Penulis Penulis Wahyu Widyantoro Wahyu Widyantoro

(5)

5

BAB 1

PENGENALAN

BOOTSTRAP

(6)

6

Bootstrap

Bootstrap adalah sebuah framework yang dapat menyelesaikan adalah sebuah framework yang dapat menyelesaikan

permasalahan dalam mendesain web. Slogan dari framework ini adalah

permasalahan dalam mendesain web. Slogan dari framework ini adalah “Sleek,“Sleek,

intuitive, and powerful front-end framework for faster and easier web

development”,

development”, yang berarti kita dapat yang berarti kita dapat mendesain sebuah website dengan lebihmendesain sebuah website dengan lebih

rapi, cepat dan

rapi, cepat dan mudah. mudah. Selain itu BootstSelain itu Bootstrap juga responsrap juga responsive terhadap banyakive terhadap banyak

platform, artinya tampilan halaman website yang menggunakan Bootstrap ini

akan tampak tetap rapi, baik versi mobile maupun

akan tampak tetap rapi, baik versi mobile maupun desktop.desktop.

Saat ini penggunaan Bootstrap sudah meluas di kalangan disainer

Saat ini penggunaan Bootstrap sudah meluas di kalangan disainer front-endfront-end

web, perkembangannya pun masih terus berlangsung hingga sekarang.

Penggunaannya pun tidak begitu rumit. Mudah, karna

Penggunaannya pun tidak begitu rumit. Mudah, karna kita tinggal memanggil CSSkita tinggal memanggil CSS

dan JS yang tersedia lalu menuliskan class-class nya di

dan JS yang tersedia lalu menuliskan class-class nya di kodingan kita aja gan.kodingan kita aja gan.

Bootstrap memiliki 12-column responsive grid,

Bootstrap memiliki 12-column responsive grid, macam-macammacam-macam

components, JavaScript plugins, typography, form controls, dan juga sebuah

web-based Customizer untuk membuat Bootstrap agan sendiri.

based Customizer untuk membuat Bootstrap agan sendiri.

Agan tau twitter kan?

Agan tau twitter kan? _{nah twitter juga menggunakan CSS}_{nah twitter juga menggunakan CSS}_{frameworks ini}_{frameworks ini}

gan. Jadi kalo agan pengen p

gan. Jadi kalo agan pengen punya tampilan yang “mahal” agan tinggal pakeunya tampilan yang “mahal” agan tinggal pake

Bootstrap ini aja. Bootsrap bisa di unduh melalui situs ini gan >

http://twitter.github.io/bootstrap

Kalo udah di unduh, agan ekstrak ke localdisk yang mudah di jangkau aja. Kalo udah di unduh, agan ekstrak ke localdisk yang mudah di jangkau aja.

(7)

7

Struktur utama file Bootstrap seperti ini gan :

bootstrap/ bootstrap/ ├── css/ ├── css/ │ │ ├── ├── bootstrap.cssbootstrap.css │ │ ├── ├── bootstrap.min.cssbootstrap.min.css ├── js/ ├── js/ │ │ ├── ├── bootstrap.jsbootstrap.js │ │ ├── ├── bootstrap.min.jsbootstrap.min.js └── img/ └── img/ ├── glyphicons-halflings.png ├── glyphicons-halflings.png └── glyphicons-halflings-white.png └── glyphicons-halflings-white.png

Text editor

ane saranin agan pake sublime aja, karena ane

ane saranin agan pake sublime aja, karena ane pake itu juga. Bisa pake itu juga. Bisa diunduh gratisdiunduh gratis di

di http://sublimetext.com/2http://sublimetext.com/2

Gambar 1. Tampilan

(8)

8

Sebelumnya kita harus tau, apa ngaruhnya pake

Sebelumnya kita harus tau, apa ngaruhnya pake bootsrap atau nggak. Untukbootsrap atau nggak. Untuk itulah agan langsung praktekkin langkah ini aja

itulah agan langsung praktekkin langkah ini aja ya.ya. 

Pertama, buka text editor sublimetext yang udah agan download tadi. Pertama, buka text editor sublimetext yang udah agan download tadi. Selanjutnya buat sebuah file dengan nama

Selanjutnya buat sebuah file dengan nama index.htmlindex.html yang isinya koding sepertiyang isinya koding seperti dibawah ini: dibawah ini: <html> <html> <head> <head> <title>Latih

<title>Latihan an Bootstrap</title>Bootstrap</title>

</head> </head> <body> <body> <h1>Hello, world!</h1> <h1>Hello, world!</h1> <script

</body>

</html>

Simpan file dalam folder bootstrap yang sudah kita download Simpan file dalam folder bootstrap yang sudah kita download tadi.tadi. (simpan diluar folder css,js,dan img). Lalu double click in

(simpan diluar folder css,js,dan img). Lalu double click in dex.html untuk melihatdex.html untuk melihat hasilnya di browser.

hasilnya di browser. Hasilnya akan seperti ini: Hasilnya akan seperti ini:

Teks “Hello, world!” diatas tidak menggunakan bootstrap. Sekarang kita akan Teks “Hello, world!” diatas tidak menggunakan bootstrap. Sekarang kita akan coba menggunankan CCS frameworks Bootstrap didalam

(9)

9

Perhatikan kodingan dibawah ini: Perhatikan kodingan dibawah ini: <html>

<html>

<head>

<title>Latih

<title>Latihan an Bootstrap</title>Bootstrap</title>

<meta

scale=1.0">

<link

<script

</body>

</html>

Perhatikan teks yang ane tebalkan. Pada tag meta, kodingan kita akan dib Perhatikan teks yang ane tebalkan. Pada tag meta, kodingan kita akan dib uatuat responsive. Dan kita juga telah memanggil file

responsive. Dan kita juga telah memanggil file bootstrap.min.cssbootstrap.min.css dalam folder cssdalam folder css di dalam folder bootstrap kita juga. Begitu juga

di dalam folder bootstrap kita juga. Begitu juga dengandengan bootstrap.min.jsbootstrap.min.js yang yang dipanggil dari folder js dalam folder bootstrap.

(10)

10

Lalu simpan dan jalankan, maka hasilnya akan

Lalu simpan dan jalankan, maka hasilnya akan tampak seperti gambar dibawahtampak seperti gambar dibawah ini:

ini:

Apa yang beda? Apa yang beda?

Tentu tulisannya akan mengikuti gaya bootstrap. Dan ini

Tentu tulisannya akan mengikuti gaya bootstrap. Dan ini keren ! Ciyus miapah.keren ! Ciyus miapah. Selamat gan, selamat masuk di dunia modern ala bootstrap !

Selamat gan, selamat masuk di dunia modern ala bootstrap ! =======================

=======================

Singkat aja ya gan pengenalannya, kita akan lanjut ke

Singkat aja ya gan pengenalannya, kita akan lanjut ke pengenalan class-classpengenalan class-class dalam Bootstrap.

dalam Bootstrap.

Ane berharap agan sedikit banyak sudah

Ane berharap agan sedikit banyak sudah mengenal HTML,CSS dan Javascript. Jadimengenal HTML,CSS dan Javascript. Jadi penggunaan istilah-istilah dalam buku ini akan lebih agan

(11)

11

BAB 2

MULAI

MENGGUNAKAN

BOOTSRAP !

(12)

12

HEADING

Untuk heading dalam bootstrap adalah sama dengan HTML biasa. A

Untuk heading dalam bootstrap adalah sama dengan HTML biasa. Agan masihgan masih cukup mengetik <h1>…<h6>

cukup mengetik <h1>…<h6>

BODY COPY

Ukuran standar dalam text bootstrap adalah

Ukuran standar dalam text bootstrap adalah font-size 14pxfont-size 14px ,, line-hight 20px line-hight 20px .. selama masih di dalam tag paragraph <p>…</p>

selama masih di dalam tag paragraph <p>…</p> Contoh : Contoh : <html> <html> <head> <head> <title>Latiha

<title>Latihan n Bootstrap</title>Bootstrap</title>

<meta

<link

</head>

<body>

(13)

13

<p>Hai mantan, aku kangen kamu tau :( </p> <p>Hai mantan, aku kangen kamu tau :( </p> <script

<script

</body>

</html>

Hasilnya akan seperti ini:

LEAD BODY COPY

Nah kali ini kita akan

Nah kali ini kita akan memanggil class css dalam bootsrap. Sebagai contoh awalmemanggil class css dalam bootsrap. Sebagai contoh awal kita akan menggunakan class

kita akan menggunakan class leadlead .. <html>

<html>

<head>

<title>Latiha

<meta

<link

</head>

<body>

<p

<p class=”lead”class=”lead”>Hai mantan, aku kangen kamu tau :( </p>>Hai mantan, aku kangen kamu tau :( </p> <script

<script

(14)

14

</body> </body> </html> </html> Hasilnya: Hasilnya: Kesimpulannya, class

Kesimpulannya, class leadlead merubah teks menjadi lebih tebal dan merubah teks menjadi lebih tebal dan besar, fungsinyabesar, fungsinya beda dengan <b>…</b> atau

beda dengan <b>…</b> atau <strong>…</strong<strong>…</strong>.>. CLASS PARAGRAF

CLASS PARAGRAF

Untuk mengatur paragraph, agan tinggal memanggil class seperti kode yang Untuk mengatur paragraph, agan tinggal memanggil class seperti kode yang ditebalkan dibawah ini:

ditebalkan dibawah ini: <html>

<html>

<head>

<title>Latihan

<title>Latihan Bootstrap</titleBootstrap</title>>

<link

</head>

<body>

<p

(15)

15

<p

<p class="text-center"class="text-center">paragraf tengah</p>>paragraf tengah</p> <p

<p class="text-right"class="text-right">paragraf >paragraf kanan</p>kanan</p> <script

<script

</body> </body> </html> </html> TEXT PERTANDA TEXT PERTANDA

Didalam bootstrap juga dapat menambahkan warna teks sesuai dengan maksud Didalam bootstrap juga dapat menambahkan warna teks sesuai dengan maksud dan isi teksnya. Contoh:

dan isi teksnya. Contoh: <html>

<html>

<head>

<title>Latihan

<link

</head>

<body>

<p class="muted">teks ini

<p class="muted">teks ini abu-abu muted</p>abu-abu muted</p> <p class="text-warning">Pering

<p class="text-warning">Peringatan hanya atan hanya untuk 17 tahun untuk 17 tahun keatas.</p>keatas.</p> <p class="text-error">Login gagal! username/pasword s

(16)

16

<p class="text-info">download disini aplikasi

<p class="text-info">download disini aplikasi gratis</p>gratis</p> <p class="text-success">Login berhasil, silahkan mengisi

<p class="text-success">Login berhasil, silahkan mengisi kolomkolom komentar</p>

komentar</p> <script

<script

</body>

</html>

Hasilnya akan tampak seperti dibawah ini: Hasilnya akan tampak seperti dibawah ini:

BLOCKQUOTES

Menggunakan Blockquotes tinggal gunakan

Menggunakan Blockquotes tinggal gunakan tag <blockquotes>…<blockquotes>tag <blockquotes>…<blockquotes>.. Contoh: Contoh: <html> <html> <head> <head> <title>Latihan

(17)

17

<link

</head>

<body>

<blockquote>m

<blockquote>maju mundur pantang aju mundur pantang kendur, apalagi tidur---wahyukendur, apalagi tidur---wahyu widyantoro</blockquote>

widyantoro</blockquote> <script

<script

</body>

</html>

Hasilnya akan tampak seperti ini: Hasilnya akan tampak seperti ini: Agan juga bisa gunakan class

Agan juga bisa gunakan class pull-rightpull-right untuk mengubah blockquote jadi ratauntuk mengubah blockquote jadi rata kanan.

kanan.

<blockquote class=”pull-r

<blockquote class=”pull-right”> maju ight”> maju mundur pantang kendur, mundur pantang kendur, apalagi tidur---apalagi tidur---wahyu

wahyu widyantoro</bwidyantoro</blockquote>lockquote> Hasil:

Hasil:

MEMASUKKAN KODE DALAM HTML (INLINE)

<html>

<head>

<title>Latihan

(18)

18

<link

</head>

<body>

contohnya begini, <code><section>

contohnya begini, <code><section></code> harusnya jadi </code> harusnya jadi inline tuh.inline tuh. <script

<script

</body> </body> </html> </html> Hasilnya: Hasilnya: MEMBUAT TABEL MEMBUAT TABEL

Membuat tabel dalam pemanggilan classnya cukup mudah. Langsung praktek aja Membuat tabel dalam pemanggilan classnya cukup mudah. Langsung praktek aja yuk… yuk… <html> <html> <head> <head> <title>Latihan

<link

(19)

19

</head> </head> <body> <body> <table

<table class="table"class="table">> <tr

<tr class="success">class="success"> <td>1</td> <td>1</td> <td>wahyu

<td>wahyu widyantoro</td>widyantoro</td> <td>01/04/2012</td> <td>01/04/2012</td> <td>Diterima</td> <td>Diterima</td> </tr> </tr> <tr <tr class="error">class="error"> <td>2</td> <td>2</td> <td>Arya wiguna</td> <td>Arya wiguna</td> <td>01/04/2012</td> <td>01/04/2012</td> <td>Ditolak</td> <td>Ditolak</td> </tr> </tr> <tr <tr class="warning"class="warning">> <td>3</td> <td>3</td> <td>Imam kendo</td> <td>Imam kendo</td> <td>01/04/2012</td> <td>01/04/2012</td> <td>Diterim

<td>Diterima a bersyarat</td>bersyarat</td> </tr>

</tr> <tr

(20)

20

<td>4</td> <td>4</td> <td>Yessy

<td>Yessy utami</td>utami</td> <td>01/04/2012</td> <td>01/04/2012</td> <td>Hubung

<td>Hubungi i administrator terlebih administrator terlebih dahulu</td>dahulu</td> </tr>

</tr> </table> </table>

<script

<script

</body> </body> </html> </html> Hasilnya: Hasilnya:

(21)

21

MEMBUAT FORM MEMBUAT FORM <html> <html> <head> <head> <title>Latihan

<link

</head> </head> <body> <body> <form> <form> <fieldset> <fieldset> <legend>Judul

<legend>Judul Form</legend>Form</legend> <label>Label</label>

<label>Label</label>

<input type="text" placeholder="Tulis sesuatu"> <input type="text" placeholder="Tulis sesuatu"> <span

<span class="help-blclass="help-block">contoock">contoh h text text penjelas.</span>penjelas.</span> <label

(22)

22

<input type="checkbox"> Teks Penjelasan

<input type="checkbox"> Teks Penjelasan CheckboxCheckbox </label>

</label> <button

<button type="submit" type="submit" class="btn">Suclass="btn">Submit</butbmit</button>ton> </fieldset>

</fieldset> </form>

</form> <script

<script

</body> </body> </html> </html> FORM PENCARIAN FORM PENCARIAN <html> <html> <head> <head> <title>Latihan

<title>Latihan Bootstrap</titlBootstrap</title>e>

<meta

initial-scale=1.0">

scale=1.0">

<link

</head>

<body>

<form

<form class="form-sclass="form-search">earch"> <input

(23)

23

<button

<button type="submit" class="btn">Cari</button>type="submit" class="btn">Cari</button> </form>

</form>

<script

<script

</body> </body> </html> </html> Hasil: Hasil: FORM LOGIN FORM LOGIN <html> <html> <head> <head> <title>Latihan

<link

</head>

<body>

<form

(24)

24

<input

<input type="text" class="input-small" placeholder="Email">type="text" class="input-small" placeholder="Email"> <input

<input type="password" class="input-small" placeholder="Password">type="password" class="input-small" placeholder="Password"> <label

<label class="checkbox">class="checkbox">

<input type="checkbox"> Remember me <input type="checkbox"> Remember me </label>

</label>

</form>

<script

</body> </body> </html> </html> Hasil: Hasil: Contoh lain : Contoh lain :

(25)

25

Kodingnya: Kodingnya: <html> <html> <head> <head> <title>Latiha

<meta

<link

</head>

<body>

<form

<form class="form-class="form-horizontal">horizontal"> <div

<div class="control-class="control-group">group">

<label class="control-label" for="inputEmail">Email</label> <label class="control-label" for="inputEmail">Email</label> <div

<div class="controlclass="controls">s"> <input

<input type="text" id="inputEmail" placeholder="Email">type="text" id="inputEmail" placeholder="Email"> </div>

</div> </div> </div> <div

<div class="control-class="control-group">group"> <label

<label class="contrclass="control-label" ol-label" for="inputPfor="inputPassword">Password</assword">Password</label>label> <div

<div class="controlclass="controls">s"> <input

<input type="password" id="inputPassword" placeholder="Password">type="password" id="inputPassword" placeholder="Password"> </div>

</div> </div> </div>

(26)

26

<div

<div class="control-class="control-group">group"> <div

<div class="controlclass="controls">s"> <label

<input type="checkbox"> Remember me <input type="checkbox"> Remember me </label>

</label>

<button type="submit"

<button type="submit" class="btn">class="btn">Sign in</button>Sign in</button> </div> </div> </div> </div> </form> </form> <script

<script

</body>

</html>

EXTENDING FORM CONTROL

<div

<div class="input-pclass="input-prepend">repend"> <span

<span class="add-onclass="add-on">@</span>">@</span> <input

(27)

27

</div> </div> <div

<div class="input-apclass="input-append">pend"> <input

<input class="span2" id="appendedInpuclass="span2" id="appendedInput" t" type="text">type="text"> <span

</div>

Kalo kombinasi keduanya jadi kayak gini Kalo kombinasi keduanya jadi kayak gini:: <div

<div class="input-pclass="input-prepend repend input-appendinput-append">"> <span

<span class="add-onclass="add-on">$</span>">$</span> <input

<input class="span2" id="appendedPrependedIclass="span2" id="appendedPrependedInput" nput" type="text">type="text"> <span

</div>

BUTTON DISAMPING TEXTFIELD

<div

<input class="span2" id="appendedInpuclass="span2" id="appendedInputButton" type="text">tButton" type="text"> <button

(28)

28

Contoh lain: Contoh lain: <div

<input class="span2" id="appendedInpuclass="span2" id="appendedInputButtons" ttButtons" type="text">ype="text"> <button

<button class="btn" class="btn" type="button"type="button">Search</bu>Search</button>tton> <button

<button class="btn" class="btn" type="button"type="button">Options</bu>Options</button>tton> </div>

</div>

Contoh dengan

Contoh dengan dropdown:dropdown: <div

<input class="span2" id="appendedDropdclass="span2" id="appendedDropdownButton" type="text">ownButton" type="text"> <div

<div class="btn-grouclass="btn-group">p"> <button

<button class="btn dropdown-toggle" data-toggle="dropdown">class="btn dropdown-toggle" data-toggle="dropdown"> Action

Action <span

<span class="caret"><class="caret"></span>/span> </button> </button> <ul class="dropdown-menu"> <ul class="dropdown-menu"> ... ...

(29)

29

</ul> </ul> </div> </div> </div> </div>

Contoh dengan Form Pencarian: Contoh dengan Form Pencarian: <form

<form class="form-sclass="form-search">earch"> <div

<div class="input-aclass="input-append">ppend">

<input type="text" class="span2

<input type="text" class="span2 search-query">search-query"> <button

<button type="submit" class="btn">Search</buttotype="submit" class="btn">Search</button>n> </div>

</div> <div

<div class="input-prclass="input-prepend">epend"> <button

<button type="submit" class="btn">Search</buttotype="submit" class="btn">Search</button>n> <input type="text" class="span2 s

<input type="text" class="span2 search-query">earch-query"> </div>

</div> </form> </form>

(30)

30

Sebernarnya masih banyak banget fitur-fitur cantik yang

Sebernarnya masih banyak banget fitur-fitur cantik yang ditawarkan olehditawarkan oleh

Bootstrap ! ini sih Cuma sebagian kecilnya saja. Selain itu

Bootstrap ! ini sih Cuma sebagian kecilnya saja. Selain itu penggunaan bootstrappenggunaan bootstrap

juga sudah sangat luas, bany

juga sudah sangat luas, banyak digunakan oleh dak digunakan oleh disainer web untukisainer web untuk

mempercantik tampi

mempercantik tampilan web lan web mereka. Selain Bootstrap masih banyak lagimereka. Selain Bootstrap masih banyak lagi

framework-framewo

framework-framework CSS yang rk CSS yang bertebaran gratis di internet. Kita bertebaran gratis di internet. Kita hanya tinggalhanya tinggal

berusaha mencari dan mempelajarinya. Apalagi kalo udah hafal tag-tag

berusaha mencari dan mempelajarinya. Apalagi kalo udah hafal tag-tag untukuntuk

memanggilnya. Itu udah keren banget.

Sekian dulu gan perjumpaan kita, s

Sekian dulu gan perjumpaan kita, semoga bermanfaat. Terimakasih sudahemoga bermanfaat. Terimakasih sudah

membaca.

(31)

31

Tentang penulis

Wahyu Widyantoro

Wahyu Widyantoroadalah lulusan SMAadalah lulusan SMA

Yayasan Pendidikan cengkareng satu (tahun

2009). Saat ini sedang menempuh pendidikan

S1 jurusan Teknik Informatika di Universitas Indraprasta PGRI, Jakarta. Anak

pertama dari dua bersaudara ini memang sedang

pertama dari dua bersaudara ini memang sedang fallin in fallin in lovelove dengan php, mysql dengan php, mysql

dan jquery. Entah kepada siapa hatinya berlabuh, siapa yang akan ia pilih. Tapi

yang jelas ia membutuhkan mereka bertiga (poligami istilahnya). Karna

menurutnya ketiga elemen tersebut akan saling berhubungan dan menciptakan

harmonisasi pemrograma

harmonisasi pemrograman website yang tidak hanya dinamis, tapi n website yang tidak hanya dinamis, tapi juga eksentrik.juga eksentrik.

Cowok kelahiran jogja 22 tahun silam ini juga

Cowok kelahiran jogja 22 tahun silam ini juga masih belajar banyak tentang php,masih belajar banyak tentang php,

mysql dan jquery.

Penulis bisa di temui di

Penulis bisa di temui di http://wahyuweb.id1945http://wahyuweb.id1945.com atau via facebook dan.com atau via facebook dan

twitter.

Facebook:

Facebook:http://facebook.com/wharerahttp://facebook.com/wharera

Twitter: