Scribd
Unggah
102 tayangan6 halaman

Membuat Website Dengan Bootstrap v3 0 0

Dokumen ini membahas tentang membuat website menggunakan Bootstrap versi 3.0.0. Dokumen menjelaskan cara instalasi Bootstrap dan membuat layout dasar website menggunakan Bootstrap serta menambahkan plugin slider gambar flexslider.

Diunggah oleh

Ahmad Ridlo Fadlli Robbi
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
102 tayangan6 halaman

Membuat Website Dengan Bootstrap v3 0 0

Dokumen ini membahas tentang membuat website menggunakan Bootstrap versi 3.0.0. Dokumen menjelaskan cara instalasi Bootstrap dan membuat layout dasar website menggunakan Bootstrap serta menambahkan plugin slider gambar flexslider.

Diunggah oleh

Ahmad Ridlo Fadlli Robbi
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

membuat website dengan bootstrap v3.0.

0
Oleh: reski hamsah

Belakangan ini, bootstrap telah merilis versi terbarunya dengan berbagai


tawaran 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 m...

Belakangan ini, bootstrap telah merilis versi terbarunya dengan berbagai tawaran 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 digunakan oleh para desainer karena kemudahan penggunaannya dengan
hasil yang cukup memuaskan. Mari kita review sedikit tentang bootstrap yang memiliki misi yang
sama dengan Framework lainnya yaitu Focusing Mobile, bootstrap digunakan untuk menjadi acuan
dasar pembuatan website menggunakan framework untuk membuat 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 tulisan ini saya hanya akan membahas tentang 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 seperti 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 penutup </body>) agar web Anda memiliki performa yang
maksimal.

Layout dan Plugin

Dalam tutorial sederhana ini, saya akan coba membuat layout yang sederhana ini dan juga
menggunakan Plugin Slideshow dari flexslider seperti gambar berikut :

dan jangan lupa untuk mendownload plugin flexslider sebagai slideshow image dengan dukungan
responsive.

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

setelah itu, pastikan struktur direktori anda terlihat seperti 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 selesai dan kita mulai membuat script html nya untuk dapat menghasilkan layout
demo sesuai dengan gambar di atas.

index.html

Buat file index.html (jika belum ada, edit jika sudah) dan buat script html secara keseluruhan seperti
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, saya membuat file custom.css yang berfungsi sebagai override style sheet dan
untuk membuat 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 saya reski hamsah

Tentang Penulis

reski hamsah

Anda mungkin juga menyukai