Comenceu amb Bootstrap

Bootstrap és un conjunt d'eines d'interfície potent i ple de funcions. Creeu qualsevol cosa, des del prototip fins a la producció, en minuts.

En aquesta pàgina

Començament ràpid

Comenceu per incloure CSS i JavaScript preparats per a la producció de Bootstrap mitjançant CDN sense necessitat de cap pas de creació. Vegeu-ho a la pràctica amb aquesta demostració de Bootstrap CodePen .

Creeu un index.htmlfitxer nou a l'arrel del vostre projecte. Incloeu <meta name="viewport">també l'etiqueta per obtenir un comportament de resposta adequat als dispositius mòbils.

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

Inclou CSS i JS de Bootstrap. Col·loqueu l' <link>etiqueta per al <head>nostre CSS i l' <script>etiqueta per al nostre paquet de JavaScript (incloent Popper per al posicionament dels menús desplegables, poppers i informació sobre eines) abans del tancament </body>. Obteniu més informació sobre els nostres enllaços 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>

També podeu incloure Popper i el nostre JS per separat. Si no teniu previst utilitzar menús desplegables, finestres emergents o informació sobre eines, estalvieu alguns kilobytes sense incloure 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>

Hola món! Obriu la pàgina al navegador que trieu per veure la vostra pàgina Bootstrapped. Ara podeu començar a construir amb Bootstrap creant el vostre propi disseny , afegint desenes de components i utilitzant els nostres exemples oficials .

Enllaços CDN

Com a referència, aquí teniu els nostres enllaços CDN principals.

Descripció	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`

També podeu utilitzar el CDN per obtenir qualsevol de les nostres compilacions addicionals que figuren a la pàgina Contingut .

Propers passos

Llegiu una mica més sobre alguns paràmetres importants de l'entorn global que utilitza Bootstrap.
Llegiu el que s'inclou a Bootstrap a la nostra secció de continguts i la llista de components que requereixen JavaScript a continuació.
Necessites una mica més de potència? Penseu en construir amb Bootstrap incloent els fitxers font mitjançant el gestor de paquets .
Voleu utilitzar Bootstrap com a mòdul amb <script type="module">? Consulteu la nostra secció d' ús de Bootstrap com a mòdul .

Components JS

Teniu curiositat per quins components requereixen explícitament el nostre JavaScript i Popper? Feu clic a l'enllaç de Mostra components a continuació. Si no esteu segur de l'estructura general de la pàgina, seguiu llegint per obtenir una plantilla de pàgina d'exemple.

Mostra els components que requereixen JavaScript

Alertes per acomiadament
Botons per canviar els estats i la casella de selecció/funcionalitat de ràdio
Carrusel per a tots els comportaments, controls i indicadors de les diapositives
Replega per canviar la visibilitat del contingut
Menú desplegable per mostrar i posicionar (també requereix Popper )
Modals per mostrar, posicionar i el comportament de desplaçament
Barra de navegació per ampliar els nostres connectors Collapse i Offcanvas per implementar comportaments sensibles
Navs amb el connector Tab per canviar els panells de contingut
Offllenvas per mostrar, posicionar i el comportament de desplaçament
Scrollspy per al comportament de desplaçament i actualitzacions de navegació
Brindis per mostrar i descartar
Informació sobre eines i finestres emergents per mostrar i posicionar (també requereix Popper )

Globals importants

Bootstrap utilitza un grapat d'estils i configuracions globals importants, tots ells gairebé exclusivament orientats a la normalització d'estils entre navegadors. Submergem-nos.

Tipus de document HTML5

Bootstrap requereix l'ús del tipus de document HTML5. Sense ell, veuràs un estil original i incomplet.

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

Metaetiqueta responsiva

Bootstrap es desenvolupa primer per a mòbils , una estratègia en la qual primer optimitzem el codi per als dispositius mòbils i després augmentem els components segons sigui necessari mitjançant consultes multimèdia CSS. Per garantir la representació correcta i el zoom tàctil per a tots els dispositius, afegiu la metaetiqueta de la finestra gràfica sensible al vostre fitxer <head>.

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

Podeu veure un exemple d'això en acció a l' inici ràpid .

Mida de caixa

Per a una mida més senzilla en CSS, canviem el box-sizingvalor global de content-boxa border-box. Això garanteix paddingque no afecti l'amplada final calculada d'un element, però pot causar problemes amb algun programari de tercers com Google Maps i el motor de cerca personalitzat de Google.

En les rares ocasions que necessiteu anul·lar-lo, utilitzeu alguna cosa com el següent:

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

Amb el fragment anterior, els elements imbricats, inclòs el contingut generat mitjançant ::beforei, ::aftertots heretaran l'especificat box-sizingper a aquest .selector-for-some-widget.

Obteniu més informació sobre el model de caixa i la mida a CSS Tricks .

Reinicieu

Per millorar la representació entre navegadors, utilitzem Reboot per corregir incoherències entre navegadors i dispositius alhora que proporcionem restabliments una mica més opiniosos als elements HTML habituals.

Comunitat

Estigueu al dia sobre el desenvolupament de Bootstrap i contacteu amb la comunitat amb aquests recursos útils.

Llegeix i subscriu-te a The Official Bootstrap Blog .
Pregunta i explora els nostres debats de GitHub .
Xateja amb altres Bootstrappers a IRC. Al irc.libera.chatservidor, al #bootstrapcanal.
Es pot trobar ajuda per a la implementació a Stack Overflow (etiqueta bootstrap-5).
Els desenvolupadors haurien d'utilitzar la paraula clau bootstrapen paquets que modifiquin o afegeixen a la funcionalitat de Bootstrap quan es distribueixen mitjançant npm o mecanismes de lliurament similars per a una màxima descoberta.

També podeu seguir @getbootstrap a Twitter per veure els últims xafarderies i vídeos musicals fantàstics.