Botones e Íconos – Duoc UC

Botón primario


	         
						    <!-- Botón primario  ---> 
						    <a class="btn btn-primary">Botón primario</a>
						    
						    <!-- Botón primario XL  ---> 
						    <a class="btn btn-primary btn-lg">Botón primario- XL </a>  
	    
	        				

Botón Formulario

Ejecutar / Aceptar. Se usa en general en caso de formulario.

Call to action – Primary

<!-- Botón primario  ---> 
<a class="btn btn-success" href="#" role="button">Call to action - Primary</a>
                			

Botón Formulario

Alerta – Eliminar / Clausurar. Se usa en general en caso de formulario.

Call to action – Delete

<!-- Botón primario  ---> 
<a class="btn btn-danger" href="#" role="button">Call to action - Delete</a>
        					

Botón Formulario

Link de apoyo dentro de contenido

Link

    <!-- Botón primario  ---> 
    <a class="btn btn-link" href="#" role="button">Link</a>
        				

Link ícono


<a class="btn btn-link" href="#" role="button">
    <svg class="feather feather-edit-2 mr-2" height="24" 
         viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
    </svg>Link con icono
</a>
        				

La visualización de botones también se ve sujeta a su contenedor. Si el contenedor tiene la clase bg-dark se adapta.

Aplicación de boton sobre fondo normal

						
Link

					
Vista aplicación sobre fondo normal
Link
Aplicación de boton sobre fondo oscuro

						
Link
 
Vista aplicación sobre fondo oscuro
Link

	         <a class="btn btn-primary" role="button" href="#">
	             Título del botón
	             <i data-feather="chevron-right">
	             </i>
	        </a>
	        		

Caja negra con botón

Caja negra con botón

TÍTULO BOTÓN
<div class="row">
                <div class="col-sm-6">
                    <div class="card bg-dark">
                        <div class="card-body">
                            <h2 class="dark">Caja negra con botón</h2>
                            <a class="btn btn-primary dark" role="button" href="#">
             Título del botón
             <i data-feather="chevron-right">
             </i>
             </a>
                        </div>
                    </div>
                </div>
             <div class="col-sm-6">
                 <!--columna vacia para otro elemento -->
            </div>            
 </div>

Botón simple

Título botón

			         <a class="btn btn-link" href="#">
			             Título del botón
			        </a>
        			

Íconos

Como familia de íconos para Duoc UC, utilizamos los recursos de Feather Icons VER LIBRERÍA COMPLETA

Los más utilizados:


					<div class="d-flex-inline">
						<i data-feather="alert-circle"></i>
						<i data-feather="check-circle"></i>
						<i data-feather="chevron-right"></i>
						<i data-feather="download"></i>
						<i data-feather="external-link"></i>
						<i data-feather="file"></i>
						<i data-feather="info"></i>
						<i data-feather="image"></i>
						<i data-feather="link"></i>
						<i data-feather="mail"></i>
						<i data-feather="map-pin"></i>
						<i data-feather="phone"></i>
						<i data-feather="plus-circle"></i>
						<i data-feather="search"></i>
						<i data-feather="upload"></i>
						<i data-feather="zoom-in"></i>
						<i data-feather="zoom-out"></i>
					</div>
        			

Íconos de Escuelas

Ícono Escuela

Administración y Negocios

Comunicación

Construcción

Diseño

Informática y Telecomunicaciones

Ingeniería

Recursos Naturales

Salud

Turismo


					<div class="d-flex-inline">
						<i data-feather="bar-chart"></i>
						<i data-feather="message-square"></i>
						<i data-feather="box"></i>
						<i data-feather="zap"></i>
						<i data-feather="code"></i>
						<i data-feather="target"></i>
						<i data-feather="feather"></i>
						<i data-feather="activity"></i>						
						<i data-feather="map"></i>					
						
					</div>
        			

Íconos de Redes Sociales


					<div class="d-flex-inline">
						<i data-feather="facebook"></i>
						<i data-feather="instagram"></i>
						<i data-feather="twitter"></i>
						<i data-feather="youtube"></i>
						<i data-feather="linkedin"></i>
					</div>
        			

Notificaciones

<div class="alert alert-primary" role="alert">
Notificación informativa
</div>

<div class="alert alert-secondary" role="alert">
Notificación diferenciadora de texto destacado
</div>

<div class="alert alert-danger" role="alert">
Notificación de vencimiento
</div>

    <div class="alert alert-warning" role="alert">
Notificación de atención
</div>

Notificación con ícono

Las postulaciones por Admisión Especial para el 1º Semestre 2021 ya finalizaron.
Pronto se actualizará la información para la apertura del próximo proceso.


<div class="row pt-1 bg-grey my-5">
    <div class="col-md-12">
        <h4 class="mt-4 row"></h4>
        <div class="col-md-1">
            <h4 class="mt-4 row"><i class="mr-2 icon40" data-feather="alert-circle"></i></h4>
            <div class="col">
                <h4 class="mt-4 row">Las postulaciones por Admisión Especial para el 
                1º Semestre 2021 ya finalizaron.<br>
                Pronto se actualizará la información para la apertura del próximo proceso. </h4>
            </div>
        </div>
    </div>
</div>