Lumpat menyang isi utama
Check
Anyar ing v5.2 Variabel CSS, offcanvas responsif, utilitas anyar, lan liya-liyane! Bootstrap

Gawe situs sing cepet lan responsif nganggo Bootstrap

Toolkit frontend sing kuat, bisa ditambah, lan dilengkapi fitur. Mbangun lan ngatur karo Sass, nggunakke sistem kothak prebuilt lan komponen, lan urip proyek karo plugin JavaScript kuat.

npm i [email protected]
Maca docs

Saiki v5.2.1 · Download · v4.6.x docs · Kabeh rilis

Miwiti kanthi cara sing dikarepake

Langsung menyang bangunan nganggo Bootstrap-gunakake CDN, instal liwat manajer paket, utawa download kode sumber.

Maca docs instalasi

Instal liwat manajer paket

Instal file Sass lan JavaScript sumber Bootstrap liwat npm, RubyGems, Composer, utawa Meteor. Panginstalan sing dikelola paket ora kalebu dokumentasi utawa skrip mbangun lengkap. Sampeyan uga bisa nggunakake repo template npm kanggo nggawe proyek Bootstrap kanthi cepet liwat npm.

npm install [email protected]
gem install bootstrap -v 5.2.1

Waca dokumen instalasi kanggo informasi luwih lengkap lan manajer paket tambahan.

Kalebu liwat CDN

Yen sampeyan mung kudu nyakup CSS utawa JS kompilasi Bootstrap, sampeyan bisa nggunakake jsDelivr . Deleng ing tumindak kanthi wiwitan cepet sing prasaja , utawa telusuri conto kanggo miwiti proyek sabanjure. Sampeyan uga bisa milih kanggo nyakup Popper lan JS kita kanthi kapisah .

<!-- 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>

Waca pandhuan miwiti kita

Entuk mlumpat kalebu file sumber Bootstrap ing proyek anyar kanthi pandhuan resmi.

Webpack Parcel Vite

Ngatur kabeh karo Sass

Bootstrap nggunakake Sass kanggo arsitektur modular lan bisa disesuaikan. Impor mung komponen sing sampeyan butuhake, aktifake opsi global kaya gradien lan bayangan, lan tulis CSS sampeyan dhewe nganggo variabel, peta, fungsi, lan campuran.

Sinau luwih lengkap babagan ngatur

Kalebu kabeh Bootstrap's Sass

Impor siji stylesheet lan sampeyan bakal melu balapan kanthi saben fitur CSS kita.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Sinau luwih lengkap babagan pilihan Sass global kita .

Kalebu apa sing perlu

Cara paling gampang kanggo ngatur Bootstrap-kalebu mung CSS sing sampeyan butuhake.

// 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";

Sinau luwih lengkap babagan nggunakake Bootstrap karo Sass .

Mbangun lan ngluwihi wektu nyata kanthi variabel CSS

Bootstrap 5 berkembang kanthi saben rilis kanggo nggunakake variabel CSS kanthi luwih apik kanggo gaya tema global, komponen individu, lan uga utilitas. We nyedhiyani Welasan variabel kanggo werna, gaya font, lan liyane ing :roottingkat kanggo nggunakake ngendi wae. Ing komponen lan utilitas, variabel CSS kalebu ing kelas sing cocog lan bisa gampang diowahi.

Sinau luwih lengkap babagan variabel CSS

Nggunakake variabel CSS

Gunakake sembarang variabel global:root kita kanggo nulis gaya anyar. Variabel CSS nggunakake var(--bs-variableName)sintaks lan bisa diwarisake dening unsur anak.

.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);
}

Kustomisasi liwat variabel CSS

Ganti variabel kelas global, komponen, utawa utilitas kanggo ngatur Bootstrap kaya sing dikarepake. Ora perlu deklarasi maneh saben aturan, mung nilai variabel anyar.

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;
}

Komponen, ketemu Utility API

Anyar ing Bootstrap 5, utilitas kita saiki digawe dening Utility API . We dibangun minangka peta Sass fitur-dikempalken sing bisa cepet lan gampang selaras. Ora tau gampang nambah, mbusak, utawa ngowahi kelas utilitas. Nggawe utilitas responsif, nambah varian kelas pseudo, lan menehi jeneng khusus.

Sinau luwih lengkap babagan utilitas Jelajahi komponen sing disesuaikan

Ngatur komponen kanthi cepet
// 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,
    )
  )
);

Plugins JavaScript kuat tanpa jQuery

Gampang nambahake unsur sing didhelikake, modal lan menu offcanvas, popover lan tooltips, lan liya-liyane-kabeh tanpa jQuery. JavaScript ing Bootstrap minangka HTML-first, tegese nambahake plugin gampang kaya nambahake dataatribut. Perlu kontrol liyane? Kalebu plugin individu kanthi terprogram.

Sinau luwih lengkap babagan Bootstrap JavaScript

API atribut data

Napa nulis JavaScript luwih akeh nalika sampeyan bisa nulis HTML? Saklawasé kabeh plugin JavaScript Bootstrap nduweni API data kelas siji, ngidini sampeyan nggunakake JavaScript mung kanthi nambah 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>

Sinau luwih lengkap babagan JavaScript minangka modul lan nggunakake API terprogram .

Set lengkap plugins

Bootstrap nduwe puluhan plugin sing bisa dilebokake ing proyek apa wae. Selehake kabeh bebarengan, utawa pilih mung sing perlu.

Tandha

Tampilake lan ndhelikake pesen tandha menyang pangguna sampeyan.

Tombol

Programmatically ngontrol negara aktif kanggo tombol.

Carousel

Tambah slideshow menyang kaca apa wae, kalebu dhukungan kanggo crossfade.

ambruk

Nggedhekake lan ambruk wilayah isi, utawa nggawe akordion.

Dropdown

Gawe menu pranala, tumindak, formulir, lan liya-liyane.

Modal

Tambah dialog sing fleksibel lan responsif menyang proyek sampeyan.

Offcanvas

Gawe lan ganti sidebar sing didhelikake menyang kaca apa wae.

Popover

Nggawe overlay khusus. Dibangun ing Popper.

Scrollspy

Nganyari pranala nav aktif kanthi otomatis adhedhasar gulung kaca.

Tab

Ngidini komponen nav Bootstrap kanggo ngalih isi.

roti panggang

Tampilake lan ndhelikake kabar menyang pengunjung.

Tooltip

Ganti tooltips browser karo sing khusus. Dibangun ing Popper.

Pribadhi nganggo Ikon Bootstrap

Ikon Bootstrap minangka perpustakaan lambang SVG sumber terbuka sing nampilake luwih saka 1,500 glyphs, kanthi luwih akeh ditambahake saben rilis. Dheweke dirancang kanggo bisa digunakake ing proyek apa wae, manawa sampeyan nggunakake Bootstrap dhewe utawa ora. Gunakake minangka SVG utawa fonts lambang-loro pilihan menehi skala vektor lan kustomisasi gampang liwat CSS.

Entuk Ikon Bootstrap

Ikon Bootstrap

Gawe dadi duwekmu nganggo Tema Bootstrap resmi

Njupuk Bootstrap menyang tingkat sabanjure kanthi tema premium saka pasar Tema Bootstrap resmi . Tema dibangun ing Bootstrap minangka kerangka kerjane dhewe, sugih karo komponen lan plugin anyar, dokumentasi, lan alat mbangun sing kuat.

Telusuri Tema Bootstrap

Tema Bootstrap