Membuat responsive layout dengan Twitter Bootstrap

Membuat responsive layout dengan Twitter Bootstrap

Ada yang tau apa itu responsive layout..? Responsive layout adalah layout yang secara otomatis akan menyesuaiakan dengan besar browser atau layar perangkat komputer yang digunakan untuk menjalankan website.

Kadang untuk menjalankan website pada layar mobile phone atau tablet, para developer website menggunakan aplikasi yang berbeda untuk dapat menyesuaikan besarnya tampilan website pada perangkat aplikasi yang berbeda. Namun dengan responsive layout, kita cukup membuat satu aplikasi yang akan secara otomatis akan menyesuaikan dengan besar perangkat aplikasi yang digunakan.

Dengan mengguakanan responsive layout, secara otomatis akan menghasilkan tampilan yang berbeda sesuai dengn besar browser yang digunakan, dari model susunan link, gambar, maupun content dari website itu sendiri. Dengan menggunakan rsponsive layout juga akan menekan bianya pembuatan aplikasi website, karena cukup hanya dengan membuat satu website bisa dijalankan dengan baik pada semua perangkat aplikasi desktop, tablet sampai mobile.

Ok setelah kita tau apa itu responsive layout, sekarang apa itu Twitter Bootstrap. Dari namanya saja sudah ketahuan kan pasti ada kaitnnya dengan Twitter, sebuah jejaring sosial yang sangat terkenal sekarang ini. Twitter Bootstrap adalah salah satu Framework CSS yang digunakan untuk mempercepat developer dalam membuat suatu website dalam hal ini desain layoutnya.

Twitter Bootstrap memudahkan kita dalam membuat berbagai style ya g bisa dikatakan sesuai dengan css yang digunakan leh Twitter itu sendiri. Penjelasan engkap mengenai Twitter Bootstrap dapat dilihat pada website resminya http://twitter.github.com/bootstrap/index.html

Ok langsung saja kita mulai code programnya.

1. Download library Twitter Bootstrap di website resminya http://twitter.github.com/bootstrap/index.htm

2. Aturlah struktur foldernya menjadi        
    responsive_layout
            assets
              - css
              - ico
              - img
              - js
           index.php 

 3.  Buka file index.php dan ketikkan code berikut ini
<html>
<head>
 <title>Membuat responsive layout dengan Twitter Bootstrap</title>
</head>
<body>

</body>
</html>

4. Sisipkan library bootstrap.css dan bootstrap-responsive.css di bawah tag
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css">
</head>

5. Buatlah style div dengan class="container-fluid" pada awal body . nantinya semua konten website akan kita buat didalam style
<div class="container-fluid">
<!-- Konten website akan kita buat disini -->
</div>

Style tersebut berguna untuk membuat agar besar tampilan website dapat menyesuaikan dengan resolusi layar aplikasi

6. Untuk setiap pembuatan row atau bagian dari website misal header, navigasi, content, sidebar, dan footer  selalu gunakan class="row-fluid" misalnya
<div class="row-fluid">
    <div class="span12" id="header">
     <h1>Membuat Responsive Layout dengan Twitter Bootstrap</h1>
    </div>
</div>

7. Buatlah file style.css dan simpan dalam folder css. File style.css adalah style dari website yang kita buat, dari warna sampai ukuran huruf dari website.
   #header{
    padding: 10px;
    color: #40454d;
   }

   #navbar{
    background-color: #40454d;
    min-height: 30px;
    padding: 10px;
   }

   #navbar ul li{
    display: inline-block;
   }

   #navbar ul li a{
    color: #bfbfbf;
    font-size: 16px;
    padding: 10px;
   }

   #navbar ul li a:hover{
    color: #ffffff;
    opacity: inherit;
    text-decoration: none;
   }

   #left-content{
    padding: 10px;
   }
   
   h1 a{
    color: #40454d;
   }

   #right-content{
    padding: 10px;
   }

   .read-more{
    float: right;
   }

   .main-content{
    margin-bottom: 10px;
   }

   #footer{
    background-color: #3e424b;
    padding: 10px;
    color: #bfbfbf;
    text-align: center;
   }

   #footer a{
    color: #ffffff;
   }

7. Berikut ini adalah code lengkap program Membuat responsive layout dengan Twitter Bootstrap
<html>
 <head>
  <title>Membuat Responsive Layout dengan Twitter Bootstrap </title>
  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
 </head>
 <body>
  <div class="container-fluid">

   <!--S : Header-->
   
   <div class="row-fluid">
    <div class="span12" id="header">
     <h1>Membuat Responsive Layout dengan Twitter Bootstrap</h1>
    </div>
   </div>

   <!--E : Header-->


   <!--S : Navbar-->

   <div class="row-fluid">


    <div class="span12" id="navbar">
     <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Profile</a></li>
      <li><a href="">Contact</a></li>
      <li><a href="">Sitemap</a></li>
     </ul>
    </div>

   </div>

   <!--E : Navbar-->

   
   <div class="row-fluid">

    <!--S : Left Content-->
    
    <div class="span8" id="left-content">

     <?php for($i=1;$i<=4;$i++): ?>

     <div class="main-content row-fluid">
      <div class="span12"> 
       <h1><a href="">Halaman Judul <?php echo $i; ?></a></h1>
       <p>
        Halaman konten Halaman konten Halaman konten
        Halaman konten Halaman konten Halaman konten
        Halaman konten Halaman konten Halaman konten
        Halaman konten Halaman konten Halaman konten
        Halaman konten Halaman konten Halaman konten
        Halaman konten Halaman konten Halaman konten
       </p>

       <div class="read-more"><a href="" class="btn btn-info">Read More</a></div>
      </div>
     </div>

     <?php endfor; ?>     
     
    </div>

    <!--E : Left Content-->


    <!--S : Right Content-->
    
    <div class="span4" id="right-content">
    

     <?php for($i=1;$i<=3;$i++): ?>

     <div class="row-fluid">
      <div class="span12" id="sidebar-widget">

       <h2>Sidebar <?php echo $i; ?></h2>
       <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Profile</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Sitemap</a></li>
       </ul>

      </div>
     </div> 

     <?php endfor; ?>

    </div>

    <!--E : Left Content-->
     
   </div>


   <!--S : Footer-->

   <div class="row-fluid">
    <div class="span12" id="footer">
     Create by <a href="http://fuadsetiawan.blogspot.com">Fuad Indra Setiawan</a> @2012
    </div>
   </div>

   <!--E : Footer-->

  </div>
 </body>
</html>


Membuat responsive layout dengan Twitter Bootstrap

Untuk melihat efek responsive layout, silahkan resize browser anda. Tampilan demo bisa dicoba pada browser desktop, tablet maupun mobile browser.

Selamat mencoba


Download Source Code                 Online Demo




Salam Penulis

Fuad Indra Setiawan





0 comments:

Posting Komentar