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

Ukuran: px

Mulai penontonan dengan halaman:

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

Agus Tanuwidjaja
7 tahun lalu
Tontonan:

1 NAMA : SITI NURWANTI NIM : 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 (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> <meta charset="utf-8"> <title>handicraft</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body>  <script src=" 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"> <div class="navbar-inner">

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> 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 "herounit")</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 class="span8"> <p>dummy Text</p> 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. <div class="row"> <div class="span4"> <ul class="nav nav-list"> <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> 8 Kita akan mengisi bagian content area span8 dengan paragraf. <div class="span8"> <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> <p>(no sablon,asli lukis tangan)</p>

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

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/

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

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. <div class="row"> <div class="span4"> <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 class="span4"> <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="icon-user iconwhite"></i> Order</a> <div class="span4"> <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> <hr>  <div class="footer"> </body> </html> <b> 2014 Siti Nurwanti ( )</b> <p>ti Malam STMIK Elrahma </p>

9 Contoh web getbootstrap

10 Contoh screenshoot Getbootstrap yang saya buat

dokumen-dokumen yang mirip

WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS

WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS Oleh : EMA SETYA KARISNA TI. 12141391 A. PENGERTIAN FRAMEWORK CSS Bootswatch.com Bootswatch merupakan penyedia tema berbagai macam bootstrap dengan