Ir ao contido principal Ir á navegación de documentos
Check
in English

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.

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 .


  1. 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>
    
  2. 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>
    
  3. 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 .

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

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.