Bootstrap Part 5 :

Membuat Jumbotron
dengan Bootstrap
 Jumbotron merupakan semacam bentuk yang di buat untuk tujuan membuat semacam
pengumuman,konten khusus atau informasi tentang halaman website.
 biasanya jumbotron di buat pada halaman depan website.
 secara default tampilan umum jumbotron bootstrap berwarna abu-abu dengan sisi bulat
pada tiap sudut jumbotron.
 jumbo tron berisi text di dalamnya yang bebas anda customize sesuai keinginan anda.
 Hampir seluruh design template website sekarang ini rata-rata semua menggunakan
jumbotron untuk memberi informasi tentang halaman website pada halaman depannya.

 jumbotron bootstrap juga dapat anda modifikasi sendiri dengan menambahkan css
anda sendiri dan dapat anda design sesuai dengan keinginan anda.
Part 6 Membuat Pesan Alert Dengan
Bootstrap
 bootstrap menyediakan class khusus untuk membuat pesan alert dengan sangat mudah. di
buktikan dengan kemudahan penggunaan bootstrap yang hanya tinggal menambahkan
nama-nama class yang sudah di sediakan oleh bootstrap.
 untuk cara membuat pesan alert dengan bootstrap caranya cukup mudah. anda hanya
perlu menambahkan class “alert” untuk mendefinisikan penggunaan alert bootstrap.
 selanjutnya tambahkan satu class lagi untuk menentukan jenis alert apa yang di gunakan.
alert-success, alert-danger, alert-info dan alert-warning. berikut ini di jelaskan tentang
penggunaan class alert bootstrap.
 alert-success
 class alert-success di gunakan untuk membuat pesan alert yang berwarna hijau, biasanya
pesan alert ini di gunakan untuk membuat pesan sukses.
 alert-info
 class alert-info di gunakan untuk membuat pesan alert yang berwarna biru, biasanya pesan
alert ini di gunakan untuk membuat pesan yang berupa informasi.
 alert-warning
 class alert-warning di gunakan untuk membuat pesan alert yang berwarna kuning, biasanya
pesan alert ini di gunakan untuk membuat pesan yang berupa peringatan.
 alert-danger
 class alert-danger di gunakan untuk membuat pesan alert yang berwarna merah, biasanya
pesan alert ini di gunakan untuk membuat pesan gagal.
 Cara Membuat Pesan Alert Dengan
Bootstrap
 untuk membuat pesan alert dengan bootstrap caranya sangat mudah, buat sebuah
element <div> yang berisi pesan peringatan alert yang ingin di buat.
 kemudian pada tag pembuka <div> berikan class “alert” dan satu lagi gunakan class
alert seperti penjelasan di atas.
 bisa menggunakan alert-success untuk membuat pesan alert sukses, alert-info untuk
membuat pesan alert informasi, alert-warning untuk membuat pesan alert berupa
peringatan dan alert-danger untuk membuat pesan alert gagal. perhatikan contoh
berikut ini.
 Part 7 Cara Membuat Icon Dengan
Bootstrap
 Cara Membuat Icon Dengan Bootstrap – 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
Bootstrap Part 8 : Pagination dan
Breadcrumb Bootstrap
 Pagination dan Breadcrumb Bootstrap – tentu anda sudah pernah
mendengar tentang pagination dan breadcrumb.
 jika sebelumnya anda harus mendesign sendiri bentuk pagination
dan breadcrumb anda maka dengan menggunakan bootstrap anda
dapat membuat pagination dan bootstrap dengan cepat dan tampilan
design pagination dan breadcrumb bootstrap juga sudah sangat
modern.
 Untuk membuat pagination dan breadcrumb bootstrap anda harus
menggunakan list HTML.
 kemudian berikan class yang sudah di sediakan oleh bootstrap untuk
membuat pagination dan breadcrumb.
 gunakan class “pagination” untuk membuat pagination, dan gunakan
class “breadcrumb” untuk membuat breadcrumb.
 dapat di lihat pada contoh penggunaan class pagination di atas.
 untuk membuat pagination tambahkan class “pagination” pada tag
<ul>.
 dan untuk membuat pagination dengan ukuran besar tambahkan
class “pagination-lg”.
 dan tambahkan class “pagination-sm” untuk membuat pagination
dengan ukuran yang lebih kecil.
Bootstrap Part 9 : Membuat List Dengan
Bootstrap
 Untuk membuat list dengan bootstrap caranya sangat mudah. tambahkan
class “list-group” pada element pembuka list. contohnya pada tag <ul>
pembuka.

<ul class="list-group">

kemudian tambahkan class “list-group-item” pada tiap-tiap tag <li> pembuka

untuk menandakan bahwa list tersebut merupakan anak dari list.
<li class="list-group-item">
 anda juga bisa membuat penandaan dengan warna pada list bootstrap di atas. caranya anda bisa
menambahkan class berikut
 .list-group-item-success
untuk memberi warna hijau pada list
 .list-group-item-info
untuk memberi warna biru pada list
 .list-group-item-warning
untuk memberi warna kuning pada list
 .list-group-item-danger
untuk memberi warna merah pada list
Bootstrap Part 10 : Membuat Panel
Dengan Bootstrap
 Panel adalah sebuah kotak yang memiliki garis dan padding.
 bootstrap menyediakan class panel untuk membuat kotak yang memiliki heading
dan footer kotak tersebut.
 panel yang di sediakan oleh bootstrap terdiri dari panel heading atau bagian
kepala panel, panel body atau panel bagian badan, dan panel footer atau panel
yang terletak di bawah panel sebagai footer.
 Ada beberapa class panel yang di sediakan oleh bootstrap untuk membuat panel.
 panel-default
 merupakan class yang di gunakan untuk membuat panel dengan warna standar.
 panel-success
 merupakan class yang di sediakan bootstrap untuk membuat panel yang berwarna hijau.
 panel-info
 merupakan class yang di sediakan bootstrap untuk membuat panel yang berwarna biru.
 panel-warning
 merupakan class yang di sediakan bootstrap untuk membuat panel yang berwarna kuning.
 panel-danger
 merupakan class yang di sediakan bootstrap untuk membuat panel yang berwarna merah.
 panel-heading
 merupakan class yang di sediakan bootstrap untuk membuat panel bagian kepala atau heading.
 panel-body
 merupakan class yang di sediakan bootstrap untuk membuat panel bagian badan.
 panel-footer
 merupakan class yang di sediakan bootstrap untuk membuat panel bagian footer atau kaki.
 contoh panel di atas merupakan panel default. perhatikan contoh di atas untuk membuat panel dengan
bootstrap.
 untuk membuat panel dengan bootstrap yang pertama kali di buat adalah menentukan model panel. contoh
di atas kita menggunakan “panel-default”

 <div class="panel panel-default">

 </div>
 untuk menggunakan model panel yang lain anda bisa mengganti panel-default dengan panel-success,
panel-danger, panel-info, panel-warning seperti yang sudah di jelaskan di atas.

 kemudian berikan isi panel dengan membuat panel heading, panel-body dan panel-footer, panel-heading
dan panel-footer merupakan optional, anda bisa menggunakannya boleh tidak sesuai dengan keinginan
anda.
Bootstrap Part 11 : Membuat Navigasi
Tabs dan Pills Bootstrap
 Membuat menu navigasi tabs
 Navigasi tabs di buat menggunakan class “nav nav-tabs”.
 class “nav” untuk mendefinisikan bahwa yang kita buat adalah
navigasi.
 dan “nav-tabs” di gunakan untuk membuat navigasi dengan bentuk
tabs.
 class “nav” dan “nav-tabs” di letakkan pada tag <ul>.
 sedikit penjelasan tambahan tentang penggunaan class “active” dan
“disabled” dalam membuat navigasi tabs.
 anda bisa menambahkan class active atau disabled pada tag <li> yang
anda inginkan.
Navigation Tabs
Navigation Dropdown
Membuat Dynamic tabs
Navigation Pills
Navigation Pills vertical