00 Mengenal Bootstrap 3 PDF

Mengenal Bootstrap 3.
0
Slamet Budi Santoso, S.Kom.
Bootstrap adalah kumpulan alat bantu gratis yang dibuat oleh para
pengembang Twitter.com untuk memudahkan pembuatan website dan aplikasi
web. Berisi HTML dan template desain untuk tipografi, form, tombol, navigasi
dan komponen antarmuka lainnya berbasis CSS, serta ekstensi JavaScript
tambahan.
Untuk lebih mengenal Bootstrap, silahkan unduh terlebih dahulu file-file yang
dibutuhkan, antara lain:
Bootstrap 3.0, http://getbootstrap.com/

jQuery 1.10.2, http://jquery.com/
Atau Anda bisa menggunakan paket file yang sudah saya siapkan (di sini atau
di sini ). Selain itu, disarankan Anda untuk menggunakan browser yang
mendukung HTML5 seperti: Google Chrome, Mozilla Firefox, Opera, Maxton,
Safari atau lainnya kecuali Internet Explorer.
Jangan lupa siapkan editor web, misalnya Dreamweaver atau Notepad++. Kedua
editor tersebut mendukung syntax highlighting. Meskipun demikian, Anda juga
boleh menggunakan Notepad bawaan Windows.
Basic Template
Setelah semuanya siap, langkah pertama adalah membuat struktur halaman
web. Bootstrap memiliki struktur dasar (basic template) sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<h1>Halo Bootstrap!</h1>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bagian terpenting dari template ini adalah pada baris yang dicetak tebal.
Bagian-bagian tersebut memuat file-file Bootstrap yang dibutuhkan.
Membuat Navigation Bar

Langkah selanjutnya, menambahkan navbar ke halaman web tersebut.
Letakkan skrip berikut di atas tag <h1>.
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" datatarget=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LogoType</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Kategori <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Kategori 1</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
Dari skrip di atas, Anda akan mendapat tampilan seperti ini:
Grid Layout
Bootstrap menggunakan grid untuk mengatur tata letak isi halaman web.
Berikutnya kita akan membagi halaman web menjadi dua yaitu kolom konten
dan kolom sisi (side bar).
Hapus <h1>Hello, world!</h1> dan gantikan dengan skrip berikut:

<div class="row">
<div class="col-md-9">
<h3>Utama</h3>
</div>
<div class="col-md-3 well">
<h3>Sidebar</h3>
</div>
</div>
Pada pengaturan layout ini digunakan class .row yang berisi dua kolom .colmd-9 dan .col-md-3. Bootstrap pada dasarnya memiliki 12 kolom dalam 1 baris,
sehingga jumlah total kolom disarankan samadengan 12 terutama jika Anda
akan membagi satu baris menjadi lebih dari 2 kolom. Uniknya, setiap baris
boleh memiliki pembagian yang berbeda.
Keterangan lebih lengkap tentang grid dapat dibaca pada dokumentasi
Bootstrap, http://getbootstrap.com/getting-started
Menambahkan Carousel
Menariknya, Bootstrap telah menyertakan efek Carousel yang digunakan untuk
menampilkan slide-show gambar. Sebelumnya, siapkan dulu beberapa gambar
yang akan dijadikan slide-show. Di sini dicontohkan 3 (tiga) gambar, masingmasing diberi nama: img1.jpg, img2.jpg, dan img3.jpg. Ketiga file gambar
tersebut di simpan dalam folder images.
Standar gambar yang baik digunakan pada halaman web adalah: JPEG (.jpg),
PNG (.png) atau GIF (.gif). Penamaan file gambar sebaiknya tidak
menggunakan spasi kosong (gambar unik.jpg)melainkan menggunakan
underscore, misalnya: gambar_unik.jpg. Selain itu, nama file sebaiknya
menggunakan huruf kecil (small caps).
Selanjutnya, hapus skrip <h3>Utama</h3> dan ganti dengan skrip berikut:
<div id="slide-promo" class="carousel slide">

<ol class="carousel-indicators">
<li data-target="#slide-promo" data-slide-to="0" class="active"></li>
<li data-target="#slide-promo" data-slide-to="1"></li>
<li data-target="#slide-promo" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">

<div class="item active">
<img src="images/img1.jpg" alt="Lenovo Ideapad Yoga">
<div class="carousel-caption">
<h3>Lenovo IdeaPad Yoga</h3>
<p>four cool modes, one incredible machine</p>
<p><a href="#" class="btn btn-primary">Lanjut</a></p>
</div>
</div>
<div class="item">
<img src="images/img2.jpg" alt="iPhone vs Galaxy S3">
<h3>iPhone vs. Galaxy S3</h3>
</div>
</div>
<div class="item">
<img src="images/img3.jpg" alt="Sony Vaio Duo">
<h3>Sony Vaio Duo</h3>
<p>the world is just a touch away</p>
</div>
</div>
</div>

<a class="left carousel-control" href="#slide-promo" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#slide-promo" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Perhatikan beberapa bagian skrip yang sama/identik seperti id=slide-promo

dan data-target=#slide-promo maupun href=#slide-promo adalah
saling terkait. Artinya, jika Anda hendak merubahnya, maka semuanya harus
disamakan.
Carousel yang dihasilkan akan seperti gambar berikut:
Menambahkan Display Produk

Untuk tampilan toko online, di bawah slide-show biasanya digunakan untuk
menampilkan produk/barang yang dijual. Terutama produk/barang baru,
terlaris, diskon, atau promo. Sejumlah 4 (empat) barang akan dipajang dalam
satu baris.
Tambahkan skrip berikut setelah: </div>
<div class="row">
Produk 1
</div>
Produk 2
</div>
Produk 3
</div>
Produk 4
</div>
</div>

Kemudian Anda bisa ubah tulisan Produk 1 ... Produk 4 dengan teks atau
gambar produk/barang yang dipajang. Contohnya seperti skrip berikut:
<div class="panel panel-default">
<div class="panel-body">
<img src="images/prod1.jpg" alt="...">
<p>
<strong>TARGUS Presenter Remote With Laser [AMP13AP-51]</strong><br>
<small>Enjoy your presentation</small>
</p>
</div>
<div class="panel-footer">
<p class="text-center"><strong>Rp. 345.000,-</strong></p>
</div>
</div>
Hasilnya akan tampak kurang lebih seperti berikut:
Dan, jika perlu ditambahkan baris ke-2, Anda bisa salin mulai dari  sampai dengan .
Mengatur Sidebar
Sidebar biasanya berupa kolom kecil di sisi kanan atau kiri halaman web.
Umumnya digunakan untuk menampilkan menu/navigasi web, data statistik,
informasi-informasi singkat, atau bahkan untuk ruang iklan.
Navigasi Kategori Produk

Contoh pertama pemanfaatan sidebar adalah menampilkan daftar kategori
barang/produk. Seperti pada contoh sebelumnya, Bootstrap menyediakan
component bernama panel dan list-group.
Hapus skrip <h3>Sidebar</h3> dan ganti dengan skrip berikut:
<div class="panel panel-primary">
<div class="panel-heading">Kategori Produk</div>
<div class="list-group">
<a href="#" class="list-group-item">PC Desktop/Laptop</a>
<a href="#" class="list-group-item">Asesoris Komputer</a>
<a href="#" class="list-group-item">Smartphone</a>
<a href="#" class="list-group-item">Tablet PC</a>
<a href="#" class="list-group-item">Photography</a>
</div>
</div>
Produk Terlaris
Tambahkan juga di bawah panel kategori, skrip berikut:
<div class="panel panel-info">
<div class="panel-heading">Produk Terlaris</div>
<div class="list-group">
<a href="#" class="list-group-item">
<img src="images/laris1.jpg" alt="terlaris 1" align="left">
<h5 class="list-group-item-heading">APPLE iPhone 5 16GB</h5>
<p class="list-group-item-text">Rp
8,800,000</p>
</a>
<h5 class="list-group-item-heading">NIKON DSLR D7100</h5>
16,090,000</p>
</a>
<h5 class="list-group-item-heading">SONY Vaio SVE14113EG</h5>
7,345,000</p>
</a>
</div>
</div>
Paling Bawah, Footer

Footer atau kaki halaman web umumnya digunakan untuk menampilkan
informasi terkait hak-cipta, penyangkalan/disclaimer, dan informasi tentang
perusahaan/pemilik situs web. Menambahkan footer cukup mudah dan
sederhana, hanya dengan menambahkan sebuah tag <hr> dan <div
class=footer>.
Caranya, sebelum </div> terakhir tambahkan skrip berikut:

<hr>
<div class="footer">
<p>© Akademi Komunitas Negeri Nganjuk · 2013</p>
</div>
Selesai sudah pengenalan Bootstrap dalam pembuatan halaman web.

Selanjutnya, kreatifitas, ketelitian, dan ketekunan dibutuhkan untuk
mengembangkan contoh-contoh yang telah ditunjukkan di sini.
Disclaimer
Contoh-contoh diambil langsung dari dokumentasi Bootstrap 3.0 dengan beberapa modifikasi,
penyesuaian, dan penggabungan sesuai petunjuk dalam dokumentasi. Pembaca diharapkan
telah memiliki dasar pengetahuan HTML dan CSS yang cukup. Gambar-gambar produk yang
ditampilkan diambil dari internet dan merupakan hak cipta pemiliknya.

Bahasa

00 Mengenal Bootstrap 3 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

00 Mengenal Bootstrap 3 PDF

Judul Asli:

Diunggah oleh

Hak Cipta:

Format Tersedia

Mengenal Bootstrap 3.

Bootstrap 3.0, http://getbootstrap.com/

Membuat Navigation Bar

Dari skrip di atas, Anda akan mendapat tampilan seperti ini:

Hapus <h1>Hello, world!</h1> dan gantikan dengan skrip berikut:

Perhatikan beberapa bagian skrip yang sama/identik seperti id=slide-promo

Menambahkan Display Produk

Hasilnya akan tampak kurang lebih seperti berikut:

Navigasi Kategori Produk

Paling Bawah, Footer

Caranya, sebelum </div> terakhir tambahkan skrip berikut:

Selesai sudah pengenalan Bootstrap dalam pembuatan halaman web.

Anda mungkin juga menyukai