Pengertian dan Penerapan Bootstrap Pada Website Portofolio
Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangka kerja ini berisi templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript.
Installasi Bootstrap
untuk installasi bootstrap pada website, dapat menggunakan 2 metode. yang pertama, dengan cara menambahkan CDN. yaitu dengan menambahkan link css bootstrap dan juga menambahkan script javascript bootstrap. berikut contoh penerapannya:
untuk link css
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN” crossorigin=”anonymous”>
untuk javascript
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL” crossorigin=”anonymous”></script>
jika ingin lebih mudah, dapat diliat pada link berikut ini, disini
Contoh – Contoh Bootstrap Yang Sering Digunakan
Card
untuk menu card ini, biasanya digunakan untuk menampilkan beberapa konten dengan gambar dan rinciannya, dapat ditambahkan button juga, dan memungkinkan untuk membentuk corousel atau konten lebar yang dapat slide otomatis.
pada bagian ini, saya menggunakan card untuk menjelaskan beberapa bahasa pemograman, dan juga framework yang ada.
teman – teman dapat melihat cara menggunakan card ini pada website boostrapnya langsung, atau dapat juga dengan menekan link disini.
Navigasi
untuk menu navigasi ini, biasanya digunakan untuk membuat link yang dapat mengarahkan website kepada bagian yang sering dicari/digunakan. seperti isi konten, menu rincian, about, login, dan juga footer.
pada bagian ini, saya menggunakan navigasi untuk menavigasikan pengguna agar pengguna dapat lebih mudah menemukan konten yang ingin dicari.
teman – teman dapat melihat cara menggunakan card ini pada website boostrapnya langsung, atau dapat juga dengan menekan link disini.
untuk script code nya bisa click disini.