Luncat ka eusi utama
Check
Anyar dina v5.2 Variabel CSS, offcanvas responsif, utilitas anyar, sareng seueur deui! Bootstrap

Bangun situs anu gancang, responsif sareng Bootstrap

Kuat, extensible, sarta fitur-dipakétkeun toolkit frontend. Ngawangun sareng ngaropea sareng Sass, ngamangpaatkeun sistem grid sareng komponén anu tos diwangun, sareng ngahirupkeun proyék sareng plugins JavaScript anu kuat.

npm i [email protected]
Baca docs

Ayeuna v5.2.1 · Ngundeur · v4.6.x docs · Sadaya release

Mimitian ku cara naon waé anu anjeun pikahoyong

Luncat langsung kana gedong nganggo Bootstrap — anggo CDN, pasang via manager pakét, atanapi unduh kodeu sumberna.

Baca docs instalasi

Pasang via manajer pakét

Pasang file Sass sareng JavaScript sumber Bootstrap via npm, RubyGems, Composer, atanapi Meteor. Pamasangan anu diurus paket henteu kalebet dokuméntasi atanapi skrip ngawangun pinuh kami. Anjeun ogé tiasa nganggo repo template npm kami pikeun gancang ngahasilkeun proyék Bootstrap via npm.

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

Baca docs instalasi kami pikeun inpo nu leuwih lengkep sareng manajer pakét tambahan.

Kaasup via CDN

Nalika anjeun ngan ukur kedah ngalebetkeun CSS atanapi JS anu disusun Bootstrap, anjeun tiasa nganggo jsDelivr . Tingali dina aksi kalayan ngamimitian gancang kami anu sederhana , atanapi kotektak conto pikeun ngamimitian proyék anjeun salajengna. Anjeun ogé tiasa milih ngalebetkeun Popper sareng JS kami nyalira .

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

Baca pituduh ngamimitian kami

Kéngingkeun luncat kalebet file sumber Bootstrap dina proyék énggal sareng pituduh resmi kami.

Bungkusan wéb Parsel Vite

Sesuaikeun sadayana sareng Sass

Bootstrap ngagunakeun Sass pikeun arsitéktur modular sareng disesuaikan. Impor ukur komponén anu anjeun peryogikeun, aktipkeun pilihan global sapertos gradién sareng bayangan, sareng nyerat CSS anjeun nyalira nganggo variabel, peta, fungsi, sareng campuran kami.

Leuwih jéntré ngeunaan ngaropéa

Kalebet sadayana Bootstrap's Sass

Impor hiji stylesheet sareng anjeun nuju balap kalayan unggal fitur CSS kami.

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

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

Diajar langkung seueur ngeunaan pilihan Sass global kami .

Kaasup naon nu peryogi

Cara panggampangna pikeun ngaropea Bootstrap-kalebet ngan CSS anu anjeun peryogikeun.

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

Diajar langkung seueur ngeunaan ngagunakeun Bootstrap sareng Sass .

Ngawangun sareng ngalegaan sacara real-time sareng variabel CSS

Bootstrap 5 ngembang sareng unggal sékrési pikeun ngagunakeun variabel CSS anu langkung saé pikeun gaya téma global, komponén individu, bahkan utilitas. Kami nyayogikeun puluhan variabel pikeun warna, gaya font, sareng seueur deui dina :roottingkat pikeun dianggo dimana waé. Dina komponén jeung utilitas, variabel CSS anu scoped ka kelas relevan sarta bisa kalayan gampang dirobah.

Diajar langkung seueur ngeunaan variabel CSS

Ngagunakeun variabel CSS

Anggo salah sahiji variabel global:root urang pikeun nyerat gaya anyar. Variabel CSS nganggo var(--bs-variableName)sintaksis sareng tiasa diwariskeun ku elemen barudak.

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

Ngaropea via variabel CSS

Override global, komponén, atawa variabel kelas utilitas pikeun ngaropéa Bootstrap ngan kumaha anjeun resep. Teu perlu redeclare unggal aturan, ngan hiji 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;
}

Komponén, minuhan API Utiliti

Anyar dina Bootstrap 5, utilitas kami ayeuna dihasilkeun ku API Utiliti kami . Kami ngawangun éta salaku peta Sass anu dibungkus fitur anu tiasa disaluyukeun gancang sareng gampang. Éta henteu kantos langkung gampang pikeun nambihan, mupus, atanapi ngarobih kelas utilitas. Jieun utilitas responsif, tambahkeun varian pseudo-kelas, sarta masihan aranjeunna ngaran custom.

Diajar langkung seueur ngeunaan utilitas Ngajalajah komponén ngaropéa

Gancang ngaropéa komponén
// 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 nambahkeun elemen disumputkeun toggleable, modals na offcanvas ménu, popovers na tooltips, sarta jadi leuwih-kabeh tanpa jQuery. JavaScript dina Bootstrap nyaéta HTML-heula, nu hartina nambahkeun plugins téh sagampang nambahkeun dataatribut. Peryogi langkung kontrol? Ngawengku plugins individu programmatically.

Diajar langkung seueur ngeunaan Bootstrap JavaScript

API atribut data

Naha nyerat langkung seueur JavaScript nalika anjeun tiasa nyerat HTML? Ampir kabéh plugins JavaScript Bootstrap nampilkeun API data kelas munggaran, anu ngamungkinkeun anjeun ngagunakeun JavaScript ngan ku nambihan 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>

Diajar langkung seueur ngeunaan JavaScript kami salaku modul sareng nganggo API terprogram .

Set komprehensif plugins

Bootstrap nampilkeun belasan plugins anu anjeun tiasa lungsur kana proyék naon waé. Leupaskeun aranjeunna sakaligus, atawa pilih ngan nu peryogi.

Waspada

Tampilkeun sareng nyumputkeun pesen waspada ka pangguna anjeun.

Tombol

Programmatically ngadalikeun kaayaan aktip pikeun tombol.

Carousel

Tambahkeun pintonan slaid ka kaca mana wae, kaasup rojongan pikeun crossfade.

Rubuh

Dilegakeun tur ambruk wewengkon eusi, atawa jieun akordion.

Puragkeun

Jieun ménu tina tautan, tindakan, formulir, sareng seueur deui.

Modal

Tambahkeun dialog anu fleksibel sareng responsif kana proyék anjeun.

Offcanvas

Ngawangun sareng togél sidebar anu disumputkeun kana halaman mana waé.

Popover

Jieun overlays custom. Diwangun dina Popper.

Scrollspy

Ngamutahirkeun otomatis Tumbu nav aktip dumasar kana gulung kaca.

Tab

Ngidinan komponén nav Bootstrap togél eusi.

Roti bakar

Tampilkeun sareng nyumputkeun bewara ka sémah anjeun.

Tooltip

Ngaganti tooltips browser jeung leuwih custom. Diwangun dina Popper.

Pribados sareng Ikon Bootstrap

Ikon Bootstrap mangrupikeun perpustakaan ikon SVG sumber kabuka anu nampilkeun langkung ti 1,500 glyphs, kalayan langkung seueur tambihan unggal pelepasan. Éta dirancang pikeun dianggo dina proyék naon waé, naha anjeun nganggo Bootstrap nyalira atanapi henteu. Anggoana salaku SVG atanapi fon ikon — duanana pilihan masihan anjeun skala vektor sareng kustomisasi gampang via CSS.

Kéngingkeun Ikon Bootstrap

Ikon Bootstrap

Make it yours with official Bootstrap Themes

Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.

Browse Bootstrap Themes

Téma Bootstrap