3

Curso PHP Básico Escuela de Administración Pública

Bootstrap
3.1. Frontend
Los componentes de una aplicación web que entran en contacto en todo momento con el usuario son los
utilizados para mostrar información e interactuar con él. En el mundo del desarrollo web son también conocidos
como vistas o frontend. Al tratarse de páginas web se tienen que mostrar a través de algún navegador de Internet
instalado en nuestro sistema que interprete el contenido de nuestras vistas y las dibuje en pantalla. Entre los
navegadores más populares se encuentran Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Safari y
Opera.
Las vistas de nuestras aplicaciones web muestran la información mediante lenguaje HTML, la estilizan mediante
hojas de estilo en cascada o CSS (Cascade Style Sheet) y añaden interactividad utilizando un lenguaje que es
interpretado también por el navegador: javascript.
Para simplificar la definición de la apariencia en HTML se creó lo que se conoce como Hojas de Estilo en
Cascada o CSS. Se trata de otro metalenguaje que permite definir los estilos a aplicar en las etiquetas HTML de
forma independiente, flexible y reutilizable, descargando de esa responsabilidad a cada etiqueta. De esta forma, ya no
es necesario repetir cada estilo en las etiquetas de apariencia similar, sino definirlo una vez y aplicarlo en múltiples
etiquetas nombrando el que definimos en la hoja de estilos.
Para añadir más interacción con el usuario se utiliza otro lenguaje de programación llamado javascript que es
interpretado por el navegador y permite realizar acciones como validar la información incluida en un formulario o
modificar las etiquetas HTML y sus características sin la necesidad de acceder a otra página web.

3.2. ¿Qué es Bootstrap?

Si ya tienes experiencia con el desarrollo de aplicaciones web conocerás la dificultad que implica el uso de estos
tres elementos de una forma adecuada sin que se convierta en un infierno de etiquetas HTML mezclado con estilos
y código javascript, casi imposible de mantener a lo largo del tiempo.

Esto es posible gracias a la creación de marcos de trabajo o frameworks dedicados a coordinar de forma eficiente
el uso de estos tres elementos, integrándolos y simplificando su uso. Para conseguirlo, estos frameworks te ahorran el
trabajo de crear estilos que resulten atractivos y sean homogéneos en toda tu aplicación, estructurando los elementos
que muestran la información y simplificando el desarrollo de javascript mediante otros frameworks específicos de ese
lenguaje.
Uno de los más utilizados en los últimos años es Bootstrap, popularizado rápidamente en el universo de las
aplicaciones web por su rapidez y simplicidad. Fue creado por un diseñador y un desarrollador de Twitter, una de
las redes sociales con más usuarios del mundo y liberado como un proyecto de código abierto u open source, es
decir, su código fuente está disponible para toda la comunidad de desarrolladores.
Bootstrap se compone únicamente de un juego de hojas de estilo en cascada y una librería de javascript. Con estos
dos elementos construye un potente marco para crear nuestras aplicaciones web. Las CSS incluidas son propias de

1
Curso PHP Básico Escuela de Administración Pública

Bootstrap mientras que la librería de javascript se basa en uno de los frameworks javascript más populares y
potentes: jQuery.
Javascript es un lenguaje de programación y como todo lenguaje su uso se simplifica mediante la creación de
librerías o API que contienen multitud de utilidades ya programadas, descargando a los desarrolladores de ese
esfuerzo. Multitud de esas utilidades están incluidas en jQuery. Más adelante conoceremos mejor esta librería.
En esta sesión conoceremos algunos de los elementos de Bootstrap que nos serán muy útiles para crear nuestros
proyectos de desarrollo web. Si deseas obtener más detalles acerca de este excelente framework accede a la página
oficial, [Link] donde podrás encontrar mucha documentación así como ejemplos documentados.

3.3. Instalando Bootstrap

La instalación de Bootstrap consiste simplemente en descargar el framework y situarlo en alguna carpeta de
nuestro proyecto. Una vez en su sitio, deberemos enlazarlo desde nuestras páginas web y empezar a explotar las
estupendas posibilidades que nos ofrece.
Para ello accede a la url de Bootstrap [Link] Hay varias formas de
descargarlo. Nosotros utilizaremos la más sencilla para un primer acercamiento a esta herramienta. Haz clic con el
botón izquierdo del ratón en el enlace titulado Download Bootstrap y descarga el archivo comprimido que contiene
Bootstrap. Una vez descomprimido podrás ver los archivos distribuidos de la siguiente forma:
Bootstrap/
├── css/
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
├── js/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
└── fonts/
├── [Link]
├── [Link]
├── [Link]
├── [Link]
└── [Link]
Como puedes observar se distribuye en tres carpetas que incluyen los estilos en ficheros CSS, la librería de
javascript y ficheros de fuentes de texto que contienen el juego de iconos que viene incluido con Bootstrap. Este
juego de iconos permite disponer, en un único archivo, de un grupo homogéneo de imágenes para incluir en
muchos elementos HTML.
Aunque la librería de javascript de Bootstrap se basa en jQuery, este framework no está incluido en el paquete que
has descargado. jQuery nos permite enlazar nuestro proyecto a su librería a través de Internet, sin la necesidad de
descargarlo y añadirlo a la aplicación web, simplificando su uso. De esta forma siempre tendremos enlazada la
última versión estable de jQuery sin la necesidad de tener que descargarla continuamente cuando cambie de versión.
Para nuestros ejemplos vamos a descargar la última versión. Accede a la página oficial de descarga de jQuery en
[Link] y haz clic en el enlace minified en la sección de jQuery Core para descargarse la versión 3.x,
con última versión estable 3.1.1. Esta acción te mostrará el diálogo de descarga del fichero [Link].
Descárgalo e inclúyelo en la carpeta del proyecto.
Nota: En muchas ocasiones verás que los archivos de javascript tienen en el nombre la
palabra minified, minimizado o en formato abreviado min. Esto indica que el código que
contiene está minimizado, es decir, se han eliminado todos los saltos de línea del código.
El objetivo de este formato es hacer más ligeros los archivos grandes de javascript, como

2
Curso PHP Básico Escuela de Administración Pública

sucede en el caso de librerías como jQuery, mediante la eliminación de esos caracteres.

De esta forma se suaviza la carga que soporta el navegador cuando tiene que interpretar
muchas librerías y archivos de código de javascript.

Para poder utilizar Bootstrap necesitamos incluir su archivo CSS, jQuery y su librería javascript. Crea una nueva
carpeta para esta sesión (sesion3) y añade la librería completa de Bootstrap así como [Link] lo que sería la
plantilla más básica que contiene todo lo necesario para empezar a utilizar Bootstrap. Incluye el contenido que hay a
continuación en un archivo con el nombre [Link]:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hola Mundo Bootstrap</title>
<!-- Bootstrap -->
<link href="css/[Link]" rel="stylesheet">
<script src="js/[Link]"></script>
<script src= "js/[Link]"></script>
</head>
<body>
<h1 id="miBloque">¡Hola Mundo!</h1>
</body>
</html>
En la sección <head> indicamos al navegador el juego de hojas de estilo en cascada que queremos usar con la
etiqueta o tag <link>. Observe cómo hemos enlazado la librería de jQuery y de Bootstrap mediante la etiqueta
<script>. En este caso es importante el orden debido a que la librería de Bootstrap se basa en jQuery.

3.4. Elementos básicos

En la primera sesión creamos un proyecto simple en HTML para gestionar nuestra agenda de contactos. Vamos a
darle una apariencia más agradable usando Bootstrap.
EJERCICIO: Copia el proyecto de la agenda de contactos completo en la carpeta sesion3, que ya contiene las
librerías de Bootstrap y adapta las páginas que hay para que usen este framework. Crea también una carpeta con el
nombre resources, para las imágenes para tener los archivos ordenados. Ten en cuenta que hay que cambiar las
páginas para que accedan a esa carpeta para obtener las imágenes.

NOTA: Por razones de espacio y así no incluir aquí todos los archivos del proyecto, uso
como ejemplo solo el archivo [Link]. Habría que hacer lo mismo en el resto de
páginas.
El archivo [Link] tendría el contenido siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mis Contactos</title>
<!-- Bootstrap -->
<link href="/css/[Link]" rel="stylesheet">
<script src="/js/[Link]"></script>
<script src= "/js/[Link]"></script>
</head>
<body>
<h1>Hola</h1>
<p>Bienvenido/a a su página de contactos.</p>

3
Curso PHP Básico Escuela de Administración Pública

<p><a href="[Link]">Entrar</a></p>
<p><a href="/"> Ejemplos</a></p>
</body>
</html>
NOTA: A efectos de simplicidad y de evitar tener múltiples carpetas con las mismas
librerías, he creado las carpetas con las librerías en la carpeta raíz para que todos los
ejemplos las usen desde un lugar común. Esto es importante a la hora de enlazar con
estas librerías desde cada archivo HTML.
Bootstrap descubrirá como de ancha es tu pantalla y responderá redimensionando tus elementos HTML, de ahí
el nombre de diseño adaptativo o ‘responsivo’ (responsive design). De hecho, desde las últimas versiones se da
preferencia al diseño orientado a dispositivos móviles. Primero se diseña para el móvil y luego se ajusta, si es
necesario, para las grandes pantallas. Con el diseño ‘responsivo’ no es necesario diseñar una versión para dispositivos
móviles de tu sitio web. Se verá bien en dispositivos con pantallas de cualquier tamaño.

3.4.1. Contenedores fluidos

Sigamos modificando nuestro proyecto. Para hacer fluido nuestro diseño, más ‘responsivo’, es necesario aplicar
estilos a las etiquetas HTML de nuestro proyecto.
EJERCICIO: Incluye todo el contenido de tu HTML dentro de una etiqueta div con al atributo class, es decir,
con su estilo, como container-fluid. Cuando hablo de contenido siempre me refiero a todo lo que exista entre
las etiquetas <body> de cada página.

El archivo [Link] quedaría así:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mis Contactos</title>
<!-- Bootstrap -->
<link href="/css/[Link]" rel="stylesheet">
<script src="/js/[Link]"></script>
<script src= "/js/[Link]"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hola</h1>
<p>Bienvenido/a a su página de contactos.</p>
<p><a href="[Link]">Entrar</a></p>
<p><a href="/"> Ejemplos</a></p>
</div>
</body>
</html>
3.4.2. Imágenes responsivas
Hacer que las imágenes se adapten al tamaño de la pantalla es muy fácil con Bootstrap. Lo único que tienes que
hacer es añadir el estilo img-responsive a la imagen y ésta se adaptará perfectamente al ancho de tu página.
EJERCICIO: Cambia todas las imágenes de los contactos de nuestra agenda para que sean adaptables. Después, al
visualizar cada contacto, cambia el tamaño de la ventana del navegador para apreciar cómo la imagen se adapta.

El final del archivo [Link] tendría el contenido siguiente:

...
<li>Correo: me@[Link]</li>
<li>Lugar de Trabajo: Mi Casa</li>
</ul>
<img class="img-responsive" src="resources/[Link]">

4
Curso PHP Básico Escuela de Administración Pública

</div>
</body>
</html>

Otra forma de ver cómo se adapta nuestra web a distintos tipos de tamaños es utilizando el inspector web o
herramienta para desarrolladores que suele venir de serie en algunos navegadores. Haz clic con el botón derecho del
ratón en la página web, desde el navegador, y selecciona la opción Inspeccionar elemento. Se abrirá en la zona
inferior del navegador un panel con muchas utilidades para nosotros. La que ahora nos interesa se encuentra en la
zona derecha del panel, en el borde superior con un icono cuadrado o con el símbolo de un dispositivo móvil. Si
seleccionas ese icono se muestra la web, dentro del navegador, con un tamaño menor y te da opciones de cambiarlo
para ver cómo se adapta.

3.4.3. Centrando texto

Para centrar cualquier texto de cualquier elemento solo es necesario añadir el estilo text-center al estilo del
elemento. Si todos los elementos de texto que pertenecen a un elemento padre tienen que tener el texto centrado, lo
más normal es añadir el estilo al padre para que afecte al aspecto de todos los descendientes.
EJERCICIO: Vas a centrar el título de tus páginas, el que se encuentra en la cabecera, para que tenga un aspecto
más atractivo. Lo único que necesitas es añadir el estilo text-center al elemento <h1>. Recuerda que puedes
añadir varios estilos al mismo elemento, separados por un espacio.

El archivo [Link] quedaría así:

...
</head>
<body>
<div class="container-fluid">
<h1 class="text-center">Hola</h1>
<p>Bienvenido/a a su página de contactos.</p>
...
Si quieres que el centrado afecte a todos los elementos que se están mostrando, puedes incluir este estilo en la
etiqueta <div> que la envuelve, en lugar de añadirlo a todos y cada uno de esos elementos.

...
</head>
<body>
<div class="container-fluid text-center">
<h1>Hola</h1>
<p>Bienvenido/a a su página de contactos.</p>
...
3.4.4. Botones
Bootstrap tiene estilos propios de botones mucho más vistosos que los típicos botones planos de HTML. El estilo
más básico se aplica mediante btn btn-default para que tenga la apariencia por defecto, con los bordes
redondeados y para que, al pasar el puntero del ratón por él, cambie el color de fondo para que el usuario interprete
que es un elemento de interacción. Bootstrap dispone de varias clases para definir varios tipos de botones, de varios
colores y tamaños, con la intención de que aporten significado a la acción que debería realizar, como alertas,
mensajes de información, etc.
En este listado puedes ver todos los disponibles:
<!-- Botón estándar -->
<button type="button" class="btn btn-default">Por defecto</button>
<!-- Ancho extra. Acción principal en un conjunto de botones -->
<button type="button" class="btn btn-primary">Principal</button>
<!-- Indica una acción con éxito o positiva -->
<button type="button" class="btn btn-success">Éxito</button>
<!-- Botón para mensajes informativos de alerta -->
<button type="button" class="btn btn-info">Información</button>
<!-- Indica que se debe tener precaución con la acción que lanza este botón -->

5
Curso PHP Básico Escuela de Administración Pública

<button type="button" class="btn btn-warning">Advertencia</button>

<!-- Indica una acción peligrosa o potencialmente negativa -->
<button type="button" class="btn btn-danger">Peligro</button>
<!-- Muestra la apariencia de un enlace y el comportamiento de un botón -->
<button type="button" class="btn btn-link">Link</button>

Figura 3.1: Ejemplos de botones

EJERCICIO: Crea un nuevo elemento de botón, con su estilo Bootstrap, en la página que lista los contactos con el
título Nuevo Contacto. Aunque ahora no tendrá ninguna utilidad, más adelante lo usaremos para acceder al
formulario para crear un nuevo contacto. Podrás usar más botones cuando trabajemos en la creación de esos
formularios. Mientras tanto, juega con los diferentes estilos.

El contenido del archivo [Link] es el siguiente:

...
<body>
<div class="container-fluid">
<h1>Mis Contactos</h1>
<button class="btn btn-primary">Nuevo Contacto</button>
<ul>
<li><a href="[Link]">Iron Man</a></li>
<li><a href="[Link]">Capitán América</a></li>
<li><a href="[Link]">Viuda Negra</a></li>
<li><a href="[Link]">Spider Man</a></li>
</ul>
<p>Total: 4 contactos.</p>
<p><a href="/"> Ejemplos</a></p>
</div>
</body>
</html>
Normalmente, los elementos <button> con el estilo btn son tan anchos como el texto que contienen. Si quieres
hacer que el botón ocupe todo el ancho de la página tienes que incluir el estilo btn-block. De forma cualquier
elemento que le siga aparece en la siguiente línea.

3.4.5. Grid
Para conseguir que el contenido se adapte Bootstrap utiliza varios sistemas. El más básico hace referencia a la
estructura visual del contenido, orientado principalmente a dispositivos móviles. Mediante estilos CSS predefinidos
establece un ancho para el contenedor principal que sea divisible entre 12 secciones o columnas (Grid 12), separadas
por un espacio entre ellas, que se comportan de forma dinámica, adaptándose al ancho de la pantalla del navegador.
Así, es posible distribuir la información por combinaciones de esas columnas consiguiendo un comportamiento
fluido de la información al adaptarse a la resolución de cada dispositivo.
Para utilizar este sistema de cuadrícula con la intención de estructurar la información en un conjunto de filas y
columnas:
1. Debemos usar filas para crear grupos horizontales de columnas.
2. Los elementos que se utilicen como filas deben tener asignados el estilo .container (ancho fijo) o
.container-fluid (ancho completo) para una alineación y separación correctas.
3. El contenido debe estar incluido dentro de las columnas y únicamente las columnas pueden ser
inmediatamente hijas de la filas.
4. Existen clases predefinidas como .row o .col-xs-4 para crear rápidamente el sistema de cuadrícula.
5. Las columnas crean espacios entre ellas utilizando el atributo de estilo padding.

6
Curso PHP Básico Escuela de Administración Pública

6. Las columnas de la cuadrícula se crean especificando el número de columnas, de las 12 disponibles, que
quieras combinar para formar columnas mayores; por ejemplo, si queremos distribuir la información en 4
columnas iguales usaremos tres elementos HTML, como <div>, con el estilo .col-xs-3.

Figura 3.2: Ejemplo de combinaciones en un sistema de cuadrícula con 12 columnas.

Como puedes observar en la figura 3.2, con esta división del espacio podemos hacer múltiples combinaciones para
mostrar la información. Utilizamos elementos <div> con el estilo .col-md-{numero de columnas}. El
código HTML para conseguir ese diseño sería el siguiente:

<div class="row">
<div class="col-md-7 well"> Columna x 7</div>
<div class="col-md-5 well"> Columna x 5</div>
</div>
<div class="row">
<div class="col-md-3 well"> Columna x 3</div>
<div class="col-md-3 well"> Columna x 3</div>
<div class="col-md-3 well"> Columna x 3</div>
<div class="col-md-3 well"> Columna x 3</div>
</div>
<div class="row">
<div class="col-md-6 well"> Columna x 6</div>
<div class="col-md-6 well"> Columna x 6</div>
</div>
<div class="row">
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
<div class="col-md-1 well"> Columna x 1</div>
</div>
Truco: El estilo .well crea un cuadro redondeado del tamaño del elemento <div>. De
esa manera puede apreciar mejor el espacio ocupado por cada celda.
Los estilos que indican el ancho de las columnas hacen referencia al tipo de dispositivo al que se deben ajustar.
Pueden ser col-xs-*, col-sm-*, col-md-* y col-lg-*, que se corresponden con dispositivos extra
pequeños (xs), pequeños (sm), medianos (md) y grandes (lg).

7
Curso PHP Básico Escuela de Administración Pública

EJERCICIO: En nuestro proyecto de contactos vamos a añadir un grid en cada página de contactos de forma que
los nombres de campos y sus valores vayan en filas y cada uno en columnas separadas. Usa el estilo row y col-
xs-* para las filas y las columnas.

Veamos como resulta en el archivo [Link]:

<div class="container-fluid">
<h1>Mis Contactos</h1>
<p><a href="[Link]">Volver</a></p>
<div class="row">
<div class="col-xs-12 col-md-6">Nombre:</div>
<div class="col-xs-12 col-md-6">Iron Man</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">Nombre Real:</div>
<div class="col-xs-12 col-md-6">Tony Stark</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">Editorial:</div>
<div class="col-xs-12 col-md-6">Marvel Comics Incs.</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">Teléfono:</div>
<div class="col-xs-12 col-md-6">+01 555 655145</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">Correo:</div>
<div class="col-xs-12 col-md-6">me@[Link]</div>
</div>
<div class = "row">
<div class="col-xs-12 col-md-6">Lugar de Trabajo:</div>
<div class="col-xs-12 col-md-6">Mi Casa</div>
</div>
<div class = "row">
<img class="img-responsive" src="resources/[Link]">
</div>
</div>

Si en el mismo estilo (atributo class) incluimos col-xs-* y col-md-* estamos indicando que se adapte a
esas dos resoluciones dependiendo del dispositivo que se utilice.

3.5. Tablas
Una forma muy común de representar la información en una página web es mediante el uso tablas de datos.
Elementos de información compuestos por varios campos se alinean horizontalmente y se distribuyen verticalmente
en filas y columnas, es decir, listas de información. Por ejemplo, para mostrar los contactos de nuestra agenda, éstos
se pueden dibujar cada uno en una línea, y cada componente del contacto, como nombre, apellidos y dirección, en
diferentes columnas.
En este caso, el uso de las tablas es el mismo usado con HTML, solo que se añade el estilo table de Bootstrap.
EJERCICIO: En nuestra agenda de contactos, en el fichero [Link] se muestra la lista de todas las entradas
de la agenda. Modifica ese archivo para que utilice una tabla y tenga el estilo por defecto de Bootstrap.

<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<h1>Mis Contactos</h1>
</div>

8
Curso PHP Básico Escuela de Administración Pública

<div class="col-xs-8">
<button class="btn btn-primary">Nuevo Contacto</button>
</div>
</div>
<div class="row">
<table class="table">
<thead>
<tr><th>Nombre</th></tr>
</thead>
<tbody>
<tr><td><a href="[Link]">Iron Man</a></td></tr>
<tr><td><a href="[Link]">Capitán América</a></td></tr>
<tr><td><a href="[Link]">Viuda Negra</a></td></tr>
<tr><td><a href="[Link]">Spider Man</a></td></tr>
</tbody>
<tfooter>
<tr><td>Total: 4 contactos.</td></tr>
</tfooter>
</table>
</div>
<div class="row">
<a href="/"> Ejemplos</a>
</div>
</div>

Hemos incluido las etiquetas propias de las tablas HTML para identificar la cabecera (<thead>), el cuerpo
(<tbody>) y el pie de la tabla (<tfooter>). También hemos estructurado las tres partes identificables de la
página en filas y columnas, es decir, una parte de cabecera que incluye el título y el botón de menú; una parte central
que alberga la tabla de datos; y un pié de página, en este caso, con un enlace.
Ahora la lista de contactos viene mejor organizada. En la cabecera de la lista aparece el nombre de la columna, y
cada fila de la misma incluye el enlace del contacto identificándose de las demás mediante líneas divisorias.
Pero Bootstrap permite más opciones, como por ejemplo añadir bandas de color alternadas para percibir mejor
las diferentes filas o crear un borde alrededor. Esto se consigue añadiendo a la tabla el estilo .table-striped y
.table-bordered. Si además añades el estilo .table-hover, cuando pases el cursor por encima de las filas de
la tabla, su fondo cambiará de color, dando a entender al usuario que son elementos de interacción.
EJERCICIO: Más adelante, usando PHP, gestionaremos completamente nuestra agenda de contactos, añadiendo,
modificando y eliminando entradas. Ya tenemos disponible desde el listado de contactos un botón para crear un
nuevo contacto. Añade una nueva columna a la tabla que incluya, para cada fila, un botón para editar la información
del contacto y otro para eliminarlo.

<table class="table table-striped table-bordered table-hover">

<thead>
<tr>
<th>Nombre</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="[Link]">Iron Man</a></td>
<td>
<button class="btn btn-primary">Editar</button>
<button class="btn btn-danger">Eliminar</button>
</td>
</tr>
<tr>
<td><a href="[Link]">Capitán América</a></td>

9
Curso PHP Básico Escuela de Administración Pública

<td>
<button class="btn btn-primary">Editar</button>
<button class="btn btn-danger">Eliminar</button>
</td>
</tr>
<tr>
<td><a href="[Link]">Viuda Negra</a></td>
<td>
<button class="btn btn-primary">Editar</button>
<button class="btn btn-danger">Eliminar</button>
</td>
</tr>
<tr>
<td><a href="[Link]">Spider Man</a></td>
<td>
<button class="btn btn-primary">Editar</button>
<button class="btn btn-danger">Eliminar</button>
</td>
</tr>
</tbody>
<tfooter>
<tr><td colspan="2">Total: 4 contactos.</td></tr>
</tfooter>
</table>

3.6 Iconos
Bootstrap dispone de un juego completo de iconos para dar significado a los elementos HTML. Usa Gliphicons
que es una librería iconos y símbolos, creados con la intención de que sean simples y orienten fácilmente. El total de
250 iconos y símbolos están disponibles en [Link]
Para incluir un icono en algún elemento, típicamente botones, solo es necesario una etiqueta <span>. Por
ejemplo, para crear un botón de información usamos el siguiente código:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-info-sign"></span> Más información
</button>

EJERCICIO: Cambia los botones del listado de contactos para incluir iconos que ayuden a identificar las acciones
que realizan. Estos botones son los de Nuevo Contacto, Editar y Eliminar. Consulta la lista de símbolos del enlace
proporcionado en párrafos anteriores.

...
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus-sign"></span> Nuevo Contacto
</button>
...
<button class="btn btn-primary">
<span class="glyphicon glyphicon-edit"></span> Editar
</button>
<button class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span> Eliminar
</button>
...

10
Curso PHP Básico Escuela de Administración Pública

3.7. Diálogo Modal

Este tipo de diálogos son ventanas con un cabecera para el título, una parte central para contener mensajes o
formularios y un pie donde situar botones de acción. El adjetivo modal hace referencia a que esa ventana se coloca
en primer plano, desactivando la interacción con el contenido que se encuentra detrás de ella. Sólo se puede
interactuar con ese diálogo, ya sea para cerrarlo, incluir contenido o sólo leer el mensaje o alerta que quiere
transmitir.
Veamos un ejemplo simple de creación y uso de diálogo modal:
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#miModal">
Lanzar diálogo modal
</button>
<!-- Diálogo modal oculto inicialmente-->
<div class="modal fade" id="miModal" tabindex="-1" role="dialog"
aria-labelledby="miModalTitulo" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="miModalTitulo">Título del Diálogo</h4>
</div>
<div class="modal-body">
Aquí podemos añadir cualquier contenido HTML
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cerrar</button>
<button type="button" class="btn btn-primary">Aceptar</button>
</div>
</div>
</div>
</div>

Figura 3.3. Diálogo modal y botón lanzador en segundo plano.

Al hacer clic en el botón que lanza el diálogo, se muestra la ventana en primer plano y se oscurece el contenido
que hay detrás. Si haces clic fuera de esa ventana, en el botón Cerrar o en el icono en forma de aspa en la esquina
superior derecha, se cerrará el diálogo.
Nota: no puede interactuar con ningún elemento que se encuentre tras la ventana de
diálogo, si lo hace la ventana se cerrará y no ocurrirá nada más.

11
Curso PHP Básico Escuela de Administración Pública

En el código HTML anterior se puede apreciar en primera instancia la definición del botón que muestra el
diálogo modal. En este botón destaca el atributo data-toggle="modal" que indica que ese botón abre un
diálogo modal; y data-target="#miModal" que hace referencia al atributo id del diálogo que se debe abrir al
pulsar el botón y que se encuentra definido más abajo.
Ese diálogo se describe con varios elementos <div> e inicialmente está oculto. En el código se visualizan
fácilmente las tres divisiones de las que se compone el diálogo: el título con el estilo .modal-title, el cuerpo del
diálogo con el estilo .modal-body y el pie con .modal-footer.
EJERCICIO: En ocasiones, cuando eliminamos un elemento de una tabla de datos, es necesario solicitar al usuario
la confirmación de tal acción, con la intención de evitar que esa acción haya sido llamada por error. En el archivo
[Link] añade un diálogo modal que se abra cuando el usuario haga clic en el botón Eliminar de alguna de
las filas de la tabla y pregunte si realmente desea eliminar ese contacto.

...
<button class="btn btn-danger" data-toggle="modal"
data-target="#contactosModal">
<span class="glyphicon glyphicon-trash"></span> Eliminar
</button>
...
<!-- Diálogo modal oculto inicialmente-->
<div class="modal fade" id="contactosModal" tabindex="-1" role="dialog" aria-
labelledby="contactosModalTitulo" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="contactosModalTitulo">Eliminar Contacto</h4>
</div>
<div class="modal-body">
¿Realmente desea eliminar ese contacto?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary"
id="btnEliminar">Eliminar</button>
</div>
</div>
</div>
</div>

3.8. Navegación
Si queremos utilizar un menú para acceder a las diferentes páginas de nuestra web, Bootstrap nos proporciona un
componente completo y funcional. En este menú puede incluir el título de la web, enlaces simples a otras páginas,
agrupación de enlaces en listas desplegables, formularios, textos e incluso un campo de texto para realizar búsquedas.
Nota: Bootstrap no realizará esas búsquedas, sólo pone a nuestra disposición ese campo
con un botón de búsqueda, nosotros tenemos que controlar a qué página enviará esa
búsqueda, qué código en PHP será el encargado de realizarla y devolver la información
solicitada.
El elemento que Bootstrap nos proporciona se construye con una etiqueta y un estilo, y lo llama barra de
navegación o nav bar. Una característica opcional muy interesante de este elemento de navegación es que se adapta
muy bien a cualquier dispositivo. Cuando el ancho del navegador lo permite se ajusta de forma horizontal. Si ese
navegador se reduce en ancho o se ve la página web a través de dispositivos con un ancho de pantalla menor, el
menú colapsa mostrando únicamente el título definido y un botón para desplegar el resto del menú en formato
vertical. En breve veremos esta característica.

12
Curso PHP Básico Escuela de Administración Pública

El código para definir un menú se incluye en la etiqueta <nav>:

<nav class="navbar navbar-default">
<div class="container-fluid">
...
</div>
</nav>

La etiqueta <nav> tiene como estilos .navbar y .navbar-default, para indicar que se trata de una barra
de navegación. Así Bootstrap le asignará las propiedades correspondientes, así como el comportamiento de un menú
de navegación con sus librerías de javascript.
En esa etiqueta hay dos secciones diferenciadas. La primera para indicar una cabecera donde se mostrará el titulo
del proyecto y el botón que aparece cuando la página se ajusta a un ancho determinado y el menú se colapsa.
Cuando no está colapsado, ese botón está oculto.
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-ejemplo-navbar-collapse-1">
<span class="sr-only">Menú colapsado</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Título de mi página </a>
</div>
La cabecera se compone de un elemento <div> con el estilo .navbar-header. Dentro de ella tenemos
definido el botón de colapsado con una etiqueta <button> con el estilo .navbar-toggle y el atributo data-
target con un valor que nos servirá para relacionar este botón con el cuerpo del menú que se ha de colapsar.
Dentro de ese botón se definen varias etiquetas <span> que sirven para que aparezcan tres líneas horizontales
rellenando el botón para dar la apariencia de que es un elemento seleccionable. Para terminar se configura el título
de la aplicación en una etiqueta <a>, que es la que se utiliza en HTML para definir enlaces a otros elementos. Para
indicar con Bootstrap que se trata del título del menú de navegación utilizamos el estilo .navbar-brand y
escribimos el título que queremos para nuestra web dentro de esa etiqueta.
Nota: En este caso el enlace del título está vació ya que el atributo href no incluye
ninguna página de destino. Si quisiéramos que al hacer clic en este título se cargase otra
página, habría que incluir la dirección URL de la página en el atributo href. Al definir
la URL con el carácter '#' indicamos que la página de destino es la actual y no es
necesario cargarla de nuevo.
Veamos un ejemplo de barra de navegación con varios elementos. Crea una archivo con el nombre [Link] e
incluye el siguiente código:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Título y menú colapsado -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-ejemplo-navbar-collapse-1">
<span class="sr-only">Menú colapsado</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Título de ejemplo</a>
</div>
<div class="collapse navbar-collapse" id="bs-ejemplo-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">

13
Curso PHP Básico Escuela de Administración Pública

<a href="#">Enlace <span class="sr-only">(current)</span></a>

</li>
<li><a href="#">Enlace</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button">Desplegable <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Acción</a></li>
<li><a href="#">Otra acción</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Enlace separado</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar">
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>
</div>
</div>
</nav>

El elemento <div> que contiene el cuerpo del menú tiene asignado los estilos .collapse y .navbar-
collapse. Así indicamos que se trata de elementos del menú de navegación y que su comportamiento se ajustará
al ancho del navegador, colapsando cuando sea necesario.
Si observas detenidamente verás que el atributo identificador id de este elemento (bs-ejemplo-navbar-
collapse-1) tiene el mismo valor que el atributo data-target del botón de colapso. De esta forma se
relacionan ambos elementos. Así, javascript modificará el aspecto del menú cuando se tenga que ajustar a anchos
menores y mostrará el menú con ese identificador al hacer clic sobre el botón definido en la cabecera de menú.
Dentro del elemento del cuerpo de menú, tenemos una lista desordenada que en HTML se identifica con la
etiqueta <ul> (unordered list). Cada elemento de la lista se etiqueta con <li> (list element). Para esa lista se
asignan los estilos .nav y .navbar-nav para señalar que son elementos estándar del menú de navegación. A
continuación definimos los enlaces como elementos de la lista añadiendo etiquetas de enlace <a> a las etiquetas
<li>. Fíjate que uno de los enlaces tiene el estilo .active. Con este estilo indicamos qué elemento de menú está
activo en ese momento, es decir, que la página que carga ese enlace es la que se está visualizando.

Figura 3.4. Menú de navegación.

Las listas desplegables son un componente propio de Bootstrap que podemos utilizar para agrupar elementos de
menú. Para definir una, el elemento de la lista <li> tiene que tener el estilo .dropdown-menu. Ese desplegable
necesita tener un título identificativo, así como un icono en forma de flecha hacia abajo que permita al usuario
interpretar que se trata de una lista desplegable. El título se define con una etiqueta de enlace <a> con el estilo
.dropdown-toggle. Al ser una lista que se despliega con el javascript proporcionado por Bootstrap, tenemos que
indicarlo mediante el atributo data-toggle="dropdown". Para incluir los elementos del menú desplegable
definimos otra lista desordenada <ul> que funciona de igual manera que la vista anteriormente.
Un elemento extra que puede contener este menú es el de separación entre menús. Esa línea de separación es útil
cuando se desea agrupar diferentes opciones de menú en un menú desplegable. En este caso la última opción tiene
un separador en forma de línea definido como un elemento <li> con el estilo divider.

14
Curso PHP Básico Escuela de Administración Pública

Haz más pequeña la ventana o usa el inspector de código para cambiar el tamaño de la página visible para ver
cómo se colapsa el menú y muestra un botón que, al ser pulsado, despliega un menú contextual. Así se adapta
perfectamente para ser usado desde las pantallas más pequeñas de los dispositivos móviles.

15
Curso PHP Básico Escuela de Administración Pública

Figura 3.5. Menú de navegación colapsado.

Figura 3.5. Menú de navegación colapsado desplegado.

Un efecto muy interesante de esta barra de navegación es la que permite mantenerla en la zona superior de la
página cuando se desplace hacia abajo para ver más contenido. De esta manera siempre tiene accesible el título de la
aplicación o página web y el menú para acceder a cualquier opción en todo momento. El comportamiento por
defecto es el habitual, es decir, que esa barra desaparezca cuando usamos las barras de desplazamiento. Para
disponer de esta característica solamente tiene que añadir el estilo .navbar-static-top a la etiqueta <nav>.

Nota: Solo nos quedaría por ver cómo Bootstrap muestra los componentes de un
formulario. Más adelante, cuando veamos el tema de los formularios con PHP
trataremos con los estilos que tenemos a nuestra disposición.
EJERCICIO: Vamos a añadir una barra de navegación a nuestro proyecto, tanto al archivo [Link] como a
cada uno de los archivos de contacto. Incluye el contenido del principio en la barra de navegación, es decir, el título
de la aplicación y el botón de nuevo contacto.

Solución:

<nav class="navbar navbar-default">

<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-ejemplo-navbar-collapse-1">
<span class="sr-only">Menú colapsado</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Mis Contactos</a>
</div>
<div class="collapse navbar-collapse" id="bs-ejemplo-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="[Link]">
<span class="glyphicon glyphicon-home"></span> Inicio
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-plus"></span> Nuevo Contacto

16
Curso PHP Básico Escuela de Administración Pública

</a>
</li>
</ul>
</div>
</div>
</nav>

El enlace de navegación hacia la página de inicio aparece como el activo cuando estamos visualizando el archivo
[Link]. Cuando veamos un contacto particular, ese elemento no tiene el estilo active. Con ese enlace ya
no es necesario el otro que existe con el literal Volver en los archivos de cada contacto.

17