Pengertian, Sejarah dan Penggunaan 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>







Copy

Precompiled Bootstrap

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap.min.css
│   └── bootstrap-theme.min.css
│   ├── bootstrap-theme.css.map
├── js/
    ├── glyphicons-halflings-regular.eot
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2


Copy

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/
├── fonts/
├── js/
├── dist/
│   ├── js/
│   ├── css/
│   └── fonts/
    └── examples/
└── docs/



Copy

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>



Copy

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:

1. Starter Template
   Tampilan yang paling sederhana hanya compiled CSS dan JS dengan sebuah container
2. Bootstrap theme
   Memuat beberapa opsional tema Bootstrap, ini sangat cocok untuk meningkatkan pengalaman visual Anda.
3. Grids
   Di sini Anda akan mendapatkan berbagai contoh grid dengan empat tingkat, bersarang, dan masih banyak yang Anda bisa temukan di sini.
4. Jumbotron
   Membangun halaman web di sekitar jumbotraon dengan sebuah navbar dan beberapa kolom grid dasar.
5. Narrow Jumbotron
   Jika Anda ingin membangun halama kustom lain dengan container default yang menyempit, jumbotrron narrow menjadikan pilihan buat Anda.

Bar Navigasi

1. Navbar 
   Template sangat mendasar yang terdapat navbar bersama dengan beberapa tambahan konten.
2. Static top navbar
   Template sangat mendasar dengan navbar statis di atas bersama dengan beberapa tambahan konten.
3. Fixed navbar
   Template sangant mendasar dengan sebuah navbar tetap bersama dengan beberapa tambahan konten.

Komponen kustom

1. Cover
   Template satu halaman untuk membangun halaman depan yang sederhana dan indah.
2. Carousel
   Mengkustomisasi navbar dan carousel, kemudian ditambahkan beberapa komponen baru.
3. Blog
   Layout blog dua kolom sederhana dengan navigasi kustom, header, dan tipe.
4. Dashboard
   Struktur dasar untuk dasbor admin dengan sidebar dan navbar tetap.
5. Sign-in page
   Layout formulir kustom dan desain untuk formulir sign in sederhana.
6. Justified nav
   Membuat navbar kustom dengan link yang disejajarkan. Perhatian! Tidak bersahabat dengan browser Safari.
7. Sticky footer
   Menempelkan footer pada bagian bawah viewport ketika konten lebih pendek daripada itu.
8. Sticky footer with navbar
   Menempelkan footer pada bagian bawah viewport dengan naavbar tetap di bagian atas.

 Lainnya

1. Non-responsive bootstrap
   Dengan mudah menonaktifkan responsifitas dari Bootstrap.
2. Off-canvas
   Membangun sebuah tombol yang dapat berpindah melalui menu navigasi kanvas untuk digunakan dengan Bootstrap

Referensi URL