Podemos instalar Bootstrap4 de las siguientes dos formas:
- Utilice Bootstrap 4 CDN.
- Descarga Bootstrap 4 del sitio web oficial.
Bootstrap 4 CDN
Se recomienda utilizar la biblioteca en Staticfile CDN en China:
Nota: popper.min.js se usa para configurar ventanas emergentes, avisos y menús desplegables. Actualmente, bootstrap.bundle.min.js ya incluye popper.min.js.
Descarga Bootstrap 4
Puede ir al sitio web oficial https://getbootstrap.com/ para descargar la biblioteca de recursos Bootstrap4.
Nota: Además, también puede instalarlo mediante las herramientas de administración de paquetes npm, gem, composer, etc .:
Crea la primera página de Bootstrap 4
1. Agregue el tipo de documento HTML5
Bootstrap requiere el tipo de archivo HTML5, por lo que debe agregar la declaración de tipo de documento HTML5.
El tipo de documento HTML5 se declara en el encabezado del documento y se establece la codificación correspondiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>Móvil primero
Para que el sitio web desarrollado por Bootstrap sea compatible con dispositivos móviles y garantice el dibujo y el zoom de la pantalla táctil adecuados, debe agregar la metaetiqueta de la ventana gráfica en el encabezado de la página web, como se muestra a continuación:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">width=device-width Indica que el ancho es el ancho de la pantalla del dispositivo.
initial-scale=1 Indica la relación de zoom inicial.
encoger para ajustar = no se adapta automáticamente al ancho de la pantalla del teléfono.
Clase de contenedor
Bootstrap 4 requiere un elemento contenedor para envolver el contenido del sitio web.
Podemos utilizar las siguientes dos clases de contenedores:
- La clase .container se usa para contenedores con ancho fijo y diseño receptivo.
- La clase .container-fluid se usa para contenedores que son 100% anchos y ocupan toda la ventana gráfica.
