Cara menggunakan langkah langkah menginstal bootstrap?
|
Berkat Bootstrap, kita bisa membuat web dengan lebih cepat. Tanpa harus pusing dengan kode CSS. Karena semaunya sudah disediakan oleh Bootstrap. Show
Pada tutorial ini, kita akan belajar tentang apa itu Bootstrap lalu mencoba menggunakan Bootstrap pada HTML. mari kita mulai.. Apa itu Bootstrap?Bootstrap adalah framework CSS. Cuma itu? Ya! Kalau mau yang lebih panjang: Bootstrap adalah framework CSS yang bersifat Free dan Open Source. Bootstrap menyediakan class-class CSS dan beberapa fungsi Javascript untuk mempermudah pembuatan web. Jika kamu sebelumnya pernah membuat web tanpa menggunakan framework CSS.. Pasti pernah merasakan membuat kode CSS sendiri dari nol. Betapa melelahkannya.. Karena itulah, hadir Bootstrap untuk membantu kita. Biar semakin paham, mari kita bahas sejarahnya dulu: Sejarah dan Versi BootstrapBootstrap awalnya bernama Twitter Blueprint. Karena waktu itu pertama kali dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter. Tujuan awalnya untuk menjaga konsistensi pada tool internal di Twitter. Karena sebelum adanya Bootstrap, tim Twitter sudah menggunakan beberapa library untuk membuat tampilan (GUI) Twitter. Akan tetapi tidak konsisten sehingga kode jadi sulit dirawat (maintenance). Berangkat dari masalah tersebut: Mark Otto dan tim kecil yang berisi programmer mulai mendesain dan membuat sebuah tool internal yang dinamakan Twitter Blueprint. Setelah beberapa bulan pengembangan, banyak programmer lainnya ikut berkontribusi pada proyek ini sebagai partisipasi dalam Hack Week. O ya, Hack Week adalah sebuah Hackathon yang ada di tim Development Twitter. Kemudian Twitter Blueprint diubah namanya menjadi Bootstrap dan dirilis sebagai proyek Open Source pada 19 Agustus 2011. Bootstrap 2 dan 3Pada tanggal 31 Januari 2012, Bootstrap 2 dirilis dengan penambahan dukungan pada Glyphicons, penambahan beberapa komponen, dan juga perubahan pada komponen yang sudah ada. Pada Versi ini sudah mendukung responsive web design, yakni sebuah layout yang dapat menyesuaikan diri pada ukuran perangkat yang digunakan. Selanjutnya Bootstrap 3, dirilis pada tanggal 19 Agustus 2013. Pada versi ini komponen Bootstrap didesain ulang dengan konsep Flat design dan menggunakan pendekatan Mobile first. Pendekatan mobile first artinya tampilan pada mobile diutamakan. Jadi jika ada sebuah class bootstrap digunakan pada elemen, ia akan menggunakan class pada tampilan mobile terlebih dahulu. Bootstrap 4Pada tanggal 29 Okteober 2014, Bootstrap 4 rilis dan versi finalnya rilis pada tanggal 18 Januari 2018. Versi final artinya versi yang tidak dilanjutkan pengembangannya.  Beberapa perubahan pada rilis ini:
Bootstrap 5Bootstrap 5 resmi dirilis versi Alpha pada tanggal 16 Juni 2020. Berikutnya versi Beta dirilis pada 7 Desember 2020. Beberapa perubahan pada Bootstrap 5:
Nah itulah versi-versi Bootstrap. Buat kamu yang ingin melihat semua versi Boostrap, silahkan cek di link ini: Bootstrap Versions Lalu versi mana yang akan kita pelajari pada tutorial ini? Pada tutorial ini kita akan mempelajari versi 5, dan tentunya akan nanti akan saya update jika keluar versi terbaru. Oke sekarang lanjut.. Persiapan untuk Belajar BootstrapSebelum mulai belajar Bootstrap, siapkan dulu peralatannya dan prasyaratnya. Untuk prasyarat, kamu setidaknya harus paham CSS dan Javascript terlebih dahulu. Mengapa? Karena nanti kita akan banyak menggunakan class Bootstrap, dan jika kamu belum paham tentang CSS.. bisa jadi akan kesulitan memahaminya. Silahkan pelajari:
Lalu untuk Javascript boleh hanya paham basic saja, karena tidak begitu banyak digunakan di tutorial ini.. kecuali pada komponen tertentu. Silahkan pelajari:
Lalu, ada beberapa alat yang kita butuhkan untuk mulai belajar Bootstrap: 1. Teks EditorTeks editor akan kita gunakan untuk menulis kode. Kamu boleh menggunakan teks editor apapun asalkan paham cara pakainya. Pada tutorial ini, kita akan menggunakan teks editor Visual Studio Code atau VS Code. Buat kamu yang ingin tahu cara install VS Code, silahkan baca Review dan Instalasi VS Code. 2. Web BrowserWeb browser akan kita gunakan untuk melihat hasil kode yang kita tulis. Kamu juga bebas menggunakan web browser apapun. Namun, jangan pakai IE ya.. karena sudah tua hehe 😄 Pada tutorial ini, kita akan menggunakan Google Chrome dan Firefox untuk web browser. 3. BootstrapNah, untuk Bootstrap sendiri.. Kita bisa gunakan yang dari CDN atau Download dengan package manger seperti NPM atau download secara manual juga bisa. Tenang.. Di tahap berikutnya, kita akan pelajari caranya: Menggunakan Bootstrap pada HTMLSeperti yang saya bilang tadi.. ..ada beberapa cara yang bisa kita lakukan untuk menggunakan Bootstrap.
Mari kita coba statu-per-satu: 1. Menggunakan Bootstrap dengan CDNCara ini termasuk cara yang paling gampang dilakukan untuk pemula yang baru belajar Bootstrap. Kita cukup copy link CDN Bootstrap, lalu di taruh pada kode HTML. Tapi syaratnya kita harus terhubung dengan internet, karena Bootstrap akan diambil dari server CDN. Oh iya, buat yang belum tahu apa itu CDN: CDN adalah singkatan dari Content Delivery Network, semacam server yang tersebar di seluruh dunia untuk mengantarkan konten secara optimal dan cepat. Gambar yang kanan adalah server CDN. Sudah paham kan? Oke lanjut! Buatlah folder baru dengan nama Klik File lalu pilih open folder. Setelah itu, buatlah file HTML baru dengan nama Kemudian isilah dengan kode berikut: Coba perhatikan! Pada kode di atas, kita menggunakan Bootstrap dari CDN JSDeliver. Dengan demikian, kita bisa langsung menggunakan class-class dari Bootstrap seperti yang dicontohkan pada tag Hasilnya: Kelebihan dari cara ini adalah kita bisa langsung menggunakan Bootstrap tanpa harus download. Tapi tetap butuh koneksi internet. Cukup dengan menambahkan ini di dalam tag dan load Javascript di dalam Atribut Berikutnya, kita akan coba cara: 2. Download Bootstrap Secara ManualBootstrap dapat kita download dari website resminya, yakni getbootstrap.com. Pada website tersebut terdapat tombol download. Versi Bootstrap yang akan kamu dapatkan dari tombol download tersebut adalah versi terbaru. Agar kita menggunakan versi Bootstrap yang sama, silahkan download Bootstrap melalui link berikut: [Download 📦 Bootstrap-5.0.0.zip] Setelah itu, kita akan menpatkan file zip dengan isi sebagai berikut: Oke sekarang kita akan menggunakan Bootstrap dari file zip ini. Ekstrak folder Setelah itu, buat file HTML baru dengan nama Kemudian, isi dengan kode berikut: Coba perhatikan! Pada kode di atas, kita menggunakan bootstrap dari asset lokal dengan tag dan tag Hasilnya: Kelebihan cara ini adalah kita tidak perlu terhubung ke internet seperti pada CDN untuk dapat menggunakan Bootstrap, karena Bootstrap-nya sudah ada di aset lokal. 3. Menggunakan Bootstrap dengan Package ManagerCara ketiga menggunakan Bootstrap adalah dengan package manager. Package manager adalah sebuah program untuk manajemen paket pada proyek web. Contohnya: NPM, Composer, Yarn, PNPM, dan sebagainya. Menggunakan Bootstrap dengan package manager tidak saya rekomendasikan untuk pemula, karena akan membutuhkan pengetahuan lain seperti cara kerja package manager itu sendiri dan ekosistem yang dipakai. Namun nanti di proyek real, kita akan sering menggunakan package manager untuk memudahkan pekerjaan dalam mengurus paket. Oke, kalau begitu.. Mari kita pelajari cara setup project web Bootstrap dengan NPM. Pastikan di komputermu sudah tersinstal Nodejs dan NPM. Setelah itu buatlah folder baru dengan nama Setelah itu, buka folder tersebut dengan VS Code. Setelah itu, buka Terminal pada VS Code dengan cara tekan Ctrl+`. Lalu ketik perintah: Tunggu sampai prosesnya selesai. Project kita sudah siap. Berikutnya, kita tinggal menginstal Bootstrap ke dalam project dengan perintah: Perintah ini adalah untuk menginstal Bootstrap 5, untuk Bootstrap 4 gunakan perintah ini: Tunggulah sampai prosesnya selesai. Jika kita perhatikan, pada folder project akan ada satu folder baru yakni Oke sekarang kita sudah punya bootstrap, cara pakainya gimana? Ada dua cara:
Cara pertama sebenarnya mirip seperti cara yang sebelumnya kita coba, hanya saja beda cara download Bootstrap. Sedangkan cara kedua membutuhkan tools builder seperti Webpack, ESbuild, Rollup, dll. Kita akan coba cara yang pertama, untuk cara yang kedua.. lain kali saja kita coba ya. 😃 Baiklah, buatlah file HTML baru di dalam folder Hasilnya: Cara ini sebenarnya cara kotor, karena kita me-load langsung Bootstrap dari folder Seharusnya kita melakukan pre dan post processing dulu. Tapi tidak apa-apa, soalnya ini cuma contoh.. bukan project real. Apa Selanjutnya?Sejauh ini kita sudah mengenal Bootstrap, mulai dari sejarah hingga cara menggunakan Bootstrap pada HTML. Bagaimana cara melakukan instalasi bootstrap?Dan berikut cara menginstal Bootstrap secara Offline.. Download terlebih dahulu file bootstrap melalui laman resminya. ... . Selanjutnya bukalah teks editor Anda. ... . Kemudian klik menu File yang ada di bagian toolbar aplikasi Sublime. ... . Selanjutnya simpanlah file tersebut dengan cara klik menu File lalu pilih menu Save.. Apa yang dimaksud dengan bootstrap dan bagaimana cara menggunakannya?Bootstrap adalah framework front-end gratis yang cukup populer di kalangan developer saat ini, khususnya yang bekerja di bidang desain web. Framework ini mudah digunakan dan membantu developer bekerja lebih cepat tanpa harus menulis kode HTML, CSS, dan JavaScript secara manual.
Apa itu file bootstrap?Bootstrap merupakan framework HTML, CSS, Javascript populer untuk membangun situs web yang responsive. RWD (Responsive Web Design) adalah desain situs yang otomatis akan menyesuaikan diri agar tampil baik di semua perangkat dari ponsel sampai dekstop. Bootstrap terdiri dari satu set file css, javascript, dan jquery.
Apa itu Bootstrap 5?Tentang Kelas. Bootstrap adalah sebuah framework yang paling populer digunakan untuk membuat sebuah website. Bootstrap membuat front-end developer dapat membuat website dengan cepat, fokus pada responsive mobile, dan membuat website menjadi lebih interaktif tanpa membuat banyak CSS dan JavaScript dari nol.
|
