Belajar Bootstrap Part 1 Mengenal & Cara Menggunakan Bootstrap

Belajar Bootstrap Part 1 Mengenal & Cara Menggunakan Bootstrap

Assalamualaikum Wr. Wb.

Hai sobat gimana kabarnya ? sehat ? Alhamdulillah, kalau masih sehat mari kita lanjutkkan materi kita. Pada kesempatan kali ini kita akan memasukki Bootstrap. Pasti banyak yang bertanya-tanya apa itu bootstrap dan apa fungsinya. Untuk lebih jelasnya langsung saja lihta penjelasan di bawah ini.

PENGERTIAN

Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end sebuah website. Bootstrap merupakan salah satu framework HTML, CSS, dan Javascript yang paling populer di kalangan web developer. Pada saat ini hampir semua web developer yang telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. Karena anda hanya perlu memanggil class-class yang telah disediakan oleh bootstrap tersebut.

LATAR BELAKANG

Dalam membuat sebuah web kita memerlukan sebuah desain yang bagus agar pengunjung tertarik pada web yang telah kita buat. Dalam mendesain sebuah web kita perlu menambahkan CSS ( Cascading Stylesheet untuk tampilan dari web tersebut. Biasanya membuat sebuah CSS itu tidaklah semudah yang kita bayangkan, terlebih jika kita membuat sebuah website yang besar seperti perusahaan, sekolah, desa dll. Dengan menggunakan bootstrap kita cukup memanggil class yang kita butuhkan, contoh seperti : navbar, jumbotron, glyphicon, footer, div, dan masih banyak yang lainnya.

MAKSUD & TUJUAN

Penggunaan bootstrap sangat menghemat waktu.
Tampilan bootstrap cukup terlihat modern.
Mobile Friendly yang maksudnya tampilan bootstrap responsive. yang mendukung segala jenis tampilan device. Baik itu mobile, PC, tablet, smartphone.
Dan masih banyak yang lainnya.

ALAT & BAHAN

Untuk menggunakan bootstrap alat-alat yang harus digunakan yaitu:

Bootstrap download disini Bootstrap
LAPTOP/PC
Text Editor
Browser

LANGKAH KERJA

Untuk menggunakan Bootstrap bisa dengan dua cara yaitu bisa dengan online maupun offline.

Menggunakan Bootstrap secara online.

Untuk menggunakan bootstrap secara online anda bisa memasukkan kode di bawah ini di dalam scrip anda. Kode di bawah merupakan library framework yang bias dipanggil secara online.

<!-- Latest compiled and minified CSS -->

<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-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Untuk memasukkan bootstrap biasanyan di masukkan pada tag <head>.

Menggunakan Bootstrap secara offline.

Untuk menggunakan bootstrap secara offline kita terlebih dahulu mendownload file bootstrap di website resminya. Kemudian ekstrak filenya, disini saya meletakkan bootstrap di Document/Belajar Bootstrap.

Kemudian untuk menggunakannya buatlah file HTML atau PHP yang akan kita hubungkan dengan bootstrap. Selain itu bootstrap juga memerlukan jquery. Karena untuk bagian javascriptnya bootstrap menggunakan jquery. Jadi jangan lupa untuk menambahkan file jquerynya pada folder bootstrap tersebut. Untuk mendapatkan jquerynya anda bisa mendownload di website resminya jquery.com.

Disini saya memberi nama pada file jquery dengan jquery.js dan saya meletakkan di folder Document/Belajar Bootstrap/js/jquery.js.

Untuk menghubungkan bootstrap dan juga jquerynya lihat pada contoh berikut.

Pertama buat file kemudian simpan di folder bootstrapnya.

Kemudian masukkan syntak berikut untuk memanggil bootstrap dan jquerynya.

Nb:

tag <link> pada contoh di atas berfungsi untuk memanggil file CSS dari bootstrap.
tag <script> yang pertama berfungsi untuk memanggil file jquerynya, diusahakan memanggil jquery terlebih dahulu daripada bootstrapnya.
tag <script> yang kedua berfungsi memanggil file jquery bootstrapnya.

Setelah kita memanggil file bootstrapnya, kemudian kita coba untuk menggunakannya.

Contoh : Misal kita akan membuat tombol dari bootstrap.

Nb : Kita panggil class css yang sudah ada di dalam bootstrap tersebut

Bagaimana dengan hasilnya cantik bukan, dan caranya mudah kan. Nah mungkin cukup sekian dari saya tentang dasar-dasar dari bootstrap. Kurang lebihnya mohon maaf.

Syukron^^

Wassalamualaikum Wr. Wb.

Referensi

http://getbootstrap.com/

http://jquery.com/