Belajar Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap

Bootstrap Yogi Prasetyawan Jumat, Desember 09, 2016 20 komentar

PENGERTIAN
SCIPT KIDDIES - Pada postingan kali ini saya akan Menengalkan dan Cara Menggunakan Bootstrap. Bootstrap adalah framework ataupun tools untuk membuat aplikasi web ataupun website yang bersifat responsive secara cepat, mudah dan gratis. Kata 'responsive' disini berarti bahwa tampilan web (lebar dan susunan isinya) dapat berubah otomatis sesuai denan lebar layar yang menampilkanya

Salah satu website besar yang menggunakan framework bootstrap adalah Twitter, Tentu sobat sudah tidak asing lagi dengan Twitter ? interface twitter dibangun dengan menggunakan bootstrap. Mengapa bisa demikian? Karena Bootstrap sendiri dikembangkan oleh developer twitter sehingga Bootstrap juga disebut " Twitter Bootstrap " Dengan bootstrap, kita dapat membuat responsive website dengan cepat dan mudah dapat berjalan sempurna pada browser-brwoser modern sepert Firefox, Google Chrome, Safari, Opera, Dan Internet Exploler.

LATAR BELAKANG
Salah satu kemudahan Bootstrap yaitu Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Tifografi, Tabel, Form, Navigasi dan lain - lain. Di dalam Bootstrap juga sudah terdapat Javascript (jQuery Plugins) untuk menghasilkan komponen UI yang cantik seperti transition, Modal, Dropdown, Scroolspy, ToolTip, PopOver, Tab, Alert, Button, Carousel, dan lain - lain.

MAKSUD DAN TUJUAN
Bootstrap berisi kumpulan class yang siap pakai. misalnya sobat ingin membuat sebuah tombol dengan cepat dan tanpa harus merancang dan mengetikkan syntax css untuk membuat sebuah tombol, maka dengan bootstrap kita dapat membuatnya dengan sangat cepat, yaitu hanya dengan menambahkan class “btn” . Akan saya jelaskan kembali agar lebih jelas tentang kelebihan Bootstrap untuk membangun sebuah website, berikut kelebihanya

Penggunaan bootstrap yang menghemat waktu
Tampilan terlihat modern
Tidak perlu susah payah mengatur Script, tinggal memanggil class maka sudah jadi script tersebut
Mobile Friendly maksudnya tampilan Bootstrap sangat responsive, yaitu tampilan Bootstrap sudah mendukung segala jenis resolusi, baik itu PC, Laptop, Tablet, Smartphone dan lain - lain
Sangat ringan karena bootstrap dibuat dengan sangat terstruktur
Dan masih banyak lagi kelebihan Bootstrap yang dapat sobat temukan nanti jika sudah menggunakan Bootstrap

ALAT DAN BAHAN

Laptop / PC
CSS Boostrap

Cara Menggunakan Bootstrap
Langkah pertama yang harus sobat lakukan adalah menginstall Bootstrap. Silahkan sobat download Bootstrap pada website resminya http://getbootstrap.com/

Sampai saat ini Bootstrap sudah mencapai versi ke empat. Silahkan Klik disini Untuk mendapatkan versi ke empat. Berikut ini struktur isi Bootstrap ketika sudah di download

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

Oke sekarang akan saya jelaskan cara menggunakan Bootstrap. Bootstrap memiliki 3 cara penginstalan, simak dan baca tutor berikut

Cara Install Bootstrap
Ada beberapa cara menginstall Bootstrap. Anda bisa menginstall Bootstrap dengan composer, bower, menggunakan npm, secara offline dan online. Berikut contoh perintah untuk menginstall bootstrap dengan Bootstrap

bower install bootstrap

Untuk menginstall Bootstrap menggunakan npm

npm install bootstrap

Install Bootstrap dengan composer

composer require twbs/bootstrap

Tetapi cara ini jarang digunakan oleh kebanyakan orang, cara yang paling banyak digunakan oleh orang adalah dengan cara offline dan online

Cara Install Bootstrap Secara Online
Sobat bisa memilih salah satu dari tiga contoh berikut untuk menginstall bootstrap secara online. syntax berikut bisa sobat letakkan pada bagian <head> pada halaman HTML anda sama seperti menghubungkan HTML dengan CSS dan Javascript

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


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


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

Cara Install Bootstrap Secara Offline
Cara offline inilah yang paling banyak digunakan oleh orang, karena kita dapat mengoperasikan atau menggunakan bootstrap tanpa harus terkoneksi dengan internet alias harus Online. Karena framework Bootstrap sudah terletak di PC kita sendiri. Berbeda dengan install Bootstrap secara online karena file - file Bootstrap berada di pada server luar.

Setelah sobat mendownload framework CSS Bootstrap extract pada file project anda.

Kemudian untuk menghubungkan atau menginstall bootstrap buat sebuah file HTML atau PHP yang akan kita hubungkan dengan Bootstrap. Disini saya membuat sebuah file dengan nama index.html.

Bootstrap juga memerlukan jquery karena untuk bagian Javascript Bootstrap memerlukan jquery, jadi jangan lupa untuk menambahkan juga file jquery pada folder js Bootstrap atau letakkan sesuai keinginan anda asalkan direktori saat menghubungkan file css dan js sesuai.

Ketikkan script berikut pada text editor dan simpan dengan extensi html / php

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Bootstrap Part 1 : Mengenal 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>Mengenal Dan Cara Menggunakan Bootstrap | SCRIPT KIDDIES</h1>
    <button class="btn btn-danger">TOMBOL MERAH</button>
    <button class="btn btn-primary">TOMBOL BIRU</button>
</body>
</html>

Oke akan saya jelaskan mengenai script diatas. Coba perhatikan pada script diatas. Untuk menghubungkan file html atau php sobat dengan bootstrap.css memerlukan script berikut

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

Kemudian hubungkan file html atau php sobat dengan bootstrap.js dan jquery.js. Ingat letakkan jquery.js pada bagian atas karena bootstrap bekerja menggunakan bantuan jquery bukan jquery menggunakan bootstrap.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

Kemduian class "btn" pada element <button> merupakan Class Bootstrap yang dapat digunakan untuk membuat tombol. Dan "btn-danger" , "btn-primary" adalah untuk menentukan warna dari tombol tersebut. Kita tidak membahas kegunaan tombol pada Bootstrap pada postingan kali ini tapi lanjut ke part 2 saja karena postingan ini hanya untuk pengenalan saja.

Jalankan script tadi pada browser dan berikut penampakanya

Contoh Penggunaan Bootstrap

Perhatikan letak direktori file css dan js Bootstrap dan Jquery sobat ketika menghubungkanya. Sobat tidak perlu menghubungkan seluruh isi Bootstrap tetapi sobat hanya perlu menghubungkan file bootstrap.css dan bootstrap.js

Sekian tutor Belajar Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap. Untuk tutor berikutnya akan saya jelaskan di blog kecil saya ini Script Kiddies . Mohon maaf jika ada salah penulisan atau yang lain jika sobat menemukan kesulitan silahkan berikan Komentar, Sekian Terima Kasih

Kunjungi Juga : Tampan Squad (Blog Kedua)
Referensi : Malas Ngoding & Buku Lokomedia

TUTORIAL BOOTSTRAP DASAR LAINYA :

Jumat, 09 Desember 2016

Belajar Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap

20 komentar :

Subscribe Dapat Pahala

Mondar - Mandir

Naik Daun

Category

Formulir Kontak