Cara menggunakan bootstrap 5 download

Halo semuanya, pada artikel ini badoystudio akan membahas panduan awal belajar bootstrap untuk pemula. Nah, kalau kamu sedang mencari referensi belajar bootstrap, tidak ada salahnya membaca bahasan dari artikel yang disajikan berikut ini. Ingin tahu bahasannya seperti apa? Langsung saja pelajari di bawah ini.

Memahami Apa itu Boostrap dan Fungsinya

Sebelum kita lebih jauh membahas panduan belajar bootstrap untuk pemula, mari kita pahami pengertian dan fungsinya.

Bootstrap merupakan salah satu framework CSS yang bersifat open source dan cukup populer digunakan untuk mengembangkan website. Di mana framework ini sudah menyediakan class-class CSS dan juga fungsi dari JavaScript yang bisa mempermudah dan mempercepat proses pengembangan website.

Terbayang dong kalau mendesain website dengan menggunakan CSS dari nol? Pasti sangat ratusan bahkan ribuan kode ditulis, dan tentu saja akan membuat sangat capek. Dengan bootstrap maka hal itu tidak lagi terjadi.

Lalu apa saja fungsi bootstrap? Berikut beberapa fungsi yang didapat saat kita membuat desain web menggunakan framework ini, di antaranya adalah sebagai berikut :

• Mengembangkan website menjadi lebih cepat karena kode-kode CSSnya sudah disediakan
• Penulisan kode HTML menjadi konsisten
• Tampilan website yang dibangun dengan bootstrap pasti responsive dan juga bagus
• Menggunakan beberapa fungsi javascript dengan mudah

Sejarah Singkat Bootstrap

Apakah kamu seorang pengguna Twitter? Atau setidaknya kamu tahu mengenai media sosial tersebut meskipun bukan pengguna. Apa kaitannya framework bootstrap dengan Twitter?

Ternyata bootstrap dikembangkan oleh programmer Twitter yaitu Mark Otto dan Jacob Thornton. Awalnya bootstrap dibuat dan digunakan yaitu untuk menjaga konsistensi pada tool internal di Twitter.

Di mana sebelum bootstrap dibuat, tim programmer di Twitter sudah memakai library-library untuk membuat tampilan Twitter, tapi ternyata penulisan kode-kodenya tidak konsisten, sehingga ini akan membuat proses maintenance akan sulit. Dari situlah dibuat Bootstrap untuk mengatasi masalah tersebut yang nama pertamanya adalah Twitter Blueprint.

Versi-versi Bootstrap

Berikut ulasan singkat mengenai versi-versi boostrap dari awal sampai sekarang.

Bootstrap 1

Bootstrap pertama kali dirilis sebagai proyek free dan open source pada tanggal 19 Agustus 2011.

Bootstrap 2

Bootstrap 2 dirilis pada tanggal 31 Januari 2012. Di mana pada versi ini ada tambahan :

• Dukungan pada Glyphicons
• Tambahan beberapa komponen
• Mendukung responsive web design
• Dan juga update pada komponen yang sudah ada di versi sebelumnya

Bootstrap 3

Kemudian versi Bootstrap 3 dirilis pada tanggal 19 Agustus 2013. Di versi ini komponen Bootstrap didesain ulang dengan mengusung konsep flat design dan juga pendekatan mobile first.

Mobile first sendiri artinya tampilan pada mobile lebih diutamakan. Maka, kalau ada class bootstrap digunakan pada elemen, yang digunakan adalah class pada tampilan mobile terlebih dahulu dibandingkan desktop.

Bootstrap 4

Versi ini dirilis pada tanggal 29 Oktober 2014, dan versi finalnya sendiri rilis pada tanggal 18 Januari 2018. Maksudnya versi final itu apa? Yaitu versi yang tidak dilanjutkan pengembangannya. Beberapa update yang terdapat pada versi ini yaitu :

• Menambahkan normalize CSS
• Mengganti less dengan sass
• Penulisan ulang kode mayor
• Dan lainnya.

Bootstrap 5

Versi inilah yang paling baru, resmi dirilis dalam Alpha pada tanggal 16 Juni 2020, kemudian berubah menjadi versi Beta pada tanggal 07 Desember 2020. Update pada versi ini yaitu :

• Penghapusan Jquery
• Penulisan ulang pada sistem grid
• Menambahkan kumpulan SVG icons
• Dan lainnya

Tools Belajar Bootstrap

Setelah kamu memahami pengertian, fungsi, sejarah, dan juga versi bootstrap, sekarang kita masuk ke persiapan belajar Bootstrap. Yang harus disiapkan pertama kali adalah tools, di antaranya adalah sebagai berikut :

Text Editor

Kamu pasti sudah tahu fungsi dari tools yang pertama ini, yaitu digunakan untuk menulis kode. Text Editor yang bisa kamu gunakan untuk mempelajari Bootstrap di antaranya :

• Sublime Text
• Notepad++
• Visual Studio Code
• Dan lainnya

Saya sendiri menggunakan Visual Studio Code. Karena banyak sekali fitur dan keunggulannya. Kalau tertarik, kamu bisa gunakan text editor VS Code.

Browser

Untuk melihat hasil kode-kode yang ditulis dalam pengembangan web, maka kita butuh yang namanya Browser. Saya yakin tanpa harus disuruh install pun, aplikasi web browser pasti sudah ada pada laptop atau komputermu.

Untuk rekomendasi browser yang digunakan yaitu Google Chrome. Web Browser lainnya yaitu Opera, Firefox, dan Safari.

Bootstrap

Yang ketiga yaitu Framework Bootstrap itu sendiri. Ada 3 cara untuk menggunakan bootstrap, yaitu :

• Mendownload secara manual
• Mendownload dengan package manager
• Dan menggunakan CDN

Cara Menginstall Bootstrap

Di pembahasan ini saya akan tunjukan bagaimana cara menginstall Bootstrap secara offline dan juga online.

Menginstall Bootstrap Secara Offline

Dengan menginstall Bootstrap secar offline akan memudahkan kamu dalam proses pengembangan website. Di mana kamu tidak perlu mengambil file dari website lain, tetapi langsung dari penyimpanan utama. Langkah-langkah instalasinya adalah sebagai berikut :

Donwload File dan Ekstrak di Folder Project

Pertama silahkan download file bootstrap di situs resminya. Biasanya file terdownload dalam bentuk zip. Lalu ekstrak file bootstrap yang sudah didownload di folder yang baru kamu buat. Misal foldernya bernama “ bikinweb “.

Buat File Index.html

Selanjutnya kita akan membuat file index.html pada folder project yang sudah terdapat file bootstrap yang di ekstrak. Caranya silahkan :

• Buka teks editor yang digunakan
• Lalu ketikan kode-kode berikut :

<!DOCTYPE html>
<html>
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/bootstrap.bundle.min.js"></script>
        <script type="js/bootstrap.min.js"></script>
   
    </head>

    <body>
        <header class="py-5 bg-success">
            <div class="container">
                <h1 class="display-4 text-white">Hello Bootstrap versi 5</h1>

            </div>
        </header>
    </body>
</html>

Perhatikan tag berikut :

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
<script type="js/bootstrap.min.js"></script>

Tag-tag tersebut digunakan untuk menghubungkan index.html dengan file css dan juga js yang ada di bootstrap. Lalu dibagian body kita tambahkan kode-kode html untuk membuat header. Dan hasilnya kurang lebih menjadi seperti berikut jika dilihat di browser.

Menginstall Bootstrap Secara Online

Proses menggunakan bootstrap secara online bisa dilakukan jika laptop atau PC yang kamu gunakan sudah terkoneksi dengan internet. Dimana kamu nantinya akan memanggil file bootstrap secar online menggunakan CDN.

CDN merupakan singkatan dari Content Delivery Network, yaitu server yang tersebar di seluruh dunia guna mengantarkan konten yang cepat dan juga optimal.

Salah satu kekurangan dari proses ini yaitu tingkat kecepatan website akan berkurang. Cara instalasinya yaitu dengan menambahkan kode berikut di bagian head file html.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Sehingga lebih lengkapnya seperti index.html menjadi seperti ini :

<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
   
    <body>
        <header class="py-5 bg-primary">
            <div class="container">
                <h1 class="display-4 text-white">Hello Bootstrap versi 5</h1>

            </div>
        </header>
    </body>
</html>

Kalau kita lihat dibrowser hasilnya seperti gambar di bawah ini :

Tips Belajar Bootstrap

Berikut ini adalah beberapa tips yang bisa kamu ikuti agar kamu bisa menguasai bootstrap dengan cepat dan mudah.

Memahami Konsep Front End Website

Seperti yang kita tahu menguasai bootstrap adalah satu syarat agar bisa menjadi Front End Developer yang handal. Karena framework ini benar-benar terfokus pada front end sebuah website.

Front end sendiri yaitu bagian website yang menjadi tempat pengguna untuk berinteraksi secara langsung. Beberapa hal yang wajib diperhatikan saat membangun front end website yaitu :

• Tombol
• Warna
• Menu navigasi
• Teks
• Dan gambar

Dan untuk bahasa pemrograman yang digunakan untuk mengembangkan front end yaitu HTML, CSS, dan JavaScritp. Di mana bahasa markup dan pemrograman tersebut sudah termasuk ke dalam framework Bootstrap. Jadi, sangat disarankan kamu harus menguasai HTML, CSS, dan JavaScript terlebih dahulu.

Menggunakan Plugin

Ternyata, ada banyak sekali plugin yang bisa kita gunakan untuk mendesain website dengan bootstrap. Tentu saja dengan plugin maka akan sangat memudahkan pengembangan web. Beberapa plugin bootstrap yang bisa digunakan contohnya adalah :

• Nearby Places : memunclulkan peta untuk menunjukkan toko yang paling dekat
• WP Pricing Table Building : digunakan untuk membuat tabel harga paket suatu produk
• Modern Megamenu : digunakan untuk membuat menu dan juga navbar

Selain ketiga plugin tersebut, pastinya banyak plugin dengan fungsi yang berbeda yang bisa memudahkan kamu untuk mempelajari bootstrap dengan mudah dan cepat.

Berlatih Setiap Hari

Pada saat pertama kali mempelajari apapun pasti akan banyak kendala, tak terkecuali dengan belajar bootstrap. Rasanya wajar – wajar saja, asalkan jangan menyerah dan mau konsisten terus menerus setiap hari meluangkan waktu misal 1 – 2 jam untuk terus berlatih bootstrap pasti terlihat hasilnya.

Tutorial Bootstrap Lengkap

Beberapa tutorial bootstrap yang bisa kamu pelajari selanjutnya adalah sebagai berikut :

• Membuat table dengan bootstrap
• Menampilkan gambar dengan bootstrap
• Membuat button dengan bootstrap
• Membuat jumbotron dengan bootstrap
• Membuat list
• Membuat panel
• Membuat form
• Membuat carousel
• Membuat navigasi
• Membuat layout
• Dan lain sebagainya

Penutup

Itulah ulasan singkat mengenai belajar bootstrap untuk pemula. Semoga memberikan insight dan bermanfaat bagi kamu. Jangan lupa share juga artikel ini ke temanmu agar manfaatnya tersebar lebih luas lagi.

Apakah bootstrap harus di download?

Apa itu bootstrap 5?

Apa yang dimaksud dengan bootstrap dan bagaimana cara menggunakannya?

Apa yang baru di bootstrap 5?