Începeți cu Bootstrap

Bootstrap este un set de instrumente frontal puternic, plin de funcții. Construiți orice, de la prototip la producție, în câteva minute.

Pe aceasta pagina

Pornire rapidă

Începeți prin includerea CSS și JavaScript gata de producție de la Bootstrap prin CDN, fără a fi nevoie de niciun pas de construcție. Vedeți-l în practică cu acest demo Bootstrap CodePen .

Creați un index.htmlfișier nou în rădăcina proiectului. Includeți și <meta name="viewport">eticheta pentru un comportament adecvat de răspuns pe dispozitivele mobile.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Includeți CSS și JS Bootstrap. Plasați <link>eticheta în <head>CSS-ul nostru și <script>eticheta pentru pachetul nostru JavaScript (inclusiv Popper pentru meniuri derulante de poziționare, poppere și sfaturi cu instrumente) înainte de închidere </body>. Aflați mai multe despre linkurile noastre CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <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">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

De asemenea, puteți include Popper și JS-ul nostru separat. Dacă nu intenționați să utilizați meniuri derulante, popovers sau sfaturi cu instrumente, economisiți câțiva kiloocteți neincluzând Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Salut Lume! Deschideți pagina în browserul dorit pentru a vedea pagina Bootstrapped. Acum puteți începe să construiți cu Bootstrap creându-vă propriul aspect , adăugând zeci de componente și utilizând exemplele noastre oficiale .

legături CDN

Ca referință, iată link-urile noastre CDN principale.

Descriere	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

De asemenea, puteți utiliza CDN-ul pentru a prelua oricare dintre versiunile noastre suplimentare enumerate în pagina Cuprins .

Pasii urmatori

Citiți puțin mai multe despre câteva setări importante ale mediului global pe care le utilizează Bootstrap.
Citiți despre ce este inclus în Bootstrap în secțiunea noastră de conținut și lista de componente care necesită JavaScript de mai jos.
Ai nevoie de puțin mai multă putere? Luați în considerare construirea cu Bootstrap prin includerea fișierelor sursă prin managerul de pachete .
Doriți să utilizați Bootstrap ca modul cu <script type="module">? Vă rugăm să consultați secțiunea despre utilizarea Bootstrap ca modul .

Componentele JS

Sunteți curios ce componente necesită în mod explicit JavaScript și Popper? Faceți clic pe linkul de afișare a componentelor de mai jos. Dacă nu sunteți deloc sigur de structura generală a paginii, continuați să citiți pentru un exemplu de șablon de pagină.

Afișați componentele care necesită JavaScript

Alerte pentru concediere
Butoane pentru comutarea stărilor și casete de selectare/funcționalitate radio
Carusel pentru toate comportamentele de diapozitive, comenzile și indicatorii
Restrângeți pentru comutarea vizibilității conținutului
Mențiuni derulante pentru afișare și poziționare (necesită și Popper )
Modalități pentru afișare, poziționare și comportament de defilare
Bara de navigare pentru extinderea pluginurilor noastre Collapse și Offcanvas pentru a implementa comportamente receptive
Navs cu pluginul Tab pentru comutarea panourilor de conținut
În afara pânzelor pentru afișare, poziționare și comportament de defilare
Scrollspy pentru comportamentul derulării și actualizările de navigare
Toasturi pentru afișare și eliminare
Sfaturi instrumente și popovers pentru afișare și poziționare (necesită și Popper )

Global importante

Bootstrap folosește o mână de stiluri și setări globale importante, toate fiind aproape exclusiv orientate spre normalizarea stilurilor încrucișate. Să ne scufundăm.

HTML5 doctype

Bootstrap necesită utilizarea tipului de document HTML5. Fără el, veți vedea un stil funky și incomplet.

<!doctype html>
<html lang="en">
  ...
</html>

Metaetichetă receptivă

Bootstrap este dezvoltat mai întâi pe mobil , o strategie în care mai întâi optimizăm codul pentru dispozitivele mobile și apoi creștem componentele după cum este necesar folosind interogări media CSS. Pentru a asigura randarea corectă și mărirea la atingere pentru toate dispozitivele, adăugați metaeticheta de vizualizare receptivă la <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Puteți vedea un exemplu în acțiune în pornirea rapidă .

Dimensiunea cutiei

Pentru o dimensionare mai simplă în CSS, comutăm box-sizingvaloarea globală de la content-boxla border-box. Acest lucru asigură paddingcă nu afectează lățimea finală calculată a unui element, dar poate cauza probleme cu unele software terțe, cum ar fi Google Maps și Google Custom Search Engine.

În rarele ocazii în care trebuie să o înlocuiți, utilizați ceva de genul următor:

.selector-for-some-widget {
  box-sizing: content-box;
}

Cu fragmentul de mai sus, elementele imbricate — inclusiv conținutul generat prin ::beforeși ::after— vor moșteni toate cele specificate box-sizingpentru acel .selector-for-some-widget.

Aflați mai multe despre modelul cutiei și dimensionarea la CSS Tricks .

Reporniți

Pentru o redare îmbunătățită pe mai multe browsere, folosim Repornire pentru a corecta inconsecvențele între browsere și dispozitive, oferind în același timp resetări puțin mai obișnuite ale elementelor HTML obișnuite.

Comunitate

Rămâneți la curent cu dezvoltarea Bootstrap și contactați comunitatea cu aceste resurse utile.

Citiți și abonați-vă la Blogul oficial Bootstrap .
Întrebați și explorați Discuțiile noastre GitHub .
Discutați cu ceilalți Bootstrappers în IRC. Pe irc.libera.chatserver, pe #bootstrapcanal.
Ajutor pentru implementare poate fi găsit la Stack Overflow (etichetat bootstrap-5).
Dezvoltatorii ar trebui să folosească cuvântul cheie bootstrappe pachetele care modifică sau adaugă la funcționalitatea Bootstrap atunci când distribuie prin npm sau mecanisme de livrare similare pentru o descoperire maximă.

De asemenea, puteți urmări @getbootstrap pe Twitter pentru cele mai recente bârfe și videoclipuri muzicale minunate.