| December 1, 2021 | Web | Bootstrap merupakan salah satu framework yang berasal dari CSS. Dari waktu ke waktu, pengguna bootstrap semakin meningkat. Bootstrap pertama kali dikembangkan oleh Mark Otto dan Jacob Thornton di twitter. Twitter Blueprint adalah nama sebelum terbentuknya Bootstrap. Boostrap di ciptakan untuk mengatasi ketidak konsistenan tampilan pada Twitter kala itu yang menyebabkan kode menjadi sulit untuk di maintenance. Sekarang ini bootstrap sudah mencapai versi yang ke 5 nya pada 7
Desember 2020. Beberapa perubahan pada Bootstrap 5 : Ada 3 cara dalam menggunakan Boostrap untuk website kita, yaitu :
1. Download ManualBootstrap dapat kita download untuk kita gunakan secara berulang, jadi hanya sekali download saja. Kita bisa mendownload nya di situs resmi milik bootstrap yaitu getbootstrap.com. Klik Download. Dan akan terdapat 2 folder di dalamnya yang berisi file CSS dan JS. Jika sudah, ekstrak folder hasil download tersebut kemudian tempatkan pada folder atau directory yang akan digunakan untuk membuat website. Dan jangan lupa siapkan satu file index.html juga. Hasilnya akan terlihat seperti gambar di bawah ini. Cara menggunakan nya pun juga sangat mudah. Pertama buat tag html, yang kemudian di dalamnya berisi link yang menuju ke file css dan js milik bootstrap. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <h2>Halaman Home</h2> <script src="js/bootstrap.bundle.min.js"></script> </body> </html> Dan jika kita buka pada browser akan tampil Sekarang kita sudah berhasil menghubungkan file index.html kita ke file bootstrap. 2. Menggunakan Template Bawaan dari BoostrapLangkah pertama dengan langkah sebelumnya, yaitu kita membuat file index.html pada direktori kita. Lalu biarkan kosong seperti ini, karena selanjutnya kita akan mengambil “starter template” atau template yang sudah disediakan oleh bootstrap. Template tersebut berisi link yang memanggil file CSS dan Javascript bawaan milik bootstrap. Selanjutnya kita buka website milik bootstrap dan masuk ke get started. Selanjutnya kita copy bagian starter template nya dengan meng-klik tombol copyseperti gambar dibawah ini. <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h2>Hello, world!</h2> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs//dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> --> </body> </html> Dan ketika kita jalankan di browser akan menampilkan seperti ini. Selamat, kita sudah bisa menggunakan file bootstrap secara manual atau pun menggunakan starter template dari bootstrap. Diharapkan tutorial kali ini dapat membuat kita mengerti dan paham akan penggunaan Bootstrap. Sekian tutorial kali ini semoga bermanfaat. Sampai ketemu di lain tutorial. About The AuthorarduindoBootstrap digunakan untuk apa?Tujuan dan fungsi Bootstrap adalah untuk membuat website responsive dan mobile-first. Jadi, semua elemen antarmuka website dipastikan bisa bekerja secara optimal di semua ukuran layar, baik desktop maupun perangkat seluler.
Apakah bootstrap harus di download?Untuk dapat menggunakan bootstrap hal yang harus dilakukan yaitu mendownloadnya terbih dahulu. Bootstrap dapat di download dalam bentuk standar di halaman website bootsrap, selain itu download bootstrap dapat juga dalam bentuk template bootsrap yang telah di modifikasi.
Bagaimana cara mendownload bootstrap?Pada saat tutorial ini saya tulis, Bootstrap baru saja merilis update ke versi 5.1. Untuk mendownload file Bootstrap, silahkan buka web resmi Bootstrap di getbootstrap.com, lalu klik tombol Download yang ada di tengah halaman.
Jelaskan apa yang anda ketahui tentang bootstrap dan apa fungsi dari bootstrap?Bootstrap adalah sebuah framework HTML, CSS, dan JavaScript yang berfokus untuk menyederhanakan pengembangan halaman web atau website. Pada umumnya, Bootstrap digunakan untuk mengimplementasikan berbagai pilihan warna, ukuran, font, dan layout yang ada dalam framework tersebut ke dalam sebuah website.
|