Formas simples de instalar Bootstrap: 10 pasos (con imágenes)

Tabla de contenido:

Formas simples de instalar Bootstrap: 10 pasos (con imágenes)
Formas simples de instalar Bootstrap: 10 pasos (con imágenes)

Video: Formas simples de instalar Bootstrap: 10 pasos (con imágenes)

Video: Formas simples de instalar Bootstrap: 10 pasos (con imágenes)
Video: Cómo Guardar los Vídeos de Tik Tok en mi Galería 2024, Mayo
Anonim

Este wikiHow te enseñará cómo descargar los archivos Bootstrap a tu computadora y vincularlos a tus textos HTML para usar elementos Bootstrap en tu código. Una vez que descargue y vincule los archivos Bootstrap, puede comenzar a usar todas las hojas de estilo y elementos JavaScript de Bootstrap en su diseño web.

Pasos

Instalar Bootstrap Paso 1
Instalar Bootstrap Paso 1

Paso 1. Abra el sitio web Bootstrap en su navegador de Internet

Escribe https://getbootstrap.com en la barra de direcciones y presiona ↵ Enter o ⏎ Return en tu teclado.

Instalar Bootstrap Paso 2
Instalar Bootstrap Paso 2

Paso 2. Haga clic en el botón Descargar

Esto abrirá la página "Descargar".

Instalar Bootstrap Paso 3
Instalar Bootstrap Paso 3

Paso 3. Haga clic en el botón Descargar debajo de "CSS y JS compilados

" Esto descargará los archivos Bootstrap completos a su computadora como un archivo ZIP.

Si se le solicita, seleccione una ubicación para guardar el ZIP de Bootstrap

Instalar Bootstrap Paso 4
Instalar Bootstrap Paso 4

Paso 4. Extraiga los archivos del archivo ZIP

Busque el archivo ZIP que acaba de descargar y haga doble clic en él para extraer todos los archivos en la misma carpeta.

  • Esto extraerá dos carpetas llamadas " css" y " js."
  • Si su aplicación de descompresión no extrae automáticamente los archivos, consulte este artículo para ver todas las formas en que puede exportar un archivo ZIP.
Instalar Bootstrap Paso 5
Instalar Bootstrap Paso 5

Paso 5. Mueva las carpetas extraídas a la misma carpeta que los archivos HTML de su sitio web

Abra la carpeta que contiene todos los archivos HTML de su sitio web y arrastre el " css" y " js"carpetas aquí para moverlas a la misma carpeta que los documentos de su sitio web.

Ahora puede vincular los archivos a sus archivos HTML y comenzar a usar Bootstrap en su código

Instalar Bootstrap Paso 6
Instalar Bootstrap Paso 6

Paso 6. Haga clic con el botón derecho en el archivo HTML que desea usar con Bootstrap

Puede usar Bootstrap en solo uno de sus archivos HTML, o en todos ellos.

Instalar Bootstrap Paso 7
Instalar Bootstrap Paso 7

Paso 7. Desplácese sobre Abrir con en el menú contextual

Aparecerá un submenú con aplicaciones compatibles.

Instalar Bootstrap Paso 8
Instalar Bootstrap Paso 8

Paso 8. Seleccione su programa de edición de texto

Esto abrirá el archivo HTML seleccionado en su editor de texto.

Puede utilizar un editor de texto simple como Bloc o TextEdit así como un editor de código dedicado como Átomo (https://atom.io) o Coda (https://panic.com/coda).

Instalar Bootstrap Paso 9
Instalar Bootstrap Paso 9

Paso 9. Agregue los enlaces de Bootstrap al encabezado de su archivo HTML

Antes de usar el código Bootstrap en su HTML, tendrá que escribir o pegar las líneas a continuación en el encabezado de su código:

Si desea vincular y usar algunos de los otros archivos de las carpetas css y js, simplemente agregue nuevas líneas en el encabezado y reemplace las partes css / bootstrap.css y js / bootstrap.js con los nombres de los archivos que desea para vincular

Instalar Bootstrap Paso 10
Instalar Bootstrap Paso 10

Paso 10. Verifique la ubicación de sus enlaces Bootstrap en el código

En el encabezado del HTML, ambas líneas deben ubicarse entre las líneas y la línea.

  • Una vez que agregue estas líneas al encabezado, puede comenzar a usar elementos Bootstrap en este archivo HTML.
  • Puede encontrar una lista completa de todos los elementos de Bootstrap en https://getbootstrap.com/docs/4.3/getting-started/introduction. Simplemente haga clic en cualquier categoría como Diseño o Componentes en el menú de la izquierda.
  • Una vez que instale Bootstrap, puede insertar o copiar / pegar cualquier fragmento de código desde aquí en su propio código.

Recomendado: