Jumbotron, button group dan custom icon

Tujuan pemakaian bootstrap adalah untuk tampilan bagus dengan perintah sesingkat mungkin, pada praktek ini akan ditunjukkan cara penggunaan jumbotron untuk memperkuat efek suatu tampilan dengan bentuk kartu-kartu data yang digabung dengan custom icon yang diambil dari font awesome dan penambahan btn-group serta tambahan tooltip yang menarik dengan tether.js.min

Membuat Jumbotron, Button Group, Button Tooltip

  • Lakukan download pada materi les ini untuk mengambil file tambahan tether.min.js
    • simpan file di dalam folder tempat kerja anda dalam folder js
  • Jalankan program bracket
  • Pilih menu File, Open folder, buka folder tempat anda bekerja
  • Pilih menu File, New
    • Tekan Ctrl + S dan simpan dengan nama jumbotron.js (kali ini menggunakan javascript)
  • Pilih menu File, New
    • Tekan Ctrl + S dan simpan dengan nama jumbotron.css
  • Pilih menu File, New

    • Tekan Ctrl +S dan simpan dengan nama jumbotron.html
  • pada file jumbotron.html

    • Dengan menggunakan teknik emmet ketik perintah berikut:
    • ! lalu tekan tab
    • meta:vp ,tekan tab
    • link 3x ke arah bootstrap, fontawesome dan jumbotron.css
    • script:src 4x ke arah jquery, tether, bootstrap dan jumbotron.js
    • hasil akhir file html akan tampak seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jumbotron</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="jumbotron.css">
</head>
<body>

   ...    
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/tether.min.js"></script>
    <script src="jumbotron.js"></script>
</body>
</html>

Membuat Jumbotron dengan Emmet

  • Jumbotron akan membuat kotak tampilan seperti card
  • dengan menggunakan teknik emmet coba ketik tag berikut
    • div.container>div.row tekan tab
  • lanjutkan dengan
    • (div.col-sm-3>div.jumbotron.jumbo$>h3{JUDUL-$}+p{lorem20}+a.btn.btn-primary.form-control{Open})*12
    • sebelum menekan tab, perhatikan tulisan lorem20, tempatkan kursor tepat di belakang angka 0, kemudian tekan tab sehingga tulisan lorem ipsum 20 kata akan muncul dulu,
    • tempatkan kursor di belakang angka 12 kemudian tekan tab membuat 12 jumbotron
  • Penjelasan
    • setiap satu kotak jumbotron diatas terdapat 3 komponen
    • yang pertama h3 dengan diberi tulisan Judul-$ nantikan akan menjadi judul-1, judul-2, dst
    • yang kedua p{lorem20} yang akan menjadikan paragraf dengan tulisan bahasa latin (lorem-ipsum sebanyak 20 kata)
    • yang ketiga tag hyperlink yaitu a yang diberi class btn sehingga menjadi sebuah button dengan judul Open
    • jumbotron akan dibuat sebanyak 12x sehingga pada posisi akhir terdapat tulisan *12
    • tentu saja bila dihitung ini akan melebihi batas 1 layar dari bootstrap(12 kolom), tapi disini anda akan melihat bila jumlah kolom tidak cukup maka secara otomatis tampilan jumbotron akan bergeser kebawah.

Melakukan customize Jumbotron dengan css

  • Pada bagian ini kita akan mengubah warna background
  • Merubah penampilan h3, paragraf dan button khusus di jumbo1
  • Buka file css dan ketik perintah berikut:
/* mengatur seluruh jumbotron */
.jumbotron {
    margin-top: 10px;
    text-align: center;
}
/* setting warna background dan tulisan jumbo 1*/
.jumbo1 {
  background-color: #1693A7;
  color: #F8FCC1;
}
/* mengatur judul */
.jumbo1 h3 {
  font-size: 20px;
  text-align: center;
  color: #C8CF02;
}
/* tulisan di dalam jumbotron */
.jumbo1 p {
  text-align: justify;
}
/* tombol di dalam jumbotron */
.jumbo1 a {
  background-color: #E6781E;
}

Menggunakan button group

  • suatu button bila digunakan secara berjajar, terkadang kita menginginkan tampilan yang lebih rapi dengan menyatukan bentuk tampilan dari tombol itu, maka disini akan anda lihat teknik cara tampilan merapikan button-button dengan menggunakan class btn-group
  • Pada jumbotron ke 2, hapus baris berikut: Open
  • Ketik perintah berikut pada posisi yang dihapus.
    • div.btn-group[role="group”]
    • dengan menggunakan class btn-group dan role=”group”, maka tombol akan dibuat secara berdampingan
  • selanjutnya di bawahnya ketik.
    • (a.btn.btn-info>span.fa.fa-play)*3
    • untuk tombol ke 1, Selanjutnya ubah tulisan fa-play menjadi fa-stop
    • untuk tombol ke 2, Selanjutnya ubah tulisan fa-play menjadi fa-pause

Membuat Tooltip

  • bila anda menggunakan tooltip yang terdapat secara default dari operating system tampilannya kurang menarik, maka dengan menggunakan javascript tambahan yang dimiliki oleh tether.min.js anda dapat menampilkan suatu tooltip yang lebih bagus tampilannya.
  • buka file jumbotron.js tambahkan ketikan javascript berikut:
    • anda dapat melakukan copy-paste dari kode dibawah ini
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
  • Kemudian cobalah pada tombol ketiga di jumbotron 3, ubah kode membuat button menjadi seperti berikut:
<a href=""  data-toggle="tooltip" data-placement="bottom" title="ini contoh tooltip" class="btn btn-primary form-control">Open</a>
  • Dengan membuat 2 kode program diatas , tooltip sudah siap digunakan,
    • cara melakukan test , letakkan posisi kursor tepat diatas tombol ketiga dari jumbotron.
    • bila perlu lakukan refresh dengan cara klik pada tombol live-preview untuk mematikan dan klik satu kali lagi untuk menghidupkan.

Memberikan gambar icon di tengah jumbotron.

  • suatu jumbotron terkadang tampilannya digunakan dengan menggunakan gambar / icon ditengahnya sehingga dapat lebih menarik, berikut teknik yang menggunakan gabungan font-awesome dengan sedikit tambahan css
  • Pada jumbotron ke empat, hapus seluruh ketikan lorem-ipsum
  • Ganti dengan ketikan berikut:
    • div.fa-icon>span.fa.fa-bomb
  • Pada css tambahkan perintah berikut:
.fa-icon {
  font-size: 100px;
  color: red;
  text-align: center;
  border-radius:250px;
  border: 10px solid #999999;
  margin-bottom: 20px;
}