Bootstrap

PERTEMUAN 10
Bootsrap
Materi Pembahasan :
1. Pengertian Bootstrap
Bootstrap merupakan sebuah framework CSS, yang menyediakan kumpulan komponen
komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan
bersama sama. Bootstrap merupakan salah satu framework HTML, CSS dan javascript yang
paling populer di kalangan web developer. Bootstrap telah menyediakan kumpulan komponen
class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang
menarik, bersih dan ringan. Selain komponen class interface, bootstrap juga memiliki fitur grid
yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan
sangat mudah dan cepat. Bootstrap adalah sebuah framework CSS yang menyediakan
kumpulan script atau library CSS yang dibuat untuk membangun sebuah halaman web.
Menurut Abdulloh (2015:139)1 “Bootstrap merupakan salah satu framework CSS yang sangat
populer dikalangan pecinta pemrograman website. Dengan bootstrap, proses desain website
tidak dibuat dari nol, sehingga proses desain website lebih cepat dan mudah”.
2. Cara Mendapatkan Bootstrap

Bootstrap dapat diundur pada situs resminya, yaitu http://getbootstrap.com/docs/3.3/.
Struktur File 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
1Abdulloh, Rohi. 2015. Web Programming is Easy Panduan Membangun Web Responsive dengan PHP, jQuery, dan Bootstrap. Jakarta.
PT Gramedia.
ASEP HARDIYANTO WEB DESAIN UNIS

3. Keuntungan Bootstrap
Berikut ini akan di jelaskan beberapa kegunaan yang telah menjadi kelebihan pada bootstrap.
Adapun beberapa kelebihan bootstrap adalah sebagai berikut.
a. Penggunaan bootstrap sangat menghemat waktu.
b. Tampilan bootstrap yang sudah cukup terlihat modern.
c. Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu
tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet dan
smartphone.
d. Sangat ringan karena bootstrap di buat dengan sangat terstruktur.
e. Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan
sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan
bantuan framework css bootstrap
4. Cara Menggunakan Bootstrap

Cara menginstal bootstrap
Cara menginstall bootstrap secara ini sangat banyak di gunakan oleh pada developer, karena
para desainer web dapat menggunakan bootstrap tanpa harus terkoneksi dengan internet
lagi, karena file framework bootstrap sudah terletak pada PC server lokal. Caranya adalah
dengan mendownload file bootstrap kemudian simpan pada folder latihan. Berikutnya file
bootstrapnya :
Perhatikan code di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title> Latihan Web </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script> </head>
<body>
ISI HALAMAN WEB
</body>
</html>
5. Memanfaatkan Bootstrap
Berikut ini akan dibahas beberapa penggunaan bootstrap dalam membuat desain halaman web
yang responsive.
a. Membuat Tombol dengan Bootstrap
Pada kesempatan kali ini akan dibahas cara pembuatan tombol dengan bantuan Bootstrap.
Apa perbedaannya antara cara membuat tombol dengan menggunakan script css dan cara

membuat tombol dengan dengan bantuan bootstrap. Perbedaannya adalah jika
menggunakan script css, script css harus diketik terlebih dahulu, sedangkan membuat
tombol dengan bantuan bootstrap tidak perlu meng-coding atau mengetikkan script css,
dikarenakan sudah tersedia pada bootstrap. Metode menggunakannya pun cukup mudah,
hanya memanggil script tombol untuk bootstrap. Perhatikan cara menggunakannya.
<button class="btn"> Tombol </button>
Perhatikan pada tulisan yang berwarna merah, jadi yang perlu diganti adalah jenis (style) dari
tombol itu sendiri. Berikut adalah daftar jenis (style) tombol yang dapat digunakan:
Code Bentuk Tombol Warna
<button class="btn"> Tombol </button> Abu-abu
<button class="btn btn-danger"> Tombol

Merah
</button>
<button class="btn btn-info"> Tombol </button> Biru
<button class="btn btn-success"> Tombol

</button> Hijau
<button class="btn btn-primary"> Tombol

</button> Biru tua
<button class="btn btn-warning"> Tombol

</button> Oranye
<button class="btn btn-default"> Tombol

</button> Putih
<button class="btn btn-lg"> Tombol </button> Abu-abu besar
<button class="btn btn-sm"> Tombol </button> Abu-abu standar
<button class="btn btn-xs"> Tombol </button> Abu-abu kecil
<button class="btn btn-group-lg"> Tombol

Abu-abu standar
</button>
<button class="btn btn-group"> Tombol

Abu-abu standar
</button>

<button class="btn btn-group-sm"> Tombol
Abu-abu standar
</button>
<button class="btn btn-group-vertical"> Tombol

Abu-abu standar
</button>
<button class="btn btn-group-xs"> Tombol

Abu-abu standar
</button>
<button class="btn btn-link"> Tombol </button> Bentuk link
<button class="btn btn-toolbar"> Tombol

Abu-abu standar
</button>
<button class="btn btn-block"> Tombol

Abu-abu panjang
</button>
<button class="btn btn-group-justified">

Tombol </button> Abu-abu panjang
Dari sekian banyak jenis tombol, yang biasa digunakan adalah :

btn : membuat tombol berwarna abu-abu
btn-primary : membuat tombol berwarna biru tua
btn-success : membuat tombol berwarna hijau
btn-info : membuat tombol berwarna biru muda
btn-danger : membuat tombol berwarna merah
btn-default : membuat tombol berwarna putih
btn-warning : membuat tombol berwarna orange
Ukuran tombol yang disediakan oleh bootstrap :

• btn-lg : membuat ukuran tombol besar
• btn-md : membuat ukuran tombol sedang
• btn-sm : membuat ukuran tombol kecil
• btn-xs : membuat ukuran tombol sangat kecil

Berikut contoh penggunaannya:
Ketik script di bawah ini kemudian simpan dengan nama tombol.html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>pertemuan 10</title>
</head>
<body>
<div class="container">
<h1>Cara Membuat tombol dengan Bootstrap</h1>
<a href="#" class="btn btn-success btn-lg">Tombol</a>
<a href="#" class="btn btn-success btn-md">Tombol</a>
<a href="#" class="btn btn-success btn-sm">Tombol</a>
<a href="#" class="btn btn-success btn-xs">Tombol</a>
<br/><br/>
<a href="#" class="btn btn-primary btn-lg">Tombol</a>
<a href="#" class="btn btn-primary btn-md">Tombol</a>
<a href="#" class="btn btn-primary btn-sm">Tombol</a>
<a href="#" class="btn btn-primary btn-xs">Tombol</a>
<br/><br/>
<a href="#" class="btn btn-info btn-lg">Tombol</a>
<a href="#" class="btn btn-info btn-md">Tombol</a>
<a href="#" class="btn btn-info btn-sm">Tombol</a>
<a href="#" class="btn btn-info btn-xs">Tombol</a>
<br/><br/>
<a href="#" class="btn btn-danger btn-lg">Tombol</a>
<a href="#" class="btn btn-danger btn-md">Tombol</a>
<a href="#" class="btn btn-danger btn-sm">Tombol</a>
<a href="#" class="btn btn-danger btn-xs">Tombol</a>
<br/><br/>
<a href="#" class="btn btn-warning btn-lg">Tombol</a>
<a href="#" class="btn btn-warning btn-md">Tombol</a>
<a href="#" class="btn btn-warning btn-sm">Tombol</a>
<a href="#" class="btn btn-warning btn-xs">Tombol</a>
<br/><br/>
<a href="#" class="btn btn-default btn-lg">Tombol</a>
<a href="#" class="btn btn-default btn-md">Tombol</a>
<a href="#" class="btn btn-default btn-sm">Tombol</a>
<a href="#" class="btn btn-default btn-xs">Tombol</a>
</div>
</body>
</html>
Berikut hasilnya dapat dilihat di bawah ini :

b. Membuat Glyphicon
“Glyphicon adalah icon font merupakan icon set yang dikembangkan oleh Jan Kovarik seorang
web designer yang memberikan 200 jenis icon yang siap digunakan secara free untuk
melengkapi komponen Bootstrap supaya lebih berkesan proffesional dan tentunya lebih
responsif karena icon ini bisa menjadi pengganti icon atau gambar yang berformat PNG ataupun
SVG yang memiliki jumlah kilobytes yang cukup besar”.
(http://www.taufaner.web.id/2014/02/glyphicons-official-bootstrap-icon-font.html )
Bootstrap menyediakan fasilitas untuk membuat atau menampilkan icon dengan sangat mudah,
fasilitas ini di sebut dengan “Glyphicon”. ada sangat banyak icon yang di sediakan oleh
bootstrap. dan masing-masing sudah di beri nama dan kita hanya perlu memanggil nama class
nya masing-masing untuk menampilkan icon bootstrap yang di inginkan. Untuk menampilkan
icon bootstrap yang pertama kali harus di lakukan adalah menambahkan class “glyphicon” di
dalam tag <span> pembuka. setelah menambahkan class glyphicon kemudian tambahkan nama
class icon masing-masing sesuai dengan icon yang ingin kita inginkan. untuk melihat icon-icon
yang sudah di sediakan oleh bootstrap anda bisa melihatnya langsung pada situs resmi bootsrap
Berikut ini adalah cara menggunakan glyphicon bootstrap : Script untuk menuliskan glyphicon
sebagai berikut :
<span class=”jenis glyphicon”></span> Text
Contoh :
<span class=”glyphicon glyphicon-home”></span> Beranda Hasilnya seperti ini :
<span class=”glyphicon glyphicon-home”></span> Beranda
Jenis Glyphicon Teks didepan Glyphicon

Jadi yang dapat diganti-ganti adalah jenis glyphicon dan teks yang terdapat didepannya. Yang
perlu menjadi bahan catatan dalam penggunaan glyphicon adalah gambar glyphicon harus
disesuaikan dengan jenis teks yang terdapat didepannya. Artinya antara gambar dengan tulisan
harus sesuai.
Jenis-jenis Glyphicon yang disediakan oleh bootstrap :

Membuat glyphicon di dalam tombol :
Ketik script di bawah ini kemudian simpan dengan nama glyphicon1.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/glyphicon.css" />
<title>Pertemuan 10</title>
</head>
<body>
<div class="row">
<h3>Kolaborasi Button and Glyphicon</h3>
<button class="btn btn-default"><span class="glyphicon glyphicon-repeat"></span> Cycle</button>
<button class="btn btn-default"><span class="glyphicon glyphicon-cog"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-th-large"></span> windows</button>
<button class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span></button>
<h3>Kolaborasi Button and Glyphicon</h3>
<button class="btn btn-default"><span class="glyphicon glyphicon-leaf"></span> normal</button>
<button class="btn btn-default"><span class="glyphicon glyphicon-leaf"></span> gly-rotate-90</button>
</div>
</div>
</body>
</html>
Hasilnya dapat dilihat di bawah ini :

c. Mengenal Layout Responsive
Layout (desain) responsive, menurut Winarno (2015:3)2 “bahwa semua display harus menerima
konten yang sama, namun dibangun dengan fleksibel, sehingga mengoptimalkan tampilan
untuk tiap piranti”. Salah satu library untuk membuat desain responsif adalah Bootstrap.
Didalam bukunya Abdulloh (2015:141)3 dikatakan “Hal penting yang perlu diperhatikan dalam
membuat desain responsive adalah Layout. Layout website harus bisa berubah-ubah sesuai
dengan layar device yang digunakan untuk menampilkan website”.
Layout responsive adalah sebuah tampilan website dimana display sebuah perangkat dapat
merespon halaman website mengikuti bentuk dari display perangkat pengaksesnya.
1) Viewport
Tag ini digunakan untuk menyesuaikan tampilan web agar sesuai atau menyesuaikan
secara otomatis mengikuti lebar perangkat. Misalkan apabila Anda menggunakan
smartphone, ketika perangkat tersebut berada pada posisi horizontal atau vertikal maka
lebar halaman web juga akan berubah lebarnya menyesuaikan posisi perangkat tersebut.
Selain itu ukuran web juga akan menyesuaikan diri dengan ukuran display (layar) masing-
masing perangkat baik itu smartphone, tablet maupun PC.
Code untuk viewport :

Script ini diletakkan diantara tag <head> ... </head>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
2) Image Responsive
Images responsive maksudnya adalah apabila terdapat sebuah gambar pada bagian isi
(content) web, maka gambar tersebut akan ditampilkan sesuai dengan aslinya apabila
diakses menggunakan perangkat dekstop seperti PC, tetapi apabila ditampilkan
menggunakan perangkat smartphone atau tab maka tampilan gambar tersebut akan
mengecil mengikuti posisi dari display tersebut.
Script untuk image responsive :

Script ini diletakkan diantara tag <head> ... </head>
<style> img {max-width:100%;} </style>
Berikut adalah contoh dari image responsive dan viewport
2
Winarno, Edy., dkk. 2015. Desain Web Responsif dengan HTML5 dan CSS3. PT Gramedia . Jakarta..
3Abdulloh, Rohi. 2015. Web Programming is Easy Panduan Membangun Web Responsive dengan PHP, jQuery, dan Bootstrap. PT
Gramedia. Jakarta.

Posisi horizontal
Posisi vertikal
3) Sistem Grid
Grid System pada bootstrap merupakan pengaturan ukuran yang di tampilkan pada
monitor. Grid system berfungsi untuk membuat pengaturan untuk lebar dari masing-
masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan
halaman website yang kita buat dengan bootstrap.
Menurut Winarno (2015:149) 4 “Sistem grid adalah stuktur di mana Anda bisa membangun
layout dari website. Ini terdiri dari baris horizontal dan kolom vertikal”.
Pada dasarnya sistem grid pada bootstrap merupakan pengaturan ukuran yang di
tampilkan pada display monitor, baik itu untuk display monitor, tablet atau smartphone.
Sistem grid bootstrap memiliki kegunaan untuk membuat pengaturan untuk lebar (width)
layout dari masing-masing komponen web.
Bootstrap memiliki 12 grid dan metode untuk memanggilnya menggunakan class.
Bootstrap memiliki beberapa class grid dan setiap class grid memiliki fungsinya masing-
masing. Jenis grid pada bootstrap sebagai berikut :
1. col-lg-* digunakan untuk mengatur grid pada monitor komputer

yang berukuran besar (>=1200 px).
2. col-md-* digunakan untuk mengatur grid pada layar monitor
komputer yang berukuran sedang (>=992 px).
3. col-sm-* digunakan untuk mengatur grid pada monitor yang
berukuran tablet (>=768 px).
4Winarno, Edy., Ali Zaki, SmitDev Community, 2015. Desain Web Responsif dengan HTML5 dan CSS3. Jakarta. PT. Elex
Media Computindo.

4. col-xs-* digunakan untuk mengatur grid untuk ukuran handphone
(>768 px).
Tanda (*) merupakan nilai (value) berupa angka antara 1 – 12. Jika nilai yang diberikan kecil
maka banyaknya grid semakin banyak dan berlaku sebaliknya semakin besar nilai angka
yang diberikan semakin sedikit pula jumlah gridnya.
Metode pemanggilan class grid.
<div class=’col-sm-12’> .. </div>
class=’col-sm-12’ dapat diartikan bahwa grid yang dibuat berbentuk colom (col) dengan
ukuran sedang (sm) dan jumlah grid nilainya adalah (12). Berikut contoh sistem grid
menggunakan bootstrap untuk layar ukuran layar ukuran sedang (md) :
Ketik script di bawah ini kemudian simpan dengan nama grid.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href=" css/bootstrap.min.css" />
<style>img {max-width:100%;} </style>
<style type="text/css">
div{
background: #2ea3f2;
text-align: center;
border: 1px solid #fff;
padding: 10px;
color: #fff;
}
</style>
</head>
<body>
<center><h1>Mengenal Grid System Bootstrap</h1></center>
<br/>
<div class="col-md-12">.col-md-12</div>

</body>
</html>
Berikut adalah hasilnya dapat dilihat di bawah ini :
Sistem grid pada bootstrap memungkinkan membuat kolom sampai dengan 12 kolom
dalam satu halaman. Dari 12 kolom tersebut dapat digunakan sesuai dengan kebutuhan
yang pada intinya total kolom harus berjumlah 12 dalam satu halaman.
Jadi dapat di simpulkan bahwa bootstrap membagi halaman website menjadi 12 grid.
Seperti sudah dijelaskan di awal bahwa jenis grid yang disediakan oleh bootstrap terdiri
dari empat ukuran, yaitu untuk layar monitor menggunakan col-lg-*, untuk layar monitor
ukuran sedang menggunakan col-sm-*, untuk layar monitor tablet menggunakan col-md-
*, dan selanjutnya untu layar smartphone menggunakan colxs-*.
Perbedaannya akan sangat tampak jika menggunakan col-md-* dan col-xs-* apabila diakses
menggunakan opera emulator dengan type Sony Experia Ray (632x906 pixel). Berikut
hasilnya :
Perbandingan hasil antara menggunakan col-md-* dan col-xs-* :

Menggunakan col-md-* Menggunakan col-xs-*
Struktur Dasar Grid :
<div class="row">
<div class="col-*-*"> ... </div>
</div>
</div>
Keterangan :
class=”container” : digunakan untuk membuat layout layar menjorok kedalam
class=”container-fluid” : digunakan untuk membuat layar full
class=”row” : digunakan untuk membuat baris
col : perintah untuk membuat kolom
Table Grid System
Large devices
Extra small devices Small devices Medium devices
Desktops
Phones (<768px) Tablets (>=768px) Desktops (>=992px)
(>=1200px)
Collapsed to start, Collapsed to start, Collapsed to start,
Horizontal at all
Grid behaviour horizontal above horizontal above horizontal above
times
breakpoints breakpoints breakpoints

Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Number of
12 12 12 12
columns
Column width Auto ~62px ~81px ~97px
30px (15px on
30px (15px on each 30px (15px on each 30px (15px on each
Gutter width each side of a
side of a column) side of a column) side of a column)
column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes
Membuat Grid Sama Tinggi

Untuk membuat grid sama tinggi maka langkah yang efektif adalah dengan menambahkan
script CSS. Jika grid yang dibuat tidak sama tinggi atau menyesuaikan dengan perangkat
maka pengaturan tinggi didalam style CSS cukup ditambahkan script seperti berikut :
height : 0 auto; : digunakan untuk kolom pada grid menjadi responsive

(dinamis/berubah)
height : 120px; : digunakan untuk kolom pada grid menjadi fixed (tetap)
Berikut contoh perbedaan antara kolom dinamis dan tetap.
d. Membuat Form dengan Bootstrap

Bootstrap menyediakan class khusus lagi untuk mendesign form dan pastinya terlihat sangat
modern dan bersih, berikut model desain form yang disediakan oleh bootstrap:
1) Form-Vertical
Ketik code di bawah ini kemudian simpan dengan nama form.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href=" css/bootstrap.min.css" />
</head>
<body>
<h1>Membuat Form dengan Bootstrap</h1>
<form>
<div class="form-group">
<label for="nama">Nama Anda:</label>
<input type="text" class="form-control">
</div>
<label for="alamat">Alamat anda:</label>
<input type="text" class="form-control" id="alamat">
</div>
<label for="save"> </label>
<input type="submit" value=”Save” class="btn btn-primary btn-md">
</form>
</div>
</body>
</html>
Hasilnya dapat dilihat di bawah ini:
2) Form-Inline
Ketik code di bawah ini kemudian simpan dengan nama form2.html

<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<h1>Membuat Form dengan Bootstrap </h1>
<form class="form-inline">
<label for="nama">Nama Anda:</label>
</div>
<label for="alamat">Alamat anda:</label>
</div>
<button type="submit" class="btn btn-primary">Simpan</button>
</form>
</div>
</body>
</html>
3) Form-Horizontal
Ketik code di bawah ini kemudian simpan dengan nama form3.html

<head>

</head>
<body>
<h1>Membuat Form dengan Bootstrap</h1>
<form class="form-horizontal">
<label class="control-label col-sm-2" for="nama">Nama Anda:</label>
<div class="col-sm-10">
</div>
</div>
<label class="control-label col-sm-2" for="alamat">Alamat anda:</label>
</div>
</div>
<label class="control-label col-sm-2" for="tombol"></label>
<input type="Submit" value="Simpan" class="btn btn-danger">
</div>
</div>
</form>
</div>
</body>
</html>

e. Membuat Table dengan Bootstrap
Membuat table dengan bootstrap ini akan di bahas tentang cara membuat atau mendesign
table dengan menggunakan bootstrap. Untuk membuat table dengan bootstrap caranya sangat
mudah Anda hanya perlu memasukkan class-class bootstrap yang di gunakan untuk mendesign
table. Adapun beberapa class bootstrap yang di gunakan untuk design atau membuat table
adalah sebagai berikut.
• .table class ini di gunakan untuk mendefinisikan atau membuat table
standar/ table biasa.
• .table-striped table-striped merupakan class tambahan untuk
membuat table dengan menggunakan bootstrap.
class ini berfungsi untuk membuat baris table yang bergaya belang-beling (strip).
• .table-bordered table-bordered di gunakan untuk membuat table yang
memiliki garis dan termasuk class tambahan pada bootstrap untuk
mendesign table.
• .table-hover table-hover merupakan class tambahan untuk mendesign
table menggunakan bootstrap. table hover di gunakan untuk
Membuat efek hover pada row table pada saat cursor mouse di letakkan di atas row table dan
untuk membuat pewarnaan pada row atau table data anda dapat menggunakan class-class
berikut ini yang dapat anda tambahkan pada tag <tr> untuk memberi warna pada table row,
atau tambahkan pada tag <td> untuk memberi warna pada table data.
• .success class ini di gunakan untuk memberi tanda sukses atau warna
hijau pada table row atau table data.
• .danger class ini di gunakan untuk memberi warna merah pada table
row atau table data.
• .info class ini di gunakan untuk memberi warna biru pada table row
atau table data.
• .warning class ini di gunakan untuk memberi warna kuning pada table
row atau table data.
Tabel standar
Untuk membuat tabel standar cukup dengan menambahkan class .table pada tag <table>
Ketik script di bawah ini kemudian simpan dengan nama table.html

<head>
<style>img {max-width:100%;}</style>
</head>
<body>

<div class="row">
<h1>Table Standar</h1>
<table class="table">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Pekerjaan</th>
<th>Alamat Rumah</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Udin</td>
<td>Tani</td>
<td>Sukabumi</td>
</tr>
<tr>
<td>02</td>
<td>Jono</td>
<td>Wiraswasta</td>
<td>Jawa Tengah</td>
<tr>
<td>03</td>
<td>Ucok</td>
<td>Karyawan Swasta</td>
<td>Medan</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

Tabel Bordered
Caranya adalah dengan menambahkan class . table-bordered di dalam tag
<table> Ketik script di bawah ini kemudian simpan dengan nama
table_boot2.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Tabel Bordered Stripped
Caranya adalah dengan menambahkan class .table-bordered table-striped di dalam tag
<table> Ketik script di bawah ini kemudian simpan dengan nama tabel_boot3.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>

<td>15.000</td>
</tr>
</tbody>
/table>
</div>
</body>
</html>
Table Hover
Caranya adalah dengan menambahkan class .table-bordered table-striped table-hover di dalam
tag <table>
Ketik script di bawah ini kemudian simpan dengan nama tabel_boot4.html

<head>
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>No</th>

<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>15.000</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Latihan
Ubah tugas UTS kalian menggunakan framework bootsrap. Agar tampilan web UTS
kalian terlihat lebih modern
 Setiap link menggunakan tombol
 saat riwayat pendidikan menggunakan tabel
 Tingkatan pendidikan mengunakan simbol/glypicon

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

Bootstrap

Diunggah oleh

Hak Cipta:

Format Tersedia

PERTEMUAN 10

2. Cara Mendapatkan Bootstrap

ASEP HARDIYANTO WEB DESAIN UNIS

4. Cara Menggunakan Bootstrap

Perhatikan code di bawah ini :

ASEP HARDIYANTO WEB DESAIN UNIS

Code Bentuk Tombol Warna

<button class="btn"> Tombol </button> Abu-abu

<button class="btn btn-danger"> Tombol

<button class="btn btn-info"> Tombol </button> Biru

<button class="btn btn-success"> Tombol

<button class="btn btn-primary"> Tombol

<button class="btn btn-warning"> Tombol

<button class="btn btn-default"> Tombol

<button class="btn btn-lg"> Tombol </button> Abu-abu besar

<button class="btn btn-sm"> Tombol </button> Abu-abu standar

<button class="btn btn-xs"> Tombol </button> Abu-abu kecil

<button class="btn btn-group-lg"> Tombol

<button class="btn btn-group"> Tombol

ASEP HARDIYANTO WEB DESAIN UNIS

<button class="btn btn-group-vertical"> Tombol

<button class="btn btn-group-xs"> Tombol

<button class="btn btn-link"> Tombol </button> Bentuk link

<button class="btn btn-toolbar"> Tombol

<button class="btn btn-block"> Tombol

<button class="btn btn-group-justified">

Dari sekian banyak jenis tombol, yang biasa digunakan adalah :

Ukuran tombol yang disediakan oleh bootstrap :

ASEP HARDIYANTO WEB DESAIN UNIS

Berikut hasilnya dapat dilihat di bawah ini :

ASEP HARDIYANTO WEB DESAIN UNIS

<span class=”jenis glyphicon”></span> Text

<span class=”glyphicon glyphicon-home”></span> Beranda

Jenis Glyphicon Teks didepan Glyphicon

ASEP HARDIYANTO WEB DESAIN UNIS

Jenis-jenis Glyphicon yang disediakan oleh bootstrap :

ASEP HARDIYANTO WEB DESAIN UNIS

Hasilnya dapat dilihat di bawah ini :

ASEP HARDIYANTO WEB DESAIN UNIS

Code untuk viewport :

<meta name=”viewport” content=”width=device-width, initial-scale=1”>

Script untuk image responsive :

<style> img {max-width:100%;} </style>

Berikut adalah contoh dari image responsive dan viewport

ASEP HARDIYANTO WEB DESAIN UNIS

1. col-lg-* digunakan untuk mengatur grid pada monitor komputer

ASEP HARDIYANTO WEB DESAIN UNIS

Metode pemanggilan class grid.

<div class=’col-sm-12’> .. </div>

Ketik script di bawah ini kemudian simpan dengan nama grid.html

ASEP HARDIYANTO WEB DESAIN UNIS

Berikut adalah hasilnya dapat dilihat di bawah ini :

Perbandingan hasil antara menggunakan col-md-* dan col-xs-* :

ASEP HARDIYANTO WEB DESAIN UNIS

Struktur Dasar Grid :

Table Grid System

ASEP HARDIYANTO WEB DESAIN UNIS

Membuat Grid Sama Tinggi

height : 0 auto; : digunakan untuk kolom pada grid menjadi responsive

Berikut contoh perbedaan antara kolom dinamis dan tetap.

d. Membuat Form dengan Bootstrap

ASEP HARDIYANTO WEB DESAIN UNIS

Hasilnya dapat dilihat di bawah ini:

ASEP HARDIYANTO WEB DESAIN UNIS