evamariana2903.files.wordpress.com · Web viewatau desainer juga dapat mengubah tampilan halaman...
16
BOOTSTRAP I. PENGERTIAN Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan. Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen- komponen lainnya yang dibangun menggunakan JavaScript. Twitter Bootstrap merupakan mobile first front-end framework yang ringan dan cukup mudah untuk digunakan dan membantu mempercepat pekerjaan kita sebagai web designer atau web developer. Bootstrap saat ini bisa kita bilang merupakan HTML dan CSS Framework nomor satu atau paling populer. Bootstrap juga solusi bagi anda yang ingin membuat template responsive, dimana template bisa tampil baik jika dibuka di berbagai perangkat. Banyak orang sudah menggunakan bootstrap, sebagian 1
Transcript of evamariana2903.files.wordpress.com · Web viewatau desainer juga dapat mengubah tampilan halaman...
BOOTSTRAP
I. PENGERTIAN
Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman
website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain
halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki
tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga
dapat mengubah tampilan halaman website sesuai dengan kebutuhan.
Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout
halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website
hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan.
Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan
JavaScript.
Twitter Bootstrap merupakan mobile first front-end framework yang ringan dan cukup mudah
untuk digunakan dan membantu mempercepat pekerjaan kita sebagai web designer atau web
developer.
Bootstrap saat ini bisa kita bilang merupakan HTML dan CSS Framework nomor satu atau
paling populer. Bootstrap juga solusi bagi anda yang ingin membuat template responsive,
dimana template bisa tampil baik jika dibuka di berbagai perangkat. Banyak orang sudah
menggunakan bootstrap, sebagian ada yang membagikan template buatannya untuk dipakai
oleh orang lain yang ingin bekerja lebih cepat.
1
II. SCRIPT DEMO BOOTSTRAP
<!DOCTYPE html>
<html>
<head>
<title>Sidik Hanrei - 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>
2
<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>
3
</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>
</div>
</div>
</aside>
<footer>
© <a href="http://sidikhanrei.com">SidikHanrei.com</a> 2013
</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 -->
4
<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>
III. CARA PENGGUNAAN BOOTSTRAP
Bootstrap memiliki beberapa cara mudah untuk memulai dengan cepat, masing-
masing menarik keterampilan berbeda tingkat dan use case. Membaca untuk melihat apa
yang cocok untuk Anda khusus kebutuhan.
Compiled CSS, JS, and fonts
Cara tercepat untuk mendapatkan Bootstrap adalah untuk men-download versi terkompilasi
yang dikemas dan minified CSS, JavaScript, dan font. Tidak ada dokumentasi atau file kode
sumber asli juga disertakan.
5
Tambahan unduh
Unduh source code
Dapatkan kode sumber terbaru Bootstrap kurang dan JavaScript dengan men-download langsung dari GitHub.
Clone or fork via GitHub
Kunjungi GitHub untuk klon atau garpu Bootstrap proyek.
Install with Bower
Memasang dan mengelola Bootstrap's gaya, JavaScript, dan menggunakan dokumentasi Bower.
$ bower install bootstrap
Bootstrap CDN
The folks over at MaxCDN Anggun menyediakan dukungan CDN untuk Bootstrap's CSS dan JavaScript. Hanya menggunakan ini Bootstrap CDN links.
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript --><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
Compiling Bootstrap's LESS files
Jika Anda bekerja dengan kode sumber uncompiled Bootstrap's, Anda harus mengkompilasi file kurang untuk menghasilkan file CSS yang dapat digunakan. Untuk mengkompilasi file kurang ke CSS, kami hanya secara resmi mendukung Recess, Twitter's CSS hinter didasarkan pada less.js.
6
IV. CARA MEMBUAT BOOTSTRAP
Bootstrap di-download dalam dua bentuk, di mana Anda akan menemukan direktori berikut dan file, logis pengelompokan sumber daya Umum dan menyediakan kedua disusun dan minified variasi.
jQuery required
Basic template
Mulai dengan template HTML dasar ini, atau memodifikasi contoh-contoh ini.
Copy HTML di bawah ini untuk mulai bekerja dengan dokumen Bootstrap minimal.
<!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">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://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>
7
V. TEMPLATE
Membangun template dasar di atas dengan Bootstrap's banyak komponen.
Starter template
Tidak ada tapi dasar-dasar: dikompilasi CSS dan JavaScript dengan sebuah wadah.
Grids
Beberapa contoh dari grid layout dengan semua empat tingkatan, bersarang, dan banyak lagi.
8
Jumbotron
Membangun sekitar jumbotron dengan navbar dan beberapa kolom dasar grid.
Narrow jumbotron
Membangun halaman lebih kustom oleh penyempitan default wadah dan jumbotron.
9
Navbar
Super dasar template yang mencakup navbar bersama dengan beberapa konten tambahan.
Static top navbar
Super dasar template dengan navbar atas statis bersama dengan beberapa konten tambahan.
Fixed navbar
Super dasar template dengan navbar atas tetap bersama dengan beberapa konten tambahan.
10
Sign-in page
Bentuk kustom layout dan desain untuk tanda sederhana dalam bentuk.
Sticky footer
Melampirkan footer ke bagian bawah viewport ketika konten lebih pendek dari itu.
Sticky footer with navbar
Melampirkan footer ke bagian bawah viewport dengan navbar tetap di bagian atas.
11
Justified nav
Membuat navbar kustom dengan link yang dibenarkan. Kepala up! Tidak terlalu ramah WebKit.
Offcanvas
Membangun toggleable off-kanvas navigasi menu untuk digunakan dengan Bootstrap.
Carousel
Menyesuaikan navbar dan korsel, kemudian tambahkan beberapa komponen baru.
12
Non-responsive Bootstrap
Dengan mudah menonaktifkan respon dari Bootstrap per docs kami.
Bootstrap theme
Beban tema Bootstrap opsional untuk pengalaman visual ditingkatkan.
13
