Selamat malam kawan,
Kali ini saya akan membahas tentang salah satu Libarary Framework CSS yang dibuat untuk pengembangan Front-End atau User Interface sebuat website yaitu Bootstrap. Ditahun belakangan ini Bootstrap merupakan salah satu Framework HTML, CSS, JavaScript yang populer di kalangan pengembang web.
Lalu sebenarnya Bootstrap itu untuk apa sih ?
Bootstrap merupakan framework yang digunakan untuk membangun sebuah web secara responsif , artinya tampilan web akan menyesuaikan ukuran layarnya sendiri tergantung dari device atau browser yang kita gunakan dan Bootstrap menyediakan kumpulan komponen class interface dasar yang telah dibangun sedemikian rupa untuk menciptakan tampilan yang menarik. Bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layour pada halaman website. Salah satu contoh website yang menggunakan Framework Bootstrap ini adalah Twitter. kok bisa Twitter menggunakan framework ini ? Twitter menggunakan Framework Bootstrap ini karena Bootstrap dikembangkan oleh developer twitter sendiri. Dan kelebihan Bootstrap adalah sebagai berikut.
- Dengan menggunakan Bootstrap ini bisa sangat menghemat waktu.
- Tampilan Bootsrap yang terlihat menarik dan modern.
- Reponsive dan User Friendly, yang dimana tampilan bootstrap sudah mendukung segala jenis ukuran layar, baik itu PC, laptop maupun smartphone.
- Dan masih banyak lagi kelebihan dan kegunaannya dari bootstrap yang akan anda rasakan sendiri setelah menggunakannya dalam membangun sebuah aplikasi berbasis web.
Sebelum menggunakannya, sebaiknya jika anda sudah mengerti tentang CSS dasar dan yang harus di persiapkan untuk menggunakan framework ini adalah sebagai berikut.
1. Instalasi Bootstrap
Untuk menggunakan framework ini pertama kali yang harus anda lakukan adalah instalasi bootstrap atau mendownload file distribusi yang sudah disediakan oleh bootstrap pada website resminya di
http://getbootstrap.com/ dan kemudia pilih Download.
2. Download jQuery Library untuk menjalankannya secara offline
Untuk bisa menjalankan bootstrap komponen seperti modal dialog, navigasi bar dan lainnya yang membutuhkan file bootsrap JS, Bootstrap JS juga membutuhkan jQuery Library agar bisa berjalan dengan normal, dalam paket instalasi bootstrap tidak menyediakan jQuery, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar anda bisa bekerja dan menjalankannya secara offline. Silahkan download jQuerynya terlebih dahulu disini
jQuery.
Cara menginstal Bootstrap
ada dua cara dalam menginstal bootstrap yang pertama secara online dan secara offline dan itu bisa anda pilih sesuai keinginan anda.
1. Secara online
Dibawah ini adalah sebuah syntax yang bisa anda letakan pada bagian <head> pada halaman HTML anda, cara ini seperti menghubungkan HTML dengan CSS dan JacaScript.
<!-- Latest compiled and minified CSS -->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" rel="stylesheet"></link>
<!-- Optional theme -->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" rel="stylesheet"></link>
<!-- Latest compiled and minified JavaScript -->
<script crossorigin="anonymous" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
cara ini menurut saya memakan waktu karena file distribusi tidak tersedia di direktori dan kita harus mengaksesnya melalu link yang sudah disematkan.
2. Secara offline
Selanjutnya secara offline, cara ini banyak di gunakan oleh banyak pengembang atau developer, karen dapat bekerja tanpa adanya koneksi internet. Karena file Bootstrap sudah berapa pada PC kita.
Sebelumnya kalian harus sudah mempunyai sebuah localhost, jika belum anda bisa menginstal XAMPP terlebih dahulu karena saya disini menggunakan XAMPP sebagai contohnya. jika sudah terinstal silahkan membuka XAMPP dan menjalankannya.
a. Buat folder baru
Buatlah folder baru pada direktori htdocs, misalnya "New_Project", secara default direktori htdocs berapa pada C:/XAMPP/htdocs/
b. Ekstrak dan Pindahkan File Bootstrap
Ekstrak Framework Bootstrap yang sudah didownload sebelumnya, lalu Pindahkan pada folder C:/XAMPP/htdocs/New_Project/
c. Copy file jQuery ke dalam folder js
Copy dan Gabungkan file jquery-1.12.0.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah pengerjaan secara offline.
d. Buat file HTML
Buatlah file HTML dengan notepad atau kode editor lainnya dan copy syntax dibawah ini, lalu simpan dan berinama seperti index.html.
<br /><br />
<!DOCTYPE html>
<html>
<head>
<title>PERKENALAN DENGAN BOOTSTRAP [FRAMEWORK]</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Pengertian dan Cara Menggunakan Bootstrap</h1>
<h1>krstfshare.blogspot.com</h1>
<button class="btn btn-danger">TOMBOL MERAH</button>
<button class="btn btn-primary">TOMBOL BIRU</button>
</body>
</html>
saatnya uji coba, buka file html yang telah dibuat memalui browser anda dengan membuka url seperti berikut http://localhost/New_Project/index.html/ jika berhasil maka hasilnya akan seperti ini.
Sekian pengertian dan cara menggunakan bootstrap, untuk tutorial selanjutnya akan dibahas pada artikel bootstrap selanjutnya di
krstfshare.blogspot.co.id.
Terimakasih sudah membaca artikel ini semoga bermanfaat.
Tutorial Bootstrap lainnya :
BOOTSTRAP [FRAMEWORK] Part 1 | Pengertian dan Cara Menggunakan Bootstrap
BOOTSTRAP [FRAMEWORK] Part 2 | Membuat Tombol (Button) dengan Bootstrap
