Proporcione mensajes de retroalimentación contextual para las acciones típicas de los usuarios con los pocos disponibles y mensajes de alerta flexibles.

Ejemplos

Link color

Contenido adicional

Dismissing

Ejemplo

Las insignias se pueden usar como parte de enlaces o botones para proporcionar un contador.

Variaciones contextuales

Insignias de pastillas

Enlaces

Ejemplo

Ejemplos

Deshabilitar el ajuste de texto

Etiquetas de botón

Botones de contorno

Tamaños

Estado activo

Estado discapacitado

Alternar estados

Casilla de verificación y botones de opción

Ejemplo básico

Barra de herramientas de botones

Dimensionamiento

Anidamiento

Variación vertical

Ejemplo

Cuerpo

Títulos, texto y enlaces

Imagenes

Lista de grupos

Fregadero

Encabezado y pié de página

Usar marcado de cuadrícula

Usando utilidades

Usando CSS personalizado

Alineación del texto

Navegación

Imagenes

Gorras de imagen

Superposiciones de imágenes

Horizontal

Estilos de cartas

Fondo y color

Frontera

Utilidades Mixins

Diseño de tarjeta

Grupos de cartas

Barajas de cartas

Tarjetas de cuadrícula

Columnas de cartas

Ejemplo

Solo diapositivas

Con controles

Con indicadores

Con subtítulos

Fundido cruzado

.carousel-item Intervalo individual

Ejemplo

Varios objetivos

Ejemplo de acordeón

Ejemplos

Botón único

Y con <a> elementos:

Botón de división

Dimensionamiento

Direcciones

Dropup

Dropright

Dropleft

Elementos de menú

Activo

Discapacitado

Alineación del menú

Alineación receptiva

Contenido del menú

Encabezados

Divisores

Texto

Formularios

Opciones desplegables

Visión general

Controles de formulario

Dimensionamiento

Solo lectura

Texto sin formato de solo lectura

Entradas de rango

Casillas de verificación y radios

Predeterminado (apilado)

En línea

Sin etiquetas

Diseño

Formar grupos

Cuadrícula de formulario

Fila de formulario

Forma horizontal

Tamaño de etiqueta de forma horizontal

Dimensionamiento de columna

Tamaño automático

Formularios en línea

Texto de ayuda

Formas inhabilitadas

Validación

Estilos personalizados

Valores predeterminados del navegador

Lado del servidor

Elementos compatibles

Información sobre herramientas

Solución alternativa de validación del grupo de entrada

Formularios personalizados

Casillas de verificación y radios

Casillas de verificación

Radios

En línea

Discapacitado

Switches

Seleccione el menú

Rango

Explorador de archivos

Traducir o personalizar las cadenas con HTML

Input sin icono "valid" o "invalid"

Formulario con Helpers

Ejemplo básico

Wrapping

Dimensionamiento

Casillas de verificación y radios

Múltiples entradas

Varios complementos

Complementos de botón

Botones con desplegables

Botones segmentados

Formularios personalizados

Selección personalizada

Entrada de archivo personalizado

Ejemplo básico

Elementos activos

Elementos deshabilitados

Enlaces y botones

Enjuagar

Horizontal

Clases contextuales

Con insignias

Contenido personalizado

Comportamiento de JavaScript

Ejemplo

Anidamiento

Alineación

Orden

Lista de medios

Imágenes en base a un ancho o alto

Guia para toma de foto

Utilice estas clases para visualizar la guia tanto para web y para movil

  .overlay-web {
    position:  absolute;
    height:  350px;
    width:  510px;
  }
  

  .overlay-helper-web {
    position:  relative;
    display:  flex;
    align-items:  center;
    height:  350px;
    width:  510px;
  }
  

  .overlay-element-web {
    position:  relative;
    margin:  0px auto;
    height:  350px;
    width:  510px;
  }
  

  .overlay-web .top-left-web {
    border:  3px solid $success;
    text-align:  left;
    border-radius:  25px;
    z-index:  4;
  }
  

  .box-photo-web {
    border:  3px solid $success;
    width:  140px;
    height:  130px;
    border-radius:  15px;
  }
  

  .overlay-mobile {
    position:  absolute;
    height:  510px;
    width:  350px;
  }
  

  .overlay-helper-mobile {
    position:  relative;
    display:  flex;
    height:  100%;
    width:  100%;
  }
  

  .overlay-element-mobile {
    position:  relative;
    margin:  0px auto;
    height:  440px;
    width:  290px;
  }
  

  .overlay-mobile .top-left-mobile {
    border:  3px solid $success;
    top:  32px;
    bottom:  32px;
    text-align:  left;
    border-radius:  25px;
    z-index:  3;
    }
  

  .box-photo-mobile {
    border:  3px solid $success;
    width:  130px;
    height:  140px;
    border-radius:  15px;
  }
  

  .box-photo-back-mobile {
    border:  3px solid $success;
    width:  177px;
    height:  25px;
    border-radius:  8px;
  }
  

  .box-photo-back-web {
    border:  3px solid $success;
    width:  45px;
    height:  250px;
    border-radius:  15px;
  }
  

  .camera-container-web {
    width:  510px;
    height:  350px;
  }
  

  .camera-container-mobile {
    width:  350px;
    height:  510px;
  }
  

  

Guia para toma de foto circular

Utilice estas clases para visualizar la guia tanto para web y para movil

  .overlay-web-selfie {
    position:  absolute;
    height:  510px;
    width:  510px;
  }
  

  .overlay-element-web-selfie {
    position:  relative;
    margin:  0px auto;
    height:  450px;
    width:  450px;
  }
  

  .guide-circle {
    border:  3px solid $success;
    height:  430px;
    width:  430px;
    border-radius:  50%;
  }
  

  
  .guide-mobile-mobile {
    border:  3px solid $success;
    width:  280px;
    height:  28px;
    border-radius:  50%;
  }
  

  .float-camera {
    top:  80px !important;
    right:  23px !important;
    width:  40px;
    height:  43px;
    border-radius:  50px !important;
  }
  

  .camera-container-web-selfie {
    width:  510px;
    height:  510px;
  }
  

  .camera-container-mobile-selfie {
    width:  360px;
    height:  360px;
  }
  

  

Voltear horizontalmente una imagen

Utilice la clase: .rotate-image-horizontally para voltear horizontalmente una imagen

Ejemplos

Componentes modales

Demo en vivo

Telón de fondo estático

Desplazamiento de contenido largo

Centrado verticalmente

Información sobre herramientas y ventanas emergentes

Usando la cuadrícula

Contenido modal variable

Tamaños opcionales

Modal full screen

Cómo funciona

Contenido admitido

Marca

    
      <i class="icon-{nombre-del-icono}"></i>