Persiapan Struktur dasar Bootstrap

Topik ini membahas proses Download program, gambar dan teks yang dibutuhkan dalam membuat struktur dasar website yang akan didesain dengan menggunakan framework bootstrap, sebelum mengikuti materi kedua dan seterusnya diharapkan untuk melihat materi ini

Persiapan bootstrap

  • Program yang dibutuhkan
    • Lakukan Install program bracket dan google chrome
    • Langkah untuk melakukan instalasi dapat dilihat pada materi HTML5-CSS3 yang pertama
  • Download Gambar dan file-file yang dibutuhkan
    • pada materi ini, klik pada link download
    • tempatkan pada folder document anda
    • Lakukan extract file zip yang sudah didownload
    • bila anda tidak memiliki program untuk melakukan extact zip file anda dapat melakukan download program 7z secara gratis dari link ini
    • untuk melakukan extract file zip, klik kanan pada file zip, nanti akan ditampilkan pilihan extract.
    • setelah diextract anda akan mendapatkan folder baru dengan nama Bootstrap
    • folder ini yang akan menjadi lokasi tempat kerja kita selama praktek bootstrap ini

Langkah Praktek siswa

  • Jalankan program Brackets
  • Pilih menu File, Open Folder, pilih folder document anda, kemudian pilih folder Bootstrap

  • Membuat file CSS

    • Pilih menu File, New
    • Tekan Ctrl+S dan beri nama style.css
    • Pilih menu View, Horizontal split.
  • Membuat index.html

    • Pilih menu File, New
    • tekan ctrl + S untuk menyimpan dan beri nama index.html
    • dengan menggunakan teknik emmet lakukan langkah
    • ketik ! lalu tekan tab
    • pada title isi dengan nama anda
    • dibawah tag title agar tampilan web dapat mendeteksi ukuran layar dari alat yang membuka web,
    • maka tambahkan perintah viewport
    • agar lebih singkat gunakan emmet dengan mengetik meta:vp lalu ketik tab
    • secara otomatis akan diketik perintah berikut:
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • dibawah perintah viewport tambahkan 2 link css dengan cara berikut:
    • ketik link tekan tab, lalu arahkan ke file css milik bootstrap (css/bootstrap.min.css)
    • ketik link tekan tab, lalu arahkan ke style.css
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  • tambahkan link javascript(js) di bagian bodi (diatas tag /body) dengan cara berikut:
    • ketik script:src lalu tekan tab arahkan ke jquery
      • ketik script:src lalu tekan tab arahkan ke javascript milik bootstrap
  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  • untuk lengkapnya akan menjadi seperti ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</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="style.css">
</head>
<body>

  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>
  • Penjelasan
    • CSS
    • CSS selalu berhubungan dengan tampilan web
    • untuk link css/bootstrap.min.css artinya kita memanggil program yang sudah dibuat oleh team bootstrap agar dapat digunakan file HTML yang kita buat
    • untuk link style.css, agar kita dapat melakukan custom tampilan artinya walaupun kita menggunakan banyak fasilitas dari bootstrap kita masih dapat melakukan perubahan sesuai selera kita, misalnya membuat tombol menggunakan teknik bootstrap tapi warna dari tombol sesuai dengan pilihan kita.
    • JS
    • JS adalah javascript, berhubugnan dengan behaviour saat web ditampilkan
    • misalnya di web mail (gmail atau yahoo), kita melakukan klik pada select all, maka secara otomatis semua email akan terpilih, teknik ini menggunakan javascript
    • untuk script js/jquery
      • Jquery adalah kumpulan dari fungsi-fungsi javascript yang sering digunakan dan ini dibutuhkan oleh javascript milik bootstrap
      • karena itu kita panggil jquery terlebih dahulu dengan perintah script
      • untuk script js/bootstrap.min.js
      • ini adalah kumpulan fungsi-fungsi javascript yang dibuat oleh team bootstrap yang akan memudahkan kita.
      • nantinya akan ada satu modul khusus yang akan membahas berbagai macam penggunakan javascript dari team bootstrap ini.

Membuat Header, Container dan Footer

  • mari kita mengisi bagian bodi
    • membuat header
    • ketik: header.container-fluid>h1{header}
    • membuat footer
    • ketik: footer.container-fluid>h1{footer}
    • membuat isi
    • tempatkan cursor diatas footer
    • ketik: div.container
      • didalamnya ketik div.row
      • di dalamnya ketik (aside.col-sm-2.kiri)+(section.col-sm-8.tengah)+(aside.col-sm-2.kanan)
    • ketik isinya pada kotak kiri misalnya tulisan kiri, bagian tengah dengan tulisan tengah dan juga bagian kanan
    • tampilan lengkap dari pengetikan kita diatas akan seperti ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap</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="style.css">
</head>
<body>
 <header class="container-fluid">
   <h1>header</h1>
 </header>
 <div class="container">
   <div class="row">
    <aside class="col-sm-2 kiri">kiri</aside>
    <section class="col-sm-8 tengah">tengah</section>
    <aside class="col-sm-2 kanan">kanan</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>
  • buka file style.css
    • dan ketik program berikut:
header, footer {
  background-color: rosybrown;
  color: #ddd;
  padding: 1em;
  text-align: center;
}
.kiri, .kanan {
  padding-top: 1.5em;
  background-color: burlywood;
  text-align: center;
}
.tengah {
  padding-top: 1.5em;
  background-color: coral;
}
  • klik pada tombol live preview bila belum ditampilkan
  • cobalah geser besar window browser menjadi sangat kecil dan perhatikan hasilnya