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.

Pornire rapidă

Doriți să adăugați rapid Bootstrap la proiectul dvs.? Utilizați jsDelivr, un CDN cu sursă deschisă gratuit. 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 inserați foaia de stil <link>în dvs. <head>înaintea tuturor celorlalte foi de stil pentru a încărca CSS-ul nostru.

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

JS

Multe dintre componentele noastre necesită utilizarea JavaScript pentru a funcționa. Mai exact, necesită jQuery , Popper și propriile noastre pluginuri JavaScript. Folosim versiunea slim a jQuery , dar este acceptată și versiunea completă.

Plasați unul dintre următoarele <script>elemente la sfârșitul paginilor, chiar înainte de </body>eticheta de închidere, pentru a le activa. jQuery trebuie să vină mai întâi, apoi Popper și apoi pluginurile noastre JavaScript.

Pachet

Includeți fiecare plugin 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, dar nu jQuery . Includeți mai întâi jQuery, apoi un pachet JavaScript Bootstrap. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Separa

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Componente

Sunteți curios ce componente necesită în mod explicit jQuery, JavaScript și Popper? Faceți clic pe linkul de afișare a componentelor de mai jos. Dacă nu sunteți sigur de structura 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
Scrollspy pentru comportamentul derulării și actualizările de navigare
Sfaturi instrumente și popovers pentru afișare și poziționare (necesită și Popper )

Ș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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Este tot ce ai nevoie pentru cerințele generale ale paginii. Accesați documentele Layout 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 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, shrink-to-fit=no">

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

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-4).
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.

CSP-uri și SVG-uri încorporate

Mai multe componente Bootstrap includ SVG-uri încorporate în CSS-ul nostru pentru a stila componentele în mod constant și ușor pe browsere și dispozitive. Pentru organizațiile cu configurații CSP mai stricte , am documentat toate instanțele SVG-urilor noastre încorporate (toate sunt aplicate prin background-image), astfel încât să puteți revizui mai amănunțit opțiunile.

Butonul de închidere (utilizat în alerte și modal)
Casete de selectare și butoane radio personalizate
Comutatoare de formulare
Pictograme de validare a formularelor
Meniuri de selectare personalizate
Comenzi carusel
Butoanele de comutare din bara de navigare

Pe baza conversației din comunitate , unele opțiuni pentru a rezolva acest lucru în propria bază de cod includ înlocuirea adreselor URL cu materiale găzduite local, eliminarea imaginilor și utilizarea imaginilor în linie (nu este posibilă în toate componentele) și modificarea CSP-ului. Recomandarea noastră este să revizuiți cu atenție propriile politici de securitate și să decideți cea mai bună cale de urmat, dacă este necesar.