Bootstrap5 Tutorial

Bootstrap 教程

Bootstrap es la biblioteca de componentes front-end más popular del mundo, utilizada para desarrollar proyectos WEB con diseño receptivo y prioridad móvil.

Bootstrap5 es actualmente la última versión de Bootstrap, un conjunto de herramientas de código abierto para el desarrollo de HTML, CSS y JS. Admite variables y mixins de Sass, sistema de cuadrícula receptivo, numerosos componentes preconstruidos y potentes complementos de JavaScript, lo que te ayuda a diseñar y personalizar rápidamente sitios receptivos y con prioridad móvil.

¿Quién debería leer este tutorial?

Con solo tener conocimientos básicos de HTML y CSS, puedes leer este tutorial y desarrollar tu propio sitio web. Después de completar este tutorial, alcanzarás un nivel intermedio en el desarrollo de proyectos web con Bootstrap.

Conocimientos que necesitas antes de leer este tutorial:

Antes de comenzar a leer este tutorial, debes tener conocimientos básicos de HTML, CSS y JavaScript. Si aún no conoces estos conceptos, te recomendamos leer primero estos tutoriales:

¿Por qué usar Bootstrap?

  • Fácil de usar:Cualquier persona con conocimientos básicos de HTML y CSS puede usar Bootstrap rápidamente.

  • Diseño receptivo:Bootstrap se puede adaptar a diferentes plataformas (móviles, tabletas y computadoras de escritorio).

  • Prioridad móvil:En Bootstrap, la adaptación a dispositivos móviles es una parte central del marco.

  • Compatibilidad con navegadores:Bootstrap5 es compatible con todos los navegadores principales (Chrome, Firefox, Edge, Safari y Opera). Si necesitas soporte para IE11 y versiones anteriores, usa Bootstrap4 o Bootstrap3.

Ejemplo de Bootstrap5

A continuación se muestra un ejemplo sencillo de Bootstrap5:

Ejemplo de Bootstrap5

<div class="container-fluid p-5 bg-primary text-white text-center"> <h1>Mi primera página de Bootstrap</h1> <p>¡Esta es una página receptiva, cambia el tamaño del navegador para ver el efecto!</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>Primera columna</h3> <p>Ejemplo</p> <p>¡No solo se aprende tecnología, sino también sueños!</p> </div> <div class="col-sm-4"> <h3>Segunda columna</h3> <p>Ejemplo</p> <p>¡No solo se aprende tecnología, sino también sueños!</p> </div> <div class="col-sm-4"> <h3>Tercera columna</h3> <p>Ejemplo</p> <p>¡No solo se aprende tecnología, sino también sueños!</p> </div> </div> </div>

¡Pruébalo »

Bootstrap5 vs Bootstrap 3 & 4

Bootstrap5 es la última versión de Bootstrap, utiliza nuevos componentes, hojas de estilo más rápidas y tiene una capacidad de respuesta más rápida.

Bootstrap5 es compatible con todas las versiones estables más recientes de los principales navegadores, pero no es compatible con Internet Explorer 11 ni versiones anteriores.

La principal diferencia entre Bootstrap5 y Bootstrap 3 & 4 es que Bootstrap5 ya no depende de jQuery, utiliza JavaScript nativo.JavaScript, por supuesto, si queremos usarlo también podemos introducirlo.jQuery。

Bootstrap5 no es compatible con navegadores de versiones inferiores a IE11; Bootstrap4 abandonó el soporte para IE8 e iOS 6. Si necesitas compatibilidad con navegadores de versiones antiguas, entonces usaBootstrap3。

Nota:Actualmente, el equipo oficial todavía mantiene Bootstrap 3 y Bootstrap 4, podemos seguir usándolos, pero no se agregarán nuevas funciones a Bootstrap 3 & 4.

Otras extensiones