Source

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, oferit gratuit de oamenii de la jsDelivr. Utilizați un manager de pachete sau aveți nevoie să descărcați fișierele sursă? Mergeți la 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Multe dintre componentele noastre necesită utilizarea JavaScript pentru a funcționa. Mai exact, necesită jQuery , Popper.js și propriile noastre pluginuri JavaScript. Plasați următoarele <script>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.js și apoi pluginurile noastre JavaScript.

Folosim versiunea slim a jQuery , dar este acceptată și versiunea completă.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Sunteți curios ce componente necesită în mod explicit jQuery, JS-ul nostru și Popper.js? 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ă.

Nostru bootstrap.bundle.jsși bootstrap.bundle.min.jsinclude Popper , dar nu jQuery . Pentru mai multe informații despre ceea ce este inclus în Bootstrap, consultați secțiunea noastră de conținut .

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.js )
  • 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
  • Sfaturi cu instrumente și popovers pentru afișare și poziționare (necesită și Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

  • Urmărește @getbootstrap pe Twitter .
  • Citiți și abonați-vă la Blogul oficial Bootstrap .
  • Discutați cu ceilalți Bootstrappers în IRC. Pe irc.freenode.netserver, 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.