Belajar Bootstrap

Hai lama tak jumpa? Jumpa? Emang admin pernah berjumpa sebelumnya sama kalian? 😁

Hehe santai.. Cuma buat awalan aja

Kali ini admin bakal share mengenai Bootstrap. Apa itu Bootstrap? Bootstrap itu merupakan salah satu framework CSS yang sudah banyak sekali digunakan di penjuru dunia ini untuk membangun sebuah web. Lalu apa sih framework itu min? Jadi gampangannya framework itu seperti kumpulan source code berupa class yang sudah siap dipakai sesuai kebutuhan kamu saat akan membangun serta mempercantik sebuah web.

Lalu buat apa sih framework Bootstrap?

Jadi begini, kita mau membuat sebuah web untuk menginputkan data siswa. Di dalam web kita perlu menu navbar, form input mulai dari button, combo box dan lainnya, kita juga perlu footer. Nah untuk kalian yang sudah paham HTML pasti mudah untuk membuatnya bukan? Tapi tampilannya biasa – biasa saja. Padahal web juga dinilai bagus dan apik juga dari tampilannya.

Kalau begitu kan bisa pakai CSS?

Iya, untuk tampilan halaman web bisa dipercantik dengan CSS (Cascading Style Sheet). Di sini admin menganggap kalian sudah paham penggunaan CSS ya!

Terus apa dong gunanya Bootstrap?

Nah, gunanya Bootstrap adalah memudahkan kalian untuk mempercantik web. Kalau kalian mau mempercantik menggunakan CSS, kalian harus menuliskan source code baris demi baris yang banyaknya minta ampun. Pasti hal itu memakan waktu, padahal sudah ada deadline di depan mata. Maka dari itu kalian bisa menggunakan alternatifnya yaitu Bootstrap. Bootstrap ini sudah berisi banyak sekali class yang sudah siap dipanggil. Jadi jika sudah pakai Bootstrap, kalian nggak perlu deh ngetik code yang banyak banget. Ini juga bisa mengefektifkan waktu kamu. Lalu ada lagi kelebihan menggunakan Bootstrap, web kalian jadi Responsive. Kalau kalian buat code CSS sendiri belum tentu bisa Responsive kan, nah ini solusinya. Maksud dari responsive adalah si web ini seperti air, menyesuaikan ruang tempatnya.

Dimana bisa mendapatkan Bootstrap?

Untuk mendapatkan Bootstrap kalian harus ada koneksi internet nih. Kalian bisa kunjungi di sini. Silakan surfing mengenai semua tentang Bootstrap. Untuk mendownloadya klik saja button Download Bootstrap yang ada di tengah – tengah jumbotronnya.

Setelah itu kalian akan menuju halaman baru, ada 3 pilihan button tu. Kalian pilih saja yang Download Bootstrap.

Gak mau ribet? 😏 Nih langsung saja klik di sini untuk langsung mendownload Bootstrap versi 3.3.7. Nah udah deh dapet Bootstrapnya.

Selain cara di atas, ada cara lain loh buat dapetin Bootstrap! Tanpa koneksi internet lho! Mau tau? Kalian bisa copy aja file ke orang yang sudah punya Bootstrap :v Bercanda bercanda 😆 tapi ini serius ya bisa dilakuin caranya.

Lalu gimana dong cara pakai Bootstrap?

Biasanya penggunaan Bootstrap juga berdampingan dengan Jquery nih. Tapi kalo nggak pake nggak masalah kok, soalnya Bootstrap sendiri punya file .js nya sendiri.

Semisal tadi kalian punya project web untuk input data siswa. Nah kalian memasukkan data tersebut ke dalam folder dengan nama ‘siswa’ dengan path di Local disk C ➝ xampp ➝ htdocs ➝ siswa

(kalian sudah harus instal Xampp ataupun aplikasi serupa untuk koneksi).

Setelah itu buat folder baru dengan nama 'assets' di folder siswa untuk menyimpan Bootstrap dan Jquery.

Bootstrap yang sudah didownload akan berbentuk .zip dengan nama file ‘bootstrap-3.3.7-dist’. Nah buka filenya. Lalu ekstrak satu folder utuh ke local disk C ➝ xampp ➝ htdocs ➝ siswa ➝ assets.

Nah kalian cemplungin tuh bootstrap satu folder ke dalam folder assets. Hal ini dilakukan agar penataan path rapi dan nantinya mudah saat dipanggil di sebuah file. Kalian bisa rename tuh nama file ‘bootstrap-3.3.7-dist’ menjadi ‘bootstrap’ untuk mempermudah saat diimplementasikan ke source code web kalian.

Inget ya! Penggunaan Jquery seperti gambar di atas gak harus dilakukan.

Pemanggilan Boostrap

Caranya adalah sama seperti pemanggilan file CSS eksternal. Yaitu meletakkannya pada <head>..</head>

Seperti ini nih sourcenya

<html>

<head>

<title>

Siswa

</title>

</head>

Nah jika kalian mau menggunakan Jquery, file jquery harus diinclude kan pertama kali ya. Code <script type="text/javascript" href="assets/jquery.js"> itu maksudnya code HTML menjalankan code Javascript, href maksudnya file mana akan dipanggil. Di situ kita memanggil file jquery.js yang ada pada folder assets.

Beda lagi untuk memanggil file CSS, kita menggunakan tag link.

Bootstrap juga bisa dipanggil secara online, jadi jika kalian tidak punya file Bootstrap maka kalian bisa panggil Bootstrapnya dari server. Hal ini dilakukan agar menghemat ukuran file web, dengan memanggil Bootstrap dari servernya langsung, ukuran file jadi lebih ringan tanpa ada file Bootstrap. Tapi dengan cara ini, PC kalian harus tuh yang namanya konek ke internet. Caranya sama seperti di atas, bedanya yang diincludekan adalah :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<link rel="stylesheet" href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " >


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Nah dengan begitu, Bootstrap sudah aktif. Kalian tinggal implementasikan aja ke web kalian. Untuk belajar Bootstrap, kalian bisa kunjungi W3Schools atau website Bootstrapnya. Sudah lengkap kok, tapi pakenya bahasa Inggris 😏 ya gimana ya kalau kalian gak paham bahasa Inggris 😌

Tenang aja, di W3Schools kalian bisa otak atik buat nyoba source codenya :v

Dengan menggunnakan Bootstrap, tampilan button, form, navbar semuanya jadi beda deh pokoknya :v kalau ibaratkan mie rebus, mie rebusnya spesial ada telurnya :v

Nah sekian mengenai Belajar Bootstrap. Maaf ya kalau ada kesalahan, bisa coret coret di komentar kok. Sangat membantu bila ada kritik dan saran. Tapi kalau kritik ya yang bersifat membangun ya agan / sista :v

Mahe's World

Cari Blog Ini

Membuat Custom Button Sendiri Menggunakan CSS

Belajar Bootstrap

Komentar

Posting Komentar