Cómo instalar Bootstrap

Este wikiHow te enseñará cómo descargar los archivos de Bootstrap en la computadora, y enlazarlos a los textos HTML para usar elementos Bootstrap en el código. Cuando descargues y enlaces los archivos Bootstrap, podrás comenzar a usar todas las plantillas y los elementos JavaScript de Bootstrap en tu diseño web.

Pasos

Descargar el PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6f\/Install-Bootstrap-Step-1.jpg\/v4-460px-Install-Bootstrap-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6f\/Install-Bootstrap-Step-1.jpg\/v4-728px-Install-Bootstrap-Step-1.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Escribe https://getbootstrap.com en la barra de direcciones, y presiona Intro o Volver en el teclado.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/Install-Bootstrap-Step-2.jpg\/v4-460px-Install-Bootstrap-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/Install-Bootstrap-Step-2.jpg\/v4-728px-Install-Bootstrap-Step-2.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Se abrirá la página de "Download".
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/Install-Bootstrap-Step-3.jpg\/v4-460px-Install-Bootstrap-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Install-Bootstrap-Step-3.jpg\/v4-728px-Install-Bootstrap-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Haz clic en el botón Download debajo de "Compiled CSS and JS" ("CSS y JS compilados"). Esto descargará en la computadora todos los archivos de Bootstrap como un archivo ZIP.
- En caso de que se te pida, selecciona una ubicación de guardado para el ZIP de Bootstrap.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/75\/Install-Bootstrap-Step-4.jpg\/v4-460px-Install-Bootstrap-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/75\/Install-Bootstrap-Step-4.jpg\/v4-728px-Install-Bootstrap-Step-4.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Extrae los archivos del archivo ZIP. Busca el archivo ZIP que acabes de descargar, y haz doble clic en él para extraer todos los archivos que haya en él en la misma carpeta.
- Esto extraerá dos carpetas llamadas " css " and " js .
- Si la aplicación para descomprimir no extrae automáticamente los archivos, echa un vistazo a este artículo para aprender todas las formas en las que podrás exportar un archivo ZIP.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ae\/Install-Bootstrap-Step-5.jpg\/v4-460px-Install-Bootstrap-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ae\/Install-Bootstrap-Step-5.jpg\/v4-728px-Install-Bootstrap-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
Mueve las carpetas que hayas extraído a la misma carpeta donde se encuentren los archivos HTML de la página web. Abre la carpeta que contenga todos los archivos HTML de la página web, y arrastra aquí las carpetas " css " y " js " para moverlas a la misma carpeta que contenga los documentos de la página web.
- Ahora podrás enlazar los archivos a los archivos HTML, y comenzar a usar Bootstrap en el código.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/da\/Install-Bootstrap-Step-6.jpg\/v4-460px-Install-Bootstrap-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/da\/Install-Bootstrap-Step-6.jpg\/v4-728px-Install-Bootstrap-Step-6.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Podrás usar Bootstrap en un solo archivo de los archivos HTML, o en todos ellos.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/Install-Bootstrap-Step-7.jpg\/v4-460px-Install-Bootstrap-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/Install-Bootstrap-Step-7.jpg\/v4-728px-Install-Bootstrap-Step-7.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Aparecerá un submenú con las aplicaciones compatibles.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ab\/Install-Bootstrap-Step-8.jpg\/v4-460px-Install-Bootstrap-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ab\/Install-Bootstrap-Step-8.jpg\/v4-728px-Install-Bootstrap-Step-8.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
Selecciona un programa de edición de texto. Esto abrirá el archivo HTML que hayas seleccionado en el editor de texto.
- Podrás usar un editor de texto sencillo como Bloc de notas o TextEdit , así como un editor de código destinado a ello como Atom ( https://atom.io ) o Coda ( https://panic.com/coda ).
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c4\/Install-Bootstrap-Step-9.jpg\/v4-460px-Install-Bootstrap-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c4\/Install-Bootstrap-Step-9.jpg\/v4-728px-Install-Bootstrap-Step-9.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

9
Añade los enlaces Bootstrap al encabezado del archivo HTML. Antes de usar el código Bootstrap en el HTML, tendrás que escribir o pegar estas líneas debajo del encabezado del código:
- <link rel="stylesheet" a href="css/bootstrap.css"/>
- <script src="js/bootstrap.js/>
- En caso de que quieras enlazar y usar algunos de los otros archivos de las carpetas "css" y "js", simplemente añade líneas nuevas al encabezado, y cambia las partes de css/bootstrap.css y js/bootstrap.js con los nombres de los archivos que quieras enlazar.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/46\/Install-Bootstrap-Step-10.jpg\/v4-460px-Install-Bootstrap-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/46\/Install-Bootstrap-Step-10.jpg\/v4-728px-Install-Bootstrap-Step-10.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

10
Comprueba la ubicación de los enlaces de Bootstrap en el código. En el encabezado HTML, ambas líneas deberán encontrarse entre las líneas <meta> y <title> .
- Cuando añadas estas líneas al encabezado, podrás comenzar a usar elementos Bootstrap en este archivo HTML.
- Encontrarás una lista completa con todos los elementos Bootstrap en https://getbootstrap.com/docs/4.3/getting-started/introduction . Simplemente haz clic en cualquier categoría como Layout ("Diseño") o Components ("Componentes") en el menú izquierdo.
- Después de instalar Bootstrap, podrás insertar, o copiar y pegar cualquier parte del código desde aquí a tu propio código.
Anuncio

Iniciar sesión

Cómo instalar Bootstrap

Pasos

wikiHows relacionados

Acerca de este wikiHow

¿Te ayudó este artículo?

Artículos relacionados

¡Suscríbete al boletín gratuito de wikiHow!

Síguenos

Compartir

Explore Categories