Home » , , » Membuat template website responsive dengan bootstrap framework (1)

Membuat template website responsive dengan bootstrap framework (1)

Written By vian on Saturday, 27 December 2014 | 08:16

Add caption
Seperti yang kita ketahui, informasi menjadi hal mendasar dan kebutuhan saat ini. Menyediakan informasi merupkan sebuah keistimewaan apalagi dengan kecanggihan teknologi saat ini. Website sebagai sebuah media informasi semakin lama semakin berkembang sesuai kebutuhan dari para pengguna, dahulu website diciptakan dengan ringkas dan tampilan statis dikarekan ketersediaan bandwith serta hardware yang tersedia. namun dengan perkembangan teknologi seperti saat ini maka perkembangan semakin dibutuhkan. Tampilan yang dahulu statis berubah menjadi sebuah tampilan yang luar biasa serte dapat menampilan konten-konten yang dibutuhkan para pengguna, penyempurnaan tampilan website agar dapat diakses secara mudah didukung dengan metode yang sering kita kenal dengan responsif, yang mengisyaratkan sebuah web tersebut dapat diakses menggunakan mobile serta apapun medianya. Twitter Bootstrap sebagai sebuah framework muncul sebagai media dan fasilitas bagai para pengembang untuk mempermudah dalam merancang dan mendesign sebuah template yang responsive serta handal. Dengan begitu banyaknya library serta fasilitas yang disediakan bootstrap menjadi pilihan ideal.
Terlebih dahulu downloadlah file disini 

Langkah Pertama : Design Layout

 Layout design yang akan kita buat terdiri dari beberapa element, yaitu Container yang merupakan element layout induk, dimana element lainnya akan masuk kedalamnya. Didalam Container ini nantinya aka nada beberapa element layout lainnya yaitu Header, Slider News, Artikel Populer, Main Content, Menu Kanan dan Footer. Untuk lebih jelasnya silahkan lihat gambar di bawah :

Layout Template Bootstrap
Layout Template Bootstrap

 Langkah Kedua : Ekstrak File Bootrap


Langkah selanjutnya adalah mewujudkan design Layout tersebut kedalam kode-kode. 3 . Setelah file Bootstrap versi 3.2.0 di download, extrak file bootstrap tersebut kedalam folder localhost anda. Lalu rubah nama foldernya sesuai selera anda. Saya menamakan folder saya “bootstrap_template” dan saya simpan di localhost saya. Perhatikan gambar di bawah ini :

File Download Bootstrap 3
File Download Boostratp 3


File Bootstrap terdiri dari 3 folder yaitu CSS, Fonts dan Js (berisi file jQuery). Ketiga folder ini berisi file-file css, fonts dan jQuery yang sudah dibuat sedemikian rupa oleh Bootstrap sehingga kita tidak perlu memikirkan bagaimana membuat file CSS untuk mengatur tampilan dan bagaimana mengatur jQuery agar tampilannya responsive. Semua sudah dikerjakan oleh Bootstrap untuk kita.


Selain file bawaan Bootstrap, saya sudah menambahkan beberapa plugin jQuery dan CSS tambahan yang diperlukan untuk mempercantik tampilan templatenya.
Langkah Ketiga : Buat File Index.html sebagai Template Utama


Buat file baru bernama index.html yang akan kita gunakan sebagai template website kita nantinya.


Kodenya adalah sebagai berikut :
    

  1. 
 
    

    2. 

  2. 
<!DOCTYPE html>
    

    3. 

  3. 
<html lang="en">
    

    4. 

  4. 
  <head>
    

    5. 

  5. 
   <title>Contoh Template Bootstrap 3.2.0</title>
    

    6. 

  6. 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8" />
    

    7. 

  7. 
        <meta name="robots" content="index, follow" />
    

    8. 

  8. 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    9. 

  9. 
         <!-- Bootstrap -->
    

    10. 

  10. 
         <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    

    11. 

  11. 
         <link href="css/costum/costum.css" rel="stylesheet" media="screen">
    

    12. 

  12. 
         <link href="css/costum/bootstrap-slider.min.css" rel="stylesheet" media="screen">
    

    13. 

  13. 
         <link href="css/costum/flexslider.css" rel="stylesheet" media="screen">
    

    14. 

  14. 
         <link href="css/costum/site.css" rel="stylesheet" media="screen">
    

    15. 

  15. 
  </head>
    

    16. 

  16. 
  <body>
    

    17. 

  17. 
        <div class="container">
    

    18. 

  18. 
 <header>
    

    19. 

  19. 
    Header disini
    

    20. 

  20. 
 </header>
    

    21. 

  21. 
 <aside>
    

    22. 

  22. 
    <div class="row">
    

    23. 

  23. 
        <div class="col-md-8">
    

    24. 

  24. 
             Slide News
    

    25. 

  25. 
       <div>
    

    26. 

  26. 
              <div class="col-md-4">
    

    27. 

  27. 
            Populer Artikel
    

    28. 

  28. 
       <div>
    

    29. 

  29. 
 
    

    30. 

  30. 
  <div class="row">
    

    31. 

  31. 
       <div class="col-md-8">
    

    32. 

  32. 
            Main Content
    

    33. 

  33. 
       </div>
    

    34. 

  34. 
       <div class="col-md-4">
    

    35. 

  35. 
            Menu Kanan
    

    36. 

  36. 
       </div>
    

    37. 

  37. 
  </div>
    

    38. 

  38. 
          </aside>
    

    39. 

  39. 
         <footer>
    

    40. 

  40. 
 Footer disini
    

    41. 

  41. 
        </footer>
    

    42. 

  42. 
 
    

    43. 

  43. 
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    

    44. 

  44. 
        <script src="js/jquery-1.11.1.min.js"></script>
    

    45. 

  45. 
        <script src="js/bootstrap.min.js"></script>
    

    46. 

  46. 
        <script type="text/javascript">
    

    47. 

  47. 
 $(window).load(function(){
    

    48. 

  48. 
      $('.flexslider').flexslider({
    

    49. 

  49. 
  animation : "slide",
    

    50. 

  50. 
  controlNav : false,
    

    51. 

  51. 
  start  : function(slider){
    

    52. 

  52. 
    $('body').removeClass('loading');
    

    53. 

  53. 
  }
    

    54. 

  54. 
       });
    

    55. 

  55. 
 });
    

    56. 

  56. 
       </script>
    

    57. 

  57. 
       <script type="text/javascript">
    

    58. 

  58. 
     $(function () {
    

    59. 

  59. 
                     $(".demo1").bootstrapNews({
    

    60. 

  60. 
              newsPerPage: 3,
    

    61. 

  61. 
              autoplay: true,
    

    62. 

  62. 
  pauseOnHover:true,
    

    63. 

  63. 
              direction: 'up',
    

    64. 

  64. 
              newsTickerInterval: 4000,
    

    65. 

  65. 
              onToDo: function () {
    

    66. 

  66. 
              }
    

    67. 

  67. 
                 });
    

    68. 

  68. 
               });
    

    69. 

  69. 
        </script>
    

    70. 

  70. 
        <script src="js/plugins/jquery.bootstrap.newsbox.min.js"></script>
    

    71. 

  71. 
        <script src="js/plugins/jquery.easing.js"></script>
    

    72. 

  72. 
        <script src="js/plugins/jquery.mousewheel.js"></script>
    

    73. 

  73. 
        <script src="js/plugins/jquery.flexslider-min.js"></script>
    

    74. 

  74. 
</body>
    

    75. 

  75. 
</html>  
    

    76. 

  76. 
 
    

    77. 

  77. 
 
    

    78.



Langkah Keempat : Merombak Design Header pada file Index.html


Langkah berikut ini adalah pelengkap dari langkah ketiga diatas, dimana kita akan melengkapi element-element dalam template Index.html diatas. Element yang akan kita lengkapi adalah element Header, dimana didalamnya akan ada nama Website, menu utama dan kolom pencarian (search). Adapun kode element Header menjadi :

    

  1. 
 
    

    2. 

  2. 
<header>
    

    3. 

  3. 
       <div class="row">
    

    4. 

  4. 
            <div class="col-md-12">
    

    5. 

  5. 
               <h1>Vianziro.com</h1>
    

    6. 

  6. 
               <h5><em class="text-muted">Slogan Website di sini!</em></h5>
    

    7. 

  7. 
 <div class="col-md-8">
    

    8. 

  8. 
     <div class="nav-container">
    

    9. 

  9. 
          <ul class="nav nav-pills">
    

    10. 

  10. 
   <li class="active"><a href=”">Home</a></li>
    

    11. 

  11. 
   <li><a href=”">Archive</a></li>
    

    12. 

  12. 
  <li><a href="">About Us</a></li>
    

    13. 

  13. 
  <li><a href="">Contact Us</a></li>
    

    14. 

  14. 
   <li><a href="">Privacy Policy</a></li>
    

    15. 

  15. 
   <li><a href="">RSS Feeder</a></li>
    

    16. 

  16. 
          </ul>
    

    17. 

  17. 
       </div>
    

    18. 

  18. 
    </div>
    

    19. 

  19. 
    <div class="col-md-4">
    

    20. 

  20. 
       <form class="navbar-form navbar-left" method='post' action="">
    

    21. 

  21. 
           <div class="form-group">
    

    22. 

  22. 
   <input type="text" name='key' class="form-control" placeholder="Search">
    

    23. 

  23. 
           </div>
    

    24. 

  24. 
           <input type="submit" name='search' value='GO' class="btn btn-default">
    

    25. 

  25. 
       </form>
    

    26. 

  26. 
    </div>
    

    27. 

  27. 
              </div>
    

    28. 

  28. 
            </div>
    

    29. 

  29. 
</header>
    

    30. 

  30. 
 
    

    31.

0 comments :

Post a Comment