Introducere

Începeți cu Bootstrap, cel mai popular cadru din lume pentru crearea de site-uri receptive, orientate spre dispozitive mobile, cu jsDelivr și un șablon de pagină de pornire.

Pe aceasta pagina

Pornire rapidă

Doriți să adăugați rapid Bootstrap la proiectul dvs.? Utilizați jsDelivr, un CDN gratuit cu sursă deschisă. Utilizați un manager de pachete sau aveți nevoie să descărcați fișierele sursă? Accesați pagina de descărcări .

CSS

Copiați și lipiți foaia de stil <link>în <head>înaintea tuturor celorlalte foi de stil pentru a încărca CSS-ul nostru.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Multe dintre componentele noastre necesită utilizarea JavaScript pentru a funcționa. Mai exact, necesită propriile noastre plugin-uri JavaScript și Popper . Plasați unul dintre următoarele <script>elemente la sfârșitul paginilor, chiar înainte de </body>eticheta de închidere, pentru a le activa.

Pachet

Includeți fiecare plugin și dependență JavaScript Bootstrap cu unul dintre cele două pachete ale noastre. Ambele bootstrap.bundle.jsși bootstrap.bundle.min.jsinclud Popper pentru sfaturile noastre de instrumente și popovers. Pentru mai multe informații despre ceea ce este inclus în Bootstrap, consultați secțiunea noastră de conținut .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Separa

Dacă decideți să utilizați soluția de scripturi separate, Popper trebuie să fie primul (dacă utilizați sfaturi sau popovers) și apoi pluginurile noastre JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Module

Dacă utilizați <script type="module">, vă rugăm să consultați secțiunea despre utilizarea Bootstrap ca modul .

Componente

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 pluginului nostru Collapse pentru a implementa un comportament receptiv
Toasturi pentru afișare și eliminare
Sfaturi instrumente și popovers pentru afișare și poziționare (necesită și Popper )
Scrollspy pentru comportamentul derulării și actualizările de navigare

Șablon de pornire

Asigurați-vă că aveți paginile configurate cu cele mai recente standarde de design și dezvoltare. Aceasta înseamnă utilizarea unui tip de document HTML5 și includerea unei metaetichete de vizualizare pentru comportamente adecvate de răspuns. Pune totul împreună și paginile tale ar trebui să arate astfel:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Pentru pașii următori, accesați documentele de aspect sau exemplele noastre oficiale pentru a începe să prezentați conținutul și componentele site-ului dvs.

Global importante

Bootstrap folosește o mână de stiluri și setări globale importante de care va trebui să fii conștient atunci când îl folosești, toate fiind orientate aproape exclusiv către 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 incomplet, dar includerea acesteia nu ar trebui să provoace sughițuri considerabile.

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

Metaetichetă receptivă

Bootstrap este dezvoltat mai întâi pe mobil , o strategie în care optimizăm mai întâi codul pentru dispozitivele mobile și apoi creștem componentele după cum este necesar utilizând 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 șablonul de pornire .

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

Fiți la curent cu dezvoltarea Bootstrap și contactați comunitatea cu aceste resurse utile.

Citiți și abonați-vă la Blogul oficial Bootstrap .
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.