Pengertian Bootstrap dan Cara penggunaannya Yang Harus Anda Kenali! - Belajar Pemrograman
News Update
Loading...

9/12/2019

Pengertian Bootstrap dan Cara penggunaannya Yang Harus Anda Kenali!

programmer.webillian.com - Pada kesempatan kal ini Kami akan membahas seputar pengertian bootstrap dan cara menggunakan bootstrap. Bootstrap merupakan framework dari sebuah CSS dimana itu sangat membantu untuk para pembuat dan pengembang sebuah website dalam malasah komponen ataupun tampilan dalam website. Yang sedang trending Saat ini ada salah satu framework CSS yang sangat banyak diminati dan digunakan yaitu Twitter Bootstrap, maksudnya adalah Anda tahu Twitter? Nah Twitter itu dibangun menggunakan CSS Bootstrap.

pengertian bootstrap dan cara penggunaannya yang harus dikenali


Perkembangannya suatu website saat ini dari tahun-ketahun selalu mengalami peningkatan. Jika Anda pengguna internet pada awal-awal internet ada, maka Andapun pasti bisa melihat hasil perbedaannya. Dulu hanya pengembangan dari mulai hanya teks saja, bahkan untuk sekarang website sudah bisa dipadukan dengan berbagai macam multimedia dan animasi lainnya. Sehingga lebih tampak menarik dan enak untuk dilihat oleh para setiap pengunjung/ user.



Apa Itu Bootstrap?


Bootstrap merupakan front-end framework yang sangat mudah digunakan hanya di panggil saya sesuai dengan formatnya, sangat bagus dan luar biasa yang mengedapankan untuk tampilan mobile device (Smpartphone, Handphone, dll.) untuk mempercepat dan mempermudah pengembangan suatu website. Bootstrap sendiri menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.


Mengapa Menggunakan Bootstrap dan Untuk Apa?


Bootstrap merupakan framework yang mana untuk membangun desain web tampilan secara responsif dan cepat. Maksudnya adalah tampilan website yang dibuat menggunakan framework bootstrap akan menyesuaikan ukuran layar dari browser yang Anda gunakan baik di desktop, mobile device ataupun table. Sehingga, pengguna/ user akan mendapatkan suatu hal yang menyenangkan dan yang lebih baik dalam mengunjungi website terebut tanpa mempertimbangkan perangkat apa yang harus digunakan untuk mengakses website tersebut.

Sebenarnya untuk menggunakan bootstrap, Anda hanya tinggal menggunakan nama class (untuk css) dan library (untuk javascript) yang mana itu sudah ditentukkan oleh bootstrap (sudah ada di dalam bootstrap) tanpa perlu Anda menuliskan lagi kode dari 0 (awal) sehingga, Anda bisa menghemat waktu dalam mengembangkan suatu website untuk urusan UI (User Interface). Bootstrap itu memiliki tampilan yang sangat indah dan dapat di costumasi sendiri.

Dengan menggunakan bootstrap kita juga bisa membuat website dinamis ataupun website statis, tentunya itu juga harus didukung dengan teknologi lain dalam pengembangannya.


Bagaimana Cara untuk Belajar Bootstrap bagi pemula?


Untuk memulai belajar menggunakan Bootstrap, Anda haruslah mempersiapkan bahan dan tools pendukung untuk dapat menggunakannya dan juga untuk melengkapi kegiatan belajar Anda.
Adapun langkah-langkah untuk cara menggunakan Bootstrap Anda harus persiapkan:

Langkah pertama, dimaksudkan untuk Anda mendownload file distribusi pada bootstrap dan library lain yang akan dibutuhkan dalam pembelajaran Anda supaya nantinya Anda bisa belajar secara offline (tanpa perlu terhubung pada internet).

Anda Harus memiliki file Bootstrap versi Offline Bisa di Buka di sini Bootstrap 4 (v4.2.1)

Jika link download tersebut tidak bisa diakses atau tidak tersedia, maka Anda kunjungi situs resminya di getbootstrap.com kemudian pilih link atau klik pada tombol "Download Bootstrap".

Untuk Anda dapat menggunakan framework bootstrap ini, terlebih dahulu Anda haruslah mendownload resource file ataupun file distribusi yang sudah disediakan oleh bootstrap yang berada di situs resminya pada getbootstrap.com. Tombol link yang berada diatas merupakan link download yang sudah resmi dari bootstrap berisi file css dan javascript dan siap untuk digunakan, untuk dikembangkan dalam sebuah website.

Setelah selesai untuk mendownload, kemudian Anda extract menggunakan program seperti winRAR. Sebenarnya, Andapun juga bisa membuka file tersebut dengan menggunakan aplikasi bawaan dari windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder yang Anda inginkan.

Langkah kedua, silahkan Anda Download jQuery Library Untuk Bekerja Offline

Download jQuery (v3.3.1)

Setelah halaman selesai terbuka, klik kanan pada jendela browser, kemudian Anda pilih save as... simpan pada folder yang Anda inginkan.

Tutorialnya:


1. Klik kanan pada jendela browser -> Save as


langkah menggunakan bootstrap

2. Kemudian Save pada folder yang Anda inginkan, untuk disini saya telah membuat file bootstrap -> Klik Save

langkah menggunakan bootstrap


Jika link download tersebut tidak tersedia, kunjungi situs resminya di jquery.com kemudian Anda pilih link "Download the compressed, production jQuery 3.3.1".

Untuk Anda yang ingin mengaplikasikan bootstrap component ini seperti dialog, modal navigation bar dan lain-lain yang tentunya membutuhkan boostrap JS dan juga bootstrap JS membutuhkan jQuery library dengan bertujuan untuk bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file downloadnya tersebut, oleh karena itu Anda haruslah mendownloadnya secara terpisah. Hal ini dikerjakan supaya Anda bisa bekerja dan menggunakannya secara offline (tanpa adanya koneksi internet).


Langkah ketiga, Anda harus memiliki code editor.
Anda haruslah mempunyai text editor, bisa seperti:

Notepad++ (x64) atau Download Notepad++ (x86) 

Jika Anda menginginkan untuk versi 64 bit atau jika link download tersebut tidak tersedia, maka Anda bisa mengunjungi situs resminya di notepad-plus-plus.org kemudian pilih link atau klik pada  "Download" yang terletak pada panel kiri halaman paling bawah.

Code editor tersebut sangatlah penting sekali untuk memanipulasi file yang akan kita kembangkan nantinya, khususnya file dengan format HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada framework bootstrap.

Ada banyak sekali text editor yang tersebar di internet yang dapat Anda gunakan baik yang gratis maupun yang berbayar sekalipun. Sebagai pemula yang menggunakan bootstrap, Anda bisa memulai dengan menggunakan aplikasi Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer pengembang website.

Referensi:

https://www.apacara.com/tutorial/bootstrap/belajar-bootstrap-untuk-pemula.html


Share with your friends

Give us your opinion

1. Berkomentarlah dengan sopan dan santun
2. komentar selalu dimoderasi
3. boleh meninggalkan link aktif dengan catatan berkomentar sesuai
dengan topik yang dibahas
4. semua komentar negatif seperti hoax, menyinggung, sara, pornografi, politik, dan hal negatif lain akan dihapus

Notification
Jika Anda tertarik dengan artikel di website ini silahkan berkunjung kembali.
Done