Bootstrap 5 Introducción

Bootstrap es una colección gratuita y de código abierto de código CSS y JavaScript/jQuery que se utiliza para crear diseños de sitios web dinámicos y aplicaciones web. Bootstrap es uno de los marcos front-end más populares que tiene realmente un buen conjunto de códigos CSS predefinidos. Bootstrap utiliza diferentes tipos de clases para crear sitios web receptivos. Bootstrap 5 se lanzó oficialmente el 16 de junio de 2020 después de varios meses de redefinir sus funciones.

Algunos cambios importantes en Bootstrap 5: 

1. Documentación oficial actualizada: la página de inicio de documentos de v4.5.0 tiene un aspecto actualizado y también hay algunas mejoras en el resto de los documentos oficiales. Los documentos de Bootstrap tienen un buen relleno alrededor de las esquinas para que sea más legible y resalte su contenido.

2. jQuery se elimina por completo: anteriormente, los componentes de arranque como modales, información sobre herramientas, popovers, etc., dependían de jQuery y popper.js . Después del lanzamiento de la versión alpha 5 , Bootstrap ya no depende de jQuery. Si bien jQuery se ha utilizado en Bootstrap durante más de 8 años, muchos desarrolladores tuvieron el problema de que jQuery les brindaba acceso desigual a comportamientos complejos de JavaScript. Todo el proceso fue posible gracias a su mantenedor de JavaScript https://github.com/johann-s

3. Cambie a Vanilla JavaScript: JavaScript es el lenguaje de programación de la web. La mayoría de los sitios web modernos funcionan con JavaScript y todos los navegadores web modernos en teléfonos, tabletas, consolas y computadoras de escritorio incluyen intérpretes de JavaScript. Una de las principales razones para abandonar jQuery fue redefinir el marco completamente en los estándares modernos de JavaScript.

4. Se eliminó la compatibilidad con Internet Explorer 10 y 11: Internet Explorer fue lanzado en 1995 por Microsoft. A partir de hoy, Internet Explorer ya no es relevante con navegadores populares como Chrome, Firefox y Microsoft Edge, que se basa en cromo. Cuando Bootstrap decidió refinar su marco únicamente en Vanilla JavaScript , abandonaron el soporte de IE, que no es compatible con los estándares modernos de JavaScript.

5. Fuentes receptivas: Bootstrap ha introducido tamaños de fuente receptivos que cambiarán automáticamente el tamaño del elemento tipográfico de acuerdo con el tamaño de la ventana gráfica a través del motor RFS. El motor RFS fue desarrollado para cambiar el tamaño de las fuentes. Brinda la posibilidad de cambiar el tamaño de las propiedades CSS como «margen», «relleno», «border-radius», «box-shadow» por unidades.

6. Tarjetas eliminadas: el nuevo sistema de cuadrícula de Bootstrap brinda un control más receptivo del diseño. Por lo tanto, eliminaron las clases adicionales innecesarias que pueden diseñarse con el nuevo diseño de cuadrícula. Las versiones anteriores de Bootstrap aún admiten el sistema de tarjetas.

Ejemplo:

<div class="card-deck">
    <div class="card">
        <img class="card-img-top" src="..."
            alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Sample Card text</p>
 
            <p class="card-text">
                <small class="text-muted">
                    Sample paragraph
                </small>
            </p>
 
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="..."
            alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Sample Card text</p>
 
            <p class="card-text">
                <small class="text-muted">
                    Sample paragraph
                </small>
            </p>
 
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="..."
            alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Sample Card text</p>
 
            <p class="card-text">
                <small class="text-muted">
                    Sample paragraph
                </small>
            </p>
 
        </div>
    </div>
</div>

7. Formularios actualizados: Bootstrap 5 ha introducido una sección completamente dedicada a los formularios de Bootstrap con documentación y componentes mejorados. Ahora tiene un conjunto único de controles de formulario y rediseña los elementos existentes en lugar de generar nuevos elementos a través de pseudoelementos. Los formularios Bootstrap dan una mejor apariencia ahora.

<div class="form-check">
  <input class="form-check-input"
    type="checkbox" value=""
    id="flexCheckDefault">
  <label class="form-check-label"
    for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input"
    type="radio" name="flexRadioDefault"
    id="flexRadioDefault1">
  <label class="form-check-label"
    for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input"
    type="checkbox"
    id="flexSwitchCheckDefault">
  <label class="form-check-label"
    for="flexSwitchCheckDefault">
    Default switch checkbox input
  </label>
</div>

Producción:

8. Nueva biblioteca de iconos y SVG: Bootstrap 3 había introducido 250 componentes de iconos reutilizables llamados «Glyphicons» que se crearon para ofrecer iconos para alertas , menús desplegables , campos de entrada , etc. Bootstrap 4 eliminó por completo los glyphicons ya que la mayoría de los diseñadores usaban iconos de sitios web como Fontawesome, icons8 , etc. De lo contrario, usan sus propios íconos SVG creados para mejorar la personalización. Bootstrap 5 ha lanzado una nueva biblioteca de iconos SVG que fue realizada por el cofundador de Bootstrap Mark Otto. 

Para obtener más información, consulte este enlace: Obtener Bootstrap