in English

Introducció

Comenceu amb Bootstrap, el marc més popular del món per crear llocs responsius i centrats en 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS

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

Paquet

Inclou tot el que necessites en un script amb el nostre paquet. El nostre bootstrap.bundle.jsi bootstrap.bundle.min.jsinclou Popper , però no jQuery . Per obtenir més informació sobre el que s'inclou a Bootstrap, consulteu la nostra secció de continguts .

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Separat

Si decidiu optar per la solució de scripts independents, primer ha de ser Popper.js i després els nostres connectors de JavaScript.

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Components

Teniu curiositat per quins components requereixen explícitament jQuery, el nostre JS i Popper.js? Feu clic a l'enllaç de Mostra 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.js )
  • Modals per mostrar, posicionar i el comportament de desplaçament
  • Barra de navegació per ampliar el nostre connector Collapse per implementar un comportament sensible
  • Brindis per mostrar i descartar
  • Informació sobre eines i finestres emergents per mostrar i posicionar (també requereix Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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 als elements HTML habituals.

Comunitat

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

  • Segueix @getbootstrap a Twitter .
  • Llegeix i subscriu-te a The Official Bootstrap Blog .
  • Xateja amb altres Bootstrappers a IRC. Al irc.freenode.netservidor, 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.