Membuat Website Dengan Bootstrap V3.0.0

31 views

Belakangan ini, bootstrap telah merilis versi terbarunya dengan aneka macam proposal menarik mulai dari desain, fitur, dan customizer terbaru untuk mempermudah pembuatan website dan dengan teknologi responsive tentunya. Versi ini masih belum selesai, namun versi full rilisnya tidak akan jauh dari versi beta yang mungkin hanya meyimpan perubahan-perubahan kecil.

 

 Bootstrap telah banyak dipakai oleh para desainer alasannya ialah fasilitas penggunaannya dengan hasil yang cukup memuaskan. Mari kita review sedikit wacana bootstrap yang mempunyai misi yang sama dengan Framework lainnya yaitu Focusing Mobile, bootstrap dipakai untuk menjadi pola dasar pembuatan website memakai framework untuk menciptakan tampilan website maupun aplikasi mobile versi web terlihat menarik dan user-friendly.

Pada bootstrap 3, pemisahan antara bootstrap-responsive.css dan bootstrap.css tidak ada lagi atau dengan kata lain semua file bootstrap reguler telah menjadi ke dalam satu file yang sudah di kombinasi.

 Pada goresan pena ini aku hanya akan membahas wacana pembuatan singkat tampilan website dengan Bootstrap 3.0.

Installasi Bootstrap

Setelah Anda mendownload Bootstrap v.3.0.0 melalui official websitenya pastikan anda meletakkan pada document anda menyerupai berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Letakkan dokumen JavaScript di bawah (sebelum tag epilog </body>) semoga web Anda mempunyai performa yang maksimal. 
 

Layout dan Plugin 

 
Dalam tutorial sederhana ini, aku akan coba menciptakan layout yang sederhana ini dan juga memakai Plugin Slideshow dari flexslider menyerupai gambar berikut :
dan jangan lupa untuk mendownload plugin flexslider sebagai slideshow image dengan tunjangan responsive.
 

Klik disini untuk mendownload Flexslider dan kemudian ekstrak hasil download tadi memakai extractor tools untuk *.zip.

setelah itu, pastikan struktur direktori anda terlihat menyerupai berikut :

   

 Copy kan file dari dari hasil ekstrak plugin flexslider tadi (flexslider.css,jquery.easing.js,jquery.flexslider-min.js dan jquey.mousewheel.js ke dalam direktori plugins.

 

Setelah semua simpulan dan kita mulai menciptakan script html nya untuk sanggup menghasilkan layout demo sesuai dengan gambar di atas.

index.html

Buat file index.html (jika belum ada, edit jikalau sudah) dan buat script html secara keseluruhan menyerupai berikut ini :

<!DOCTYPE html>
<html>
  <head>
    <title>reski - Tutorial Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bsdocs.css" rel="stylesheet" media="screen">
    <link href="css/custom.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="plugins/flexslider.css" type="text/css" media="screen" />
  </head>
  <body>
    <div class="container">
        <header>
            <div class="row">
              <div class="col-md-12">
                <h1>Nama Blog</h1>
                <h5><em class="text-muted">Moto atau Deskripsi Blog</em></h5>
                <div class="nav-container">
                    <ul class="nav nav-justified">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Projects</a></li>
                      <li><a href="#">Services</a></li>
                      <li><a href="#">Downloads</a></li>
                      <li><a href="#">About</a></li>
                      <li><a href="#">Contact</a></li>
                    </ul>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-12 col-md-8">
                <section class="slider">
                    <div class="flexslider">
                      <ul class="slides">
                        <li data-thumb="images/kitchen_adventurer_cheesecake_brownie.jpg">
                            <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
                            </li>
                            <li data-thumb="images/kitchen_adventurer_lemon.jpg">
                            <img src="images/kitchen_adventurer_lemon.jpg" />
                            </li>
                            <li data-thumb="images/kitchen_adventurer_donut.jpg">
                            <img src="images/kitchen_adventurer_donut.jpg" />
                            </li>
                            <li data-thumb="images/kitchen_adventurer_caramel.jpg">
                            <img src="images/kitchen_adventurer_caramel.jpg" />
                            </li>
                      </ul>
                    </div>
                </section>
              </div>
              <div class="col-md-4 text-right hidden-xs hidden-sm">
                <img src="images/300x250.png" />
              </div>
            </div>
        </header>
        <aside>
            <hr>
            <div class="row">
              <div class="col-xs-6 col-md-4">
                <h4>Content Left</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
              </div>
              <div class="col-xs-6 col-md-4">
                <h4>Content Left</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
              </div>
              <div class="col-md-4">
                <h4>Content Left</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
              </div>
            </div>
        </aside>
        <footer>
            &copy; <a href="http://jagocoding.com">jagocoding.com</a> 2014
        </footer>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- PLUGINS -->
    <script defer src="plugins/jquery.flexslider-min.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
          $('.flexslider').flexslider({
            animation   : "slide",
            controlNav  : false,
            start       : function(slider){
              $('body').removeClass('loading');
            }
          });
        });
    </script>
    <script src="plugins/jquery.easing.js"></script>
    <script src="plugins/jquery.mousewheel.js"></script>
  </body>
</html>
 

custom.css

dalam demo ini, aku menciptakan file custom.css yang berfungsi sebagai override style sheet dan untuk menciptakan layout yang kita buat terlihat normal.

a {
    -moz-transition: all 0.5s ease-out;  /* FF4+ */
    -o-transition: all 0.5s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.5s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.5s ease-out;  /* IE10? */
    transition: all 0.5s ease-out;     
}
.nav-container {
    border:1px solid #EEE;
    margin:10px 0px;
}
footer {
    border-top:1px solid #EEE;
    padding-top:10px;
    margin-top:30px!important;
}
<br>
 
dan kalau ingin melihat hasilnya,silahkan anda mempratekkan sendiri.
 
semoga bermanfaat…
 
salam dari aku reski hamsah
 
 
Author: 
    author
    No related post!