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 .
-
Crea un
index.html
ficheiro 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-sizing
valor global de content-box
a border-box
. Isto garante padding
que 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 ::before
e, ::after
herdarán todos o especificado box-sizing
para 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.chat
servidor, na#bootstrap
canle. - A axuda para a implementación pódese atopar en Stack Overflow (etiquetado
bootstrap-5
). - Os desenvolvedores deben usar a palabra clave
bootstrap
en 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.