Pemrograman Web Mengggunakan Bootstrap

TWITTER BOOTSTRAP
Bootstrap merupakan framework HTML, CSS dan JS yang paling popular untuk mendesain website
responsive. Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman
website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman
website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang
sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman
website sesuai dengan kebutuhan.
Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman
website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan
memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat
kompone n-komponen lainnya yang dibangun menggunakan JavaScript.
Twitter bootstrap atau sering disebut bootstrap bisa didownload pada website resminya di
http://getbootstrap.com/.
Kelebihan Bootstrap
1. Membuat website menjadi lebih cepat.

2. Tampilan web responsive (bisa menyesuaikan tampilan sesuai device yang digunakan untuk
membuka website)
3. Mudah digunakan
4. Kompatibel dengan berbagai browser
Cara Menggunakan Bootstrap
1. Download bootstrap terbaru di http://getbootstrap.com/getting-started/#download. Pilih yang
source code.
2. Extract file zip hasil download sehingga Anda mendapat struktur direktori seperti di bawah ini
Di dalam folder dist berisi folder css, js, fonts. Ketiga folder tersebut dibutuhkan oleh web yang
nantinya akan kita buat. Sementara di folder docs/examples berisi contoh web yang dibuat
menggunakan bootstrap.
3. Masuk ke folder dist. Copy folder css, fonts, js ke folder yang Anda siapkan untuk aplikasi web.
4. Download jquery dari https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js. Simpan
dengan nama jquery.min.js ke dalam folder js
Membuat Web Pertama Dengan Bootstrap
1. Tambahkan HTML5 doctype di awal dokumen HTML

Selalu gunakan HTML5 doctype pada awal dokumen HTML, dilanjutkan dengan atribut lang dan
character set yang sesuai.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 mengutamakan perangkat mobile

Bootstrap 3 dirancang untuk responsif terhadap perangkat mobile. Mengutamakan perangkat
mobile adalah bagian inti bootstrap. Untuk memastikan render yang tepat dan sentuhan zooming,
tambahkan kode berikut di dalam <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 Width=device-width : digunakan untuk mengatur halaman untuk mengikuti lebar layar

perangkat yang digunakan untuk membuka website.
 Initial-scale = 1 : menentukan tingkat zoom awal saat halaman dibuka
3. Containers
Bootstrap membutuhkan container untuk membungkus isi website.
Ada 2 kelas (CSS class) container yang bisa dipilih :
 .container : menyediakan lebar container yang tetap responsif
 .container-fluid : menyediakan lebar container yang mencakup seluruh lebar viewport
Note : Anda tidak bisa meletakkan sebuah container di dalam container lain
Contoh Sederhana Menggunakan bootstrap

Simpan file berikut ini menggunakan nama contohbs.html dan simpan ke dalam folder yang sudah Anda
siapkan.
Hasil dari program di atas jika dibuka di PC/laptop sebagai berikut
Jika dibuka menggunakan smartphone dengan resolusi layar 320x480 menjadi sebagai berikut
Bootstrap Grid System
Bootstrap grid system membagi halaman menjadi 12 kolom. Jika Anda tidak ingin menggunakan 12
kolom sendiri-sendiri, Anda bisa mengelompokkan beberapa kolom menjadi lebih besar. Bootstrap grid
system bersifat responsive, sehingga kolom akan mengatur ulang secara otomatis tergantung ukuran
layar.
Class Bootstrap Grid System

Bootstrap grid system memiliki 4 class CSS yang bisa digunakan
 .xs (untuk handphone)
 .sm (untuk tablet)
 .md (untuk desktop)
 .lg (untuk desktop yang lebih besar)
4 class CSS tersebut bisa dikombinasikan untuk membuat layout dinamis dan fleksibel.
Struktur Dasar Bootstrap Grid System
Awalnya buatlah sebuah baris dengan perintah <div class=”row”>. Selanjutnya tentukan jumlah kolom dengan
perintah <div class=”col-*-*”>. Jumlah kolom dalam 1 baris harus 12
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
Contoh : 3 kolom dengan ukuran sama
<!DOCTYPE html>
<html lang="en">
<head>
<title>3 Kolom</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>3 Kolom</h1>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div></div>
</div>
</div>
</body>
</html>
CLASS CSS BOOTSTRAP : TIPOGRAFI
1. Heading (<h1> - <h6>

Semua heading HTML <h1> sampai <h6> juga tersedia dalam class .h1 sampai .h6. Bisa digunakan
ketika Anda ingin membuat style heading yang akan ditampilkan secara inline.
2. <small>
<small> digunakan untuk membuat teks menjadi lebih kecil, juga bisa digunakan untuk membuat
secondary text di dalam heading
3. <mark>
<mark> digunakan untuk membuat highilight pada teks
Contoh penggunaan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tipografi 1</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>heading 1 <small>pendahuluan</small></h1>
<a class='h1'>paragrap h1</a>
<small>small</small> <br>
<p>paragraph pertama berisi tentang bagaimana cara membuat <mark>dokumen
html</mark></p>
</div>
</body>
</html>
4. Contextual color dan background
Class yang bisa digunakan untuk pewarnaan text dengan arti tertentu yaitu .text-
muted, .text-primary, .text-success, .text-info, .text-warning, and.text-
danger.
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
Hasilnya
Adapun class yang bisa digunakan untuk warna background dengan arti tertentu yaitu :
.bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
Hasilnya
5. Perataan text
Ada beberapa class yang bisa digunakan untuk mengatur perataan text, yaitu text-left, text-
center, text-right, text-justify , text-nowrap.
Contoh :
<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Hasil
6. Capitalization Text
Contoh
<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Hasil
CLASS CSS BOOTSTRAP : TABLE
1. Basic Table
Basic table dalam bootstrap hanya memiliki garis pembatas horizontal dan padding yang ringan.
Gunakan .table untuk membuat table sederhana
Contoh:
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Hasilnya
2. Striped Rows
Gunakan class .table-striped untuk menambahkan garis zebra pada baris table
Contoh
<table class="table table-striped">

<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
Hasil
3. Bordered Table
Gunakan class .table-bordered untuk menambahkan border pada setiap sisi table dan kolom.
Contoh:
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
Hasil
4. Hover Rows
Gunakan class .table-hover untuk mengatifkan state hover (warna background baris berubah
saat kursor melewati baris) pada baris dalam table.
Contoh
<table class="table table-hover">

<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
Hasil
Jalankan di browser dan gerakkan kursor melewati atas baris agar terlihat jelas hasilnya
5. Condensed Table
Gunakan .table-condensed untuk membuat table lebih kompak dengan menghilangkan
setengah padding
Contoh
<table class="table table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
Hasil
6. Contextual Class
Contextual class dapat digunakan untuk memberi warna background pada <tr> dan <td>
Class yang bisa digunakan
Class Deskripsi
.active Mengaktifkan state hover pada kolom atau baris
.success Indikasi sukses atau aksi positif
.info indikasi informasi netral
.warning indikasi peringatan yang butuh perhatian
.danger indikasi berbahaya atau aksi negatif
Contoh
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
Hasil
7. Responsive Table
Class .table-responsive digunakan untuk membuat table yang responsive. Tabel akan memiliki scroll
horizontal jika dibuka pada device dengan layar kecil.
Contoh
<div class="table-responsive">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
CLASS CSS BOOTSTRAP : IMAGES
1. Rounded Corners
Gunakan class .img-rounded untuk menambahkan tepian gambar yang melengkung.
<img src="gambar.jpg" class="img-rounded" width="304" height="236">
2. Circle
Gunakan class .img-circle untuk membentuk gambar menjadi lingkaran
<img src="gambar.jpg" class="img-circle" width="304" height="236">
3. Thumbnail
Gunakan class .img-thumbnail untuk membentuk gambar menjadi thumbnail
<img src="gambar.jpg" class="img-thumbnail" width="304" height="236">
Hasil
4. Responsive Images
Gunakan class .img-responsive untuk membuat gambar menjadi responsive. Jika menggunakan
class ini jangan berikan atribut width dan height
<img src="gambar.jpg" class="img-responsive">
CLASS CSS BOOTSTRAP : ALERTS
1. Alerts
Gunakan class .alerts diikuti dengan salah satu class .alert-success, .alert-
info, .alert-warning, .alert-danger sesuai kebutuhan.
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">

<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">

<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">

<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
Hasilnya
2. Closing Alerts
Tambahkan atribut class=”close” dan data-dismiss=”alert” pada class .alert untuk
membuat tombol x yang digunakan untuk menutup alerts
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Hasil
3. Animated Alerts
Tambahkan class .fade dan .in untuk menambahkan fading effect ketika menutup alerts
CLASS CSS BOOTSTRAP : BUTTONS
1. Button Styles
Gunakan class di bawah ini untuk mengatur style pada buttons
 .btn-default
 .btn-primary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-link
Class .btn dapat digunakan oleh <a>, <button> dan <input>
<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>
Hasil
2. Button Sizes
Class berikut dapat digunakan untuk mengatur ukuran buttons
 .btn-lg
 .btn-md
 .btn-sm
 .btn-xs
<button type="button" class="btn btn-primary btn-lg">Large</button>

<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Hasil
3. Active / Disabled Button
Gunakan class .active untuk membuat tombol bisa diklik, dan tambahkan class .disabled untuk
membuat button yang tidak bisa diklik
<button type="button" class="btn btn-primary active">Active Primary</button>

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Hasil
CLASS CSS BOOTSTRAP : GLYPHICONS
Bootstrap menyediakan banyak glypicons yang disediakan oleh http://glyphicons.com/. Glyphicons

dapat digunakan pada text, buttons, toolbar, navigation, form dan lain-lain
1. Format Penggunaan Glyphicons

Gunakan syntax berikut untuk menggunakan glyphicons
<span class="glyphicon glyphicon-name"></span>
Contoh
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>

<p>Envelope icon as a link:
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
Hasil
CLASS CSS BOOTSTRAP : LABELS AND BADGES
1. Badges
Badges adalah indicator berupa angka untuk menunjukkan jumlah dalam bentuk link.
Gunakan class .badge di dalam <span> untuk membuat badges
<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
Hasil
Badges juga bisa digunakan di element lain seperti buttons
<button type="button" class="btn btn-primary">Primary <span

class="badge">7</span></button>
Hasil
2. Labels
Label digunakan untuk menambahkan informasi.
Gunakan class .label, diikuti dengan class .label-default, .label-primary, .label-
success, .label-info, .label-warning, .label-danger di dalam <span>
<h1>Example <span class="label label-default">New</span></h1>
Hasil
<span class="label label-default">Default Label</span>

<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
\
<span class="label label-danger">Danger Label</span>
Hasil

Bahasa

Pemrograman Web Mengggunakan Bootstrap

Diunggah oleh

Informasi Dokumen

Hak Cipta

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Pemrograman Web Mengggunakan Bootstrap

Diunggah oleh

Hak Cipta:

TWITTER BOOTSTRAP

1. Membuat website menjadi lebih cepat.

Membuat Web Pertama Dengan Bootstrap

1. Tambahkan HTML5 doctype di awal dokumen HTML

2. Bootstrap 3 mengutamakan perangkat mobile

 Width=device-width : digunakan untuk mengatur halaman untuk mengikuti lebar layar

Contoh Sederhana Menggunakan bootstrap

Class Bootstrap Grid System

Struktur Dasar Bootstrap Grid System

1. Heading (<h1> - <h6>

<p class="text-left">Left aligned text.</p>

<p class="text-lowercase">Lowercased text.</p>

<table class="table table-striped">

<table class="table table-hover">

<img src="gambar.jpg" class="img-circle" width="304" height="236">

<div class="alert alert-info">

<div class="alert alert-warning">

<div class="alert alert-danger">

Class .btn dapat digunakan oleh <a>, <button> dan <input>

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary btn-lg">Large</button>

<button type="button" class="btn btn-primary active">Active Primary</button>

Bootstrap menyediakan banyak glypicons yang disediakan oleh http://glyphicons.com/. Glyphicons

1. Format Penggunaan Glyphicons

<span class="glyphicon glyphicon-name"></span>

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>

Badges juga bisa digunakan di element lain seperti buttons

<button type="button" class="btn btn-primary">Primary <span

<span class="label label-default">Default Label</span>

Anda mungkin juga menyukai