• Author / Uploaded
• GerenciaVirtual

Citation preview

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Utilidades BOOTSTRAP Bootstrap 4 tiene una gran cantidad de clases de utilidad / ayuda a los elementos de estilo de forma rápida sin necesidad de utilizar ningún código CSS.

Bordes Utilizar las borderclases para agregar o quitar los bordes de un elemento:

Ver: Código 189.html

Color del Borde Añadir un color al borde con cualquiera de las clases de color de borde contextuales: border-dark"> border-white">

Ver: Código 190.html

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Radio del Borde o Borde Redondeado Añadir esquinas redondeadas a un elemento con las clases rounded:

Ver: Código 191.html

Flotar y Clearfix Para flotar un elemento a la derecha se realiza con la clase .float-right o hacia la izquierda con .float-left, esta característica debe estar acompañada de la clase .clearfix que complementa el conjunto dándole una “ limpieza” al espacio donde flotara el elemento:

Float left Float right

Ver: Código 192.html

Los Flotadores Responsivos Para flotar un elemento a la izquierda o a la derecha, dependiendo de la anchura de la pantalla, lo realizamos con las clases de flotación responsivas ( .float-*-left|right- , donde * es sm(> = 576px), md(> = 768px), lg(> = 992px) o xl(> = 1200 píxeles)):

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Flotar a la anchas
Flotar a la anchas
Flotar a la anchas
Flotar a la más anchas
No flotar

derecha en ventanas pequeñas o más derecha en ventanas medianas o más derecha en ventanas grandes o más derecha en ventanas extra grandes o

Ver: Código 193.html

Centrar Centrar un elemento con la clase .mx-auto (añade margin-left y margin-right: auto):

Centrado Ver: Código 194.html

Anchura Ajuste el ancho de un elemento con las clases W- * ( .w-25, .w-50, .w-75, .w-100, .mw-100):

Ancho Máximo 100%

Ver: Código 195.html

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Altura Ajuste la altura de un elemento con las clases h- * ( .h-25, .h-50, .h-75, .h-100, .mh-100):

Ancho Máximo 100%

Ver: Código 196.html

Espaciado Bootstrap 4 tiene una amplia gama de clases de margen y utilidades de relleno responsivos. Trabajan para todos los puntos de interrupción: xs( = 576px), md(> = 768px), lg(> = 992px) o xl(> = 1200 píxeles)): Las clases se utilizan en el formato: {property}{sides}-{size} para xs y {property}{sides}{breakpoint}-{size} para sm, md, lg, y xl. Donde la propiedad será:  m - conjuntos margin  p - conjuntos padding Donde lados será:  t- conjuntos margin-top o padding-top  b- conjuntos margin-bottom o padding-bottom  l- conjuntos margin-left o padding-left  r- conjuntos margin-right o padding-right  x- establece tanto padding-left y padding-righto margin-left y margin-right  y- establece tanto padding-top y padding-bottom o margin-top y margin-bottom  en blanco - establece un margin o padding en los 4 lados del elemento

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click” Cuando el tamaño sea de:  0- conjuntos margin o padding de 0  1- conjuntos margin o padding a .25rem(4px si tamaño de fuente es 16px)  2- conjuntos margin o padding a .5rem(8px si tamaño de fuente es 16px)  3- conjuntos margin o padding a 1rem(16px si tamaño de fuente es 16px)  4- conjuntos margin o padding a 1.5rem(24px si tamaño de fuente es 16px)  5- conjuntos margin o padding a 3rem(48px si tamaño de fuente es 16px)  auto- establece marginen Auto Nota: los márgenes también pueden ser negativos, mediante la adición de una "N" en frente de tamaño :  n1- conjuntos margin a -.25rem(-4px si tamaño de fuente es 16px)  n2- conjuntos margin a -.5rem(-8px si tamaño de fuente es 16px)  n3- conjuntos margin a -1rem(-16px si tamaño de fuente es 16px)  n4- conjuntos margin a -1.5rem(-24px si tamaño de fuente es 16px)  n5- conjuntos margin a -3rem(-48px si tamaño de fuente es 16px)

Yo solo tengo “top padding” (1.5rem = 24px) Yo tengo “padding” en todos los lados (3rem = 48px) Yo tengo “margin” en todos los lados (3rem = 48px) y un “bottom padding” (3rem = 48px)

Ver: Código 197.html

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Más ejemplos de espaciado

.m-# / m-*-#

margen en todos los lados

.mt-# / mt-*-#

margen superior

.mb-# / mb-*-#

parte inferior del margen

.ml-# / ml-*-#

margen izquierdo

.mr-# / mr-*-#

margen derecho

.mx-# / mx-*-#

margen izquierda y derecha

.my-# / my-*-#

margen superior e inferior

.p-# / p-*-#

Relleno en todos lados

.pt-# / pt-*-#

Relleno superior

.pb-# / pb-*-#

fondo Relleno

.pl-# / pl-*-#

Relleno a la izquierda

.pr-# / pr-*-#

Relleno derecho

.py-# / py-*-#

Relleno superior e inferior

.px-# / px-*-#

Relleno de izquierda y derecha

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Sombras Utilizar las clases shadow para añadir sombras a un elemento:

Sombra grande

Ver: Código 198.html

Alineación vertical Utilizar las clases align- para cambiar la alineación de elementos (sólo funciona en los elementos en línea, en línea-bloque, en línea -tabla y de celda de tabla): Texto al final Ver: Código 199.html

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Embed Responsiva Para crear un vídeo responsivo o presentación de diapositivas incrustada basada en el ancho de la ventana padre. Añadir .embed-responsive-item a los elementos incrustados (como o ) en un elemento padre con .embed-responsive y una relación de aspecto de radio de su elección:







Ver: Código 200.html

Visibilidad Utilizar las clases .visible o .invisible para controlar la visibilidad de los elementos. Nota: Estas clases no cambian el valor de visualización de CSS. Ellas sólo añaden visibility:visible o visibility:hidden: Soy visible Soy invisible

Ver: Código 201.html

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Posición Utilice la clase .fixed-top, para que cualquier elemento permanezca fijo en la parte superior de la página:

...

Ver: Código 202.html

Utilice la clase .fixed-bottom, para fijar cualquier elemento en la parte inferior de la página :

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click” Utilice la clase .sticky-top, para fijar cualquier elemento en la parte superior de la página cuando se ha desplazado más allá de ella.

...

Ver: Código 203.html

Icono Cerrar Utilice la clase .close de estilo para un icono de cierre. Esto a menudo se utiliza para alertas y modales. Tenga en cuenta que utilizamos el símbolo × para crear el icono real (una mejor perspectiva "x"). Tenga en cuenta también que flota a la derecha por defecto:

× Ver: Código 204.html

Lectores de Pantalla Usa la clase .sr-only para ocultar un elemento en todos los dispositivos, excepto los lectores de pantalla: Esconderé en todas las pantallas excepto en lectores de pantalla. Ver: Código 205.html

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Colores Aquí hay una lista de todas las clases de texto y color de fondo: Las clases para los colores de texto son: .text-muted, .text-primary, .text-success, .text-info, .textwarning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (color por defecto negro) y .text-light:

Ver: Código 206.html

Las clases de texto contextuales también se pueden utilizar en los enlaces, lo que añadirá un color más oscuro en efecto hover:

Ver: Código 207.html

También puede agregar un 50% de opacidad para el texto negro o blanco con las clases .textblack-50 o .text-white-50:

Ver: Código 208.html

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

Los Colores de Fondo Las clases para los colores de fondo son: .bg-primary, .bg-success, .bg-info, .bg-warning, .bgdanger, .bg-secondary, .bg-darky .bg-light. Tenga en cuenta que los colores de fondo no fijan el color del texto, por lo que en algunos casos se requiere usarlos junto con una clase .text-*.

Ver: Código 209.html

Tipografía Clases / Texto Aquí hay una lista de todas las clases de la tipografía / de texto:

Clase

Descripción

.display-*

Muestra encabezados que son usados para tener mejor visibildad que los encabezados normales (fuentes de gran tamaño, brillo y ancho) y estas están representadas en cuatro clases: .display-1, .display-2, .display3, .display-4

.font-weight-bold

Texto Bold

.font-weight-bolder

Texto Bolder bold

.font-weight-normal

Texto Normal

.font-weight-light

Texto Light weight

.font-weight-lighter

Texto Lighter weight

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

.font-italic

Texto Itálico

.lead

Hace que un párrafo se destaque

.small

Indica textos pequeños (establece el 85% del tamaño del padre)

.text-break

Evita que el texto largo dañe el diseño

.text-center

Indica texto alineado al centro

.text-decoration-none

Remueve el subrayado de un enlace

.text-left

Indica texto alineado a la izquierda

.text-justify

Indica texto justificado

.text-monospace

Texto monoespacio

.text-nowrap

Texto no alineado

.text-lowercase

Indica texto en m inúsculas

.text-reset

Restablece los colores de un texto o enlace (heredado de sus padres)

.text-right

Indica texto alineado a la derecha

.text-uppercase

Indica Mayúsculas

.text-capitalize

Indica texto capital

.initialism

Muestra el texto dentro de una abreviatura en una pequeña fuente

GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”

.list-unstyled

Remueve el estilo de lista por defecto y deja un margen en los ítems de la lista (trabaja en

y ). Esta clase solo aplica a los hijos de una lista.

.list-inline

Coloca todos los ítems de una lista , en un línea simple (se usa junto a .listinline-item en cada elemento
• )
  
  .pre-scrollable
  
  Hace a un elemento scrollable
  
  Elementos de bloque Para hacer un elemento de bloque, agregue la clase .d-block. Utilice cualquiera de las clases d-*block para controlar cuando el elemento debe ser un elemento de bloque en un ancho de pantalla específica:
  
  d-xl-block Ver: Código 210.html
  
  GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”
  
  Otras clases de indicación Otras clases de visualización también están disponibles:
  
  Clase
  
  Descripción
  
  .d-none
  
  Esconde un elemento
  
  .d-*-none
  
  Esconde un elemento y especifica el tamaño de la pantalla
  
  .d-inline
  
  Crea un elemento inline
  
  .d-*-inline
  
  Crea un elemento inline en un tamaño especifico de pantalla
  
  .d-inline-block
  
  Crea un elemento inline block
  
  .d-*-inline-block
  
  Crea un elemento inline inline block en un tamaño especifico de pantalla
  
  .d-table
  
  Crea un elemento display como una tabla
  
  .d-*-table
  
  Crea un elemento display como una tabla en un tamaño especifico de pantalla
  
  .d-table-cell
  
  Crea un elemento display como una celda de tabla
  
  .d-*-table-cell
  
  Crea un elemento display como una celda de tabla en un tamaño específico de pantalla
  
  .d-table-row
  
  Crea un elemento display como una fila de una tabla
  
  .d-*-table-row
  
  Crea un elemento display como una fila de una tabla en un tamaño específico de pantalla
  
  .d-flex
  
  Crea un contenedora flexbox y transforma los hijos directos en elementos flex
  
  GERENCIA VIRTUAL “Capacitación y asesoría a solo un click”
  
  .d-*-flex
  
  Crea un contenedora flexbox en un tamaño específico de pantalla.
  
  .d-inline-flex
  
  Crea un contenedora inline flexbox
  
  .d-*-inline-flex
  
  Crea un contenedora inline flexbox en un tamaño específico de pantalla.
  
  Flex Utilice la clase .flex-* para controlar la disposición con FlexBox.
  
  Más de flex en el siguiente tema.