bootstrap part 3 - mari kita cepat belajar

kucing in your bag

Untuk mempercepat pembahasan, saya akan mulai dari hal paling dasar membuat design atau coding.. yaitu rule yang biasa kamu turuti.. bila kamu tidak punya rule sendiri, silakan lanjut baca.. bila tidak lewati hingga bawah.

untuk kebiasaan, saya menyarankan untuk membuat banyak folder yang digunakan meletakkan file-file yang akan kita gunakan. dalam bootstrap sudah membagi dalam beberapa folder yaitu

• js . tempat dimana javascript berada
• css. tempat css berada, di tempat lain memakai style
• img. tempat gambar berada

karena saya asumsikan pembaca adalah pelajar yang baru mulai design, maka ikutilah cara di atas.

Berikutnya saya akan membahas tentang pembuatan template. Kita sudah melihat pada part pertama bentuk templatenya, di part 2 kita mencoba button. Tapi belum jadi template yang kita inginkan!! well sejujurnya topik ini belum masuk membuat template yang bagus..

Template yang bagus sejujurnya membingungkan, karena ada template yang kulihat memakai rule yang berbeda. Namun ini masalah kebiasaan kamu membuat template, saya kategorikan template yang terstruktur buat pemula dan buat proyek? bedanya dimana?? well bedanya adalah template buat pemula semuanya deklarasi ada di dalam tag header, namun buat template proyek agak terpisah.. Ada yang dibawah dan seterusnya. Disini kita akan memakai model template proyek.

FILE PROYEK YANG KUDAPATKAN

Mari mulai dari hal paling sederhana yaitu deklarasi file utama.. Di akhir tulisan akan ada download, sebenarnya sudah ada di halaman bootstrap downloadnya (yang kanan), tetapi silakan download bila anda merasa perlu dan takut salah.

DEKLARASI FILE UTAMA

File utama disini adalah file css, javascript dan lain-lain yang harus di load duluan.. DAN PALING PENTING harus duluan di panggil!! bukan nanti saat ada fungsi butuh file tersebut lalu dipanggil. File yang dimaksud adalah:

• js/jquery.js
• css/bootstrap.min.css

lalu kalau anda memakai css sendiri.. pastikan dipanggil duluan

KERAPIAN TULISAN

saya saja tidak rapi. Terlalu rapi juga kurang bagus bila ada error.. Ada bagusnya kamu pastikan dirimu tidak kesulitan apabila hendak melakukan coding. Misalnya dengan bantuan komentar. Kerapian sayangnya hadir dengan waktu bukan hadir dengan ilmu. Walau ilmu ada, tetapi kamu tidak cocok.. maka sulit

Dalam coding html nanti kamu akan menghadapi tulisan yang butuh javascript, disinilah hal yang bermasalah dimulai! sebagai template yang bagus, semua hal tentang js dan css memang harus diletakkan di header, namun bila kamu bekerja sebagai team, kadang itu sulit dilakukan.

Perlu di ingat, apapun codingnya.. lebih baik ada keterangan fungsi tersebut buat apa,

SELALU TESTING

hasi ini oke, besok bermasalah. itu adalah hal wajar.. Tapi kadang ada baiknya kamu backup data kamu jadi bila ada masalah.. dan berujung buruk, kamu punya data backup! Untuk akhir part ini, mari membuat menu di atas!!

Kita mungkin akan ada masalah pada awalnya, tetapi ikuti saja yang kutulis dan semoga berhasil!

pertama kita akan membuat menu ini dahulu. Ganti tulisan yang ada di htm dengan nama yang sesuai. tambahkan saja sesuai kebutuhan. Codingnya sebagai berikut:

  <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" 
class="btn btn-navbar" data-toggle="collapse" 
data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">NAMA PROYEKMU</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">RUMAH</a></li>
              <li><a href="#about">Tentang Saya</a></li>
              <li><a href="#contact">Hubungi saya</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

   

Ganti yang ada dibawah menu. untuk contohnya ada di file 004-menu.html

Tapi beberapa saya melihat ada yang menginginkan agar bentuk menunya vertikal di sebelah seperti dibawah

bisa membuat ke kiri

Bisa membuat ke kanan

untuk codingnya :

<div style='position:relative' class='clear'> 
<div class="dropdown clear">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" 
  style='display: block;
position: static;
margin-bottom: 5px;'>
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
</div>

 

untuk dropdown-menu dapat ditambah pull-right agar bisa ke kanan. Perlu tambahan bahwa posisi menu ini ada di atas (z-index).. jadi coba perhatikan posisinya saat membuat

sebenarnya tidak hanya menu demikian saja, bisa juga muncul submenu seperti

untuk pegangan silakan lihat di sini

untuk tambahannya bisa sub dengan cara mengetik

 

untuk yang memiliki dropdown, pastikan ketik "dropdown-submenu" dahulu di

    <li class="dropdown-submenu">
<a tabindex="-1" href="#">Category</a>  
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Action</a></li>
</ul>
    </li>

dan didalamnya downdown-menu. Silakan edit di 006-dropmenu.html

sebagai bentuk final, menggabungkan dengan tutorial 2.. maka inilah hasilnya.

silakan untuk download disini

<div style='position:relative' class='clear'> 
<div class="dropdown clear">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" 
  style='display: block;
position: static;
margin-bottom: 5px;'>
    <li>
<a href="#" >
<i class="fam-building"></i> 
HOME</a>
</li>
    <li class="dropdown-submenu">
<a href="#" >
<i class="fam-book-open"></i> 
CATEGORY</a>
<ul class="dropdown-menu">
<li>
<a href="#" >
<i class="fam-bullet-key"></i> 
KEY</a></li>
<li>
<a href="#" >
<i class="fam-bug"></i> 
ERROR</a>
</li>
</ul>
</li>
    <li>
<a href="#" >
<i class="fam-cart"></i> 
CART</a>
</li>
    <li class="divider"></li>
    <li>
<a href="#" >
<i class="fam-rosette"></i> 
ABOUT ME</a>
</li>  
  </ul>
</div>
</div>
<div  class='clear'></div> 

nb: yang merah adalah yang perlu diperhatikan