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
>
Layout dan Plugin
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
>
</
footer
>
</
div
>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- 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.5
s ease-out;
/* FF4+ */
-o-transition:
all
0.5
s ease-out;
/* Opera 10.5+ */
-webkit-transition:
all
0.5
s ease-out;
/* Saf3.2+, Chrome */
-ms-transition:
all
0.5
s ease-out;
/* IE10? */
transition:
all
0.5
s 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>