Bootstrap

Membuat responsive
web design dengan
bootstrap
Permasalahan
Membuat tampilan web yang bagus dan
konsisten itu susah dan butuh waktu lama
Untuk SEO (Search Engine Optimization)
yang lebih baik, hanya gunakan tag <div> dan
html untuk menyimpan isi web. Sedangkan
CSS digunakan untuk mengatur tampilan.
Pembuatan dan pengelolaan layout web
berbasis CSS susah, dan seringkali
ditampilkan berbeda oleh beberapa Browser.
Permasalahan Tambahan
Semakin banyak
perangkat yang
digunakan untuk
mengakses website
Diperlukan desain
web yang dapat
menyesuaikan
perangkat yang
digunakan oleh
pengguna
Responsive Web
Design (RWD)
Solusi: Twitter Bootstrap
getbootstrap.com
Bootstrap adalah sebuah framework css yang dapat digunakan
untuk mempermudah membangun tampilan web. Bootstrap
pertama kali di kembangkan pada pertangahan 2010 di Twitter
oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap
dikembangkan secara open source dengan lisensi MIT. Kita bisa
memantau perkembangan proyek Bootstrap melalui web resminya
di getbootstrap.com dan Githubnya di
https://github.com/twbs/bootstrap.
Banyak sekali tampilan web yang telah saya buat dengan bantuan
Bootstrap, bahkan web poliban yang ini pun kami kembangkan
tamplatenya dengan Bootstrap. Bootstrap sangat memanjakan kita dalam
membuat tampilan web dan membuat kerja menjadi lebih cepat.
Bagaimana tidak, kita tidak lagi harus memulai semuanya dari nol ketika
membuat tampilan web. Bootstrap telah menyediakan banyak sekali class
CSS dan plugin JavaScript yang bisa langsung kita pakai untuk membantu
mempermudah kita membuat halaman web. Karena kemudahaan
penggunaan, banyaknya komponen dan kelengkapan dokumentasinya,
saat ini Bootstrap menjadi salah satu front-end framework yang paling
banyak digunakan di dunia.
Twitter Bootstrap
Twitter Bootstrap merupakan framework
untuk membuat tampilan web yang
responsive
Twitter Bootstrap terdiri dari 3 komponen
utama yaitu:
File CSS
File Javascript
File untuk glyphicons
Why use Bootstrap?
Easy to use: Anybody with just basic knowledge of
HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS
adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first
styles are part of the core framework
Browser compatibility: Bootstrap is compatible with
all modern browsers (Chrome, Firefox, Internet
Explorer, Safari, and Opera)
Isi dari Bootstrap
bootstrap/
├── css/
Ň ├── bootstrap.css
Ň ├── bootstrap.css.map
Ň ├── bootstrap.min.css
Ň ├── bootstrap.min.css.map
Ň ├── bootstrap-theme.css
Ň ├── bootstrap-theme.css.map
Ň ├── bootstrap-theme.min.css
Ň └── bootstrap-theme.min.css.map
├── js/
Ň ├── bootstrap.js
Ň └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
Sebelum
kita
akan
mulai
bagaimana
cara
menggunakan Bootstrap dalam membuat halaman
web, kita perlu tahu dulu bagaimana cara Bootstrap itu
bekerja. Sehingga nanti kita bisa mengoptimalkan
manfaatnya buat pembuatan web kita. Jadi pada
dasarnya Bootstrap merupakan sebuah kumpulan class
CSS dan plugin JavaScript yang sudah siap pakai.
Biasanya kan ketika kita membuat sebuah tampilan
web kita akan membuat file HTML yang di dalamnya
berisi berbagai macam TAG HTML.
Cara Menggunakan Bootstrap
Download bootstrap dari
http://getbootstrap.com
Extract file hasil download ke folder
website
Include file dari bootstrap ke dokumen
html
Misalnya saja ketika kita ingin membuat sebuah tombol berwarna
merah seperti berikut:
Maka yang biasa kita lakukan adalah membuat sebuah TAG HTML
yaitu TAG BUTTON kemudian memberikan CLASS, contohnya
tombol-merah, seperti berikut:
Selanjutnya kita harus membuat file CSS untuk mengatur bagaimana
penampilan dari dari CLASS atau ID button yang telah kita buat tadi.
Misalnya seperti berikut:
Bayangkan kalo banyak tombol......
Nah, dengan Bootstrap kita tidak lagi akan memulainya dari nol. Tidak lagi
harus menulis semua kode CSS, terutama yang standar, karena itu sudah
dilakukan oleh Bootstrap. Kita hanya perlu menuliskan kode CSS yang kita
butuhkan saja yang tidak disediakan oleh Bootstrap.
Umpamanya kita ingin membuat sebuah tombol, maka kita bisa melihat
bahwa Bootstrap telah menyediakan 6 jenis tombol yang bisa kita gunakan.
Kalau kita ingin membuat tombol merah, kita cukup memberikan class btn
dan btn-danger pada TAG BUTTON yang ingin kita buat merah, maka
simsalabim langsung berubah jadi merah dengan indah, bahkan tanpa kita
turun tangan untuk menulis kode CSS-nya.
Hasilnya seperti berikut:
Halaman Web dengan Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Navigation Bar (navbar)
Digunakan untuk membuat header untuk
navigasi (biasanya berada di bagian atas
website)
Navbar dapat berwarna terang atau gelap.
Navbar dapat selalu terlihat di posisi atas atau
bawah
Navbar bisa rata kanan
Navbar dapat otomatis
berkembang/menyempit.
Navbar Basic
<nav class="navbar navbar-default">
<!-- ganti navbar-default menjadi navbar-inverse untuk membalik warna -->
<!-- tambahkan navbar-fixed-top atau navbar-fixed-bottom untuk posisi tetap -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
Navbar Inverse & Fix Position
<nav class="navbar navbar-default">
<!-- ganti navbar-default menjadi navbar-inverse untuk membalik warna -->
<!-- tambahkan navbar-fixed-top atau navbar-fixed-bottom untuk posisi tetap -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
Navbar Right
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
Navbar Dropdown
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
Navbar Auto Collapse
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
Jumbotron
Merupakan kelas pada Bootstrap yang digunakan untuk menampilkan
kotak besar yang biasanya digunakan untuk menarik perhatian.
Ukuran teks yang berada dalam kelas Jumbotron akan diperbesar.
Contoh:
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Jumbotron (2)
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML,
CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Carousel
Bootstrap menyediakan sebuah plugin untuk
menampilkan Carousel.
Carousel merupakan serangkaian gambar yang
tampil secara bergantian
Carousel (2)
<div id="myCarousel" class="carousel slide" dataride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel"
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" ariahidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel"
role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" ariahidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Carousel (3)
Anda dapat menambahkan caption pada gambar di
Carousel
Contoh:
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Venice.</p>
</div>
</div>
Image
Bootstrap menyediakan 3 kelas untuk
menampilkan gambar: .img-rounded, .imgcircle, dan .img-thumbnail
Contoh:
<img src=”candi.jpg" class="img-rounded" alt=”Candi"
width="304" height="236">
<img src=”candi.jpg" class="img-circle" alt=”Candi"
width="304" height="236">
<img src=”candi.jpg" class="img-thumbnail" alt=”Candi"
width="304" height="236">
Button
Bootstrap menyediakan 7 macam “gaya” untuk tombol
dengan menggunakan kelas: .btn-default, .btn-primary,
.btn-success, .btn-info, .btn-warning, .btn-danger, .btnlink
Contoh:
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Grid System
Bootstrap memungkinkan lebar layar dibagi menjadi 12
kolom.
Anda dapat mengelompokkan beberapa kolom menjadi satu.
Terdapat 4 kelas: xs (phones), sm (tablets), md (desktops),
dan lg (larger desktops)
Grid System (2)
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-0 col-md-4">.col-xs-0 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Belajar Lebih Lanjut?
http://www.w3schools.com/bootstrap/default.asp
Google
Youtube