Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Tutorial Bootstrap
Tutorial Bootstrap
1.-
Introduccin e instalacin
2.-
El texto
3.-
Tablas
4.-
Sistema Grid
5.-
Formularios
6.-
Elementos
7.-
Personalizacin
Introduccin e instalacin
Si ests metido en el mundo del desarrollo Web, habrs odo hablar de Bootstrap,
para los que no, Bootstrap es un framework basado en HTML y CSS, fue creado por
Twitter y lo liber en 2012, desde entonces ha ganado muchos adeptos, hasta el
nivel que cuenta con la mayor comunidad de Github del mundo.
Este framework nos ayuda a agilizar la creacin del interfaz de nuestra pgina web.
Con la particularidad, que usando Bootstrap, nuestro sitio estar adaptado a la
pantalla del dispositivos con el que accedemos, ya sea un ordenador, tablet,
smartphone, televisin.... Esto significa que tendremos una Web responsive o
adaptativa, y desde hace pocos meses, es
fundamental de cara al posicionamiento
en Google.
Adems de agilizar la creacin de nuestra Web, con Bootstrap conseguiremos crear
un diseo limpio, intuitivo, usable y de poco peso, por lo que la carga de nuestra web
ser muy rpida. Es muy cmodo, porque muchas de las funcionalidades que
necesitaremos ya estn desarrolladas, y si no, tienes acceso a una gran cantidad de
documentacin en varios idiomas y una comunidad que dar respuestas a todas tus
dudas.
Para seguir este tutorial no hace falta tener grandes conocimientos en
programacin, con unas noticias bsicas de HTML5 y CSS3, conseguiremos crear
nuestra primera web esttica o dinmica compatible con todos los navegadores
modernos.
1
. Descargar el cdigo compilado, es la ideal para comenzar a trabajar con
Bootstrap.
2. Descargar cdigo fuente, contiene todo los archivos originales de
Bootstrap, para poder usarlo necesitas compilarlo.
3. Descargar cdigo fuente en Sass, sta versin del cdigo fuente est
convertida a Sass para facilitar la implementacin con aplicaciones como Ruby,
css/
bootstrap.css
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.min.css
js
/
bootstrap.js
bootstrap.min.js
fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
>
</
body
>
</
html
>
Perfecto, ya tenemos nuestra web, ahora llamamos a Bootstrap para que podamos
hacer uso de sus funcionalidades
<!DOCTYPE html>
<
html
lang
=
"es"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
> <
!Con
esto
garantizamos
que
se
vea
bien
en
dispositivos
m
viles
>
<
title
>Mi primer proyecto con Booststrap</
title
>
<
link
href
=
"css/bootstrap.min.css"
rel
=
"stylesheet"
media
=
"screen"
>
<
!Llamamos
al
archivo
CSS>
</
head
>
<
body
>
<
h1
>Hola mundo!</
h1
>
<
p
> Hola a todos desde OpenWebinars.net, mi primera web con Bootsrap ;(</
p
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
></
script
>
<
!
Importante
llamar
antes
a
jQuery
para
que
funcione
bootstrap.min.js >
<
script
src
=
"js/bootstrap.min.js"
></
script
> <
!
Llamamos
al
JavaScript
de
Bootstrap>
</
body
>
</
html
>
Usando el CDN
Si nos hemos decantado al final por utilizar el CDN, quedara as:
<!DOCTYPE html>
<
html
lang
=
"es"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
> <
!Con
esto
garantizamos
que
se
vea
bien
en
dispositivos
m
viles
>
<
title
>Mi primer proyecto con Booststrap</
title
>
<
link
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel
=
"stylesheet"
media
=
"screen"
> <
!Llamamos
al
archivo
CSS
a
trav
s
de
CDN>
</
head
>
<
body
>
<
h1
>Hola mundo!</
h1
>
<
p
> Hola a todos desde OpenWebinars.net, mi primera web con Bootsrap ;(</
p
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
></
script
>
<
!
Importante
llamar
antes
a
jQuery
para
que
funcione
bootstrap.min.js >
<
script
src
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"
></
scrip
t
> <
!
Llamamos
al
JavaScript
a
trav
s
de
CDN>
</
body
>
</
html
>
El texto
Lo ms importante en una web es el contenido, y para ello Bootstrap tiene una gran
cantidad de estilos predefinidos para los titulares y textos. Tenemos a nuestra
disposicin muchos estilos, nosotros en este tutorial vamos a verlos ms
interesantes, en la d
ocumentacin oficial tenis todos
y acompaados de ejemplos.
Titulares
Para crear ttulos en nuestra web, utilizamos las etiquetas h1 hasta h6, estas
etiquetas sirven para describir el contenido de nuestra web. Hay que tener en cuenta
que la etiqueta h1 es la ms importante y solo debe usarse una vez por cada pgina
web, luego h2 sera la siguiente ms importante y se utiliza para indicar los ttulos de
subsecciones, el h2 puede ser utilizado varias veces, as hasta el h6, que es la
etiqueta de encabezado que menor importancia tiene de entre las dems.
Despus de esta pequea introduccin a los encabezados, vamos a ver como
usarlos con Bootstrap. Es muy fcil de utilizar, como ya tenemos los estilos
predefinidos, lo nico que haremos es poner la etiqueta que queramos usar y
automticamente coge el estilo.
<h1>
h1.EncabezadodeBootstrap
</h1>
<h2>
h2.EncabezadodeBootstrap
</h2>
<h3>
h3.EncabezadodeBootstrap
</h3>
<h4>
h4.EncabezadodeBootstrap
</h4>
<h5>
h5.EncabezadodeBootstrap
</h5>
<h6>
h6.EncabezadodeBootstrap
</h6>
Adems, a los titulares le podemos aadir un subtexto aadiendo una etiqueta small,
la etiqueta debe de ir antes de cerrar el encabezado, si no tendr otro efecto.
<h1>
h1.EncabezadodeBootstrap
</h1>
<h2>
h2.EncabezadodeBootstrap
</h2>
<h3>
h3.EncabezadodeBootstrap
</h3>
<h4>
h4.EncabezadodeBootstrap
</h4>
<h5>
h5.EncabezadodeBootstrap
</h5>
<h6>
h6.EncabezadodeBootstrap
</h6>
Si quieres puedes utilizar una etiqueta span, puedes hacerlo pero debes de asignarle
la clase small, el resultado debe ser el mismo.
<h1>
h1.EncabezadodeBootstrap
<span
class
=
"small"
>
Subtextocon
etiquetaspan
</span></h1>
Prrafos
El tamao predeterminado de fuente es de 14px, para insertar textos hay que utilizar
las etiquetas p, cada prrafo tiene que ir dentro de ellas.
<p>
Nullamquisrisusegeturnamollisornareveleuleo.Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nullam id dolor id nibh ultricies
vehicula.
</p>
10
<p>
Cumsociisnatoquepenatibusetmagnisdisparturientmontes,
nasceturridiculusmus.Donecullamcorpernullanonmetusauctor
fringilla. Duis mollis, est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem nec elit. Donec
ullamcorper
nullanonmetusauctorfringilla.
</p>
<p>
Maecenasseddiamegetrisusvariusblanditsitametnon
magna.Donecidelitnonmiportagravidaategetmetus.Duis
mollis,estnoncommodoluctus,nisieratporttitorligula,eget
laciniaodiosemnecelit.
</p>
<p
class
=
"lead"
>
Nullamquisrisusegeturnamollisornareveleu
leo.Cumsociisnatoquepenatibusetmagnisdisparturient
montes,nasceturridiculusmus.Nullamiddoloridnibhultricies
vehicula.
</p>
<p>
Cumsociisnatoquepenatibusetmagnisdisparturientmontes,
nasceturridiculusmus.Donecullamcorpernullanonmetusauctor
fringilla.Duismollis,estnoncommodoluctus,nisierat
porttitorligula,egetlaciniaodiosemnecelit.Donec
ullamcorpernullanonmetusauctorfringilla.
</p>
<p>
Maecenasseddiamegetrisusvariusblanditsitametnon
magna.Donecidelitnonmiportagravidaategetmetus.Duis
mollis,estnoncommodoluctus,nisieratporttitorligula,eget
laciniaodiosemnecelit.
</p>
11
Como podris observar, el primer prrafo destaca sobre los otros dos.
Bloque de citas
En Bootstrap tambin tenemos estilos predefinidos para poder citar frases o
prrafos. Simplemente hay que utilizar la etiqueta blockquote.
<blockquote>
<p>
Estoseralafraseoprrafoacitar
</p>
</blockquote>
<blockquote>
<p>
Estoseralafraseoprrafoacitar.
</p>
<footer>
ngelRobledanoenOpenWebinars
</footer>
</blockquote>
<blockquote
class
=
"blockquotereverse"
>
<p>
Estoseralafraseoprrafoacitar.
</p>
<footer>
ngelRobledanoenOpenwebinars.net
</footer>
</blockquote>
12
Listas
Las listas se utilizan para agrupar elementos relacionados, dentro de las listas hay
varios tipos de listas.
Listas Ordenadas
Utiliza este tipo de listas para crear listas ordenadas si el orden es importante.
Utilizamos la etiqueta ol para decir que es una lista ordenada y la etiqueta li para
decir que es un elemento de la lista.
<blockquote
class
=
"blockquotereverse"
>
<p>
Estoseralafraseoprrafoacitar.
</p>
<footer>
ngelRobledanoenOpenwebinars.net
</footer>
</blockquote>
Listas desordenadas
Si el orden de los elemento no es importante y no es necesario ordenarlas,
utilizamos la etiqueta ul, y dentro una etiqueta li para cada elemento de la lista.
<ul>
<li>
Loremipsumdolorsitamet
</li>
<li>
Consecteturadipiscingelit
</li>
<li>
Integermolestielorematmassa
</li>
<li>
Facilisisinpretiumnislaliquet
</li>
</ul>
13
<ul
class
=
"listinline"
>
<li>
Elemento1
</li>
<li>
Elemento2
</li>
<li>
Elemento3
</li>
</ul>
<ul
class
=
"listinline"
>
<li>
Elemento1
</li>
<li>
Elemento2
</li>
<li>
Elemento3
</li>
</ul>
Cuando queremos resaltar una parte del texto siempre lo ponemos en negrita, con
Bootstrap tenemos tambin esta opcin. Para ponerla en negrita, utilizamos la
etiqueta strong.
14
Por ejemplo:
<p>
Elsiguientetrozodetexto
<strong>
semuestraen
negrita
</strong>
.
</p>
<p>
Elsiguientetrozodetexto
<strong>
semuestraen
negrita
</strong>
.
</p>
Y subrayarlo tambin:
<p>
Elsiguientetrozodetexto
<u>
semuestrasubrayado
</u>
.
</p>
Tablas
Prohibido usar las tablas para estructurar el diseo de nuestra Web
, sta prctica
se dej de utilizar a principio del 2000 y no por capricho. Para estructurar nuestra
web, veremos en el prximo captulo de este tutorial como estructurar con el
sistema de rejilla de Bootstrap.
15
Con el uso de tablas haremos que nuestra Web tarde ms en cargar porque
aadimos cdigo redundante.
No es flexible.
As que dejando este punto aclarado Para qu se utilizan las tablas? Exacto, para
hacer tablas. No se recomienda el uso excesivo de tablas en nuestras Webs, pero si
que nos pueden venir muy bien para p
resentar cualquier elemento tabulado.
<table>
<thead>
<tr>
<th>
Nombre
</th>
<th>
Apellido
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Rocky
</td>
<td>
Balboa
</td>
</tr>
16
<tr>
<td>
Indiana
</td>
<td>
Jones
</td>
</tr>
<tr>
<td>
Willy
</td>
<td>
Wonka
</td>
</tr>
</tbody>
</table>
Podis tener por fila, cuantas columnas queris. Ahora ya que tenemos una tabla
bsica le vamos a dar estilos con Bootstrap. Recomiendo que hagis vuestra propia
tabla y practiquis.
Tabla sencilla
Bootstrap no da estilo al utilizar la etiqueta table, as que nosotros le asignaremos el
estilo .table para darle formato.
<table
class
=
"table"
>
<thead>
<tr>
<th>
Nombre
</th>
<th>
Apellido
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Rocky
</td>
<td>
Balboa
</td>
17
</tr>
<tr>
<td>
Indiana
</td>
<td>
Jones
</td>
</tr>
<tr>
<td>
Willy
</td>
<td>
Wonka
</td>
</tr>
</tbody>
</table>
Listas coloreadas
Para mejorar la lectura de la tabla, podemos darle color gris al fondo de las filas
pares. Aadimos el estilo .table-striped junto al estilo .table separndolo por un
espacio.
<table
class
=
"tabletablestriped"
>
<thead>
<tr>
<th>
Nombre
</th>
<th>
Apellido
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Rocky
</td>
<td>
Balboa
</td>
18
</tr>
<tr>
<td>
Indiana
</td>
<td>
Jones
</td>
</tr>
<tr>
<td>
Willy
</td>
<td>
Wonka
</td>
</tr>
</tbody>
</table>
Tablas dinmicas
Usando el estilo .table-hover, conseguiremos que cuando pasemos el cursor por
encima de una fila, cambia su color de fondo para mejorar la lectura de dicha fila y
de la tabla en general.
<div
class
=
"tableresponsive"
>
<table
class
=
"tabletablehover"
>
<thead>
<tr>
<th>
Nombre
</th>
<th>
Apellido
</th>
<th>
2Apellido
</th>
<th>
Mvil
</th>
<th>
Email
</th>
19
<th>
Direccin
</th>
<th>
Ciudad
</th>
<th>
CdigoPostal
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Rocky
</td>
<td>
Balboa
</td>
<td>
Lpez
</td>
<td>
666666666
</td>
<td>
[email protected]
</td>
<td>
Callelapaz
</td>
<td>
Sevilla
</td>
<td>
41000
</td>
</tr>
<tr>
<td>
Indiana
</td>
<td>
Jones
</td>
<td>
Perez
</td>
<td>
666777777
</td>
<td>
[email protected]
</td>
<td>
Calleabastos
</td>
<td>
Madrid
</td>
<td>
80000
</td>
</tr>
<tr>
<td>
Willy
</td>
<td>
Wonka
</td>
<td>
Choco
</td>
<td>
666955955
</td>
<td>
[email protected]
</td>
<td>
CalleCaramelo
</td>
20
<td>
Vigo
</td>
<td>
94000
</td>
</tr>
</tbody>
</table>
</div>
Tablas responsive
Como bien sabes ya, Bootstrap est enfocado para crear nuestro diseo responsive,
es decir, que nuestra Web se adapte a la pantalla de cualquier dispositivo con el que
accedemos a ella. La solucin que da Bootstrap, es que si accedemos desde un
dispositivo con pantalla menor a 768px muestra un scroll horizontal para ver la tabla
completa.
Lo que tenemos que hacer es meter nuestra tabla en un div, y darle estilo
.table-responsive. Si queremos ver el resultado de esta tabla, debemos de minimizar
nuestro navegador, vers cmo aparece el scroll horizontal.
<div
class
=
"tableresponsive"
>
<table
class
=
"tabletablehover"
>
<thead>
<tr>
<th>
Nombre
</th>
<th>
Apellido
</th>
<th>
2Apellido
</th>
<th>
Mvil
</th>
<th>
Email
</th>
<th>
Direccin
</th>
<th>
Ciudad
</th>
21
<th>
CdigoPostal
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Rocky
</td>
<td>
Balboa
</td>
<td>
Lpez
</td>
<td>
666666666
</td>
<td>
[email protected]
</td>
<td>
Callelapaz
</td>
<td>
Sevilla
</td>
<td>
41000
</td>
</tr>
<tr>
<td>
Indiana
</td>
<td>
Jones
</td>
<td>
Perez
</td>
<td>
666777777
</td>
<td>
[email protected]
</td>
<td>
Calleabastos
</td>
<td>
Madrid
</td>
<td>
80000
</td>
</tr>
<tr>
<td>
Willy
</td>
<td>
Wonka
</td>
<td>
Choco
</td>
<td>
666955955
</td>
<td>
[email protected]
</td>
<td>
CalleCaramelo
</td>
<td>
Vigo
</td>
<td>
94000
</td>
22
</tr>
</tbody>
</table>
</div>
Sistema Grid
Para estructurar nuestra web con el Framework de Bootstrap utilizaremos un
sistema Grid de 12 columnas,
olvdate de las tablas
. Esto quiere decir, que nuestra
web tendr un ancho de pgina de 12 columnas, por lo tanto podremos aadir como
mximo 12 columnas de tamao 1 en nuestra pgina web.
Gracias a este sistema, nuestra web se ver en todas las pantallas de los
dispositivos con los que accedamos a ella. De hecho, la filosofa de este framework
es, disear para mviles primero.
Empezando a estructurar
Para centrar nuestra web en nuestro navegador utilizaremos la clase .container,
cuando la anchura de la web es fija. Si queremos una Web con anchura variable,
utilizaremos la clase.container-fliud.
Esto qu es? Pondremos un ejemplo. Cuando visitis una pgina Web con una
pantalla con resolucin alta y a vuestra izquierda y derecha tenis espacios vacos,
es que esa web tiene un ancho fijo, si est diseada con Bootstrap, estarn
utilizando la clase .container.
Sin embargo, si entramos en una web y sta ocupa todo nuestro ancho, la web
utilizar .container-fluid.
23
24
Entonces, lo primero que tenemos que decidir es qu tipo de ancho queremos para
nuestra web. En Bootstrap se disea por filas, por lo que podemos tener un men
que ocupe todo el ancho y el cuerpo de la web sea fijo. Es decir, podremos combinar
los dos sin ningn tipo problema.
12 columnas
Como ya sabes, podremos utilizar un ancho de 12 columnas como mximo, y las
podemos combinar como queramos. Podremos tener 3 columnas en nuestra web o
5 o 6 o 2, siempre y cuando la suma de stas den 12 columnas.
Aqu os dejo el cdigo de un ejemplo con 3 columnas. La primera columna de
tamao 4, la segunda columna de tamao 2, tercera columna de tamao 5.
<div
class
=
"container"
>
<div
class
=
"row"
>
<div
class
=
"colmd1"
>
.colmd4
</div>
<div
class
=
"colmd5"
>
.colmd2
</div>
<div
class
=
"colmd6"
>
.colmd5
</div>
</div>
Como veis, utilizamos la clase .row, para crear una fila, y esta fila la dividimos en
columnas con .col-md-tamao.
Bien, es fcil verdad? Pero qu es eso de md. Pasamos al siguiente punto.
Tipos de columnas
Con Bootstrap tenemos 4 tipos de columnas:
25
El sistema de rejilla o grid de Bootstrap 3 cuenta con cuatro clases: xs extra small
devices, para dispositivos con pantalla pequea, normalmente mviles, sm small
devices, para dispositivos con pantalla con una resolucin mayor o igual a 768px
que suelen ser tablets, md medium devices, por ejemplo para porttiles y ld larger
desktops, para resoluciones de pantalla muy altas.
Esto quiere decir, que disearemos para cada tipo de pantalla y quedar una Web
personalizada para cada tipo de pantalla. Podremos tener una columna de tamao 5
para dispositivos xs, mientras que esa misma columna la podemos tener de tamaa
2 en pantallas md.
Estars pensando que tendremos que escribir un montn de cdigo para poder
hacerlo, pero no, veamos un ejemplo:
<div
class
=
"container"
>
<div
class
=
"row"
>
<div
class
=
"colmd6collg4colsm9"
>
<p>
HoladesdeOpenWebinars.net
</p>
</div>
<div
class
=
"colmd6collg8colsm3"
>
26
<p>
HoladesdeOpenWebinars.net
</p>
</div>
</div>
</div>
Para cada dispositivo siempre suma 12, en el caso para dispositivos md, tenemos
dos columnas, ambas de tamao 6. Para dispositivos lg, tenemos una columna ms
pequea de 4, y una segunda mayor de 8 y para terminar, para sm dos columnas una
enorme de 9 y otra pequeita de 2.
Es muy fcil y estamos haciendo diseos para todo tipo de pantallas al mismo
tiempo.
Ocultar columnas
Seguimos con las columnas, otro de las cosas que son muy tiles y que nos facilita
a la hora de disear nuestra web es que podemos ocultar o mostrar columnas segn
el tamao de pantalla para tener un diseo accesible y optimizado.
Para mostrar elementos usamos:
.visible-xs
.visible-xm
.visible-md
.visible-lg
Para ocultar elementos usamos:
.hidden-xs
.hidden-sm
.hidden-md
27
.hidden-lg
Desplazar columnas
Podremos
desplazar
columnas
hacia
la
derecha
utilizando
la
clase
<div
class
=
"row"
>
<div
class
=
"colmd4"
>
.colmd4
</div>
<div
class
=
"colmd4colmdoffset4"
>
.colmd4
.colmdoffset4
</div>
</div>
<div
class
=
"row"
>
<div
class
=
"colmd3colmdoffset3"
>
.colmd3
.colmdoffset3
</div>
<div
class
=
"colmd3colmdoffset3"
>
.colmd3
.colmdoffset3
</div>
</div>
<div
class
=
"row"
>
<div
class
=
"colmd6colmdoffset3"
>
.colmd6
.colmdoffset3
</div>
</div>
28
Anidar columnas
Y para terminar con las columnas, vamos a ver cmo anidarlas. Para ello, dentro de
una columna de nivel 1 aadimos una clase row, y dentro de esa clase row las
columnas de nivel 2.
<div
class
=
"row"
>
<div
class
=
"colmd4"
>
.colmd4
</div>
<div
class
=
"colmd4colmdoffset4"
>
.colmd4
.colmdoffset4
</div>
</div>
<div
class
=
"row"
>
<div
class
=
"colmd3colmdoffset3"
>
.colmd3
.colmdoffset3
</div>
<div
class
=
"colmd3colmdoffset3"
>
.colmd3
.colmdoffset3
</div>
</div>
<div
class
=
"row"
>
<div
class
=
"colmd6colmdoffset3"
>
.colmd6
.colmdoffset3
</div>
</div>
Formularios
Posiblemente uno de los elementos ms importantes de nuestra Webs, los
formularios. Con ellos, los usuarios introducen datos que le pedimos y son enviados
a nuestro servidor para ser procesados por nosotros.
29
Campos de formularios
Campos de entrada o Input
type = Sirve para indicar uno de los tipos de control del formulario
Reset: Crea un botn que al hacer clic en l, el formulario vuelve a sus valores
por defecto.
.
Con la aparicin de HTML5, aparecieron ms inputs para f
ormularios
Existen tambin otros elementos, pero no se tratan con la etiqueta de input, que son
textarea y select. Con textarea tendremos un campo de texto de varas lneas,
destinado normalmente a prrafos y select, para elegir una opcin de una lista
desplegable.
Recuerda que para definir qu tipo de input vamos a mostrar al usuario hay que
utilizar type.
Texto
Para un input tipo texto en una sola lnea, utilizaremos text. Si le aadimos la clase
.form-control el input se adaptar al 100% de la pgina.
<input
type
=
"text"
class
=
"formcontrol"
placeholder
=
"Campode
texto"
>
30
<textarea
class
=
"formcontrol"
rows
=
"6"
>
Escribaaqusu
texto.
</textarea>
<div
class
=
"checkboxinline"
>
<label>
<input
type
=
"checkbox"
value
=
""
>
Estaopcinlapuedeselegirono
</label>
</div>
<div
class
=
"checkboxinline"
>
<label>
<input
type
=
"checkbox"
value
=
""
>
Estaopcinlapuedeselegirono
</label>
</div>
31
<div
class
=
"checkboxinline"
>
<label>
<input
type
=
"checkbox"
value
=
""
>
Estaopcinlapuedeselegirono
</label>
</div>
Listas desplegables
Adems de los checkbox y radio buttons, tenemos listas desplegables. Se suelen
utilizar cuando tenemos muchas opciones a elegir. Estas listas desplegables se
utilizan mucho para los campos de fecha.
<div
class
=
"checkboxinline"
>
<label>
<input
type
=
"checkbox"
value
=
""
>
Estaopcinlapuedeselegirono
</label>
</div>
<div
class
=
"checkboxinline"
>
<label>
<input
type
=
"checkbox"
value
=
""
>
Estaopcinlapuedeselegirono
</label>
</div>
<div
class
=
"checkboxinline"
>
<label>
<input
type
=
"checkbox"
value
=
""
>
Estaopcinlapuedeselegirono
</label>
</div>
32
Botones
Una vez que nuestro usuario, rellena el formulario es necesario un botn de enviar
para que nos llega la informacin que el usuario nos ha facilitado. Con Bootstrap
tenemos muchos tipos de botones para ello.
Y para el tamao de los botones tenemos 3 opciones, .btn-lg, .btn-sm, o .btn-xs.
Y para el tamao de los botones tenemos 4 opciones, .btn-lg, .btn-sm, .btn-xs o por
defecto.
Os dejo con un ejemplo de un formulario completo para el registro de un usuario en
una web.
Como siempre, en
la documentacin tenis ejemplos de todas las opciones para
formularios.
33
Elementos
Como te estars dando cuenta, con Bootstrap agilizamos la creacin de nuestro
diseo gracias a la cantidad de opciones por defecto que trae.
Ahora vamos hablar de los elementos por defecto ms interesantes que trae
Bootstrap, veremos ms a fondo los que actualmente nos sacan de ms de un apuro
a la hora de disear acorde a las tendencias actuales.
Imgenes
Como se suele decir, vale ms una imagen que mil palabras. La imagen tiene ms
fuerza para comunicar que la palabra, y ahora se utiliza mucho en la web, vamos a
ver como insertar imgenes con Bootstrap.
Lo primero que hay que saber, es que si insertamos correctamente las imgenes,
stas se adaptarn al tamao con el dispositivo con el que accedemos. Supongo
que a estas alturas ya no te sorprende. Con Bootstrap nuestro diseo se adapta a
cualquier dispositivo.
Para insertar una imagen responsive, utilizamos la clase .img-responsive, as nuestra
imagen tendr ancho mximo: 100%, tendr una altura automtico y display pasar
block.
<img
src
=
"https://pbs.twimg.com/profile_images/491910298966573056/6SQD
Cx9.jpeg"
class
=
"imgresponsive"
>
Ahora ya que sabemos insertar una imagen responsive, Bootstrap nos permite darle
3 tipos de formas a las imgenes:
34
<img
src
=
"https://pbs.twimg.com/profile_images/491910298966573056/6SQD
Cx9.jpeg"
class
=
"imgresponsiveimgrounded"
>
Imagen circular
Aadiendo la clase .img-circle, tendremos una imagen con un marco circular.
<img
src
=
"https://pbs.twimg.com/profile_images/491910298966573056/6SQD
Cx9.jpeg"
class
=
"imgresponsiveimgcircle"
>
Imagen Thumbnail
Crea una borde muy fino alrededor de la imagen con la clase .img-thumbnail
.
<img
src
=
"https://pbs.twimg.com/profile_images/491910298966573056/6SQD
Cx9.jpeg"
class
=
"imgresponsiveimgthumbnail"
>
35
Si queremos centrar la imagen, lo nico que tenemos que hacer es escribir la clase
.center-block.
Jumbotron
Con Jumbotron conseguimos destacar una parte de nuestra Web, donde queremos
llamar la atencin del usuario y ste haga una accin.
Si quieres que tenga esquinas redondeadas y el tamao de un contenedor, tendrs
que meter el cdigo dentro del .container que quieras.
Sin embargo, si quieres que ocupe todo el ancho del dispositivo, debers asegurarte
que no est dentro de ningn contenedor y crear uno, con .container dentro del
Jumbotron.
Tranquilo, lo vemos en los ejemplos siguientes para que te quede mucho ms claro.
class
=
"container"
>
<div
class
=
"jumbotron"
>
<h1>
Esteeselttulo
</h1>
<p>
EsteelcuerpodelJumbotron,aprendiendoBootstrapdesde
OpenWebinars.net
</p>
<p><a
class
=
"btnbtnprimarybtnlg"
href
=
"#"
role
=
"button"
>
Botn
</a></p>
</div>
</div>
36
<
h1>
Este es el ttulo<
/h1>
<p>
c
lass
=
"btn btn-primary btn-lg"
h
ref
="
#"
r
ole=
"button">
Botn<
/a></p>
</div>
Imgenes y Texto
Ya sabemos cmo insertar textos, imgenes y botones, vamos a probar como
mezclar todo esto, vers que bien queda.
Os animo que con lo que ya sabis, hagis pruebas como esta:
<div
class
=
"row"
>
<div
class
=
"colsm6colmd4"
>
<div
class
=
"thumbnail"
>
<img
class
=
"imgcircle"
src
=
"https://pbs.twimg.com/profile_images/491910298966573056/6SQD
Cx9.jpeg"
>
<div
class
=
"caption"
>
<h3>
Ttulo
</h3>
<p>
MeclandocosasconBootstrapdesdeOpenWebinars.
</p>
<p><a
href
=
"#"
class
=
"btnbtnprimary"
role
=
"button"
>
Botn
</a>
</p>
</div>
</div>
</div>
</div>
37
Paneles
Vamos a crear paneles en nuestra web fcilmente, para crear el panel, solo
utilizaremos la clase .panel.
<div
class
=
"panelpaneldefault"
>
<div
class
=
"panelbody"
>
Elementodeunpanelsencillo
</div>
</div>
Como veis en muy fcil crear el panel anterior, si queremos crear un panel ms
complejo, su dificultad no es muy alta. Para aadir un ttulo al panel, aadimos la
clase .panel-heading, si le queremos dar cuerpo al panel usamos .panel-body y para
que el panel tenga un pie, .panel-footer.
<div
class
=
"panelpaneldefault"
>
<div
class
=
"panelheading"
>
Ttulodelpanel
</div>
<div
class
=
"panelbody"
>
<p>
UnsaludoparalosamigosdeOpenWebinars.net)
</p>
</div>
<div
class
=
"panelfooter"
>
Piedelpanel
</div>
</div>
Para los que estis atentos, habris apreciado que he aadido la clase
.panel-default, se utiliza para darle color a la cabecera del panel, os dejo con unos
ejemplos con distintos colores.
38
<div
class
=
"container"
style
=
"paddingtop:1em"
>
<div
class
=
"panelpanelprimary"
>
<div
class
=
"panelheading"
>
<h3
class
=
"paneltitle"
>
Ttulodelpanel
</h3>
</div>
<div
class
=
"panelbody"
>
Contenidodelpanel
</div>
</div>
<div
class
=
"panelpanelsuccess"
>
<div
class
=
"panelheading"
>
<h3
class
=
"paneltitle"
>
Ttulodelpanel
</h3>
</div>
<div
class
=
"panelbody"
>
Contenidodelpanel
</div>
</div>
<div
class
=
"panelpanelinfo"
>
<div
class
=
"panelheading"
>
<h3
class
=
"paneltitle"
>
Ttulodelpanel
</h3>
</div>
<div
class
=
"panelbody"
>
Contenidodelpanel
</div>
</div>
<div
class
=
"panelpanelwarning"
>
<div
class
=
"panelheading"
>
<h3
class
=
"paneltitle"
>
Ttulodelpanel
</h3>
</div>
<div
class
=
"panelbody"
>
39
Contenidodelpanel
</div>
</div>
<div
class
=
"panelpaneldanger"
>
<div
class
=
"panelheading"
>
<h3
class
=
"paneltitle"
>
Ttulodelpanel
</h3>
</div>
<div
class
=
"panelbody"
>
Contenidodelpanel
</div>
</div>
</div>
Personalizando Bootstrap
Bootstrap est muy bien, pero, Y si quiero dar mi toque personal o aadir algo que
no tengo por defecto en l? No te preocupes, se puede y es muy fcil. Para ello
tendremos que tener unos conocimientos medios de CSS3.
Aconsejo no modificar ningn archivo de Bootstrap, as cuando se actualice el
framework a una nueva versin no tendremos que modificar ningn archivo,
simplemente enlazar el archivo que nosotros mismos creamos.
40
<!DOCTYPEhtml>
<html
lang
=
"es"
>
<head>
<meta
charset
=
"utf8"
>
<meta
name
=
"viewport"
content
=
"width=devicewidth,
initialscale=1"
>
<!Conestogarantizamosqueseveabienen
dispositivosmviles>
<title>
MiprimerproyectoconBootstrap
</title>
<link
href
=
"css/bootstrap.min.css"
rel
=
"stylesheet"
media
=
"screen"
>
<!LlamamosalarchivoCSSdeBootstrap>
<link
href
=
"css/mi_hoja_de_estilos.css"
rel
=
"stylesheet"
media
=
"screen"
>
<!LlamamosanuestroarchivodeCSS
personalizado>
</head>
<body>
<h1>
Holamundo!
</h1>
<p>HolaatodosdesdeOpenWebinars.net,miprimerawebcon
Bootstrap(
</p>
<script
41
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.mi
n.js"
></script>
<!ImportantellamarantesajQueryparaque
funcionebootstrap.min.js>
<script
src
=
"js/bootstrap.min.js"
></script>
<!Llamamosal
JavaScriptdeBootstrap>
</body>
</html>
42
de Bootstrap, para no tener que estar haciendo cambios con cada actualizacin del
framework de Twitter.
Por ejemplo, queremos un botn parecido a .btn-primary, copiamos todo el cdigo
del botn del archivo CSS de Bootstrap y lo pegamos en nuestro archivo, cambios el
nombre de .btn-primary, por otro que tu quieras y hacemos las modificaciones
necesarias en el cdigo. Luego cuando queramos usar el botn que hemos creado,
lo utilizamos con class="nombreDelBoton".
Recuerda
,
no hagas modificaciones en los archivos originales de Bootstrap, para
poder actualizar a la ltima versin sin problemas.
43