Introducción a Bootstrap 4 Cheatsheet
La hoja de trucos de Bootstrap 4 ha incorporado una revisión importante de Bootstrap 3. Se han producido muchos cambios en la mayoría de los componentes que incluyen tablas, formularios, menús desplegables, cuadrículas, barras de navegación, etc. Los principales beneficios de marcos como Bootstrap es que pueden acelerar tiempos de desarrollo incluso cuando se mantiene la calidad y la coherencia de la aplicación en todo el sitio. La hoja de trucos Bootstrap 4 funciona en todos los navegadores modernos por encima de Internet Explorer 9.
Bootstrap 4
Bootstrap 4 es la versión más nueva y avanzada de bootstrap. Es el marco más popular para HTML, CSS y JavaScript que se utiliza para desarrollar aplicaciones receptivas y basadas en dispositivos móviles. Bootstrap 4, como las versiones anteriores, es gratuito y de código abierto. Ya no necesitamos reescribir y rediseñar todo desde cero para los diferentes conjuntos de dispositivos. Además, no necesitamos pasar varias horas intentando arreglar todo y asegurarnos de que se vea y funcione correctamente en diferentes navegadores, plataformas y dispositivos únicos.
Comandos y descripción en Bootstrap 4 Cheatsheet
Algunos comandos importantes de Bootstrap 4 y su descripción se proporcionan a continuación:
| Comandos | Descripción |
| Contenedor Fijo | Un contenedor fijo tiene un ancho fijo. A medida que se cambia el tamaño del navegador, su ancho permanece igual hasta que se encuentra el punto de interrupción. |
| Contenedor Fluido | Un contenedor de fluido se extiende por todo el ancho de la ventana gráfica disponible. Se expande y contrae de manera fluida, lo que significa que cambia a medida que se cambia el tamaño del navegador. |
| .Columna- | Es para dispositivos extra pequeños: el ancho de la pantalla es inferior a 576 px |
| .Col-sm- | Es para dispositivos pequeños: el ancho de la pantalla permanece igual o superior a 576 px |
| .Col-md- | Es para dispositivos medianos: el ancho de la pantalla permanece igual o superior a 768 px |
| .Col-lg- | Es para dispositivos grandes: el ancho de la pantalla es igual o superior a 992 px |
| .Col-xl- | Es para dispositivos xlarge: el ancho de la pantalla es igual o mayor que 1200px |
- | h1 Encabezado de tamaño Bootstrap con 2.5rem = 40px Título de tamaño de Bootstrap h2 con 2rem = 32px Título de tamaño de Bootstrap h3 con 1.75rem = 28px Título de tamaño de Bootstrap h4 con 1.5rem = 24px h5 Encabezado de tamaño Bootstrap con 1.25rem = 20px h6 Tamaño de Bootstrap con 1rem = 16px |
| Este elemento de etiqueta HTML proporciona un color de fondo amarillo con algo de relleno | |
| Este elemento de etiqueta HTML proporciona un borde inferior punteado. | |
|
| La clase add con
se usa para citar bloques de contenido de origen que son externos. |
| .font-weight-bold | Para texto en negrita |
| .font-italic | Para texto en cursiva |
| .font-weight-light | Para texto ligero |
| .font-weight-normal | Para texto normal |
| .dirigir | Hace que un párrafo se destaque visiblemente |
| .pequeño | Indica texto más pequeño, es decir, reduce el tamaño de fuente al 85% del tamaño de su padre. |
| .text-left | Indica que el texto está alineado a la izquierda. |
| .text - * - izquierda | Indica que el texto está alineado a la izquierda en todas las pantallas de tamaño |
| .text-center | Indica para texto alineado al centro |
| .text - * - centro | Indica texto alineado al centro en pantallas de todos los tamaños. |
| .text-right | Indica para texto alineado a la derecha |
| .text - * - right | Indica texto alineado a la derecha en todas las pantallas de tamaño |
| .text-justify | Indica para texto justificado |
| .text-monospace | Tiene texto monoespaciado |
| .text-nowrap | Indica que no hay texto de ajuste |
| .text-minúsculas | Indica para texto en minúsculas |
| .text-mayúscula | Indica para texto en mayúsculas |
| .text-capitalize | Indica para texto en mayúscula |
| inicialismo | Muestra el texto dentro de un elemento de etiqueta HTML en una fuente de menor tamaño. Elimina el estilo de lista predeterminado disponible y el margen izquierdo en las listas anidadas de elementos de lista |
| .mesa | La clase agrega un estilo básico a la mesa. |
| .table-striped | La clase agrega rayas de cebra a la mesa. |
| .table -bordered | La clase agrega bordes en todos los lados de una tabla y celdas. |
| .table-hover | La clase agrega un efecto de desplazamiento, es decir, color de fondo gris en las filas de tabla disponibles. |
| .table-dark | La clase agrega un fondo negro a una tabla. |
Consejos y trucos gratuitos para usar Bootstrap 4 Cheat sheet: -
En esta sección se mencionan algunos consejos y trucos geniales para hackear rápidamente las características de la hoja de trucos Bootstrap 4 y crear una aplicación increíble en dispositivos móviles:
- Con el uso. col- (punto de interrupción) -push- (número) o cuando se usa. col- (punto de interrupción) -pull- (número) clases a las columnas, la secuencia de las columnas especificadas se puede cambiar.
- Para ocultar rápida y fácilmente un elemento solo en dispositivos xs, hay un. oculta-xs, esto se puede usar para esconderse.
- . La clase hidden- (punto de interrupción) también se puede utilizar para el resto de los puntos de interrupción y, cuando se combinan, se puede lograr un alcance oculto como se mencionó anteriormente. Ej: - clases .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap viene con 5 estilos de botones disponibles predeterminados, estos son el predeterminado, el primario, el éxito y el peligro. Cuando se necesita cambiar un botón para disminuir su radio de borde o relleno, la mejor manera de lograrlo es sobrescribiendo el .btn
- Para deshabilitar radios y casillas de verificación, es necesario agregar la clase deshabilitada a un elemento primario .checkboxor to.radio. luego agregue el atributo deshabilitado a la entrada específica
- Para deshabilitar botones, agregue el atributo deshabilitado a los botones de etiqueta HTML
O lo mismo se puede hacer mediante agregar clase .disabled a los botones.
- Para centrar fácilmente un elemento de bloque horizontalmente, debe agregarse una clase de bloque central, como en.
- Si se va a lograr rápidamente centrar el contenido en línea o se deben hacer elementos de bloque en línea dentro de un div, agregue la clase .text-center a su elemento padre.
- También se pueden incrustar fácilmente videos de YouTube utilizando la clase sensible a incrustaciones de Bootstrap, que es un ayudante, clases. la clase embed-responsive-16by9 o embed-responsive-4by3 debe elegirse en función de la relación de aspecto del video
Bootstrap 4 Hoja de trucos - conclusión
La hoja de trucos de Bootstrap 4 anterior proporciona una idea de lo que es posible con Bootstrap 4. Pero hay una guía más completa disponible con miles de otros parámetros y etiquetas. Es obvio que la información sobre todo no se puede proporcionar en un solo artículo, ya que un desarrollador necesita recordar todas las etiquetas y clases para realizar el desarrollo. El enfoque mejor y más recomendado es tener a mano tales hojas de trucos y el usuario debe consultar dichas hojas siempre que sea necesario. Esto garantizará que todo el trabajo se realice en el momento de la necesidad y mejorará la comprensión y el conocimiento del usuario de Bootstrap 4 durante un período.
Artículo recomendado
Esta ha sido una guía para la hoja de trucos de Bootstrap 4. Aquí hemos discutido el contenido y el comando, así como consejos y trucos gratuitos de la hoja de trucos de Bootstrap 4. También puede consultar el siguiente artículo para obtener más información:
- Hoja de trucos CSS
- Bootstrap vs Jquery diferencias
- Guía simple y útil para Cheat sheet SQL
- Ultimate Cheat Sheet para lenguaje de programación C ++ (Conceptos básicos)