Introducción a Bootstrap 5

Recomendaciones de cursos:

  • ¿Qué es Bootstrap?
  • Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, tablas, navegación, modales, carruseles de imágenes, entre otros
  • Bootstrap ofrece una amplia gama de plugins de JavaScript
  • Bootstrap le permite crear diseños responsivos de manera sencilla

¿Qué es el diseño web responsivo?

El diseño web responsivo tiene como objetivo crear sitios web que se ajusten automáticamente para mejorar la experiencia de uso en todos los dispositivos, ya sean teléfonos o grandes computadoras de escritorio.

Ejemplo de Bootstrap 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Mi primera página Bootstrap</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Columna 1: Primavera</h3>
      <p>En un día soleado busco flores en las orillas del río Si, las vistas ilimitadas son nuevas en un momento.</p>
      <p>Con facilidad reconozco la cara del viento del este, siempre es primavera con miles de colores.</p>
    </div>
    <div class="col-sm-4">
      <h3>Columna 2: Cuatro Versos de la Primavera</h3>
      <p>Las flores rojas y púrpuras se han convertido en polvo, la primavera nueva en el sonido de la cucaracha.</p>
      <p>Camino entre sauces y lino sin fin, al principio no sabía que era un hombre de paz.</p>
    </div>
    <div class="col-sm-4">
      <h3>Columna 3: Camino en la Montaña</h3>
      <p>Subir por el sendero empinado de la montaña fría, nubes blancas donde hay casas.</p>
      <p>Parar y disfrutar de la tarde en el bosque de hojas de maple, las hojas de escarcha son más rojas que las flores de febrero.</p>
    </div>
  </div>
</div>

Prueba por ti mismo

Versiones de Bootstrap

Bootstrap 5 (lanzada en 2021) es la última versión de Bootstrap (lanzada en 2013); utiliza nuevos componentes, hojas de estilo más rápidas, y ofrece una capacidad de respuesta más rápida.

Bootstrap 5 admite las últimas versiones estables de todos los principales navegadores y plataformas. Sin embargo, no es compatible con Internet Explorer 11 y versiones anteriores.

La principal diferencia entre Bootstrap 5 y Bootstrap 3 & 4 es que Bootstrap 5 ha pasado a usar Vanilla JavaScript en lugar de jQuery.

Notas:Su equipo aún apoya las correcciones de errores críticas y cambios en la documentación de Bootstrap 3 y Bootstrap 4, por lo que seguir usándolos es completamente seguro. Pero no se agregarán nuevas características.

¿Por qué usar Bootstrap?

Ventajas de Bootstrap:

  • Facilidad de uso:Cualquiera que tenga un conocimiento básico de HTML y CSS puede comenzar a usar Bootstrap de inmediato.
  • Características responsive:El CSS responsive de Bootstrap se puede ajustar para teléfonos, tabletas y computadoras de escritorio.
  • Método de prioridad móvil:En Bootstrap, el estilo de prioridad móvil es parte integral de su framework.
  • Compatibilidad del navegador:Bootstrap 5 es compatible con todos los navegadores modernos (Chrome, Firefox, Edge, Safari y Opera).

Atención:Si necesita soporte para IE11 y versiones anteriores, debe usar BS4 o BS3.

¿Dónde obtener Bootstrap 5?

Hay dos métodos para usar Bootstrap 5 en su propio sitio web.

Usted puede:

  • 包含来自 CDN 的 Bootstrap 5
  • 从 getbootstrap.com 下载 Bootstrap 5

Bootstrap 5 CDN

如果不想自己下载并托管 Bootstrap 5，则可以从 CDN（内容交付网络）中引用它。

CodeW3C.com 为 Bootstrap 的 CSS 和 JavaScript 提供了 CDN 支持：

MaxCDN:

<!-- 最新编译并压缩的 CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- 最新编译的 JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

使用 Bootstrap 5 CDN 的优势之一：

许多用户在访问另一个站点时已经从 jsDelivr 下载了 Bootstrap 5。因此，当他们访问您的网站时，它将从缓存中加载，从而缩短加载时间。此外，大多数 CDN 将确保一旦用户从中请求文件，它将从最接近他们的服务器提供服务，这也导致更快的加载时间。

JavaScript？

Bootstrap 5 将 JavaScript 用于不同的组件（如模态、工具提示、弹出框等）。但是，如果您只使用 Bootstrap 的 CSS 部分，那就不需要它们。

下载 Bootstrap 5

如果您想自己下载并托管 Bootstrap 5，请访问 https://getbootstrap.com/，然后按照那里的说明进行操作。

使用 Bootstrap 5 创建您的第一张网页

1. 添加 HTML5 文档类型

Bootstrap 5 使用的是需要 HTML5 doctype 的 HTML 元素和 CSS 属性。

请始终在页面开头包含 HTML5 doctype，以及 lang 属性和正确的标题、字符集：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 实例</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 移动优先

Bootstrap 5 的设计目标是响应移动设备。移动优先的样式是核心框架的一部分。

为确保正确的渲染和触摸缩放，请在 <head> 元素内添加以下 <meta> 标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 设置了页面的宽度以跟随设备的 screen-width（将因设备而异）。

initial-scale=1 设置了浏览器首次加载页面时的初始缩放级别。

3. 容器

Bootstrap 5 还需要一个包含元素来包装站点内容。

Hay dos clases de contenedor disponibles para elegir:

  1. .container La clase proporciona un contenedor de ancho fijo responsivo
  2. .container-fluid La clase proporciona un contenedor de ancho completo, que abarca toda la anchura de la ventana de visualización

Dos páginas básicas de Bootstrap 5

Ejemplo de contenedor

El siguiente ejemplo muestra el código de una página básica de Bootstrap 5 (con contenedor de ancho fijo responsivo):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo de Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Mi primera página Bootstrap</h1>
  <p>Esta sección se encuentra dentro de la clase .container.</p>
  <p>La clase .container proporciona un contenedor de ancho fijo responsivo.</p>
</div>
</body>
</html>

Prueba por ti mismo

Ejemplo de contenedor fluido

El siguiente ejemplo muestra el código de una página básica de Bootstrap 5 (con contenedor de ancho completo):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo de Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Mi primera página Bootstrap</h1>
  <p>Esta sección se encuentra dentro de la clase .container-fluid.</p>
  <p>La clase .container-fluid proporciona un contenedor de ancho completo, que abarca toda la anchura de la ventana de visualización.</p>
</div>
</body>
</html>

Prueba por ti mismo