Memberi data pada kolom bootstrap

Layout dasar yang sudah dibuat pada praktek 1, kita akan melanjutkan mengisi data pada kolom-kolom yang tersedia dengan teknik html, css dan bootstrap

Mengisi data pada setiap kolom

Langkah Praktek

  • Pilih menu File, Open Folder dan buka folder tempat anda bekerja
  • buka file index.html

  • Mengisi kolom kiri

    • Kolom kiri digunakan untuk menempatkan data Kategori anjing
    • tempatkan kursor di dalam class kiri
    • ketik h4.judul{Tipe Anjing}
    • ketik div.daftar
    • ketik a
    • link: gembala.html
    • di dalam hyperlink
    • img dan arahkan ke file /images/border-collie.png
    • h4{Gembala}
    • copy bagian href sebanyak 2x di bawahnya dan ganti informasi berikut:
    • link: pemburu.html, gambar: retriever.png, text: Pemburu
    • link: pelacak.html, gambar: beagle.png, text: Pelacak
    • berikut tampilan lengkap dari kolom kiri
<aside class="col-sm-2 kiri">
  <h4 class="judul">Tipe Anjing</h4>
  <div class="daftar">
    <a href="gembala.html">
      <img src="images/border-collie.png" alt="">
      <h4>Gembala</h4>
    </a>
    <a href="pemburu.html">
      <img src="images/retriever.png" alt="">
      <h4>Pemburu</h4>
    </a>
    <a href="pelacak.html">
      <img src="images/beagle.png" alt="">
      <h4>Pelacak</h4>
    </a>
  </div>
</aside>
  • Buka file css style.css dan tambahkan ketikan berikut:
.kiri .judul {
  color: chocolate;
  font-size: 1.3em;
}
.kiri img {
  max-width: 7em;
}
.kiri a h4 {
  font-size: 1em;
  margin: 0.3em 0 3em 0;
}

Mengisi kolom tengah

  • Kolom tengah digunakan untuk memberikan informasi artikel-artikel kemampuan anjing
  • tempatkan cursor di dalam class tengah
  • ketik article tekan tab
  • ketik h2{Tingkat Kecerdasan} tekan tab
  • ketik img tekan tab dan arahkan ke gambar images/big1.jpg
  • ketik div.row>(p.col-sm-10)+(div.col-sm-2) tekan tab
  • di dalam class col-sm-10 lakukan copy-paste teks berikut:
Anjing dianggap mempunyai kecerdasan yang cukup tinggi menurut penelitian ilmiah dan bukti-bukti lapangan. Tingkat kecerdasan anjing bergantung pada ras dan masing-masing anjing secara individu. Anjing ras Border Collie terkenal dapat mematuhi dan menjalankan berbagai macam perintah. Anjing ras lain mungkin tidak tertarik untuk menuruti perintah manusia, tapi lebih suka menunjukkan kepintaran dalam hal-hal lain seperti menggembalakan hewan ternak.
  • di dalam class col-sm-2,
    • ketik input:b tekan tab
    • ubah menjadi seperti perintah berikut:
<input type="button" value="More" class="btn btn-primary">
  • Lakukan hal yang sama seperti step diatas untuk artikel ke 2 dan ke 3 berikut:
  • artikel 2:
    • judul h2: Indera penciuman
    • gambar: images/big2.jpg
    • ketikan:
Anjing memiliki hampir 220 juta sel penciuman yang sensitif terhadap bau. Luasnya kira-kira selebar sapu tangan, sangat luas bila dibandingkan sel penciuman yang dimiliki manusia. Sebagai pembanding, manusia hanya memiliki 5 juta sel penciuman yang menempati luas selebar perangko. Beberapa jenis anjing ras bahkan sengaja dibiakkan agar lahir anak anjing dengan indera penciuman yang lebih bagus.
  • artikel 3:
    • judul h2: Makanan
    • gambar: images/big3.jpg
    • ketikan:
Anjing sering keranjingan makan rumput yang dapat menetralisir asam lambung dan membuat anjing muntah. Anjing dapat mengeluarkan zat yang tidak diinginkan dari perut dengan cara memuntahkannya. Kemampuan ini berasal dari kebiasaan makan yang dimiliki hewan yang berburu secara berkelompok. Makanan harus ditelan secepat mungkin supaya bisa makan sebanyak-banyaknya sebelum dihabiskan anggota kawanan yang lain. Sehabis makan, anjing sering memuntahkan kembali tulang-tulang yang tidak bisa dicerna, bulu hewan yang dimangsa, dan sebagainya.
  • Apabila ditampilkan secara lengkap
   <section class="col-sm-8 tengah">
       <article>
         <h2>Tingkat Kecerdasan </h2>
         <img src="images/big1.jpg" alt="">
         <div class="row">
           <p class="col-sm-10">
             Anjing dianggap mempunyai kecerdasan yang cukup tinggi menurut penelitian ilmiah dan bukti-bukti lapangan. Tingkat kecerdasan anjing bergantung pada ras dan masing-masing anjing secara individu. Anjing ras Border Collie terkenal dapat mematuhi dan menjalankan berbagai macam perintah. Anjing ras lain mungkin tidak tertarik untuk menuruti perintah manusia, tapi lebih suka menunjukkan kepintaran dalam hal-hal lain seperti menggembalakan hewan ternak.
           </p>
           <div class="col-sm-2">
             <input type="button" value="More" class="btn btn-primary">
           </div>
         </div>
      </article>

      <article>
        <h2>Indera penciuman </h2>
         <img src="images/big2.jpg" alt="">
         <div class="row">
           <p class="col-sm-10">
             Anjing memiliki hampir 220 juta sel penciuman yang sensitif terhadap bau. Luasnya kira-kira selebar sapu tangan, sangat luas bila dibandingkan sel penciuman yang dimiliki manusia. Sebagai pembanding, manusia hanya memiliki 5 juta sel penciuman yang menempati luas selebar perangko. Beberapa jenis anjing ras bahkan sengaja dibiakkan agar lahir anak anjing dengan indera penciuman yang lebih bagus.
           </p>
           <div class="col-sm-2">
             <input type="button" value="More" class="btn btn-primary">
           </div>
          </div>
      </article>
     <article>
         <h2>Makanan</h2>
         <img src="images/big3.jpg" alt="">
         <div class="row">
           <p class="col-sm-10">
             Anjing sering keranjingan makan rumput yang dapat menetralisir asam lambung dan membuat anjing muntah. Anjing dapat mengeluarkan zat yang tidak diinginkan dari perut dengan cara memuntahkannya. Kemampuan ini berasal dari kebiasaan makan yang dimiliki hewan yang berburu secara berkelompok. Makanan harus ditelan secepat mungkin supaya bisa makan sebanyak-banyaknya sebelum dihabiskan anggota kawanan yang lain. Sehabis makan, anjing sering memuntahkan kembali tulang-tulang yang tidak bisa dicerna, bulu hewan yang dimangsa, dan sebagainya.
           </p>
           <div class="col-sm-2">
             <input type="button" value="More" class="btn btn-primary">
           </div>
         </div>
       </article>

     </section>
  • untuk mengatur penampilan, buka style.css dan tambahkan perintah berikut:
article img {
  width: 100%;
  margin: 0.5em 0 1em 0;
}

article p {
  text-align: justify;
}

Mengisi kolom kanan

  • Tempatkan kursor pada kolom kanan
  • ketik a
    • link: makanan.html
    • di dalam hyperlink
    • img dan arahkan ke file /images/icon/food.png
    • h6{Makanan}
    • copy bagian href sebanyak 3x di bawahnya dan ganti informasi berikut:
    • link: racun.html, gambar: poison.png, text: Racun
    • link: olahraga.html, gambar: sport.png, text: Olah Raga
    • link: mainan.html, gambar: toy.png, text: Mainan
    • berikut tampilan lengkap dari kolom kanan
<aside class="col-sm-2 kanan">
   <a href="makanan.html">
     <img src="images/icon/food.png" alt="">
     <h6>Makanan</h6>
   </a>
   <a href="olahraga.html">
     <img src="images/icon/sport.png" alt="">
     <h6>Olah Raga</h6>
   </a>
   <a href="racun.html">
     <img src="images/icon/poison.png" alt="">
     <h6>Racun</h6>
   </a>
   <a href="mainan.html">
     <img src="images/icon/toy.png" alt="">
     <h6>Mainan</h6>
   </a>
 </aside>
  • pada style.css tambahkan aturan untuk kolom kanan

.kanan img {
max-width: 7em;
}
.kanan a h6 {
font-size: 1em;
margin: 0.3em 0 3em 0;
}

Mengatur tampilan untuk kolom yang tampak kosong

  • pada style.css tambahkan
.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -100000px;
    padding-bottom: 100000px;
}

Ringkasan Praktek

  • Sebagai perbandingan berikut adalah data lengkap index.html dan style.css
  • data index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <header class="container-fluid">
   <h1>header</h1>
 </header>
 <div class="container-fluid">
   <div class="row">
    <aside class="col-sm-2 kiri">
      <h4 class="judul">Tipe Anjing</h4>
      <div class="daftar">
        <a href="gembala.html">
          <img src="images/border-collie.png" alt="">
          <h4>Gembala</h4>
        </a>
        <a href="pemburu.html">
          <img src="images/retriever.png" alt="">
          <h4>Pemburu</h4>
        </a>
        <a href="pelacak.html">
          <img src="images/beagle.png" alt="">
          <h4>Pelacak</h4>
        </a>
      </div>
    </aside>
    <section class="col-sm-8 tengah">
       <article>
         <h2>Tingkat Kecerdasan </h2>
         <img src="images/big1.jpg" alt="">
         <div class="row">
           <p class="col-sm-10">
             Anjing dianggap mempunyai kecerdasan yang cukup tinggi menurut penelitian ilmiah dan bukti-bukti lapangan. Tingkat kecerdasan anjing bergantung pada ras dan masing-masing anjing secara individu. Anjing ras Border Collie terkenal dapat mematuhi dan menjalankan berbagai macam perintah. Anjing ras lain mungkin tidak tertarik untuk menuruti perintah manusia, tapi lebih suka menunjukkan kepintaran dalam hal-hal lain seperti menggembalakan hewan ternak.
           </p>
           <div class="col-sm-2">
             <input type="button" value="More" class="btn btn-primary">
           </div>
         </div>
      </article>

      <article>
        <h2>Indera penciuman </h2>
         <img src="images/big2.jpg" alt="">
         <div class="row">
           <p class="col-sm-10">
             Anjing memiliki hampir 220 juta sel penciuman yang sensitif terhadap bau. Luasnya kira-kira selebar sapu tangan, sangat luas bila dibandingkan sel penciuman yang dimiliki manusia. Sebagai pembanding, manusia hanya memiliki 5 juta sel penciuman yang menempati luas selebar perangko. Beberapa jenis anjing ras bahkan sengaja dibiakkan agar lahir anak anjing dengan indera penciuman yang lebih bagus.
           </p>
           <div class="col-sm-2">
             <input type="button" value="More" class="btn btn-primary">
           </div>
          </div>
      </article>
     <article>
         <h2>Makanan</h2>
         <img src="images/big3.jpg" alt="">
         <div class="row">
           <p class="col-sm-10">
             Anjing sering keranjingan makan rumput yang dapat menetralisir asam lambung dan membuat anjing muntah. Anjing dapat mengeluarkan zat yang tidak diinginkan dari perut dengan cara memuntahkannya. Kemampuan ini berasal dari kebiasaan makan yang dimiliki hewan yang berburu secara berkelompok. Makanan harus ditelan secepat mungkin supaya bisa makan sebanyak-banyaknya sebelum dihabiskan anggota kawanan yang lain. Sehabis makan, anjing sering memuntahkan kembali tulang-tulang yang tidak bisa dicerna, bulu hewan yang dimangsa, dan sebagainya.
           </p>
           <div class="col-sm-2">
             <input type="button" value="More" class="btn btn-primary">
           </div>
         </div>
       </article>

     </section>
    <aside class="col-sm-2 kanan">
       <a href="makanan.html">
         <img src="images/icon/food.png" alt="">
         <h6>Makanan</h6>
       </a>
       <a href="olahraga.html">
         <img src="images/icon/sport.png" alt="">
         <h6>Olah Raga</h6>
       </a>
       <a href="racun.html">
         <img src="images/icon/poison.png" alt="">
         <h6>Racun</h6>
       </a>
       <a href="mainan.html">
         <img src="images/icon/toy.png" alt="">
         <h6>Mainan</h6>
       </a>
     </aside>
   </div>
 </div>
  <footer class="container-fluid">
    <h1>footer</h1>
  </footer>
  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>
  • Data style.css
header, footer {
  background-color: #8A8780;
  color: #ddd;
  padding: 1em;
  text-align: center;
}

.kiri, .kanan {
  padding-top: 1.5em;
  background-color: #AACBB8;
  text-align: center;
  height: 100%;
}
.tengah {
  padding-top: 1.5em;
  background-color: #C1D0B9;
}

.kiri .judul {
  color: chocolate;
  font-size: 1.3em;
}
.kiri img {
  max-width: 7em;
}
.kiri a h4 {
  font-size: 1em;
  margin: 0.3em 0 3em 0;
}

article img {
  width: 100%;
  margin: 0.5em 0 1em 0;
}

article p {
  text-align: justify;
}

.kanan img {
  max-width: 7em;
}
.kanan a h6 {
  font-size: 1em;
  margin: 0.3em 0 3em 0;
}

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}