Formularios

Estructura rápidamente un formulario mediante las principales clases que se ofercen; no olvides que puedes añadir los puntos de corte del sistema de cuadrícula.

-- Clases para la etiqueta form

Class Descripción
.form Contiene los estilos CSS para el formulario.
.form-navbar Utilidad para insertar un buscador en una barra de navegación.
.form-placeholder estilo de color para los inputs con atributo placeholder, incluida la etiqueta select
.form-placeholder-thin estilo de fuente font-weight: 300; para los inputs con atributo placeholder, incluida la etiqueta select
.form-label-bold estilo de fuente font-weight: bold; para la etiqueta label
.form-label-thin estilo de fuente font-weight: 300; para la etiqueta label
.form-elements-thin estilos de fuente font-weight: 300; para la etiqueta label, atributo placeholder y clase .bttn

-- Ejemplo con estilos

HTML 

    

        
    
            
  • 
                
                
            
    • 
            
  • 
                
            
    •

-- Formulario (contacta con nosotros) de ejemplo

Contact Us

  • This field is required.
  • This field is required.
  • This field is required.
  • This field is required.
HTML 

    

        
Contact Us

    

    

        
    

    

        
    
            
  • 
                
                
                
                    
                    This field is required.
                
            
    • 
            
  • 
                
                
                
                    
                    This field is required.
                
            
    • 
            
  • 
                
                
            
    • 
            
  • 
                
                
                
                    
                    This field is required.
                
            
    • 
            
  • 
                
                
                
    
                    
                    This field is required.
                
    
            
    • 
            
  • 
                
            
    •

-- Formulario (acceso usuario) de ejemplo

Log In

HTML 

    

        

            
Log In

-- Formulario con elementos en fila

  • Link tag
HTML 

    

        
    
            
  • 
                
            
    • 
            
  • 
                
                
            
    • 
            
  • 
                Link tag
            
    •

Formulario y botones checkboxes

Te recomiendo consultar... Botones checkboxes

-- Formulario y botones checkboxes, primer ejemplo

HTML 

    

        
    
            
  • 
                
            
    • 
            
  • 
                
            
    • 
            
  • 
                
      
                    
    • 
                        
                        
                    
      • 
                    
    • 
                        
                        
                    
      • 
                
    
            
    •

-- Iconos para mensajes

Class Icono
icon-info
icon-success
icon-check
icon-warning
icon-error

-- Uso

  • This field is required.
  • This field is required.
  • This field is required.
  • This field is required.
  • This field is required.
  • This field is required.
HTML 

    
        
        This field is required.
HTML 

    
        
        This field is required.
HTML 

    
        
        This field is required.
HTML 

    
        
        This field is required.
HTML 

    
        
        This field is required.
HTML 

    
        
        This field is required.

-- Iconos de campos