Comeza con Bootstrap

Bootstrap é un conxunto de ferramentas de interface potente e cheo de funcións. Constrúe calquera cousa, desde o prototipo ata a produción, en minutos.

Nesta páxina

Inicio rápido

Comeza incluíndo CSS e JavaScript listos para a produción de Bootstrap mediante CDN sen necesidade de ningún paso de compilación. Mírao na práctica con esta demostración de Bootstrap CodePen .

Crea un index.htmlficheiro novo na raíz do teu proxecto. Inclúe <meta name="viewport">tamén a etiqueta para un comportamento axeitado nos dispositivos móbiles.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Inclúe CSS e JS de Bootstrap. Coloque a <link>etiqueta <head>para o noso CSS e a <script>etiqueta para o noso paquete de JavaScript (incluíndo Popper para colocar menús despregables, poppers e información sobre ferramentas) antes do peche </body>. Obtén máis información sobre as nosas ligazóns CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Tamén pode incluír Popper e o noso JS por separado. Se non pensas usar menús despregables, popovers ou informacións sobre ferramentas, garda algúns kilobytes sen incluír Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Ola, mundo! Abre a páxina no teu navegador que elixas para ver a túa páxina Bootstrapped. Agora podes comezar a construír con Bootstrap creando o teu propio deseño , engadindo decenas de compoñentes e utilizando os nosos exemplos oficiais .

Ligazóns CDN

Como referencia, aquí están as nosas ligazóns CDN principais.

Descrición	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Tamén podes usar o CDN para buscar calquera das nosas compilacións adicionais listadas na páxina de Contidos .

Próximos pasos

Lea un pouco máis sobre algunhas opcións de configuración do contorno global importantes que utiliza Bootstrap.
Lea sobre o que se inclúe en Bootstrap na nosa sección de contidos e na lista de compoñentes que requiren JavaScript a continuación.
Necesitas un pouco máis de potencia? Considere construír con Bootstrap incluíndo os ficheiros fonte a través do xestor de paquetes .
Buscas usar Bootstrap como módulo con <script type="module">? Consulte a nosa sección de uso de Bootstrap como módulo .

Compoñentes JS

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 os nosos complementos Collapse e Offcanvas para implementar comportamentos de resposta
Navega co complemento Tab para alternar os paneis de contido
Offcanvas para mostrar, posicionar e desprazar o comportamento
Scrollspy para o comportamento do desprazamento e as actualizacións de navegación
Brindis por mostrar e despedir
Suxestións sobre ferramentas e popovers para mostrar e posicionar (tamén require Popper )

Importantes globais

Bootstrap emprega un puñado de estilos e configuracións globais importantes, 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 e incompleto.

<!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 inicio rápido .

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 .
Pregunta e explora as nosas discusións de GitHub .
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.