Source

Introdución

Comeza con Bootstrap, o marco máis popular do mundo para crear sitios adaptados e orientados aos móbiles, con jsDelivr e unha páxina de inicio de modelo.

Inicio rápido

Queres engadir rapidamente Bootstrap ao teu proxecto? Use jsDelivr, ofrecido gratuitamente pola xente de jsDelivr. Usas un xestor de paquetes ou necesitas descargar os ficheiros de orixe? Diríxete á páxina de descargas.

CSS

Copia e pega a folla de estilo <link>na túa <head>antes que todas as outras follas de estilo para cargar o noso CSS.

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

JS

Moitos dos nosos compoñentes requiren o uso de JavaScript para funcionar. En concreto, requiren jQuery , Popper.js e os nosos propios complementos de JavaScript. Coloca os seguintes <script>s preto do final das túas páxinas, xusto antes da etiqueta de peche </body>, para activalas. jQuery debe vir primeiro, despois Popper.js e despois os nosos complementos de JavaScript.

Usamos a versión slim de jQuery , pero tamén se admite a versión completa.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Queres saber cales son os compoñentes que requiren explícitamente jQuery, o noso JS e Popper.js? Fai clic na ligazón Mostrar compoñentes a continuación. Se non estás seguro sobre a estrutura xeral da páxina, continúa lendo un modelo de páxina de exemplo.

Mostrar compoñentes que requiren JavaScript
  • Alertas por despedimento
  • Botóns para alternar estados e caixa de verificación/funcionalidade de radio
  • Carrusel para todos os comportamentos, controis e indicadores de diapositivas
  • Contraer para cambiar a visibilidade do contido
  • Menú despregable para mostrar e posicionar (tamén require Popper.js )
  • Modais de visualización, posicionamento e comportamento de desprazamento
  • Navbar para estender o noso complemento Collapse para implementar un comportamento receptivo
  • Suxestións sobre ferramentas e popovers para mostrar e posicionar (tamén require Popper.js )
  • Scrollspy para o comportamento do desprazamento e as actualizacións de navegación

Modelo de inicio

Asegúrate de ter as túas páxinas configuradas cos últimos estándares de deseño e desenvolvemento. Isto significa usar un doctype HTML5 e incluír unha metaetiqueta de visualización para obter comportamentos de resposta adecuados. Reúneo todo e as túas páxinas deberían verse así:

<!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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Iso é todo o que necesitas para os requisitos xerais da páxina. Visita os documentos de deseño ou os nosos exemplos oficiais para comezar a presentar o contido e os compoñentes do teu sitio.

Importantes globais

Bootstrap emprega un puñado de estilos e configuracións globais importantes que terás que ter en conta ao usalo, todos eles case exclusivamente orientados á normalización dos estilos entre navegadores. Mergullémonos.

Tipo de documento HTML5

Bootstrap require o uso do tipo de documento HTML5. Sen el, verás un estilo funky incompleto, pero incluílo non debería causar problemas considerables.

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

Metaetiqueta responsiva

Bootstrap desenvólvese en primeiro lugar para móbiles , unha estratexia na que primeiro optimizamos o código para os dispositivos móbiles e despois ampliamos os compoñentes segundo sexa necesario mediante consultas multimedia CSS. Para garantir a representación correcta e o zoom táctil para todos os dispositivos, engade a metaetiqueta de visualización sensible ao teu <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Podes ver un exemplo disto en acción no modelo de inicio .

Tamaño de caixa

Para un tamaño máis sinxelo en CSS, cambiamos o box-sizingvalor global de content-boxa border-box. Isto garante paddingque non afecte ao ancho calculado final dun elemento, pero pode causar problemas con algún software de terceiros como Google Maps e Google Custom Search Engine.

Na rara ocasión en que necesite anulalo, use algo como o seguinte:

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

Co fragmento anterior, os elementos aniñados, incluído o contido xerado mediante ::beforee, ::afterherdarán todos o especificado box-sizingpara ese .selector-for-some-widget.

Obtén máis información sobre o modelo de caixa e o tamaño en Trucos CSS .

Reinicie

Para mellorar a representación entre navegadores, usamos Reboot para corrixir incoherencias entre navegadores e dispositivos ao tempo que proporcionamos restablecementos algo máis obstinados aos elementos HTML comúns.

Comunidade

Mantente ao día do desenvolvemento de Bootstrap e ponte en contacto coa comunidade con estes recursos útiles.

  • Siga @getbootstrap en Twitter .
  • Le e subscríbete ao blog oficial de Bootstrap .
  • Chatea con outros Bootstrappers en IRC. No irc.freenode.netservidor, na ##bootstrapcanle.
  • A axuda para a implementación pódese atopar en Stack Overflow (etiquetado bootstrap-4).
  • Os desenvolvedores deben usar a palabra clave bootstrapnos paquetes que modifican ou engaden a funcionalidade de Bootstrap cando se distribúen a través de npm ou mecanismos de entrega similares para obter a máxima visibilidade.

Tamén podes seguir @getbootstrap en Twitter para ver os últimos fofocas e vídeos musicais incribles.