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.
<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 |
|
|
Gastronomía |
| Ícono | Escuela |
|---|---|
|
Informática |
|
|
ingeniería, Recursos Naturales y Medio Ambiente |
|
|
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="award"></i>
<i data-feather="code"></i>
<i data-feather="sun"></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>