Toolkit frontend yang kuat, dapat diperluas, dan penuh fitur. Bangun dan sesuaikan dengan Sass, manfaatkan sistem dan komponen grid bawaan, dan hidupkan proyek dengan plugin JavaScript yang andal.
Saat ini v5.2.1 · Unduh · v4.6.x docs · Semua rilis
Langsung ke dalam membangun dengan Bootstrap—gunakan CDN, instal melalui manajer paket, atau unduh kode sumbernya.
Instal file Sass dan JavaScript sumber Bootstrap melalui npm, RubyGems, Composer, atau Meteor. Pemasangan terkelola paket tidak menyertakan dokumentasi atau skrip build lengkap kami. Anda juga dapat menggunakan repo template npm kami untuk menghasilkan proyek Bootstrap dengan cepat melalui npm.
npm install [email protected]gem install bootstrap -v 5.2.1Baca dokumen instalasi kami untuk info lebih lanjut dan manajer paket tambahan.
Saat Anda hanya perlu menyertakan CSS atau JS Bootstrap yang dikompilasi, Anda dapat menggunakan jsDelivr . Lihat aksinya dengan quick start sederhana kami , atau telusuri contoh untuk memulai proyek Anda berikutnya. Anda juga dapat memilih untuk menyertakan Popper dan JS kami secara terpisah .
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Bootstrap menggunakan Sass untuk arsitektur modular dan dapat disesuaikan. Impor hanya komponen yang Anda butuhkan, aktifkan opsi global seperti gradien dan bayangan, dan tulis CSS Anda sendiri dengan variabel, peta, fungsi, dan mixin kami.
Impor satu stylesheet dan Anda akan berlomba dengan setiap fitur CSS kami.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Pelajari lebih lanjut tentang opsi Sass global kami .
Cara termudah untuk menyesuaikan Bootstrap—hanya sertakan CSS yang Anda butuhkan.
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
Pelajari lebih lanjut tentang menggunakan Bootstrap dengan Sass .
Bootstrap 5 berkembang dengan setiap rilis untuk lebih memanfaatkan variabel CSS untuk gaya tema global, komponen individual, dan bahkan utilitas. Kami menyediakan lusinan variabel untuk warna, gaya font, dan lainnya pada :roottingkat untuk digunakan di mana saja. Pada komponen dan utilitas, variabel CSS dicakup ke kelas yang relevan dan dapat dengan mudah dimodifikasi.
Gunakan salah satu variabel global:root kami untuk menulis gaya baru. Variabel CSS menggunakan var(--bs-variableName)sintaks dan dapat diwarisi oleh elemen turunan.
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}Ganti variabel kelas global, komponen, atau utilitas untuk menyesuaikan Bootstrap sesuai keinginan Anda. Tidak perlu mendeklarasikan ulang setiap aturan, cukup nilai variabel baru.
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}Baru di Bootstrap 5, utilitas kami sekarang dihasilkan oleh API Utilitas kami . Kami membuatnya sebagai peta Sass penuh fitur yang dapat disesuaikan dengan cepat dan mudah. Menambah, menghapus, atau memodifikasi kelas utilitas tidak pernah semudah ini. Jadikan utilitas responsif, tambahkan varian kelas semu, dan beri mereka nama khusus.
Pelajari lebih lanjut tentang utilitas Jelajahi komponen yang disesuaikan
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Tambahkan elemen tersembunyi yang dapat dialihkan dengan mudah, menu modals dan offcanvas, popover dan tooltips, dan banyak lagi—semuanya tanpa jQuery. JavaScript di Bootstrap adalah HTML-first, yang berarti menambahkan plugin semudah menambahkan dataatribut. Perlu lebih banyak kontrol? Sertakan plugin individual secara terprogram.
Mengapa menulis lebih banyak JavaScript ketika Anda bisa menulis HTML? Hampir semua plugin JavaScript Bootstrap menampilkan API data kelas satu, memungkinkan Anda untuk menggunakan JavaScript hanya dengan menambahkan dataatribut.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
Pelajari lebih lanjut tentang JavaScript kami sebagai modul dan menggunakan API terprogram .
Bootstrap memiliki selusin plugin yang dapat Anda masukkan ke proyek apa pun. Masukkan semuanya sekaligus, atau pilih yang Anda butuhkan saja.
Bootstrap Icons adalah pustaka ikon SVG open source yang menampilkan lebih dari 1.500 mesin terbang, dengan lebih banyak ditambahkan setiap rilis. Mereka dirancang untuk bekerja di proyek apa pun, apakah Anda menggunakan Bootstrap itu sendiri atau tidak. Gunakan sebagai SVG atau font ikon—kedua opsi tersebut memberi Anda penskalaan vektor dan penyesuaian yang mudah melalui CSS.
Bawa Bootstrap ke level berikutnya dengan tema premium dari pasar Tema Bootstrap resmi . Tema dibangun di Bootstrap sebagai kerangka kerja mereka sendiri yang diperluas, kaya dengan komponen dan plugin baru, dokumentasi, dan alat pembangunan yang kuat.
