Terima Kasih masih bersedia berkunjung ke tutorial saya tentang Twitter Bootstrap. Kali ini masih untuk para pemula yang masih ada kebingungan tentang pengaturan Layout pada Twitter Bootstrap. Yang jelas, anda pasti sudah paham tentang apa yang dimaksud dengan Layout. Simple nya pengaturan layout ini digunakan untuk menentukan seberapa lebar tampilan desain User Interface yang akan anda buat. Apakah akan di buat full screen atau tidak. Itu semua tergantung selera anda dan kebutuhannya.

Dengan Twitter Bootstrap, pengaturan layout kembali dipermudah.. Kita tak perlu mengukur berapa pixel lebar screen yang akan kita gunakan, tetapi kita hanya perlu menentukan atau memilih, apakah desain website yang akan kita buat nanti ingin menggunakan Sidebar atau tidak. Itulah kuncinya jika kita akan menentukan jenis layout yang akan digunakan pada Twitter Bootstrap. Karena Twitter Bootstrap hanya membuat 2 pilihan layout, yaitu :  

•  Fluid Layout : Biasanya digunakan untuk Yang menggunakan Sidebar
• Fixed Layout : Biasanya digunakan untuk yang TIDAK menggunakan Sidebar

Baiklah, sekarang langsung saja kita coba praktekan, biar anda bisa lebih jelas mengetahui perbedaannya dan bisa menentukan jenis layout mana yang akan anda gunakan. Saya harap anda sudah membaca tutorial saya yang Sebelumnya, karena saya tidak akan menuliskan coding nya dari awal, tp langsung menuju bagian penerapan layoutnya.Mari disimak.. atau Copas langsung :D

Fixed layout

<div class="container" style="background-color: #cccccc"> <!--Tag & Attribute untuk Fixed Layout-->
    <!-- isi -->
    
     <h1>
        Belajar Bootstrap Bersama JagoCoding.com 
     </h1>
    <h6>
        <a href="https://www.facebook.com/gilang.sonar">GilangSonar</a>
    </h6>

</div>

Fluid Layout

<div class="container-fluid" style="bacground-color: #333333"> <!-- Tag & Attribute untuk Fluid Layout -->
  <div class="row-fluid">

    <div class="span4" style="background-color:#cccccc">
      <!--Isi Sidebar-->
      
      <h3>Ini Sidebar</h3>

    </div>

    <div class="span8" style="background-color:#cccccc">
      <!--Isi Body-->
      
       <h1>
           Belajar Bootstrap Bersama JagoCoding.com
       </h1> 
   
       <h6>
           <a href="https://www.facebook.com/gilang.sonar">GilangSonar</a>
       </h6> 
    </div>

  </div>
</div>

Untuk bagian Fluid Layout ini, ada perbedaan. Dimana terdapat attribut Class= "row-fluid" dan Class="Span2" & Class="span10". Apa itu ? Silahkan simak penjelasan nya di tutorial Grid System Twitter Bootstrap

Mungkin saya pikir cukup sampai disini, dan selamat.. sekarang anda sudah mengerti tentang bagaimana pengaturan layout yang ada pada Twitter Bootstrap. Sampai ketemu di tutorial berikut nya.. Terima Kasih

- Gilang Sonar -