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.