Share
El 19th de agosto de 2015, Bootstrap 4 alpha se lanzó al público, exactamente cuatro años después de su primer anuncio oficial de Bootstrap v1 (¿qué coincidencia, verdad?).
¡Woohoo! Twitter Bootstrap, un framework CSS / HTML de código abierto para mí y para @fat, acaba de publicarse: http://t.co/3OOsQ5T #kaboom
- Mark Otto (@mdo) 19 de agosto de 2011
El siempre popular front-end framework ha tenido un cambio de imagen completo y, como gran fan de Bootstrap, estoy bastante emocionado de tener en mis manos algunas de las nuevas características.!
La página de inicio de BootstrapHabiendo pasado alrededor de un año de desarrollo, se cambiaron 1,100 y 120,000 líneas de código; Hay un montón de cambios y nuevas características que podemos babear. Para ahorrarle todos los problemas de rastrear el registro de cambios, he compilado una lista de características que me parecieron interesantes..
Comencemos donde comienza cada framework, el módulo de reinicio. El nuevo módulo de reinicio de Bootstrap se basa en el tradicional normalize.css y ahora mueve todos los selectores de elementos genéricos y restablece los estilos en un solo archivo scss accesible.
También notarás un truco ingenioso, configurando el tradicional tamaño de caja: cuadro de borde al html Elemento, luego globalmente a todos los elementos a través de la herencia:
html box-sizing: border-box; *, *: before, *: after box-sizing: inherit;
Esto nos permite anular mejor la configuración (si es necesario) sin aumentar la especificidad o usar !importante.
El crédito es para Jon Neal por la idea original y CSS-Tricks para la descripción en profundidad de este método..
En un movimiento para ayudar a simplificar el CSS, Bootstrap v4 alpha abandonó el soporte de IE8 y una gran cantidad de piratería de CSS3. Al admitir IE9 +, ha sido capaz de abarcar algunos módulos CSS muy queridos. Uno de ellos es la unidad rem (root em), que calcula el tamaño de la fuente en relación con el elemento raíz (html).
Llevando más lejos las unidades rem, podemos comenzar a profundizar en la tipografía sensible. Como todo el tamaño de la fuente se basa en nuestro elemento raíz, podemos crear consultas de medios para modificar tamaños en diferentes puntos de ruptura. Combine esto con los nuevos mixins de punto de interrupción de la red y listo.!
Un ejemplo de cambio de tamaño de fuente en nuestro sitio web cuando se ve en dispositivos pequeños adicionales:
html font-size: 16px; // Crea una consulta de medios para dispositivos extra pequeños (0 - 34em) @include media-breakpoint-up (xs) html font-size: 18px;
Lea más en la Guía completa de Kezz Bracey: cuándo usar Em en lugar de Rem.
Fuera de la caja, Bootstrap v4 no admite Flexbox, en su lugar utiliza métodos de tabla flotante o de visualización más tradicionales. Sin embargo, la falta de integración estándar de Flexbox ayuda al soporte de IE9 +, si está dispuesto a renunciar a este soporte y subirlo a IE10 +, puede habilitar Flexbox en su proyecto. Esto se hace cambiando la variable booleana dentro del archivo _variables.scss; su css compilado ahora incluirá estilos Flexbox. Flexbox se usa no solo en la cuadrícula, sino también en otros elementos, como el nuevo componente de la tarjeta, los grupos de entrada y los componentes de medios..
Repasemos un ejemplo de donde Flexbox nos ayuda. Muy a menudo tendré un conjunto de columnas en línea (como se muestra en la imagen a continuación) donde el contenido en una de las columnas extenderá la altura más allá de las otras columnas. Un clásico dilema de CSS. Una de las muchas ventajas de habilitar Flexbox es que podemos forzar que las alturas de las columnas sean iguales. No se requiere CSS adicional!
Sin flexbox
Con flexboxOh, btw-Bootstrap 4 estará en SCSS. Y si te importa, v5 probablemente estará en PostCSS porque es una mierda que suena bien.
- Mark Otto (@mdo) 23 de abril de 2015
SCSS ha usurpado LESS como el preprocesador de CSS elegido para Bootstrap v4. La base de código CSS completa se ha refactorizado como SCSS, sin puerto LESS oficial en el momento de la escritura. Mark explicó algunos de sus razonamientos en un tweet:
Si quieres razones: más gente usa SCSS, libsass es increíblemente rápido, la sintaxis es explícitamente más clara, y soy perezoso y uso SCSS en GitHub.
- Mark Otto (@mdo) 23 de abril de 2015
Si eres un gran fan de la compilación LESS original, Mark ha pedido ayuda para crear y mantener el puerto LESS..
Bootstrap v4 ha limpiado sus componentes con la eliminación del clásico bien, panel y miniatura componentes En su lugar un nuevo componente: las tarjetas.!
El nuevo componente de la tarjeta tiene los aspectos familiares de los paneles, como títulos, encabezados y pies de página, y los enrolla en un contenedor de contenido limpio y flexible..
Y hay más:
Puede establecer un fondo de tarjeta con una imagen y superponer el texto de la tarjeta y otros contenidos. Esto se hace sin ningún CSS adicional agregando el siguiente elemento dentro de su tarjeta:
Añadiendo la clase tarjeta inversa establecerá el color de fuente en blanco, lo que le permitirá establecer un fondo más oscuro si lo desea.
Hablando de fondos, las variantes de color tradicionales también se pueden aplicar a la tarjeta y decorar el fondo en consecuencia. Por ejemplo, tarjeta-primaria establecerá la tarjeta en el color primario, y así sucesivamente.
Además de la cuadrícula estándar con canales, también encontrará la opción de agrupar las tarjetas, eliminar el espacio intermedio y luego establecer cada columna a una altura uniforme. Por defecto esto se logra mediante el uso de pantalla: mesa y diseño de la mesa: fijo, Sin embargo, si tiene habilitado Flexbox, utilizará pantalla: flex en lugar.
El componente de la tarjeta también viene con una configuración de columna similar a la mampostería que permite que las tarjetas se apilen juntas en función del espacio vertical disponible. Esta opcion es no es compatible con IE9-requiere IE10 y más!
Las versiones anteriores de Bootstrap han incluido varias clases llamadas "clases de utilidad" para permitir un ajuste rápido y fácil del contenido fuera de los estilos específicos de los componentes. Por lo general, esto se ha restringido a algunos cambios bastante básicos, como la flotación (tirar a la izquierda, tirar a la derecha), color (.texto-primario etc), clearfix (.clearfix) y algunos otros.
En Bootstrap v4 alpha, tenemos acceso a toda una serie de nuevas clases de utilidades en torno al relleno y los márgenes. Este movimiento posiblemente controvertido permitirá a los usuarios de Bootstrap v4 empujar y alinear rápidamente el contenido en incrementos uniformes. Algunos usuarios pueden sentir que las clases de utilidad están a un paso de los estilos en línea, sin embargo, ofrecen la capacidad de diseñar un componente de forma rápida y uniforme sin crear un selector específico para hacerlo.
Las clases de utilidad de margen y relleno se crean en múltiplos de un valor de espaciador uniforme. por ejemplo:
// $ spacer es una variable sass que es igual a 1rem o 16px .m-a-0 margin: 0! important; .m-a margen: $ espaciador! importante; .m-a-md margen: ($ spacer * 1.5)! important; .m-a-lg margen: ($ espaciador * 3)! importante;
aquí .mamá representa metroargin en unall lados. Hay clases para lados individuales, ejes, diferentes tamaños (como se denota por -0, -Maryland y -lg) y para el relleno.
Aquí hay un vistazo a algunas de las otras clases:
// Aplique el relleno estándar en todos los lados .p-a padding: $ spacer! Important; // Aplica el relleno estándar en la parte superior .p-t padding-top: $ spacer-y! Important; // Aplica el relleno estándar a la derecha .p-r padding-right: $ spacer-x! Important; // Aplique el relleno estándar en la parte inferior .p-b padding-bottom: $ spacer-y! Important; // Aplicar el relleno estándar a la izquierda .p-l padding-left: $ spacer-x! Important; // Aplicar el relleno estándar al eje x (derecho e izquierdo) .p-x padding-right: $ spacer-x! Important; padding-left: $ spacer-x! important; // Aplicar el relleno estándar en el eje y (arriba y abajo) .p-y padding-top: $ spacer-y! Important; relleno de fondo: $ espaciador-y! importante;
La idea aquí es reducir la cantidad de clases personalizadas altamente específicas creadas para empujar el contenido, en lugar de convertirlas en un método uniforme y consistente de alineación del contenido.
Tuve un chat con Mark Otto (@mdo co-creador de Bootstrap) en su canal público de Slack y discutí el uso de estas clases, dijo:
“Nos encontramos necesitándolos y, a menudo, anulando los valores predeterminados para muchos componentes. El margen y el relleno parecen ser las propiedades más comúnmente anuladas (junto con el color y la fuente). "- Mark Otto
Hay literalmente cientos de nuevas características y actualizaciones de la base de código existente, demasiadas para analizarlas en detalle. Así que aquí hay un par más que no formaron parte de mi lista principal, pero vale la pena mencionarlas..
La documentación de Bootstrap v4 ha tenido una actualización. Hay una estructura ligeramente diferente en la que las características se dividen en diseño, contenido y componentes. Lo que más me gusta de la nueva documentación es que cada componente tiene su propia página, lo que facilita el enlace y el redimensionamiento de la página para probar la capacidad de respuesta..
Bootstrap 4 tiene un nuevo nivel de cuadrícula para apuntar a dispositivos más pequeños (con un ancho de 480px), este punto de ruptura ha tomado el nombre de la clase más pequeña anterior (.col-xs-XX). Al hacerlo, todos los niveles de cuadrícula se han movido hacia arriba una muesca, creando así un nuevo nivel más grande llamado .col-xl-XX para el anterior lg.
Como se mencionó en la conversión a rem y em, el equipo de Bootstrap ha agregado nuevos mixins para crear rápidamente puntos de interrupción alrededor de los puntos de interrupción existentes. Se pueden utilizar con la siguiente sintaxis:
// Crea una consulta de medios: @media (min-width) @include media-breakpoint-up (xs) … @include media-breakpoint-up (sm) … @include media-breakpoint-up (md) … @Include media-breakpoint-up (lg) … @include media-breakpoint-up (xl) … // Crea una consulta de medios: @media (max-width) @include media-breakpoint-down (xs) … @include media-breakpoint-down (sm) … @include media-breakpoint-down (md) … @include media-breakpoint-down (lg) … @include media-breakpoint -down (xl) …
Los glifos se han eliminado de la construcción; La documentación de Bootstrap 4 eventualmente incluirá instrucciones sobre cómo incluir paquetes de íconos de terceros, como Font Awesome y Octicons.
Todos los complementos de JavaScript se han reescrito en ES6 para aprovechar las últimas especificaciones. Es posible que note que se eliminan algunos complementos (como el complemento de afijos) a medida que continúan reescribiendo y construyendo la nueva biblioteca..
Así que esa es mi lista de algunas de las nuevas características geniales agregadas en Bootstrap 4 alpha. Si desea revisar todo el registro de cambios hasta el momento, eche un vistazo a la solicitud de extracción de git de @ mdo para Bootstrap 4.
Estoy seguro de que habrá una gran cantidad de cambios para que el equipo resuelva todos los problemas. Su plan de desarrollo incluye los siguientes hitos.
No hay información sobre cuándo se publicarán, al igual que en las versiones anteriores a las que estará disponible cuando la biblioteca esté lista. Mientras tanto, obtenga un programa de arranque y ayúdeles a realizar un seguimiento de los problemas y proporcionar comentarios generales a través de su rastreador de errores!
Accentsconagua
