Saltar al contingut principal Saltar a la navegació de documents
in English

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.

En aquesta pàgina

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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Molts dels nostres components requereixen l'ús de JavaScript per funcionar. Concretament, requereixen els nostres propis connectors de JavaScript i Popper . 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.

Paquet

Inclou tots els connectors i dependències de JavaScript de Bootstrap amb un dels nostres dos paquets. Tots dos bootstrap.bundle.jsi bootstrap.bundle.min.jsinclouen Popper per als nostres consells i finestres emergents. 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/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Mòduls

Si utilitzeu <script type="module">, consulteu la nostra secció d' ús de Bootstrap com a mòdul .

Components

Teniu curiositat per quins components requereixen explícitament el nostre JavaScript i Popper? Feu clic a l'enllaç Mostra els 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 el nostre connector Collapse per implementar un comportament sensible
  • Offllenvas per mostrar, posicionar i el comportament de desplaçament
  • Brindis per mostrar i descartar
  • Informació sobre eines i finestres emergents per mostrar i posicionar (també requereix Popper )
  • Scrollspy per al comportament de desplaçament i actualitzacions de navegació

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Per als passos següents, 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">

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