Cara Develop Website Dengan Bootstrap-Ariyasa Fikar

(1)

Cara Develop Website Dengan Bootstrap

1.

Hal pertama gue tekenin disini bahwa buat mulai proses development website dengan

Bootstrap sebagai frameworknya, minimal lo harus udah sedikit paham dan familiar dengan

perintah-perintah HTML, dengan Tag-Tag DIV-nya HTML, dengan XAMP, text editor (sublime)

dan CSS, sisanya si bisa sambil jalan aja belajarnya.

2.

Oke, yang pertama Download Bootstrap (download di get.bootstrap.com)

3.

Extract file bootstrap, taro di folder htdocs xampp (note: xampp nya harus udah keinstall

dulu ya, ini optional aja si, tergantung lo mau simpen nanti dengan format HTML atau PHP,

kalo PHP lo harus install xampp dulu)

4.

Penjelasan sebelum mulai :



Ada

tiga folder utama bootstrap.

-

Css

:

folder khusus ccs

yang disediakan bootstrap

“ fungsi css itu untuk mempercantik dan memperkaya penampilan webiste atau

menurut pendapat pribadi gue sendiri itu membuat website semakin keren gitulah.”

-

Fonts :

folder khusus untuk tampilan font

yang disediakan bootstrap

“fungsi font disini apa ya, pokonya setahu gue, segala macam atau jenis-jenis type

font itu ada disitu,jadi kalo mau make jenis font apa, lo tinggal panggil aja ke dalam

file HTML yang lo buat, kalo ga salah ya..”

-

Js

:

folder khusus untuk fungsi-fungsi java script

“nah, kalo javascript disini, menurut gue lagi nih ya, fungsi nya lebih ke

“memper-animasikan website, bener ga ya itu istilahnya?? Oke Jadi maksudnya

meng-animasikan tuh gini, dengan html lo Cuma bisa format-format tulisan,kalo di tambah

CSS website nanti bakal lebih cantik lagi, masuk ke php website lu udah mulai

dinamis dan interaktif, nah tambah lagi pake js/ jquery, website lo udah makin keren

lah. (ga pinter gue ngejelasinnya)

5.

Buat file dengan nama index.html (untuk tampilan master)



Buka sublime, new file-save as index.html (php)



Mulai kotak-katik (lanjut Step selanjutnya)

6.

Di file index.html, mulai dengan ketik html5-tab (biasanya kalo disublime udah otomatis

langsung jadi tag html nya itu, kaya <html> <head> dan <body>

7.

Ganti judul head jadi judul yang lo mau. Oh iya, sebelum panjang lebar, pertama gue bilang

dari awal, gue mau bikin website yang Cuma sebatas nampilin informasi dan artikel-artikel

tentang fotografi dan nampilin hasil-hasil foto gue sendiri, dari sini seenggaknya lo udah ada

bayangan sendiri ya kira-kira alur dan tampilannya gimana walaupun secara kasarnya aja

mungkin.

8.

Oke judul udah dibuat, sekarang kita

bikin link ke ccs yang udah disediakan bootstrap

,

fungsinya itu agar file index yang kita buat, itu ngelink ke file css yang udah disediain

bootsrap. Taro link nya di antara tag head buka dan tag head tutup ya, nih contoh code buat

ngelink-in nya

Penjelasannya gini :

link rel="stylesheet" kode buat nge-link-in nya

&

href="css/bootstrap.css"

kode buat manggil file css bootstrap (yang ada di folder utama

bootstrap, yaitu folder ccs)

9.

Nah, berhubung bootstrap ga menyediakan secara full fitur-fitur css seperti-seperti warna dll,

dan dengan sebab lain juga kadang kita butuh dengan imajinasi kita sendiri buat nambain

yang sesuai dengan keinginan kita, kita

PERLU

nambahin file css yang kita buat sendiri, jadi

(2)

(nama yang umum dipakai untuk buat filename css). Setelah itu, taro di folder CSS bawaan

bootstrap, tujuannya agar file-file ditempatkan sesuai jenis filenya.

10.

Setelah file css buatan kita sendiri yang kita bikin dengan nama style.css, kita

tambahin

dan

panggil lagi file tersebut dengan link

lo bisa liat,

disitu yg berubah nama file css-nya aja, yaitu file yang kita buat sendiri.

11.

Ok setelah selesai kita setting file CSS nya, sekarang giliran file Jquery yang gantian harus kita

setting, CARANYA, sama seperti kita panggil file CSS, cari didalam folder Jquery bawaan

bootstrap, setelah taro path foldernya beserta file nya didalam Tag HEAD HTML. untuk

memanggil file Jquery tersebut, harus diatas link file CSS ya, karena bootstrap akan meload

dulu file dari Jquery, baru setelah itu file bootstrap, kalo kebalik setau gue ga jalan.

12.

Oke, setelah membuat link css di tag head, kita mulai ngetikin kode html, yang pertama gue

coba jelasin dulu hal-hal penting dan alur kerja di bootstrap yang

WAJIB

lo tau dan pahamin!



Di bootstrap menyediakan tag-tag DIV/ class-class DIV yang sudah dibuatkan oleh

bootstrap itu sendiri, jadi kita WAJIB hapalin/ pahamin dan mesti familiar dengan

class-class bawaan bootstrap nya itu. Karena

INTINYA

di bootstrap itu, kita Cuma memanggil

class-class yang udah disediain bootstrap, untuk kita gunain di file kerja kita, kurang lebih

seperti itu. Nah class-class bootstrap yang gue tau dan sering digunain, gue jelasin

dibawah.

a. Class container = class pembungkus ke-semua

12 GRID bootstrap

b. Class container fluid = class yang pembungkus ke-semua

12 GRID bootstrap

,

Jadi perbedaannya, kalo dengan class container, kedudukan dan letak nya grid

bersifat statis, sedangkan dengan container-fluid, kedudukan dan letak grid

menyesuaikan dengan layar. (berasa saat kita coba menarik-narik atau

mengecil-ngecilkan layar tampilan)

c. Class row = dan ini yang ga kalah penting, class row merupakan class inti kalo

menurut gue, gue bingung buat ngejelasin secara tulisannya, jadi intinya, row itu

adalah baris horizontal, per satu ROW/ Baris website. Agak aneh nih gue

jelasinnya, gue kasih contoh gambar dari google deh:

Jadi

yang

dinamakan row itu contohnya sederet itu yang ada tulisan

ROW

nya

Nah yang

GRID bootstrap

itu, yang 1 sampai 12 itu. Jadi intinya GRID di

(3)

bebas. Ini maaf ya, gue punya penyakit dari dulu dimana gue mungkin paham

maksudnya, tapi gue ga pinter buat ngejelasinnya, jadi lo cerna sendiri aja dari

gambarnya, kalo ga paham lo bisa kontak gue langsung buat japrian.

d. Class col-xs, col-sm, col-md, gue jelasin dibawah:

“class tersebut class bawaan bootstrap yang mempunyai fungsi untuk mengatur

tampilan layar, dan berkaitan dengan

12 GRID Bootstrap

yang dibawah diatas,

gue jelasin pake gambar aja deh.

Penjelasan

: Cara nyerna nya gini, di bootstrap ada 12 GRID

(HANYA 12 GRID)

yang bisa disesuaikan

per-per ROW

(baca: per masing-masing row)

,

untuk lebih

jelasinya lagi gue kasih gambar aja lagi aja.

Ini

contoh halaman website yang gue ambil dari google, sekarang kita analisa

gambarnya, bahwa terdapat :

1. Bagian row header : mempunyai colom ful 12 GRID, kenapa? Karena

seperti yang gue bilang, di bootstrap maksimal GRID itu Cuma ada

12 GRID

(HANYA 12 GRID)

! Pointnya, kalo tampilan udah selebar

(4)

2. Dibawah row header : mempunyai 3 grid dengan besaran colom

sebesar col-4 (12 dibagi 3 sama dengan 4)

3. Row ketiga, terdapat 2 colom dengan besaran col-6 (12 di bagi 2

sama dengan 6)

4. Dan row terakhir mempunyai colom sebesar col-12 sama kaya

header

5.

Kesimpulan

, kita bisa menganalisa kebutuhan besaran

COL

di

tiap-tiap

ROW

dengan menganalisa menggunakan variable pembanding

yaitu

12 GRID Sistem Bootsrap tersebut.

13.

Lanjut ke step 12, kita fokus pada penjelasan dari sisi coding bootstrap

<!DOCTYPE html> <html> <head>

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

</head> <body>

</div>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span>

</div>

<li class=""><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li>

(5)

</div> </nav> </div> </div> </div> </div> </header> <div class="slider">

<div class="carousel-caption"> <h1>Example headline.</h1> <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>

<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>

</div> </div>

</div> <div class="item">

<div class="carousel-caption"> <h1>Another example headline.</h1>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>

</div> </div>

</div>

<div class="carousel-caption"> <h1>One more for good measure.</h1>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>

</div> </div>

<div class="col-xs-12 col-sm-12 col-md-12"> <h3>Laptop/ Macbook</h3> </div>

<img src="images/1.png" alt="" class="img-thumbnail"> <div class="text-center"> <h5> Tradisional Tribal </h5> <h5> Rp. 75.000,-</h5> </div> </div>

(6)

<img src="images/1.png" alt="" class="img-thumbnail"> <div class="text-center"> <h5> Tradisional Tribal </h5> <h5> Rp. 75.000,-</h5> </div> </div> </div> <div class="row">

<div class="col-xs-12 col-sm-12 col-md-12"> <h3>Laptop/ Macbook</h3> </div>

<img src="images/1.png" alt="" class="img-thumbnail"> <div class="text-center"> <h5> Tradisional Tribal </h5> <h5> Rp. 75.000,-</h5> </div> </div> </div> </div> </div>

(7)

<h3>How To Stick On Mac</h3> <br>

<p>You shouldxxxxxxfuck</p> </div>

<h3>How To Stick On Mac</h3> <p>You shouldxxxxxxfuck</p> </div>

</div> </div>

</html>

14.

Nah coba dulu aja lo copy file index.html yang udah gue buat liat hasilnya, biar tau

gimana tampilannya. Nah ini gue screenshoot tampilan website bootstrap hasil dari

codingan diatas + setting-setting

kecil

khas Bootstrap. Oh iya, gue ga menyeratkan

[image:7.595.101.530.71.271.2]

(8)