Site Loader
CHAT

Pengertian Dan Cara Menggunakan Framework Bootstrap – Bootstrap merupakan kumpulan library yang digunakan untuk membangun situs website kususnya dari segi tampilan depan(front end). Bootstrap terdiri atas komponen HTML, CSS, SCSS maupun javscript. Framewok bootstrap dalam pengembangannya biasanya bersamaan dengan plugin jquery untuk mendukung tampilan lebih dinamis.

Bootstrap mengalami pengembangan dari waktu ke waktu, yang dulu nya hanya sebuah text dan gambar saja sampai sekarang sudah mendukung multimedia dan animasi yang lebih menarik untuk digunakan. Selain itu website yang dibangun menggunakan bootstrap mempunyai desain yang responsif yang artinya ukuran tampilan akan menyesuaikan terhadap platform yang digunakan untuk mengakses.

Saat ini hampir sebagian besar pengembang aplikasi khusus berbasis website menggunakan framewok botstrap, karena dalam pengembangan website pengemang tidak perlu membuat tampilan satu persatu dengan CSS mapun JS, namun hanya dengan menyisipkan class maupun id komponen bootstrap maka tampilan akan menyesuakan. Apabila ingin merubah sedikit tampilannya dapat memberikan penambah secara bebas/custom.

Bootstrap sendiri di buat oleh salah satu situs sosial media yang populer dari dahulu yaitu twiiter, maka tidak asing ketika disebut juga twitter bootstrap. Situs website Twitter juga menggukan framework boostrap untuk tampilannya.

Keuntungan Twitter Framework Bootstrap

Sebelum melangkah menggunakan bootstrap untuk aplikasi website tentunya harus mengerti dan paham keuntungan / keunggulan twiiter bootstrap.Di bawah ini keuntungan menggunakan twiiter bootstrap.
  1. Tampilannya sangat elegant dan alami, sehingga tidak memberi kontras berlebihan.
  2. Menggunakan modern design
  3. Terdapat dukungan responsive dengan.
  4. Tedapat grid untuk penataan layout sesuai yang diinginkan.
  5. Memilik banyak komponen yang siap pakai dan ringan untuk di akses.

Struktur File Boostrap

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

Struktur di atas meliputi 3 Klasifikasi folder yaitu CSS, JS dan Fonst. Setiap file memiliki 2 versi yaitu versi minimal dan full, untuk penggunaan secara minimal ditandai dengan format “.min”.

Cara Menginstall  Bootstrap

Untuk menginstall boostrap terdapat 2 metode yaitu online dan offline. Ketika menggunakan offline maka projek boostrap akan terdapat di projek yang sedang anda kerjakan, namun sebelumnya harus mengunduh terkebih dahulu dengan beberapa metode yang dapat digunakan. Sedangkan untuk menggunakan boostrap secara online maka tidak perlu melakukan unduhan file, namun hanya mengambil repositiry boostrap.

Cara Menginstall  Bootstrap Secara Offline

Ada beberapa cara untuk menginstall boostrap sehingga dapat digunakan tanpa harus terhubung dengan internet, namun untuk instalasi wajib terhubung dengan koneksi internet.

1. Mengunduh file paket bootstrap

Untuk mengunduh secara langsung anda dapat mengunjungi situs websitenya langsung di https://getbootstrap.com/, kemudian cari kemudian klik unduh. Terdapat 2 macam hasil pengunduhan yang ada yaitu hanya mengunduh paket CSS, JS dan Fonts atau mengunduh besera contoh penggunaan dokumentasi bootstrap.

2. Menggunakan Package manager

Untuk mendapatkan file bootstrap menggunakan package manajer  silahkan buka terminal kemudian ketikan perintah :
Via NPM

npm install bootstrap

Via RubyGems 

gem install bootstrap

 Via Composer

composer require twbs/bootstrap

Cara Menginstall  Bootstrap Secara Online

Untuk menginstall boostrap yang dapat digunakan secara offline dapat menggunakan repo bootstrap dengan cara memasukan di bagian head kode HTML.

Contoh Penggunaan Boostrap

Buatlah kode program seperti di bawah ini

Kemudian simpan file dengan nama terserah anda kemudian jalankan di browser dan lihat hasilnya. Amati ketika menggunakan bootstrap atau tidak.

Post Author: Didik Prabowo

Seoarang Software enginering, Instruktur terutama di bifang pemrograman berbasis website, sekaligus admin di situs didikprabowo.com.

Leave a Reply

Your email address will not be published. Required fields are marked *

About

Didik Prabowo merupakan situs web yang menyajikan informasi dan tutorial pemrograman, Teknologi dan SEO serta membahas Web Design HTML, CSS dan Javascript.
Situs ini juga menyajikan Informasi mengenai pengguna linux.