Panduan Singkat Framework Bootstrap – Bagi para desainer website mesti mengenali framework Bootstrap, bisa dibilang framework ini mempermudah desainer web untuk membuat sebuah desain web dengan kerangka yang sudah disediakan. Tidak pusing lagi membuat website yang responsive, Bootstrap sudah menyediakan semuanya. Ataupun Anda tidak ingin membuat website yang responsive cukup menonaktifkannya dan menggunakan sistem toggle pun bisa Anda pakai untuk projek web Anda.
Apa itu Bootstrap?
Bootstrap adalah framework HTML, CSS, dan JS yang paling populer digunakan untuk pengembangan responsive, projek mobile pertama kali di web. Jadi, Anda bisa menggunakan framework bootstrap ini untuk projek-projek desain web Anda yang responsive tidak perlu lagi membuat media queries sendiri. Semuanya sudah terdapat di dalam framework Bootstrap.
Sejarah Singkat Bootstrap
Bootstrap ini dibuat oleh para desainer dan developer dari Twitter, yang kemudian Bootstrap telah menjadi sebuah framework front-end dan projek open source yang paling populer di dunia.
Bootstrap dibuat di Twitter pertengahan tahun 2010 oleh @mdo dan @fat. Sebelum menjadi sebuah framework open source, Bootstrap dikenal sebagai Twitter Blueprint. Beberapa bulan masuk pengembangan, Twitter dijadikan tempat pertama untuk melakukan projek pengembangan Bootstrap ini oleh para developer dengan semua tingkat keahlian tanpa panduan eksternal apapun.
Sebelumnya Bootstrap ini memang digunakan untuk pengembangan tool internal saja berlangsung selama setahun, kemudian dirilis ke publik dan terus berlanjut hingga sekarang dan banyak orang yang menggunakannya untuk projek desain web.
Bootstrap dirilis pertama kali pada Jumat, 19 Agustus 2011, lebih dari dua puluh rilis pernah dikerjakan oleh para developer, terdapat dua versi utama yang ditulis ulang v2 danv3. Pada Bootstrap 2, dtambah fungsionalitas responsive untuk keseluruhan framework sebagai opsional stylesheet. Untuk Bootstrap 3 yang ditulis ulang pada librari sekali saja untuk menjadikannya responsive secara default dengan pendekatan pertama mobile.
Bootstrap Penggunaan MaxCDN
Bagi website yang menggunakan fasilitas MaxCDN, cukup menambahkan link di bawah ini di situsnya.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Precompiled Bootstrap
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
Ini merupakan dasar dari struktur framework precompiled Bootstrap. Anda akan menemukan dua jenis Bootstrap di dalamnya. Tersedia compiled CSS dan JS (boostrap.*) dan ada juga terdapat compiled dan minified (boostrap.min.*). Untuk Bootstrap yang compiled dan minified sangat bagus digunakan untuk performance situs yang berpengaruh pada load time website akan lebih kecil dibandingkan yang jenis compiled saja.
Source Code Bootstrap
Jika membuka source code ini, anda akan menemukan precompiled CSS, JavaScript, dan fonts assets, bersama dengan source Less, JavaScript, dan juga dokumentasi di dalamnya. Struktur sederhananya seperti di bawah ini:
bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
Semua source code yang disediakan berisi dukungan file paket, informasi lisensi dan pengembangan.
Template Dasar
Bootstrap telah menyediakan template dasar yang bisa Anda pakai untuk projek web design Anda. Dan sudah tersedia juga template dan contoh website sederhana yang Anda dapat modifikasi sesuai dengan kebutuhan desain Anda.
Secara default struktur HTML dari Bootstrap seperti di bawah ini:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Ini bisa anda pergunakan untuk memulai desain web Anda dengan mudah, adapun untuk source code CSS, JS, dan Less sudah tersedia sebelumnya di item download.
Komponen Bootstrap
Untuk memudahkan Anda dalam memulai projek web design, Bootstrap sendiri telah menyediakan beberapa komponen. Dan ini Anda bisa dapatkan di dalam precompiled Bootstrap yang diantaranya:
Sampel Framework
Sampel framework yang tersedia bisa Anda pilih:
- Starter Template
Tampilan yang paling sederhana hanya compiled CSS dan JS dengan sebuah container - Bootstrap theme
Memuat beberapa opsional tema Bootstrap, ini sangat cocok untuk meningkatkan pengalaman visual Anda. - Grids
Di sini Anda akan mendapatkan berbagai contoh grid dengan empat tingkat, bersarang, dan masih banyak yang Anda bisa temukan di sini. - Jumbotron
Membangun halaman web di sekitar jumbotraon dengan sebuah navbar dan beberapa kolom grid dasar. - Narrow Jumbotron
Jika Anda ingin membangun halama kustom lain dengan container default yang menyempit, jumbotrron narrow menjadikan pilihan buat Anda.
Bar Navigasi
- Navbar
Template sangat mendasar yang terdapat navbar bersama dengan beberapa tambahan konten. - Static top navbar
Template sangat mendasar dengan navbar statis di atas bersama dengan beberapa tambahan konten. - Fixed navbar
Template sangant mendasar dengan sebuah navbar tetap bersama dengan beberapa tambahan konten.
Komponen kustom
- Cover
Template satu halaman untuk membangun halaman depan yang sederhana dan indah. - Carousel
Mengkustomisasi navbar dan carousel, kemudian ditambahkan beberapa komponen baru. - Blog
Layout blog dua kolom sederhana dengan navigasi kustom, header, dan tipe. - Dashboard
Struktur dasar untuk dasbor admin dengan sidebar dan navbar tetap. - Sign-in page
Layout formulir kustom dan desain untuk formulir sign in sederhana. - Justified nav
Membuat navbar kustom dengan link yang disejajarkan. Perhatian! Tidak bersahabat dengan browser Safari. - Sticky footer
Menempelkan footer pada bagian bawah viewport ketika konten lebih pendek daripada itu. - Sticky footer with navbar
Menempelkan footer pada bagian bawah viewport dengan naavbar tetap di bagian atas.
Lainnya
- Non-responsive bootstrap
Dengan mudah menonaktifkan responsifitas dari Bootstrap. - Off-canvas
Membangun sebuah tombol yang dapat berpindah melalui menu navigasi kanvas untuk digunakan dengan Bootstrap
islam di dadaku says
bootstrap bisa tidak diterapkan di blogspot
Ahmad Fahrurroji says
Karena bootstrap berbasis HTML, CSS dan JavaScript sepertinya bisa mas, saya lagi coba ngoprek.
harkur says
kabri yooo kalau bisa di blogspot 🙂
Ahmad Fahrurroji says
Ditunggu aja, Insya Allah saya akan terbitkan eBook nya. Saat ini dalam proses pembuatan semoga diberi kemudahan dan lancar.
irfan says
mas kalau Bootstrap ingin dibuat seperti WP ada Dashboardnya itu gimana ya tutornya saya belum paham
Ahmad Fahrurroji says
Kalau theme WP pake bootstrap sih banyak mas, coba kunjungi saja ke:
– http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
– http://www.tutorialspoint.com/bootstrap/
mungkin sedikit membantu apa yang sedang dicari oleh mas irfan.