PDF de programación - Módulo I: Bootstrap

Módulo I: Bootstrap

Objetivo del Módulo:

Agilizar la maquetación y diseño de aplicativos web



Al igual que el back-end , el front-end es de gran importancia en un aplicativo, ya que le
presenta al usuario una vista agradable, por este motivo emplearemos un framework
(estructura de un aplicativo web compuesta de componentes personalizables para el
desarrollo de una aplicación) llamado Bootstrap , un proyecto de software libre que facilita
un diseño de sitios web flexibles en diversos dispositivos a través de un método de
etiquetas. Para facilitar la comprensión de esta temática es necesario contar con
conocimientos básicos en HTML5 y CSS3







Contenido
Instalación y configuración de Bootstrap ............................................................................................ 3

Sistema de rejillas de Bootstrap .......................................................................................................... 5

Tablas .................................................................................................................................................. 8

Formularios ....................................................................................................................................... 11

input,textarea ,select ,p ................................................................................................................ 11

checkbox........................................................................................................................................ 12

Radio.............................................................................................................................................. 12

Botones ......................................................................................................................................... 13

Estilo de Botones ........................................................................................................................... 13

Tamaños de botón .................................................................................................................... 14

Iconos ................................................................................................................................................ 15

Barras de navegación y Menús ......................................................................................................... 16

Por pestañas ............................................................................................................................... 16

Píldoras ..................................................................................................................................... 17

Sistema de plantillas.......................................................................................................................... 18

Conclusiones Finales: ........................................................................................................................ 21





Instalación y configuración de Bootstrap
Ahora bien, presentaremos un ejemplo sencillo en el que emplearemos Bootstrap.

Lo primero que debemos hacer es crear una carpeta llamada MiProyecto en la ruta
C:\wamp\www\ , a continuación debemos dirigirnos a en nuestro navegador y escribir la
direcciones de Bootstrap http://getbootstrap.com/ y al acceder debemos hacer clic sobre
el botón “Download Bootstrap” y finalmente seleccionar la opción resaltada a continuación



Se descargará un archivo comprimido el cual contiene una carpeta con 3 sub carpetas,
dichas subcarpetas debemos extraerlas en la ruta C:\wamp\www\MiProyecto,
De tal forma que obtengamos un resultado como el siguiente



Nota: BOOTSTRAP puede ser enlazado sin necesidad de archivos (CDN) pero con el fin de
garantizar la funcionalidad del front-end tanto en web como escritorio emplearemos el
método local



En La carpeta MiProyecto creamos un archivo index.html o también puede ser .php el
cual contenga la estructura básica de html5 con una etiqueta h1 que contenga cualquier
texto. Entre sus etiquetas de cabecera <head></head> incluiremos las siguiente etiquetas





que permiten el funcionamiento de Bootstrap. Debemos mencionar que cada vez que
vamos emplear Bootstrap deben estar presentes estos enlaces



<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- facilita la compatibilidad de nuestro sitio con IE=edge de
microsoft -->

<!--Asegura que la proporción de si sitio web se mantenga -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="js/bootstrap.min.js"></script>

<!--Llama a archivo css de bootstrap que contiene el código -->

<!--Llama a archivo js de bootstrap que contiene el código JavaScript
-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.j
s"></script>
<!--Si deseamos usar funciones de jquery en nuestro sitio dbeemos
emplear esta etiqueta -->
<script
src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></scrip
t>
<!--Permite la compatibilidad de html5 en navegadores no soportados
-->
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--Permite la compatibilidad de responsive en navegadores no
soportados -->


Es viable que si los tres últimos scripts no los vamos a utilizar los podemos omitir, De lo
contrario obtenemos esto:



Observación: Si deseamos aplicar nuestros estilos personales junto con los de Bootstrap
debemos simplemente añadir nuestra hoja de estilo al finalizar la cabecera, es decir una línea
antes de la de cerrar la etiqueta </head>. De esa manera podemos aplicar nuestros estilos sobre
el proyecto.







Sistema de rejillas de Bootstrap
Se encuentra basado en un div (contenedor) identificado con la clase “container” que
contiene una fila reconocida con la clase “row” que presenta un sistema de rejillas, de tal
manera que en cada fila la suma de sus celdas o rejillas contenidas no superen un valor
máximo 12, Proporción que puede variar de acuerdo a nuestras necesidades y facilita la
presentación en las diferentes resoluciones.
A continuación presentamos un gráfico que representa lo anteriormente mencionado con
diferentes ejemplos en cada fila y variaciones de proporciones



El tamaño de cada rejilla de un contenedor puede variar en su proporción y
comportamiento al cambiar de resolución según nuestro gusto, aportando en el responsive
design del sitio web por medio de un prefijo en la clase de cada rejilla. A continuación
observaremos una tabla de las resoluciones gestionadas por Bootstrap







Tipo

Resolución

Dispositivo

prefijo de clase

Extra pequeños

<768px

Pequeños

≥768px

móviles

Tablet

.col-xs-

.col-sm-

medianas

≥992px

Ordenadores de

.col-md-

sobremesa

Grandes

≥1200px

Grandes dispositivos

.col-lg-



Ahora bien si plasmamos lo mencionado anterior en el código.

Nota: El estilo de prueba es adicionado simplemente como referencia para distinguir una
rejilla de otra.


Ahora visualizamos cómo se comporta cada div en el navegador en cada resolución de
acuerdo al anterior código







Vista en Dispositivos Extra Grandes



Vista en Dispositivos Medianos



Vista en Dispositivos Pequeños



Vista en Dispositivos extra Pequeños





De esta Manera observamos cómo cambia de tamaño cada celda según la resolución del
dispositivo, obteniendo un sitio flexible de una forma sencilla gracias a Bootstrap .



Nota: Si en un rejilla no determinados un tamaño para una resolución en específico
Bootstrap tomará el siguiente parámetro a la derecha por ejemplo (si en el anterior
ejercicio no asignamos un comportamiento para dispositivos extra grandes col-lg-3 , tomará
el comportamiento de dispositivos medianos col-md-3 )

Tablas
Las tablas son un elemento importante en un proyecto web ya que nos permiten la
visualización de contenido, a continuación presentamos como realiza la gestión de ellas
Bootstrap

La estructura común de una tabla con dos registros es la siguiente



Para asignar estilo con Bootstrap vamos a hacer unos pequeños cambios



 Ubicar la tabla dentro en un div con la clase conteiner,un div con la clase row

mencionada al iniciar el módulo

 A la etiqueta table añadir la clase "table"
 Ubicar el contenido de la primera fila <tr></tr> que contiene los rótulos de la
tabla entre etiquetas <thead></ thead > permitiendo a Bootstrap identificar la
cabecera de la tabla

 En el caso de la fila de cabecera que contiene los rótulos de la tabla remplazar los td

por th

 Ubicar el contenido de la segunda fila en adelante que contiene los rótulos de la
tabla entre etiquetas < tbody></ tbody> que permite a Bootstrap identificar el
cuerpo de la tabla





Si aplicamos los anteriores pasos a nuestra tabla en el código obtendremos algo como esto


Al guardar y visualizar en el navegador podremos apreciar una tabla mucho más ordenar y
con una mejor presentación



Otros parámetros adicionales que podemos añadir a la clase table que puede ir separados
por un espacio son







Atributo
table-bordered
.table-striped

Código

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

table-hover

<table class="table table-hover ">

Descripción

Añade borde a la tabla
Resalta una fila de manera
intercalada
Permute resaltar una fila al pasar el
mouse sobre ella

table-condensed

<table class="table table- condensed "> Permite ahorrar espacio en las

celdas y compactarlas


Si aplicamos todos los atributos obtendremos algo