Typography, icon, list dan table
Dalam mengatur tampilan, pengaturan Text merupakan hal utama. Di dalam bootstrap telah disediakan beberapa class yang dapat mempercepat kerja kita dalam mengatur tampilan tulisan, membuat icon-icon yang umum digunakan dan menggabungkan icon dengan hyperlink menjadi suatu button yang menarik.
Typography, icon, list dan table
Default setting ukuran font
- Saat pertama kali menggunakan bootstrap, maka kita tahu bahwa font yang digunakan bukan font standard milik web.
- Berikut adalah setting Standard font yang digunakan oleh bootstrap
body { font-family: "Helvetica"; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
Praktek siswa
- pada bagian berikut akan diperlihatkan dalam praktek siswa beberapa cara mengubah penampilan dari teks dengan menggunakan class yang telah disediakan bootstrap.
- Perlu dijelaskan bawah pada bootstrap 4 tidak ada lagi glyphicon, maka apabila kita ingin menggunakan font berbentuk simbol kita harus menambahkan secara manual
- alternatif glyphicon pada bootstrap adalah http://fontawesome.io/
- berikut adalah langkah melakukan download dan menggabungkan dengan project saat ini.
- buka website fontawesome
- klik pada download
- lakukan extract file zip yang sudah didownload
- copy file css yang ada di dalam folder css ke dalam folder project yang kita buat (font-awesome.min.css)
- copy folder fonts ke dalam folder project kita
Langkah membuat file html dan css
- Jalankan program Brackets, pilih menu open folder dan buka folder tempat anda bekerja
- pilih menu File, new dan simpan dengan nama typography.css
- pilih menu File, new dan simpan dengan nama typography.html
- seperti langkah pada praktek sebelumnya buat dokumen html standard bootstrap dengan menggunakan emmet
- beberapa kata kunci emmet:
- ! (tanda seru)
- meta:vp
- link (arahkan ke 3 css, bootstrap, font-awesome, typography)
- script:src (arahkan ke 2 file js yaitu jquery dan bootstrap)
- hasil akhir typography.html dapat dilihat pada ketikan berikut:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Typography</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="typography.css"> </head> <body> ... <script src="js/jquery-2.2.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
- pada file typography.css ketik file berikut:
.kiri, .kanan { margin-top: 20px; padding-top: 20px; height: 1200px; color: white; font-size: 20px; } .kiri { background-color: #53777A; } .kanan { background-color: #C02942; }
- ketik div.container-fluid
- ketik div.row>div.col-sm-6.kiri+div.col-sm-6.kanan, untuk membagi menjadi 2
isi pada bagian kiri
- dengan menggunakan teknik emmet cobalah untuk mengetik kode html berikut:
<div class="col-sm-6 kiri text-center"> <h3>Text style</h3> <p><strong>tebal</strong></p> <p><em>miring</em></p> <p><u>underline</u></p> <p>ini <sub> subscript</sub><sup> superscript</sup></p> <p><del>dicoret</del></p> <h3>Perataan</h3> <p class="text-sm-left">Rata Kiri</p> <p class="text-sm-center">Rata tengah</p> <p class="text-sm-right">rata kanan</p> <h3>Warna standard</h3> <p class="text-muted">text-muted</p> <p class="text-primary">primary</p> <p class="text-info">info</p> <p class="text-success">success</p> <p class="text-warning">warning</p> <p class="text-danger">danger</p> <h3>Warna Background</h3> <p class="bg-warning">bg-warning</p> <p class="bg-primary">bg-primary</p> <p class="bg-inverse">bg-inverse</p> </div>
mengisi bagian kanan
<div class="col-sm-6 kanan"> <h3>font awesome</h3> <i class="fa fa-envira icon-biru"></i> menggunakan font symbol <p>untuk daftar dapat di lihat di link http://fontawesome.io/icons/</p> <h3>abrv</h3> <abbr title="Hypertext Markup Language">HTML</abbr> <h3>label</h3> <p>berita satu</p> <p>berita dua <span class="label label-info">new</span> </p> <p>berita tiga <span class="label label-warning label-pill">New</span> </p> <h3>List</h3> <ul>Daftar kendaraan <li>Mobil <ul class="list-inline"> <li class="list-inline-item">Toyota</li> <li class="list-inline-item">suzuki</li> </ul> </li> <li>Motor <ul class="list-unstyled"> <li>honda</li> <li>yamaha</li> </ul> </li> <li>Sepeda</li> </ul> </div> </div>
- penjelasan
- HTML
- abbr harus diikuti dengan title yang berisi kepanjangan dari teks singkatan
- membuat button bisa dengan banyak cara ada 2 cara yang umum
- menggunakan tag hyperlink a href
- menggunakan tag input type button
- gunakan emmet: input:b.btn.btn-primary
- untuk mengatur ukuran font awesome dan warna dapat menggunakan tag css berikut:
.icon-biru { color:aqua; font-size: 70px; }
- pada css diatas glyphicon akan diubah besarnya menjadi 70px (defaultnya adalah 14px)
- warna diubah menjadi biru
Membuat List
- pada umumnya style dibuat dengan menggunakan gabungan tag ul dan li
- bootstrap sudah menyiapkan beberapa nama class untuk list yaitu
- list-inline dan list-inline-item agar data ditampilkan secara mendatar
- list-unstyled, secara default list akan tampak bullet atau angka, bila menggunakan unstyled, bullet dan angka akan dihilangkan.
Membuat table
- lanjutkan mengisi bagian kanan dengan membuat tabel berikut:
- ketik div.table-responsive
- ketik table.table.table-bordered.table-hover.text-warning>(thead>tr>th*3)+(tbody>tr>td*3)*4
<div class="table-responsive"> <table class="table table-bordered table-hover text-warning"> <thead> <tr> <th>Nama</th> <th>Alamat</th> <th>Telp</th> </tr> </thead> <tbody> <tr> <td>Novi</td> <td>Manyar</td> <td>3721111</td> </tr> </tbody> <tbody> <tr> <td>Budi</td> <td>Manyar</td> <td>3762222</td> </tr> </tbody> <tbody> <tr> <td>Andri</td> <td>Jagalan</td> <td>3713333</td> </tr> </tbody> <tbody> <tr> <td>Yeni</td> <td>Jagalan</td> <td>3714444</td> </tr> </tbody> </table> </div>
- Penjelasan
- table-responsive bertujuan untuk menampilkan horizontal scroll bar pada alat ukuran hp
- table-bordered agar memberi bingkai di seluruh tabel
- table-hover agar saat mouse ada di atas suatu baris akan tampak berubah warna
- table-striped agar baris warna ganjil dan genap dibedakan.