p11 Responsive Web Bootstrap

Pemrograman Berorientasi Platform
Responsive Web Design dengan

Bootstrap
Responsive Web
• Web Responsive Design (RWD) pada dasarnya
menunjukkan bahwa situs web dibuat menggunakan
W3C CSS3 media dengan cairan proporsi berbasis
grid, untuk beradaptasi tata letak dengan melihat
lingkungan platform dan gambar fleksibel sebagai
hasilnya, pengguna di berbagai platform dan browser
akan memiliki akses ke satu sumber konten, ditata
sehingga mudah dibaca dan navigasi dengan minimal
mengubah ukuran, panning dan scrolling.
...
• Istilah Responsive Web Design sendiri pertama kali
diperkenalkan oleh Ethan Marcotte dalam bukunya
yang berjudul “Responsive Web Design”. Dibahas
mengenai 3 teknik yang digunakan dalam
membangun sebuah Responsive Web Design, yaitu:
flexible grid layout, flexible images dan media
queries.
Pengenalan
• Bootstrap adalah framework ataupun tools
untuk membuat aplikasi ataupun situs web
responsive secara cepat, mudah dan gratis.
• Bootstrap terdiri dari CSS dan HTML untuk
menghasilkan Grid Layout, Typography, Table,
Form, Navigation, dan lain-lain.
• Terdapat komponen UI: Transition,
Dropdown, Tab, Alert, Button, dan lain-lain.
Sejarah Bootstrap
• Bootstrap diciptakan oleh 2 orang

programmer Twitter: Mark Otto dan Jacob
Thornton pada tahun 2011.
• Dikenal pertama kali dengan nama Twitter
Bootstrap  Bootstrap.
• Sampai saat ini digunakan di berbagai website
di seluruh dunia.
• https://bootstrapbay.com/blog/built-with-
bootstrap/
Contoh Web dengan Bootstrap
• HBO NOW (https://order.hbonow.com/)
...
• Woodies Clo (https://woodiesclo.com/)
...
• New Relic (https://newrelic.com/)
Struktur Boostrap
• Bootstrap dapat didownload di:
http://getbootstrap.com
• http://getbootstrap.com/examples/theme/
• Versi terbaru: v3.3.7
• Terdapat 3 folder:
– css
– fonts
– js
Template Dasar HTML5
<!DOCTYPE html>
<head>
<title>HTML5 Template</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Contoh Penggunaan (1)
<html>
<head>
<title>Latihan Layout Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/css_kita.css">
</head>
<body>
< br><br>
</body>
</html>
Pada bagian body tambahkan:
<div class="container">
<div class="header">
<a class="judul">Judul Website</a>
</div>
<div class="content">
Selamat datang di website bla bla bla ...
</div>
<div class="footer">
© 2016. Designed by xxx
</div>
</div>
Pada bagian body ganti dengan:
<div class="header">
<a class="judul">Judul Website</a>
</div>
</div>
<div class="content">
Selamat datang di website bla bla bla ...
</div>
</div>
<div class="footer">
© 2016. Designed by xxx
</div>
</div>
Template Dasar HTML + Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="bootstrap/js/jquery.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
penjelasan
• Viewport: menggambarkan alat (notebook, tablet,
dekstop PC, cellular phone, dll) yang dapat
menampilkan halaman web.
meta viewport ini digunakan untuk mengatur
tampilan browser pada mobile device / tablet.
• Tag content=“width=device-width” digunakan untuk
mengatur lebar tampilan awal browser sesuai
dengan lebar device yang digunakan.
...
• Tag “initial-scale=1.0” digunakan untuk mengatur
level zoom dari tampilan saat ditampilkan.
• Untuk mengaktifkan fitur responsive web,
tambahkan tag berikut ini:
<link href = "bootstrap/css/bootstrap-

responsive.min.css" rel="stylesheet">
Grid dan Layout
• Grid adalah struktur 2 dimensi yang terdiri dari
sumbu horizontal dan vertikal (baris dan kolom).
• Dalam dunia web digunakan sebagai metode efektif
dalam menghasilkan layout yang konsisten
menggunakan HTML dan CSS.
• Sistem grid pada Bootstrap merupakan variasi dari
960 Grid System  lebar grid 940px dan jumlah
maksimal kolom 12 pada layar lebar (dekstop).
• Kelebihan: sintaks mudah dan bisa responsive.
Sistem Grid pada Bootstrap
Grid Option
• Grid System Bootstrap dapat bekerja berbagai
device yang terbagi 4 device yaitu:
- Extra Small (col-xs) : Smarthphone < 768px
- Small (col-sm) : Tablet >= 768px
- Medium (col-md) : Desktop >= 992px
- Large (col-lg) : Large Desktop > =1200px
Fixed dan Fluid Grid System
• Fixed Grid System terdiri dari 12 kolom dengan lebar
container 940px. Ukuran setiap kolom adalah 60px
dengan offset 20px.
• Jika fitur responsive diaktifkan, maka lebar akan
menjadi 724px atau 1170px (tergantung viewport di
mana halaman ditampilkan).
• Pada lebar di bawah 724px (layar smartphone /
tablet), kolom akan otomatis menjadi “fluid” yang
mengisi seluruh lebar viewport dan kolom akan
bertumpuk secara vertikal.
Grid Dasar
• Bootstrap menggunakan kelas CSS .row untuk
menghasilkan baris horizontal dan kelas CSS .spanx
untuk membuat kolom, di mana nilai x pada .spanx
menunjukkan banyaknya kolom yang ditampilkan .
• Nilai x = 1  12 kolom, x = 2  6 kolom, dst.
• Contoh:
<div class="row">
<div class="span4"><p> Ini kolom ke 1, Class span4</p></div>
</div>
...
Fixed Layout dan Fluid Layout
• Fixed layout adalah lebar kolom di-set 940px, bisa

bersifat responsive atau tidak.
• Untuk menghasilkan fixed layout, digunakan satu div
yang digunakan sebagai wrapper (pembungkus
seluruh elemen) dengan class .container.
...
<style>.container{margin-top:10px;background-color:#ccc;text-
align:center;} p{margin-top:10px;font-size: 16px;}</style>
</head>
<body>
<p >Ini adalah fixed layout <br />
dengan lebar 940px <br />
menggunakan class '.container'</p>
</div>
</body>
...
Fixed Layout + Responsive
...
Cara Kerja Fitur Responsive Bootstrap
• Metode untuk menampilkan halaman web pada

berbagai macam device dan ukuran layar, dalam
CSS3 disebut dengan Media Queries. Langkah-
langkah Media Queries dalam Bootstrap:
– Mengubah lebar kolom dalam grid.
– Menumpuk elemen halaman di manapun ketika
dibutuhkan.
– Membesarkan atau mengecilkan (resizing) judul-judul dan
teks pada halaman web disesuaikan dengan devicenya.
Perubahan Layar pada Bootstrap
Device Lebar Layout Lebar Kolom Jarak Kosong antar

kolom
Display besar 1200px ke atas 70px 30px
Default 980px ke atas 60px 20px
Potrait tablet 768px ke atas 42px 20px
Cellular phone - 767px ke bawah Fluid kolom (lebar tidak tetap)
tablet
Cellular phone 480px ke bawah Fluid kolom (lebar tidak tetap)
Tipografi dengan Bootstrap
• Typography adalah seni huruf.

• Bootstrap menggunakan jenis huruf (tipografi)
Helvetica Neue, Helvetica, Arial dan Sans Serif
sebagai standarnya.
• Heading
• Paragraph
• List (ordered, unordered, description list)
• dll
...
• Text align
<h4 class="text-left">Text Alignment</h4>
<p class="text-left">Kalimat ini rata di kiri.</p>
<p class="text-center" >Kalimat ini rata di tengah.</p>
<p class="text-right">Kalimat ini rata di sebelah kanan.</p>
...
• Addresses
<address>
<strong>Universitas Kristen Satya Wacana</strong><br>
Jl. Diponegoro 52-60<br>
Salatiga, Jawa Tengah<br>
<abbr title="Phone">P:</abbr> 0298-321212
</address>
<address>
<strong>Informasi:</strong><br>
<a href="mailto:#">info@uksw.edu</a>
</address>
...
...
• List
<h3>Favorite Outdoor Activities</h3>
<ul class="unstyled">
<li>Backpacking in Yosemite</li>
<li>Hiking in Arches
<ul>
<li>Delicate Arch</li>
<li>Park Avenue</li>
</ul>
</li>
<li>Biking the Flintstones Trail</li>
</ul>
Tabel
<table class="table">
<caption> Data User </caption>
<thead>
<tr>
<th>#</th>
<th align="center">Nama</th>
<th align="center">User ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>hhalat</td>
</tr>
...
<tr class="success">
<td>2</td>
<td>Susi</td>
<td>eesula</td>
</tr>
<tr>
<td>3</td>
<td>Eva</td>
<td>mmridh</td>
</tr>
<tr class="info">
<td>4</td>
<td>Solikin</td>
<td>ffazza</td>
</tr>
Form
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
...
...
bersambung...

p11 Responsive Web Bootstrap

Diunggah oleh

Informasi Dokumen

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

p11 Responsive Web Bootstrap

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrograman Berorientasi Platform

Responsive Web Design dengan

• Bootstrap diciptakan oleh 2 orang

<link href = "bootstrap/css/bootstrap-

• Fixed layout adalah lebar kolom di-set 940px, bisa

• Metode untuk menampilkan halaman web pada

Device Lebar Layout Lebar Kolom Jarak Kosong antar

• Typography adalah seni huruf.

Anda mungkin juga menyukai