Treci la conținutul principal
Check
Nou în v5.2 Variabile CSS, offcanvas receptiv, utilitare noi și multe altele! Bootstrap

Creați site-uri rapide și receptive cu Bootstrap

Setul de instrumente frontal puternic, extensibil și plin de funcții. Construiți și personalizați cu Sass, utilizați sistemul și componentele de grilă preconstruite și dați viață proiectelor cu plugin-uri JavaScript puternice.

npm i [email protected]
Citiți documentele

În prezent v5.2.1 · Descărcați · documente v4.6.x · Toate versiunile

Începeți cum doriți

Treceți direct la construirea cu Bootstrap - utilizați CDN-ul, instalați-l prin managerul de pachete sau descărcați codul sursă.

Citiți documentele de instalare

Instalați prin manager de pachete

Instalați fișierele sursă Sass și JavaScript ale Bootstrap prin npm, RubyGems, Composer sau Meteor. Instalările gestionate de pachete nu includ documentația sau scripturile noastre complete. De asemenea, puteți utiliza depozitul nostru de șabloane npm pentru a genera rapid un proiect Bootstrap prin npm.

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

Citiți documentele noastre de instalare pentru mai multe informații și manageri de pachete suplimentari.

Includeți prin CDN

Când trebuie să includeți doar CSS sau JS compilat de Bootstrap, puteți utiliza jsDelivr . Vedeți-l în acțiune cu ajutorul nostru simplu de pornire rapidă sau răsfoiți exemplele pentru a porni următorul proiect. De asemenea, puteți alege să includeți Popper și JS-ul nostru separat .

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

Citiți ghidurile noastre introductive

Începeți să includeți fișierele sursă Bootstrap într-un proiect nou cu ghidurile noastre oficiale.

Webpack Colet Vite

Personalizați totul cu Sass

Bootstrap utilizează Sass pentru o arhitectură modulară și personalizabilă. Importați numai componentele de care aveți nevoie, activați opțiuni globale, cum ar fi degrade și umbre, și scrieți propriul dvs. CSS cu variabilele, hărțile, funcțiile și mixurile noastre.

Aflați mai multe despre personalizare

Includeți toate elementele Bootstrap's Sass

Importă o singură foaie de stil și vei pleca la curse cu fiecare caracteristică a CSS-ului nostru.

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

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

Aflați mai multe despre opțiunile noastre globale Sass .

Includeți ceea ce aveți nevoie

Cel mai simplu mod de a personaliza Bootstrap — includeți doar CSS-ul de care aveți nevoie.

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

Aflați mai multe despre utilizarea Bootstrap cu Sass .

Construiți și extindeți în timp real cu variabile CSS

Bootstrap 5 evoluează cu fiecare lansare pentru a utiliza mai bine variabilele CSS pentru stiluri de teme globale, componente individuale și chiar utilitare. Oferim zeci de variabile pentru culori, stiluri de font și multe altele la un :rootnivel pentru utilizare oriunde. Pe componente și utilități, variabilele CSS sunt incluse în clasa relevantă și pot fi modificate cu ușurință.

Aflați mai multe despre variabilele CSS

Utilizarea variabilelor CSS

Utilizați oricare dintre variabilele noastre globale:root pentru a scrie stiluri noi. Variabilele CSS folosesc var(--bs-variableName)sintaxa și pot fi moștenite de elementele copii.

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

Personalizare prin variabile CSS

Ignorați variabilele globale, ale componentelor sau ale clasei de utilitate pentru a personaliza Bootstrap așa cum doriți. Nu este nevoie să redeclari fiecare regulă, doar o nouă valoare variabilă.

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

Componente, îndepliniți API-ul Utility

Nou în Bootstrap 5, utilitățile noastre sunt acum generate de API-ul nostru Utility . Am creat-o ca o hartă Sass plină de caracteristici care poate fi personalizată rapid și ușor. Nu a fost niciodată mai ușor să adăugați, să eliminați sau să modificați clase de utilitate. Faceți utilitățile receptive, adăugați variante de pseudo-clasă și dați-le nume personalizate.

Aflați mai multe despre utilități Explorați componente personalizate

Personalizați rapid componentele
// 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,
    )
  )
);

Pluginuri JavaScript puternice fără jQuery

Adăugați cu ușurință elemente ascunse de comutare, meniuri modale și offcanvas, popovers și sfaturi cu instrumente și multe altele, toate fără jQuery. JavaScript în Bootstrap este mai întâi de HTML, ceea ce înseamnă că adăugarea de pluginuri este la fel de simplă ca și adăugarea de dataatribute. Ai nevoie de mai mult control? Includeți pluginuri individuale în mod programatic.

Aflați mai multe despre JavaScript Bootstrap

API-ul atributului de date

De ce să scrieți mai mult JavaScript când puteți scrie HTML? Aproape toate pluginurile JavaScript Bootstrap au un API de date de primă clasă, permițându-vă să utilizați JavaScript doar prin adăugarea de dataatribute.

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

Aflați mai multe despre JavaScript ca module și despre utilizarea API-ului programatic .

Set cuprinzător de pluginuri

Bootstrap include o duzină de plugin-uri pe care le puteți introduce în orice proiect. Pune-le pe toate deodată sau alege-le doar pe cele de care ai nevoie.

Alerta

Afișați și ascundeți mesajele de alertă pentru utilizatorii dvs.

Buton

Controlați programatic starea activă pentru butoane.

Carusel

Adăugați prezentări de diapozitive pe orice pagină, inclusiv suport pentru crossfade.

Colaps

Extindeți și restrângeți zonele de conținut sau creați acordeoane.

Scapă jos

Creați meniuri cu linkuri, acțiuni, formulare și multe altele.

Modal

Adăugați dialoguri flexibile și receptive la proiectul dvs.

Offcanvas

Creați și comutați barele laterale ascunse în orice pagină.

Popover

Creați suprapuneri personalizate. Construit pe Popper.

Scrollspy

Actualizați automat linkurile de navigare active pe baza derulării paginii.

Tab

Permiteți componentelor Bootstrap nav să comute între conținut.

Paine prajita

Afișați și ascundeți notificările vizitatorilor dvs.

Indicator

Înlocuiți sfaturile instrumente ale browserului cu altele personalizate. Construit pe Popper.

Personalizați-l cu pictogramele Bootstrap

Bootstrap Icons este o bibliotecă de pictograme SVG cu sursă deschisă, cu peste 1.500 de glife, cu mai multe adăugate la fiecare lansare. Sunt proiectate să funcționeze în orice proiect, indiferent dacă utilizați Bootstrap în sine sau nu. Folosiți-le ca SVG sau fonturi de pictograme - ambele opțiuni vă oferă scalare vectorială și personalizare ușoară prin CSS.

Obțineți pictograme Bootstrap

Pictograme Bootstrap

Fă-l al tău cu temele oficiale Bootstrap

Du Bootstrap la nivelul următor cu teme premium de pe piața oficială de teme Bootstrap . Temele sunt construite pe Bootstrap ca propriile cadre extinse, bogate cu componente și pluginuri noi, documentație și instrumente puternice de construire.

Răsfoiți teme Bootstrap

Teme Bootstrap