Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download td - Description
Document related concepts
no text concepts found
Transcript
Html-css
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-withbootstrap/
Struktur Boostrap
• Bootstrap
dapat
didownload
http://getbootstrap.com
• Versi terbaru: v3.3.6
• Terdapat 3 folder:
– css
– fonts
– js
di:
Template Dasar HTML5
<!DOCTYPE html>
<head>
<title>HTML5 Template</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Template Dasar HTML + Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/jquery.js"></script>
<!-- Bootstrap javascript -->
<script src="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 = "css/bootstrap.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
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 class="span4"><p> Ini kolom ke 2, Class span4</p></div>
<div class="span4"><p> Ini kolom ke 3, Class span4</p></div>
</div>
...
• The Bootstrap grid system has four classes:
– xs (for phones)
– sm (for tablets)
– md (for desktops)
– lg (for larger desktops)
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;textalign:center;} p{margin-top:10px;font-size: 16px;}</style>
</head>
<body>
<div class="container">
<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 tablet
767px ke bawah
Fluid kolom (lebar tidak tetap)
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 Stikubank Semarang</strong><br>
Hl. Tri Lomba Juang No. 1<br>
Semarang, Jawa Tengah<br>
<abbr title="Phone">P:</abbr> 024-8311-668
</address>
<address>
<strong>Informasi:</strong><br>
<a href="mailto:#">[email protected]</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>
...
...
