Mengenal Framework Twitter Bootstrap dan Penggunaannya Pada Website

Pada kesempatan ini saya akan membahas tentang pengertian bootstrap juga sejarahnya yang merupakan framework dari CSS dimana sangat membantu para pembuat dan pengembang website dalam malasah komponen dan tampilan website. Saat ini ada salah satu framework css yang sangat banyak digunakan yaitu Twitter Bootstrap.

Perkembangannya website saat ini dari tahun-ketahun mengalami peningkatan. Pengembangan dari mulai hanya teks saja hingga sekarang website sudah dipadukan dengan berbagai multimedia dan animasi lainnya. Sehingga lebih tampak menarik dan enak dilihat oleh para setiap pengunjungnya.

Klik Disini Untuk Mngetahui Pengertian Website

Bagaimana Website Dibuat?

Para pengembang website dari dahulu hingga saat ini pastinya memiliki ruang kerja atau biasa disebut framework dalam membuat sebuah website. Sehingga pengerjaan terbagi menjadi dua yaitu desainer dan programmer. Pada bagian desain para desainer pastinya mengkompinasikan antara Bahasa pemograman (HTML) dan aturan dalam komponen-komponen (CSS) website yang dimana akan membuat suatu tampilan yang lebih menarik dan rapih. Setelah desain selesai maka diberikan kepada programmer untuk dibuatkan fungsi dari hasil desain tersebut. Itu lah merupakan suatu ruang kerja dalam pembuatan website. Sehingga framework dalam membuat website terbagi menjadi 2  yaitu framework PHP dan Framwork CSS.

Propesi yang Terkait Dengan Pembuatan Website

Apa Yang Dimaksud Pengertian Bootstrap?

Pengertian Bootstrap adalah library (pustaka / kumpulan fungsi-fungsi) dari Framework CSS yang dibuat khusus untuk bagian pengembangan fontend dari suatu website. Didalam library tersebut terdapat berbagai jenis file yang diantaranya HTML, CSS, dan Javascript. Hampir semua developer website menggunakan framework bootstrap agar memudahkan dan mempercepat pembuatan website. Karena semuanya sudah ada dalam frameworknya sehingga para develop / pengembang hanya tinggal membuat / menyisipkan class nya yang ingin dipakai seperti membuat tombol, grid navigasi dan lain sebagainya.

Bootstrap telah menyediakan kompulan aturan dan komponen class interface dasar sebagai modal dalam pembuatan web yang telah dirancang sangat baik untuk memberikan tampilan yang sangat menarik, bersih, ringan dan memudahkan bagi penggunanya. Dan penggunaan bootstrap ini kita juga diberikan keleluasan salama pengembangan website, anda bisa merubah dan menambah class sesuai dengan keinginan.

Sejarah dan Perkembangan Bootstrap

Bootstrap awalnya dibuat dan dikembangkan oleh pekerja / programmer Twitter, yaitu Mark Octo dan Jacob Thornton sejak tahun 2011. Saat itu memang para programmer di Twitter menggunakan berbagai macam tools dan library yang mereka kuasai dan disukai untuk melakukan pekerjaannya, sehingga tidak ada standarisasi dalam penamaan suatu class. Akibatnya sulit untuk dikelola, maka dari itu keduanya membuat suatu tools ataupun framework yang digunakan bersama dilingkukan internal twitter.

Sejak diluncurkan pada bulan agustus 2011, bootstrap telah berevolusi dari proyek yang hanya basis css menjadi sebuah framework yang lebih lengkap yang juga berisi javascript plugin, icon, Forms, dan button.

Pada januari 2012, Bootstrap merealease Versi 2.0 yang didalamnya sudah memasukan fitur responsive layout, dan sejak itu penggunaan Bootstrap sangat banyak sekali sehingga menjadi proyek Github yang sangan banyak di copy hingga 20.000 kali.

Dua tahun setelah itu tepatnya pada bulan agustus 2014 bootstrap kembali mengeluarkan versi terbaru yaitu versi 3.0 yang didalamnya sudah mengakomodasi konsep Mobile first artinya didalam pembuatan dan pengembangan mulai dari layar yang terkecil dahulu (mobile / handphone/ smartphone) dan secara bertahap pada tampilan yang paling besar.

Pelajari Disini Tentang Mobile First Indexing

Dan baru-baru ini bootstrap merilis versi 4.0 (sebelumnya pada tahun 2017 sudah dirilis versi betanya) sebagai penyempurnaan dokumentasi dan menambah beberapa fitur tambahan yang saat ini sedang booming yaitu dengan memberikan tampilan lebih baik bagi para pengembang ecommerce , dan tampak lebih stabil dan dengan ini maka versi 2.0 dan 3.0 tidak akan ada lagi support atau update dalam penggunaannya.

Cara Menggunakan Bootstrap

Untuk menggunakan bootstrap yang pertama kali harus dipersiapkan adalah data atau framework bootstrap itu sendiri. Anda bisa dapatkan di sini

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

Data diatas adalah data struktur file yang ada di bootstrap.

Cara menginstal bootstrap

Cara menginstall bootstrap ada beberapa cara, anda bisa mengunakan beberapa cara seperti menggunakan composer, bower, menggunakan npm, secara offline dan online. Berikut ini contoh perintah untuk menginstall boostrap menggunakan cara tersebut.

1. Install Bootstrap dengan Bower-> Bower install bootstrap
2. Install Bootstrap dengan npm-> npm install bootstrap
3. Install Bootstrap dengan composer-> composer require twbs/bootstrap

Cara Menginstall Bootstrap

Terdapat dua cara menginstal bootstrap, dengan cara online dan offline. Kedua cara ini sama baiknya, namun dalam prosesnya lebih mudah menginstal secara online.

Cara Menginstall bootstrap secara online

Cara menginstall secara online adalah yang paling mudah dan jarang terjadi error jika bukan karena koneksi yang terputus. Untuk install online ini hanya memasukan beberapa script pada tag <Head> pada HTML dengan menghubungkan pada data css dan javascript nya secara online. Script nya seperti berikut

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” integrity=”sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=”anonymous”>

<!– Optional theme –>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css” integrity=”sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r” crossorigin=”anonymous”>

<!– Latest compiled and minified JavaScript –>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” integrity=”sha384-0mSbJDEHialfmu BBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=”anonymous”></script>

Cara Menginstall bootstrap secara Offline

Cara menginstall secara offline ini adalah cara yang paling banyak digunakan oleh para developer karena semua file bootstrap sudah ada dalam komputer mereka sehingga tidak tergantung pada koneksi internet dalam pemakaiannya. Lain dengan penggunaan / installasi secara online yang ditunjukan kepada server luar, pada penginstallan offline ditujukan pada server sendiri atau secara lokal pada perangkat masing-masing developer.

Kemudian untuk menghubungkan atau menginstall bootstrapnya, buat sebuah file baik HTML atau PHP yang akan dihubungkan dengan bootstap nya. Dan sebaiknya dibuat sebagai autoload atau diberi nama index.php .

Contohnya seperti dibawah ini

<html>

<head>

<title>Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap</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>Cara Menggunakan Bootstrap | www.malasngoding.com</h1>

<button class=”btn btn-danger”>TOMBOL MERAH</button>

<button class=”btn btn-primary”>TOMBOL BIRU</button>

</body>

</html>

Manfaat & Keuntungan Menggunakan Bootstrap

Tentu anda yang awam tentang framework css boostrap bertanya-tanya apa istimewa jika menggunakan bootstrap sehingga banyak developer menggunakannya, berikut ini beberapa keuntungan jika menggukan bootstrap .

1. Penggunaan bootstrap sangat menghemat waktu pengerjaan.
2. Tampilan yang cukup menarik clean dan modern
3. Tampilan sudah bisa dikatakan mobile friendly karena sudah bisa responsive, karena bootstrap sudah mendukung segala jenis resolusi.
4. Sangat ringan dan terstruktur
5. Dan masih banyak lagi keuntungan yang didapat jika sudah membuat suatu website.

Bootstrap memberikan kemudahan bagi anda, dengan menggunakannya dapat memangkas waktu, tenaga dalam proses pengerjaan suatu website. Kita selalu dituntut melakukan pekerjaan apapun dengan efisien dan efektif, dengan demikian penggunaan framework twitter bootstrap ini bisa anda pilih ketika membuat suatu website bagi anda maupun klien anda.