Source

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, proporcionat gratuïtament per la gent de jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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. Col·loqueu els següents <script>s 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.

Utilitzem la compilació fina de jQuery , però també s'admet la versió completa.

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

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 general de la pàgina, seguiu llegint per obtenir una plantilla de pàgina d'exemple.

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 .

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

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.