2. CARA MENGGUNAKAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/ Bagaimana Cara Menggunakan Bootstrap?

(1)

NAMA

: SITI NURWANTI

NIM

: 12141385

MATA KULIAH : PEMROGRAMAN WEB STATIS

1. PENGERTIAN FRAMEWORK CSS

GETBOOTSTRAP.COM/232/

Bootstrap merupakan sebuah framework CSS,yang menyediakan kumpulan

komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa

untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan

sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada

tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada

dengan komponen-komponen lainnya. Mengutip pengembang yang menciptakan Bootstrap,

Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk

membangun website sederhana dengan mudah.

2. CARA MENGGUNAKAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/

Bagaimana Cara Menggunakan Bootstrap ?

Pada saat menggunakan Yii, banyak yang mengganjurkan untuk menggunakan

yiibooster ataupun bootstrap-nya langsung (yang khusus Yii). Sebelum menggunakan

di yii, saya mencari tutorial dan belajar cara menggunakan bootstrap secara umum,

salah satunya yang akan saya tulis di artikel ini.

1. Download bootstrap di link berikut

http://getbootstrap.com/2.3.2/assets/bootstrap.zip, (saya menggunakan versi

2.3.2) buat folder (nama terserah) lalu buat file index.html . Ekstrak zip

bootstrap, copy semua folder (css, img, js) ke dalam folder contoh kita.

(2)

2. Isi file index.html jangan lupa untuk menambahkan !DOCTYPE di awal karena

kita akan menggunakan HTML5.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Handicraft</title> </head> <body> </body> </html>

3. Tambahkan link ke file bootstrap.css di folder css dalam tag <head> dan

include javascript files di paling akhir dari tag <body> , jangan di atas.

<!DOCTYPE html> <html>

<head>

</head> <body>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>

4 Kita akan mulai mendesain. Tetapi sebelum itu, perlu diingat bahwa bootstrap

menggunakan 12 grids, untuk membagi grids tersebut kita akan menggunakan

“span”, misal : bila ingin membuat menu disebelah isi, kita dapat membaginya

jadi “span4″ untuk menu dan “span 8″ untuk isi. Kita akan membuat :

1. Header

2. Marketing Area

3. Leftside Bar dengan Content Area di satu baris

4. Footer yang akan dibagi menjadi 2 bagian

Tambahkan ini dalam tag <body> di atas javascript files.

<div class="container">

<h1><a href="#">Handicraft</a></h1>

<div class="navbar">

(3)

<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>

5 Kita akan membuat marketing area menggunakan class “hero-unit”. Tulis coding

ini ke dalam div “container”, jangan diluar. Baca lebih lengkap tentang button

pada bootstrap

.

<div class="hero-unit"> <h1>BEAUGI</h1>

<p>Tas lukis, Sepatu lukis, souvenir, kado ulang tahun, hadiah, oleh-oleh unik , modis, cantik. (menggunakan "hero-unit")</p>

<a href="#" class="btn btn-large btn-success">Get Started</a>

(4)

6 Sekarang kita akan membuat area yang akan dibagi menjadi dua, satu untuk

leftside bar (menu) dan satu lagi disebelah kanan untuk content area. Kita akan

menggunakan div dengan class row sebagai container area ini karena secara

default, span akan float ke kiri, kalau tidak menggunakan div dengan class row

maka div span4 dan div span8 tidak akan bisa sejajar.

<div class="row"> <div class="span4"> <p>Dummy Text</p> </div> <div class="span8"> <p>Dummy Text</p> </div> </div>

7 Kita akan mengisi leftside bar span4 dengan menggunakan class nav dan

turunannya class nav-list agar terlihat seperti list/daftar. Sedangkan nav-header

untuk membuat judul.

<li class="nav-header">What we are?</li> <li class="active"><a href="#">Home</a></li> <li><a href="#">Our Clients</a></li>

(5)

<li><a href="#">Our Services</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li class="nav-header">Our Friend</li> <li><a href="#">Google</a></li>

<li><a href="#">Yahoo!</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Microsoft</a></li> <li><a href="#">Gadgetic World</a></li> </ul>

</div>

8 Kita akan mengisi bagian content area span8 dengan paragraf.

<h3>Tas Lukis Cantik</h3>

<p> Tas Kanvas Handmade Yang Ga Ribet Dan Bagus.Tas kanvas ini merupakan tas cantik nan unyu. Makanya, bakalan sangat anggun ketika kamu menggunakan tas handmade seperti ini. Dengan bahan tas yang berkualitas, serta model tas yang lagi in, tentunya itu bakalan menjadi nilai plus plus plus buat tas yang lagi banyak di incar oleh banyak orang ini.

Tas lukis dengan berbagai bahan dan jahitan yang

berkualitas. Cocok buat anda yang ingin tampil muda,casual,dan

modis dan fahionable..:) Jalan kemana aja

selalu bikin percaya diri bertambah bila menggunakan tas kanvas cantik etnik dan lucu. So, tunggu apalagi??</p>

<p>Dilukis dengan memakai cat khusus kain, jadi tidak akan luntur :).</p>

(6)

<h3>Sepatu Lukis</h3>

<p> Lukisan pada sepatu….. yang kagak-kagak aja! ada lukisan di sepatu. bagaimana caranya bisa ada lukisan di

sepatu? kalau lukisan pada kanvas atau kertas saya tahu! sulit nggak ya melukis sepatu?

sepatu lukis yaitu sepatu berbahan dasar kain/kanvas yang dilukis dengan cara manual atau hand made, dengan teknik yang sama dengan melukis pada kanvas, kertas, kayu atau media lain yang bisa di lukis. perbedaannya hanya pada awal proses pengerjaannya saja.

Hasil lukisan pada sepatu lukis juga tidak jauh berbeda dengan lukisan pada kansva, hasil lukisan tergantung dari kemahiran si pembuat/painter dalam melukis. bermacam-macam gaya bisa diterapkan pada sepatu ini misalnya: lukisan

realism, lukisan impresionist,lukisan pop art, lukisan

abstrak, lukisan ekspresionist, lukisan kartun, lukisan

karikatur, lukisan 3 dimensi, lukisan grafitti, dan gaya-gaya Lukisan yang bisa anda sesuaikan dengan kemahiran anda

melukis. jadi jangan takut untuk mengaplikasikan ke dalamnya. sebagai acuan atau karena banyaknya desain lukisan pada sepatu lukis ini yang beragam tidak ada salahnya anda bisa

mengikuti desain/gambar/lukisan yang sudah ada.</p>

(7)

9 Kita akan menambahkan footer, footer akan dibagi menjadi tiga bagian yang

sama besar, karena boostrap menggunakan 12grids maka untuk mendapatkan tiga

bagian yang sama besar harus dibagi menjadi 4-4-4, jadi kita menggunakan span4

untuk ketiga div kita. Jangan lupa untuk membuat div dengan class row terlebih

dahulu.

<h4 class="muted text-center">Informasi Barang</h4>

<p>Untuk produk yang dipesan, akan ada kesepakatan waktu produksi tergantung dengan tingkat kesulitan produk

tersebut dan

banyak sedikitnya pesanan yang ada di jadwal produksi kami. Produk tertentu akan dikenakan minimum order.</p>

<a href="#" class="btn"><i class="icon-user"></i> Informasi</a> </div>

<h4 class="muted text-center">Konfirmasi Order</h4>

<p>Kami akan mengkonfirmasikan ketersediaan motif via SMS, setelah kami mengkonfirmaskan kepada Anda, bahwa motif pesan tersedia. Anda dapat melakukan pembayaran kepada kami.

(8)

Jika motif yg dipesan kosong, kami akan menawarkan motif lain yang ada stoknya dan melanjutkan order anda.

Kami menawarkan 3 jasa kurir yang akan mengantarkan paket anda (JNE, POS INDONESIA, WAHANA) dan menjumlahkan total pesanan yang harus anda bayar</p>

<a href="#" class="btn btn-success"><i class="user icon-white"></i> Order</a>

</div>

<h4 class="muted text-center">Pengiriman Barang</h4>

<p>Untuk pengiriman, Kami biasa menggunakan POS INDONESIA, WAHANA, JNE. Perusahaan cargo tersebut luas cakupan

pengirimannya, baik dalam dan luar negeri.

Pengepakan Pengiriman

Kami mengirimkan pesanan Anda dengan menggunakan karung plastik standar. Hal ini untuk menjamin keutuhan produk. Kami tidak menyediakan pembungkusan kado untuk hadiah.

Lama Pengepakan Pesanan

Kami akan segera mengirimkan pesanan anda ke perusahaan kargo, paling lambat 3 hari kerja setelah kami menerima konfirmasi pembayaran dari Anda.</p>

<a href="#" class="btn btn-info">Pengiriman</a> </div>

</div>

</div> </body> </html>

(9)

(10)