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.

Nesta páxina

Inicio rápido

Queres engadir rapidamente Bootstrap ao teu proxecto? Use jsDelivr, un CDN de código aberto gratuíto. 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

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

Paquete

Inclúe todos os complementos e dependencias de JavaScript de Bootstrap cun dos nosos dous paquetes. Ambos bootstrap.bundle.jse bootstrap.bundle.min.jsinclúen Popper para as nosas ferramentas e popovers. Para obter máis información sobre o que se inclúe en Bootstrap, consulte a nosa sección de contidos .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Separar

Se decides optar pola solución de scripts por separado, Popper debe ser primeiro (se estás a usar ferramentas ou popovers) e despois os nosos complementos de JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Módulos

Se usa <script type="module">, consulte a nosa sección sobre o uso de Bootstrap como módulo .

Compoñentes

Queres saber cales son os compoñentes que requiren explícitamente o noso JavaScript e Popper? 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 )
Modais de visualización, posicionamento e comportamento de desprazamento
Navbar para estender o noso complemento Collapse para implementar un comportamento receptivo
Brindis por mostrar e despedir
Suxestións sobre ferramentas e popovers para mostrar e posicionar (tamén require Popper )
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">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Para ver os seguintes pasos, visita os documentos de deseño ou os nosos exemplos oficiais para comezar a deseñar 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 doctype 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">

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.

Le e subscríbete ao blog oficial de Bootstrap .
Chatea con outros Bootstrappers en IRC. No irc.libera.chatservidor, na #bootstrapcanle.
A axuda para a implementación pódese atopar en Stack Overflow (etiquetado bootstrap-5).
Os desenvolvedores deben usar a palabra clave bootstrapen 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.