Cara setup bootstrap 4 pertama kali - Bootstrap adalah kerangka kerja front-end yang membantu Anda membangun situs web responsif seluler dengan lebih cepat dan mudah. Pertama kali dikembangkan oleh Twitter, kini ia mendukung apa saja mulai dari aplikasi web hingga tema WordPress. Pengguna terkenal termasuk Spotify, LinkedIn, dan lainnya. Kerangka ini juga sepenuhnya gratis, serbaguna, dan intuitif.
Bootstrap Template Free CSS
Adapun cara setup bootstrap 4 pertama kali adalah sebagai berikut:
1. Buat Halaman HTML
Sebagai langkah pertama dalam tutorial ini, kita akan membuat template HTML sederhana sebagai basis dimana kita akan menggunakan Bootstrap. Untuk itu, hal pertama yang ingin Anda lakukan adalah membuat folder di komputer atau server Anda untuk file proyek. Dalam hal ini, kami hanya akan menyebutnya bootstrap. Di sini, buat file teks baru dan beri nama index.html. Buka dengan editor teks pilihan Anda (mis. Notepad ++, sublime text) lalu tempel kode di bawah ini ke dalamnya.
!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tutorial Sample Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html>
2. Muat Bootstrap melalui CDN ataupun lokal
Seperti yang telah dijelaskan, Bootstrap sebagian besar terdiri dari lembar gaya dan skrip. Dengan demikian, mereka dapat dimuat di header dan footer halaman web Anda seperti aset lain seperti font kustom. Kerangka kerja ini menawarkan jalur akses CDN (jaringan pengiriman konten) tanpa harus mendownload file. Anda dapat menemukannya di halaman unduh Bootstrap saat Anda menggulir ke bawah.
Untuk memasukkan Bootstrap ke halaman Anda, cukup tempel kode di bawah ini ke bagian <head> template Anda.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
Cara kedua alternatif untuk menyiapkan Bootstrap adalah mengunduhnya ke hard drive Anda dalam satu folder aplikasi atau web dan menggunakan file secara lokal. Pastikan untuk mendapatkan file CSS dan JS yang telah dikompilasi. Anda tidak membutuhkan file sumber.
Setelah Anda selesai mengunduhnya, buka zip file tersebut dan salin isinya ke direktori yang sama dengan index.html. Setelah itu, Anda dapat memuat CSS Bootstrap ke dalam proyek Anda seperti ini:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
3. Gabungkan Semuanya file
Jika Anda telah mengikuti langkah-langkah di atas dengan benar, Anda akan mendapatkan file yang terlihat seperti berikut:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tutorial Sample Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> </body> </html>
Lokal file sebagai berikut
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tutorial Sample Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <script src="jquery-3.5.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
Button Bootstrap
Cara menggunakan button di Bootstrap caranya cukup mudah dan simpel baik yang bootstrap 4, dan 5 penaamaan class hampir sama.
Contoh Button Bootstrap
<button type="button" class="btn btn-primary">Button</button><button type="button" class="btn btn-danger">Button</button><button type="button" class="btn btn-success">Button</button><button type="button" class="btn btn-info">Button</button>
Semoga tutorial Cara setup bootstrap 4 pertama kali (3 step setup bootstrap 4) bisa membantu jika ada pertanyaan ataupun komentar silahkan kirim melalui komentar dibawah atau bisa langsung melalui channel youtube kami di GatotID