a.
Typography
Typography akan membuat tampilan teks
pada halaman web menjadi rapi, mudah dibaca, dan nyaman dilihat dengan
menggunakan font dan ukuran huruf tertentu. Terdapat banyak class yang telah
disediakan dalam fitur-fitur Typography Bootstrap. Contohnya adalah sebagai
berikut:
|
Nama Class
|
Keterangan atau Fungsi
|
|
.lead
|
Untuk
teks stand out
|
|
.small
|
Untuk
teks kecil
|
|
.text-left
|
Untuk
teks align kiri / rata kiri
|
|
.text-center
|
Untuk
teks align tengah / rata tengah
|
|
.text-right
|
Untuk
teks align Kenan / rata kanan
|
|
.text-justify
|
Untuk
teks justify / rata kanan kiri
|
|
.text-nowrap
|
Untuk
teks no wrap / tanpa enter
|
|
.text-lowercase
|
Untuk
teks huruf kecil semua
|
|
.text-uppercase
|
Untuk teks
huruf besar semua
|
|
.text-capitalize
|
Untuk
teks capital / huruf depannya besar semua
|
|
.list-unstyled
|
Untuk
me remove list untuk tag <ul> atau <ol> seperti list-style dsb
|
|
.list-inline
|
Untuk
list agar berada pada satu baris
|
b. Table
HTML tables digunakan untuk
mempresentasikan data dengan metode grid seperti baris dan kolom. Dengan
menggunakan Bootstrap, tampilan tabel dapat diimprovisasi dengan cara yang
simpel dengan gaya yang lebih baik.
Pada konsepnya pembuatan tabel
menggunakan framework bootstrap sama seperti membuat tabel pada html dengan
hanya menambahkan class pada tag <table> yaitu class tabel. Contoh
penggunaaannya dapat dilihat pada source code berikut ini:
|
<table
class="table">
<thead>
<tr>
<th>Row</th>
<th>First
Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
</tr>
</tbody>
</table>
|
Maka hasilnya adalah sebagai berikut:
c. Images
Gambar atau image sering sekali
ditemukan pada disain web modern. sehingga mempercantik gambar dan mengatur
atau menempatkan gambar tersebut secara benar pada halaman web sangat penting
untuk meningkatkan kepuasan atau pengalaman user dalam mengakses halaman
website.
berikut ini adalah jenis-jenis
improvisasi tampilan gambar yang disediakan pada framework Bootstraps dan cara
pemanggilannya.
|
<img
src="125x125.jpg" class="img-rounded" alt="Rounded
Image">
<img
src="125x125.jpg" class="img-circle" alt="Circular
Image">
<img
src="125x125.jpg" class="img-thumbnail"
alt="Thumbnail Image">
|
Terdapat 3 styles yang disediakan
Bootstrap yaitu Rounded Images, Circle Image, dan Thumbnails images. Contoh
hasilnya dapat dilihat pada gambar beikut ini:
d. Button
Komponen buttons yang disediakan
memiliki banyak tema warna yang menarik. Button di bootstrap ada beberapa gaya
yang siap kita gunakan, di antaranya adalah sbb:
Berikut ini adalah contoh
implementasi button menggunakan Bootstrap.
|
<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>
|
e. Progress-bar
Komponen Progress Bar dapat digunakan
untuk menampilkan kemajuan proses secara up to date. Implementasinya adalah
sebagai berikut:
|
<div
class="progress">
<div class="progress-bar
progress-bar-success"
role="progressbar"
aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100"
style="width:40%"> 40% Complete (success)
</div>
</div>
<div
class="progress">
<div class="progress-bar
progress-bar-info"
role="progressbar"
aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"
style="width:50%"> 50% Complete (info)
</div>
</div>
<div
class="progress">
<div class="progress-bar
progress-bar-warning"
role="progressbar"
aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100"
style="width:60%"> 60% Complete (warning)
</div>
</div>
<div
class="progress">
<div class="progress-bar progress-bar-danger"
role="progressbar"
aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100"
style="width:70%"> 70% Complete (danger)
</div>
</div>
|
Hasilnya akan seperti ini:
f. Alerts
Komponen Alerts dirancang untuk
menampilkan tanda atau peringatan tertentu pada halaman web dengan banyak
pilihan tema warna. Implementasinya adalah sebagai berikut:
|
<div
class="container">
Berita
1
<div class="alert
alert-success alert-dismissable">
<button
type="button" class="close" data-dismiss="alert">×</button>
Anda berhasil !
</div>
<br/>
Berita
2
<div class="alert alert-success
alert-dismissable">
<button
type="button" class="close" data-dismiss="alert">×</button>
Anda bisa 2 !
</div>
<br/>
</div>
|
Hasilnya adalah sebagai berikut ini:
g. Form
Sama halnya dengan form pada HTML
biasa dalam membuat formulir inputan pada halaman web, namun Bootstrap
memberikan tampilan yang lebih cantik. berikut ini adalah contoh implementasi
Form menggunakan bootstrap:
|
<div
class="container">
<form>
<div
class="form-group">
<label
for="nama">Nama Anda:</label>
<input type="text"
class="form-control">
</div>
<div
class="form-group">
<label for="alamat">Alamat
anda:</label>
<input type="text"
class="form-control" id="alamat">
</div>
<button
type="submit" class="btn
btn-default">Submit</button>
</form>
</div>
|
Dan hasilnya akan seperti ini:
h. Icons
Bootstrap versi 3.3.6 terdiri lebih
dari 250 Glyphicons. Pada versi ini juga tersedia untuk font-format untuk
usability dan scalability yang lebih baik. Berikut ini adalah beberapada
Glyphicons yang dapat digunakan pada bootstrap. Untuk merubah warna pada icon
anda dapat memberikan style apada properti style pada tag icon yang akan
digunakan.
Untuk menggunakan bootstrap icon,
anda hanya perlu menggunakan tag <span> dan menambahkan atribut untuk
pemanggilan class. Contoh syntaxnya dapat dilihat pada contoh berikut ini.
<span class="glyphicon
glyphicon-class-name"></span>
Dimana glyphicon-class-name adalah
nama spesifik class untuk icon (misalnya glyphicon-search, glyphicon-user,
glyphicon-star etc.) yang didefinisakan pada file cootstrap.css.
Sebagai contoh anda dapat melihat penggunakan
icon search di bawah ini:
|
<!DOCTYPE
html>
<html
lang="en">
<head>
<title>Heading -
Labels</title>
<meta
charset="utf-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="css/bootstrap.min.css">
<link
rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div
class="container">
<form>
<button type="submit"
class="btn btn-default"><span class="glyphicon
glyphicon-search"></span> Search</button>
<button type="submit"
class="btn btn-primary"><span class="glyphicon
glyphicon-search"></span> Search</button>
</form>
</div>
</body>
</html>
|
Dan hasil outputnya adalah sebagai
berikut ini:
Jumit Casino: Get 50% bonus on your first deposit + 50 Free Spins
ReplyDeleteJumit 구미 출장마사지 Casino Bonus. 100% up to £200 Bonus + 100 free spins with no 익산 출장안마 deposit required. Play Slots, Blackjack, Roulette, 광주광역 출장샵 Video 김제 출장마사지 Poker. Jumit Casino 인천광역 출장샵