Introducció

Comenceu amb Bootstrap, el marc més popular del món per crear llocs responsius i orientats a mòbils, amb jsDelivr i una pàgina d'inici de plantilla.

Començament ràpid

Voleu afegir Bootstrap ràpidament al vostre projecte? Utilitzeu jsDelivr, un CDN de codi obert gratuït. Utilitzeu un gestor de paquets o necessiteu descarregar els fitxers font? Dirigiu-vos a la pàgina de descàrregues .

CSS

Copieu i enganxeu el full d'estil <link>al vostre <head>abans que tots els altres fulls d'estil per carregar el nostre CSS.

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

JS

Molts dels nostres components requereixen l'ús de JavaScript per funcionar. Concretament, requereixen jQuery , Popper i els nostres propis connectors de JavaScript. Utilitzem la compilació fina de jQuery , però també s'admet la versió completa.

Col·loqueu una de les opcions següents<script> al final de les vostres pàgines, just abans de l' </body>etiqueta de tancament, per activar-les. Primer ha de ser jQuery, després Popper i després els nostres connectors de JavaScript.

Paquet

Inclou tots els connectors de Bootstrap JavaScript amb un dels nostres dos paquets. Tots dos bootstrap.bundle.jsi bootstrap.bundle.min.jsinclouen Popper per als nostres consells sobre eines i popovers, però no jQuery . Inclou primer jQuery i després un paquet de JavaScript Bootstrap. Per obtenir més informació sobre el que s'inclou a Bootstrap, consulteu la nostra secció de continguts .

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

Separat

Si decidiu optar per la solució de scripts separats, Popper ha de ser primer (si feu servir informació sobre eines o popovers) i després els nostres connectors de 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>

Components

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

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 el nostre connector Collapse per implementar un comportament sensible
Scrollspy per al comportament de desplaçament i actualitzacions de navegació
Informació sobre eines i finestres emergents per mostrar i posicionar (també requereix Popper )

Plantilla d'inici

Assegureu-vos de tenir les vostres pàgines configurades amb els últims estàndards de disseny i desenvolupament. Això vol dir utilitzar un tipus de document HTML5 i incloure una metaetiqueta de viewport per a comportaments de resposta adequats. Poseu-ho tot junt i les vostres pàgines haurien de ser així:

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

Això és tot el que necessiteu per als requisits generals de la pàgina. Visiteu els documents de disseny o els nostres exemples oficials per començar a dissenyar el contingut i els components del vostre lloc.

Globals importants

Bootstrap utilitza un grapat d'estils i paràmetres globals importants que haureu de tenir en compte quan l'utilitzeu, tots els quals estan orientats gairebé exclusivament a la normalització dels estils entre navegadors. Submergem-nos.

Tipus de document HTML5

Bootstrap requereix l'ús del tipus de document HTML5. Sense ell, veureu un estil incomplet i funky, però incloure-lo no hauria de causar cap singlot considerable.

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

Podeu veure un exemple d'això en acció a la plantilla d'inici .

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 calculada final 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 dels 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 .
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-4).
Els desenvolupadors haurien d'utilitzar la paraula clau bootstrapen paquets que modifiquen 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.

CSP i SVG incrustats

Diversos components de Bootstrap inclouen SVG incrustats al nostre CSS per dissenyar components de manera coherent i senzilla en navegadors i dispositius. Per a les organitzacions amb configuracions de CSP més estrictes , hem documentat totes les instàncies dels nostres SVG incrustats (tots els quals s'apliquen mitjançant background-image) perquè pugueu revisar les vostres opcions més a fons.

Botó de tanca (utilitzat en alertes i modalitats)
Caselles de selecció i botons d'opció personalitzats
Interruptors de forma
Icones de validació de formularis
Menús de selecció personalitzats
Controls de carrusel
Botons de commutació de la barra de navegació

D'acord amb la conversa de la comunitat , algunes opcions per solucionar-ho a la vostra base de codi inclouen substituir els URL per recursos allotjats localment, eliminar les imatges i utilitzar imatges en línia (no és possible en tots els components) i modificar el vostre CSP. La nostra recomanació és revisar acuradament les vostres pròpies polítiques de seguretat i decidir el millor camí a seguir, si cal.