Unidad12 Modulo3 Prog Web Iconos

ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12
Programador Web – Nivel 1

Unidad 12: Componentes en Bootstrap
Contacto: info@elearning-total.com
Web: www.elearning-total.com
1
Unidad 12: Componentes en Bootstrap
Iconos
Navegación
2
Que el alumno logre:

 Logren implementar los componentes en Bootstrap
3
Í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.
Listado completo de los iconos disponibles
A continuación se muestran todos los iconos de Bootstrap 5 y los elementos necesarios para utilizar
cada uno: https://icons.getbootstrap.com/
4
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.
5
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:
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20"

fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd"
d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646
4.354a.5.5 0 010-.708z"/></svg>
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>.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"

class="bi bi-chat-dots" viewBox="0 0 16 16">
6
<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>.
<img src=" chat-square-text.svg" alt="" width="32" height="32" title="Bootstrap">
Í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>).
Utilizaremos font-size y color para cambiar la apariencia del icono.
<i class="bi bi-chat-dots"></i>
7
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.
Para que funcionen sus características interactivas, es necesario utilizar también el

plugin dropdown de JavaScript.
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>
<a role="menuitem" tabindex="-1" href="#">CSS Ya</a>
</li>
<a role="menuitem" tabindex="-1" href="#">JavaScript</a>
</li>
<li role="presentation" class="divider">
</li>
<a role="menuitem" tabindex="-1" href="#">Fin</a>
</li>
</ul>
8
</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":
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-

toggle="dropdown">Tutoriales
<span class="caret"></span></button>
Luego definimos una lista no ordenada inicializando la clase "dropdown-menu":
Las opciones del menú son los item de la lista:
<a role="menuitem" tabindex="-1" href="#">HTML Ya</a>
</li>
<a role="menuitem" tabindex="-1" href="#">CSS Ya</a>
</li>
<a role="menuitem" tabindex="-1" href="#">JavaScript</a>
9
</li>
<li role="presentation" class="divider">
</li>
<a role="menuitem" tabindex="-1" href="#">Fin</a>
</li>
Cuando no se encuentra desplegado:
Y cuando se despliega:
Ver ejemplo_menu_desplegable.html y ejemplo_menu_desplegable2.html
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:

<li role="presentation" class="dropdown-header">Título de sección #1</li>
10
…
<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>
Grupos de botones verticales

Debemos aplicar la clase .btn-group-vertical sobre un grupo de botones para mostrarlos
verticalmente en vez de con su estilo horizontal habitual.
Ejemplo:
<div class="btn-group-vertical">
...
</div>
11
Elementos de navegación
Bootstrap define varios elementos de navegación que comparten el mismo código HTML y la misma
clase base .nav.
Para seleccionar el estilo del elemento, se modifica su clase CSS específica.
Navegación con pestañas

Debemos aplicar la clase .nav para crear un elemento de navegación y después aplicar la clase .nav-
tabs para mostrar sus enlaces en forma de pestaña.
Ejemplo:
<ul class="nav nav-tabs">

<li class="active"><a href="#">Inicio</a></li>
<li><a href="#">Perfil</a></li>
<li><a href="#">Mensajes</a></li>
</ul>
Navegación con botones

Aplicando la clase .nav-pills al mismo código HTML del ejemplo anterior, los enlaces se muestran
como botones ("pills" en inglés) en vez de como pestañas. Ejemplo:
<ul class="nav nav-pills">

<li class="active"><a href="#">Inicio</a></li>
<li><a href="#">Perfil</a></li>
<li><a href="#">Mensajes</a></li>
</ul>
La navegación con botones también se puede mostrar verticalmente añadiendo la clase .nav-stacked.
Ejemplo:
12
<ul class="nav nav-pills nav-stacked">

...
</ul>
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.
(para ver el menú responsive deben achicar la ventana del navegador).
Alineación de los elementos de la barra de navegación

Para alinear los enlaces, formularios, botones o texto de la barra de navegación, podemos utilizar las
clases .navbar-left y .navbar-right, que añaden a ese elemento un float en la dirección
correspondiente. Así, para alinear por ejemplo varios enlaces de navegación, podemos encerrarlos
dentro de un elemento <ul> y aplicar sobre este último una de las dos clases CSS mencionadas
anteriormente.
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.
13
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:
body { padding-top: 70px; }
Ejemplo:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

...
</nav>
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>
14
</ol>
<li><a href="#">Inicio</a></li>
<li class="active">Libros</li>
</ol>
<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.
Paginador por defecto

El paginador por defecto de Bootstrap está basado en el del sitio Rdio y queda bien tanto para las
aplicaciones como para los sitios web. Como el paginador es bastante grande, el usuario nunca lo
pierde de vista. Además su diseño escala bien a un gran número de páginas y sus enlaces son fáciles
de pinchar.
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>
15
<li><a href="#">»</a></li>
</ul>
Enlaces activos y enlaces deshabilitados

El aspecto de los enlaces del paginador se puede modificar para adaptarlo a nuestras necesidades.
Podemos aplicar la clase .disabled a los enlaces que no se puedan pinchar y aplicar la clase .active al
enlace que corresponde a la página en la que se encuentra el usuario.
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>
16
En esta Unidad…
En la presente unidad trabajamos con componentes en Bootstrap.
17

Unidad12 Modulo3 Prog Web Iconos

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unidad12 Modulo3 Prog Web Iconos

Uploaded by

Copyright:

Available Formats

ELEARNING TOTAL Programador Web / Nivel 1 – Unidad 12

Programador Web – Nivel 1

Unidad 12: Componentes en Bootstrap

Que el alumno logre:

Listado completo de los iconos disponibles

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20"

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"

<img src=" chat-square-text.svg" alt="" width="32" height="32" title="Bootstrap">

Utilizaremos font-size y color para cambiar la apariencia del icono.

<i class="bi bi-chat-dots"></i>

Para que funcionen sus características interactivas, es necesario utilizar también el

<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-

Luego definimos una lista no ordenada inicializando la clase "dropdown-menu":

<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">

Las opciones del menú son los item de la lista:

Ver ejemplo_menu_desplegable.html y ejemplo_menu_desplegable2.html

<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">

Grupos de botones verticales

Para seleccionar el estilo del elemento, se modifica su clase CSS específica.

Navegación con pestañas

<ul class="nav nav-tabs">

Navegación con botones

<ul class="nav nav-pills">

<ul class="nav nav-pills nav-stacked">

(para ver el menú responsive deben achicar la ventana del navegador).

Alineación de los elementos de la barra de navegación

body { padding-top: 70px; }

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

Paginador por defecto

Enlaces activos y enlaces deshabilitados

You might also like