Bootstrap adalah kerangka kerja front-end gratis untuk pengembangan web yang lebih cepat dan mudah. Bootstrap termasuk templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, tabel, navigasi, modem, korsel gambar, dan banyak lainnya, serta plugin JavaScript.
Bootstrap juga bisa bikin design weblu jadi lebih responsif.
Desain web responsif adalah situs web yang secara otomatis nyesuain diri supaya keliatan bagus di semua perangkat, dari ponsel kecil hingga desktop besar.
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
</div>
</div>
</div>Riwayat Bootstrap
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk sumber terbuka pada Agustus 2011 di GitHub.
Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub!
Keuntungan dari Bootstrap:
Efisiensi Waktu
Bootstrap menyediakan banyak library yang berisi berbagai macam script yang siap saji untuk digunkan oleh programmer dalam pengembangan tampak depan website. Developer tidak perlu lagi untuk membuang banyak waktu mereka untuk menulis script CSS dari nol. Tentu saja dengan menggunakan potongan script yang tepat dan sesuai dari Bootstrap dan mencocokkanya dengan struktur website yang sedang dikembangkan akan membuat seorang programmer bekerja lebih produktif. Perlu diketahui juga untuk Bootstrap versi terkini yakni v 3.36, Bootstrap Twitter dibangun dengan LESS yang artinya Boostrap Twitter memiliki banyak aspek dalam desain website sehingga mempermudah programmer.
Fleksible
Framework Bootstrap Twitter dapat digunakan sesuai kehendak hati atau bebas. Anda dapat dengan mudah memodifikasi script yang ada didalamnya. Tidak ada ketentuan dalam memanfaatkan Bootstrap Twitter, jadi anda dapat berkreasi dalam bentuk apapun dengan memanfaatkan berbagai macam tools yang ada pada Bootstrap Twitter.
Desain Oriented
Bootstrap twitter memiliki sebuah sistem baku yang disebut sebagai Grid System, Grid merupakan struktur dua dimensi yang merupakan perpaduan antara sumbu horizontal dan vertikal yang membentuk kolom dan juga baris yang merepresentasikan dimensi yang ada pada browser. Pada versi awal, Bootstrap menyediakan Grid dengan ukuran layar 940px yang tersusun dari 12 kolom, dengan lebar setiap kolom mencapai 40px dan margin 20px. Namun untuk saat ini bootstrap sudah memiliki grid untuk berbagai macam ukuran layar mulai dari ukuran layar 768px hingga 1200px. Tentu saja semua itu dapat dimodifikasi lagi oleh anda.Model Penyusunan sudah diatur secara otomatis, sehingga developer hanya perlu melakukan pemanggilan kelas CSS, dan meletakkan konten di dalam script/sintaks HTML yang sedang dikerjakan.
LESS is More
Ini menjadi suatu hal yang popular di kalangan para programmer dan juga web developer karena sebuah alasan. Alasan tersebut adalah berkaitan dengan fungsi responsive yang disusung oleh Bootstrap twitter. Dengan menggunakan Bootstrap Twitter, maka website yang dibangun dapat direspon/ditampilkan di berbagai macam browser dengan baik, beberapa browser-browser tersebut yang mendukung hasil tampilan dari fromewok ini antara lain adalah Google Chrome, Mozilla Firefox, Opera, Safari, dan lain sebagainya.
Javascript
Didalam bootstrap Twitter telah dilengkapi dengan library JavaScript yang telah disesuaikan dengan struktur standar Javascript. Tentu saja dengan adanya javascript yang melengkapi framework ini, tampilan website akan lebih powerful.
Ada 2 Basic Halaman Bootstrap:
Kelas .container
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>Kelas .container-fluid
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>Ok mungkin cukup segitu dulu, Sampe jumpa di tutorial berikutnya. :)
Tidak ada komentar:
Posting Komentar