Pengenalan Bootstrap

Athhar Kautsar   6/14/2017   bootstrap  

Untuk beberapa artikel kedepan saya akan membagikan tutorial dasar bootstrap.-
Bootstrap adalah framework atau tools untuk membuat aplikasi web ataupun website yang bersifat responsive secara cepat, mudah, dan gratis. Kata "Responsive" disini berarti tampilan web (lebar dan susunan isinya) dapat berubah secara otomatis mengikuti lebar layar yang menampilkannya.

Bootstrap terdiri dari CSS dan HTML untuk menghasilkan grid, layout, typography, tabel, form, navigasi dan lain-lain. Di dalam bootstrap juga sudah terdapat Javascript (jQuery plugins) untuk menghasilkan komponen UI yang canti seperti: Transitions, Modal, DropDown, ScrollSky, ToolTip, PopOver, Tab, Alert, Button, Carousel, dll.

Sejarah Bootstrap

Pada tahun 2011, Bootstrap diciptakan oleh dua orang Programmer di Twitter, yaitu Mark Otto dan Jacob Thornton. Pada saat itu, para prommer di Twitter menggunakan berbagai macam tool dan library yang mereka kenal dan senangi untuk melakukan pekerjaan mereka, sehingga tidak ada standarisasi dan akibatnya susah untuk di maintain, kemudian ke-2 manusia tersebut tergerak untuk menciptakan suatu tool / framework yang dapat digunakan bersama linkungan internal twitter.

Sejak diluncurkan pada bulan Agustus 2011, Bootstrap telah berevolusi dari sebuah project yang hanya berbasis CSS menjadi sebuah tool / framework yang lebih lengkap yang juga berisi Javascript Plugin, Icon, Button dll.

Pada Januari 2012, Bootstrap merelease v2.0 yang didalamnya sudah memasukkan fitur responsive layout.

Pada  Agustus 2014, Bootstrap mengeluarkan v3.0 yang didalamnya sudah mengakomodasi konsep 'mobile first', artinya didalam pembuata desain web maka kita merancang untuk layar kecil dahulu (handphone), kemudian secara bertahap menambahkan fitur-fitur untuk layar yang lebih besar.

Struktur Folder dan File Bootstrap

Bootstrap dapat didownload secara gratis dari website resminya di http://getbootstrap.com/.

Saat saya menulis artikel ini (Juni 2017), versi terbarunya adalah Bootstrap v3.3.7

Klik untuk memperbesar

Klik tombol Drownload Bootstrap, maka akan tampil halaman download dengan 3 pilihan.

Karena di artikel ini saya hanya menuliskan tutorial dasarnya saja, maka kita klik tombol pilihan pertama (Download Bootstrap)

Klik untuk memperbesar

Setelah di download, lalu unzip/extract file tsb, maka kalian akan mendapatkan struktur folder dan file file didalamnya. (kurang-lebih strukturnya seperti ini)

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── 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

Jika kalian mau memasang bootstrap di blog pakai kode dibawah ini dan letakan diatas kode </head>

HTML<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

lalu salin lagi kode dibawah ini dan letakan diatas kode </body>

HTML<!-- jQuery library (Opsional - jika blogmu udah ada jquery jangan copy js script dibawah ini) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Template dasar HTML dengan Bootstrap

Bootstrap sangat terikat dengan HTML5 dalam membuat sebuah layout halaman web. Oleh karena itu, semakin baik pengetahuan kita mengenai HTML5, maka semakin mudah kita mengimplementasikan Bootstrap.

Biasanya, template dasar HTML5 apabila menggunaka Bootstrap seperti dibawah ini:

HTML<!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.3/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.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Untuk pengenalannya cukup segitu dulu. Jika saya sempat, insyaallah besok akan saya lanjut lagi..