Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Unidad12 Modulo3 Prog Web Iconos
Unidad12 Modulo3 Prog Web Iconos
Contacto: info@elearning-total.com
Web: www.elearning-total.com
1
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Iconos
Navegación
Contacto: info@elearning-total.com
Web: www.elearning-total.com
2
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Contacto: info@elearning-total.com
Web: www.elearning-total.com
3
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Íconos
Bootstrap trae una biblioteca de iconos de código abierto, gratuita y de alta calidad con casi 1200
iconos.
Podemos usarlos en formato SVG, SVG sprite o como fuentes web. También es posible utilizarlos
fuera de Bootstrap.
A continuación se muestran todos los iconos de Bootstrap 5 y los elementos necesarios para utilizar
cada uno: https://icons.getbootstrap.com/
Contacto: info@elearning-total.com
Web: www.elearning-total.com
4
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Al selección cada ícono tenemos la opción de descargar un archivo en formato .svg de incluirlo con
ícono tipográfico o como elemento svg de HTML:
Instalación
Los iconos de Bootstrap se publican en npm, pero también se pueden descargar
manualmente si es necesario.
Nosotros trabajaremos, al igual que con el resto de los elementos de Bootstrap con los CDN o
descargando la versión compilada.
Contacto: info@elearning-total.com
Web: www.elearning-total.com
5
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Uso
Los iconos de Bootstrap tienen formato SVG, por lo que podemos incluirlos en nuestro HTML de
varias formas.
Los iconos de Bootstrap incluyen un ancho (width) y un alto (height) de 1em de forma
predeterminada para permitir un simple cambio de tamaño mediante font-size.
Incrustado
Podemos incrustar iconos dentro del HTML (a diferencia de un archivo de imagen externo). Con el
código de SVG que nos brinda Bootstrap:
Sprite
Podemos usar el sprite SVG para insertar cualquier icono a través del elemento <use>.
Debemos usar el nombre de archivo del icono como identificador del fragmento (por
ejemplo, toggleses #toggles).
Los sprites SVG nos permiten hacer referencia a un archivo externo similar a un elemento <img>.
Contacto: info@elearning-total.com
Web: www.elearning-total.com
6
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
<path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2
1 1 0 0 0 0 2z"/>
<path d="M2.165 15.803l.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8
15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-
.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673
0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7
2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-
2.634.893a10.97 10.97 0 0 0 .398-2z"/>
</svg>
Imagen externa
Debemos descargar y copiar el archivo SVG de los iconos de Bootstrap en la carpeta de nuestro
proyecto y hacer referencia a ellos como imágenes con el elemento <img>.
Ícono tipográfico
Las fuentes de iconos con clases para cada icono también se incluyen para Bootstrap Icons.
Podemos incluir íconos tipográficos en nuestra web mediante CSS, luego hacemos referencia a los
nombres de las clases según sea necesario en el HTML (por ejemplo, <i class="bi-alarm-clock"></i>).
Contacto: info@elearning-total.com
Web: www.elearning-total.com
7
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Navegación
Menú desplegable
Este componente permite mostrar una lista de enlaces como si fuera un menú desplegable con la lista
de acciones que el usuario puede realizar.
Ejemplo:
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"
id="menu1" data-toggle="dropdown">Tutoriales
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">HTML Ya</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">CSS Ya</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">JavaScript</a>
</li>
<li role="presentation" class="divider">
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Fin</a>
</li>
</ul>
Contacto: info@elearning-total.com
Web: www.elearning-total.com
8
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
</div>
</div>
Lo primero que tenemos que observar que hemos agregado las dos librerías de Javascript en la parte
inferior del archivo:
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Para crear un menú desplegable debemos definir un nav con la clase "dropdown":
<nav class="dropdown">
Luego un button donde debemos inicializar obligatoriamente la propiedad data-toggle con el valor
"dropdown":
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">HTML Ya</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">CSS Ya</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">JavaScript</a>
Contacto: info@elearning-total.com
Web: www.elearning-total.com
9
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
</li>
<li role="presentation" class="divider">
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Fin</a>
</li>
Cuando no se encuentra desplegado:
Y cuando se despliega:
Títulos de sección
Los menús desplegables también pueden contener elementos con la clase .dropdown-header para
definir el título de un grupo de enlaces. Ejemplo:
Contacto: info@elearning-total.com
Web: www.elearning-total.com
10
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
…
<li role="presentation" class="dropdown-header">Título de sección #2</li>
…
Grupos de botones
Bootstrap nos permite agrupar varios botones relacionados entre sí para mostrarlos en una única
línea.
Opcionalmente podemos utilizar el plugin de JavaScript para hacer que los botones se comporten
como radiobuttons o como checkboxes.
Para crear un grupo de botones, encierra varios botones con la clase .btn dentro de un elemento con
la clase .btn-group. Ejemplo:
<div class="btn-group">
<button type="button" class="btn btn-default">Izquierdo</button>
<button type="button" class="btn btn-default">Central</button>
<button type="button" class="btn btn-default">Derecho</button>
</div>
Ejemplo:
<div class="btn-group-vertical">
...
</div>
Contacto: info@elearning-total.com
Web: www.elearning-total.com
11
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Elementos de navegación
Bootstrap define varios elementos de navegación que comparten el mismo código HTML y la misma
clase base .nav.
Ejemplo:
La navegación con botones también se puede mostrar verticalmente añadiendo la clase .nav-stacked.
Ejemplo:
Contacto: info@elearning-total.com
Web: www.elearning-total.com
12
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Barras de navegación
Las barras de navegación son componentes adaptados al diseño web responsive y que se utilizan
como elemento principal de navegación tanto en las aplicaciones como en los sitios web.
En los dispositivos móviles se muestran inicialmente minimizadas y al pulsar sobre ellas, se despliegan
todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente, las barras de
navegación muestran todos sus contenidos horizontalmente.
Dependiendo del contenido de tu barra de navegación, puede ser necesario modificar el punto a
partir del cual se muestra horizontal en vez de minimizada. Para ello, debemos modificar el valor de la
variable @grid-float-breakpoint en nuestro archivo LESS o añadir nuestra propia media query en el
archivo CSS.
En realidad, estas clases se basan en las clases genéricas .pull-left y .pull-right explicadas
anteriormente. La diferencia es que han sido adaptadas a los diferentes media queries para que los
elementos de la barra de navegación se vean lo mejor posible en todo tipo de dispositivos.
Contacto: info@elearning-total.com
Web: www.elearning-total.com
13
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Barra de navegación
fija en la parte
superior de la página ADVERTENCIA
Debemos aplicar la Debido a los estilos aplicados, la barra de navegación fija
clase .navbar-fixed-top a la puede tapar los contenidos que se encuentran en la parte
barra de navegación para superior de la página. Para evitarlo, debemos añadir
fijarla en la parte superior un padding en la parte superior del elemento <body>.
de la página. Como por defecto la barra de navegación tiene una altura
de 50px, este es el estilo recomendado por defecto:
Ejemplo:
Breadcrums
Las migas de pan (en inglés, "breadcrumbs") indican la posición de la página actual dentro de la
jerarquía de navegación del sitio. La separación entre los enlaces de las migas de pan se añaden
automáticamente mediante el pseudo-selector :before y la propiedad content de CSS.
Ejemplo:
<ol class="breadcrumb">
<li class="active">Inicio</li>
Contacto: info@elearning-total.com
Web: www.elearning-total.com
14
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
</ol>
<ol class="breadcrumb">
<li><a href="#">Inicio</a></li>
<li class="active">Libros</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Inicio</a></li>
<li><a href="#">Libros</a></li>
<li class="active">Bootstrap </li>
</ol>
Paginadores
Bootstrap incluye dos componentes para paginar los contenidos de nuestro sitio o aplicación web. El
primero es un completo paginador que muestra enlaces para todas las páginas de resultados y el
segundo es un paginador simple con los enlaces Anterior y Siguiente.
Ejemplo:
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
Contacto: info@elearning-total.com
Web: www.elearning-total.com
15
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
<li><a href="#">»</a></li>
</ul>
Ejemplo:
<ul class="pagination">
<li class="disabled">
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1 <span class="sr-only">(página actual)</span></a>
</li>
...
</ul>
Paginador simple
El paginador simple de Bootstrap es ideal para sitios web sencillos como blogs o revistas. Este
paginador solamente muestra dos enlaces para ir a la página Anterior o Siguiente de los resultados.
Ejemplo:
<ul class="pager">
<li><a href="#">Anterior</a></li>
<li><a href="#">Siguiente</a></li>
</ul>
Contacto: info@elearning-total.com
Web: www.elearning-total.com
16
ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
En esta Unidad…
En la presente unidad trabajamos con componentes en Bootstrap.
Contacto: info@elearning-total.com
Web: www.elearning-total.com
17