Scribd
Cargar
302 vistas228 páginas

Bootstrap (2014)

Este documento resume Bootstrap, un popular framework de CSS. Explica que Bootstrap es un framework creado por Twitter para el desarrollo mobile first. Proporciona ventajas como componentes creados por la comunidad, buenas prácticas de diseño y un sistema de rejillas responsive de 12 columnas. También describe algunas desventajas como la necesidad de adaptarse a la estructura de Bootstrap y posibles dificultades para modificar el diseño. Finalmente, resume conceptos clave como el uso de HTML5, el sistema de rejillas, tipografía y alineación de texto.

Cargado por

Mario
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
302 vistas228 páginas

Bootstrap (2014)

Este documento resume Bootstrap, un popular framework de CSS. Explica que Bootstrap es un framework creado por Twitter para el desarrollo mobile first. Proporciona ventajas como componentes creados por la comunidad, buenas prácticas de diseño y un sistema de rejillas responsive de 12 columnas. También describe algunas desventajas como la necesidad de adaptarse a la estructura de Bootstrap y posibles dificultades para modificar el diseño. Finalmente, resume conceptos clave como el uso de HTML5, el sistema de rejillas, tipografía y alineación de texto.

Cargado por

Mario
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 228

BOOTSTRAP, UN

FRAMEWORK CSS
ADOLFO SANZ DE DIEGO
SEPTIEMBRE 2014
1 EL AUTOR
1.1 ADOLFO SANZ DE DIEGO
Antiguo programador web JEE (6 años)
Hoy en día:
Profesor de FP (6 años):
Hardware, Sistemas Operativos
Redes, Programación
Formador Freelance (3 años):
Java, Android
JavaScript, jQuery
JSF, Spring, Hibernate
Groovy & Grails
1.2 ALGUNOS PROYECTOS
Fundador y/o creador:
Hackathon Lovers: http://hackathonlovers.com
Tweets Sentiment: http://tweetssentiment.com
MarkdownSlides:
https://github.com/asanzdiego/markdownslides
Co-fundador y/o co-creador:
PeliTweets: http://pelitweets.com
Password Manager Generator:
http://pasmangen.github.io
1.3 ¿DONDE ENCONTRARME?
Mi nick: asanzdiego
AboutMe: http://about.me/asanzdiego
GitHub: http://github.com/asanzdiego
Twitter: http://twitter.com/asanzdiego
Blog: http://asanzdiego.blogspot.com.es
LinkedIn: http://www.linkedin.com/in/asanzdiego
Google+:
http://plus.google.com/+AdolfoSanzDeDiego
2 INTRODUCCIÓN
2.1 ¿QUÉ ES?
Boostrap es un framework CSS, liberado por
Twitter y muy popular hoy en día.
Está pensado para hacer un desarrollo Mobile
First
2.2 VENTAJAS (I)
Utiliza componentes y servicios creados por la
comunidad web.
Utiliza un conjunto de buenas prácticas que
perdurarán en el tiempo.
Utiliza HTML5 y CSS3
2.3 VENTAJAS (II)
Implementa un sistema de rejillas, que por
defecto incluye 12 columnas.
Utiliza LESS, un preprocesador CSS. (Ahora
también soporta Saas).
Es OOCSS, osea CSS Orientado a Objetos:
organizado por módulos independientes y
reutilizables.
2.4 VENTAJAS (III)
Hay una enorme comunidad detrás.
Herramienta sencilla y ágil para construir sitios
web e interfaces.
Tiene un theme por defecto bastante optimizado y
que puedes modificar fácilmente.
2.5 DESVENTAJAS (I)
Es necesario adaptarse a su forma de trabajo,
si bien su curva de aprendizaje es liviana, deberás
comprender y familiarizarte con su estructura y
nomenclatura.
Debes adaptar tu diseño a un grid de 12
columnas.
Trae anchos y márgenes por defecto, que a
veces son un poco tediosos de cambiar.
2.6 DESVENTAJAS (II)
Es complicado cambiar de versión si has
realizado modificaciones profundas sobre el core.
Si necesitas añadir componentes que no
existen, debes hacerlos tú mismo en CSS y cuidar
de que mantenga coherencia con tu diseño y
cuidando el responsive.
A veces hacer implementar un diseño
impuesto, puede llegar a resultar bastante difícil,
al menos si eres un perfeccionista.
2.7 DESCARGA
Si sólo quieres lo fundamental:
https://github.com/twbs/bootstrap/releases/download/
3.2.0-dist.zip
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
2.8 PLANTILLA BÁSICA
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"...>
<title>Template</title>
<link href="bootstrap.min.css"...>
</head>
<body>
<h1>Hello, world!</h1>
<script src=".../jquery.min.js">
</script>
<script src="bootstrap.min.js">
</script>
</body>
</html>
3 RESUMEN CSS
3.1 HTML5 DOCTYPE
Bootstrap necesita un doctype de HTML5:
<!DOCTYPE html>
<html lang="en">
...
</html>
3.2 MOBILE FIRST
Desde la versión 3, Boostrap es Mobile first.
Para garantizar un buen renderizado y un buen
funcionamiento del zoom:
<meta name="viewport"
content="width=device-width,
initial-scale=1">
3.3 DESACTIVAR ZOOM (I)
Se puede desactivar el zoom con user-
scalable=no
<meta name="viewport"
content="width=device-width,
initial-scale=1,
maximum-scale=1,
user-scalable=no">
3.4 DESACTIVAR ZOOM (II)
Hace que el sitio se parezca más una aplicación
nativa, pero también lo hace menos accesible. En
general, no se recomienda.
3.5 NORMALIZE.CSS
Para un mejor renderizado en varios
navegadores, Boostrap usa Normalize.css, un
proyecto desarrollado por Nicolas Gallagher y
Jonathan Neal:
http://necolas.github.io/normalize.css/
4 GRID SYSTEM
4.1 INTRODUCCIÓN
Bootstrap incluye un sistema de rejilla
responsive y mobile first de 12 columnas.
4.2 FUNCIONAMIENTO
El sistema de rejilla de Bootstrap funciona así:
Se deben colocar .row dentro de un .container
(ancho fijo) o .container-fluid (ancho
completo).
Utilice .row para crear grupos horizontales.
El contenido se debe colocar entre .row y deben
de ser hijos inmediatos.
Si hay más de 12 columnas en una .row, esta son
desplazadas abajo.
4.3 1 COLUMNA (I)
Ejemplo de 1 columna de un tamaño de 12

1 columna
4.4 1 COLUMNA (II)
Ejemplo de 1 columna de un tamaño de 12
<div class="row">
<div class="col-xs-12">1</div>
<div class="col-xs-12">2</div>
<div class="col-xs-12">3</div>
<div class="col-xs-12">4</div>
</div>
4.5 2 COLUMNAS (I)
Ejemplo de 2 columnas de un tamaño de 6

2 columnas
4.6 2 COLUMNAS (II)
Ejemplo de 2 columnas de un tamaño de 6
<div class="row">
<div class="col-xs-6">1</div>
<div class="col-xs-6">2</div>
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
4.7 3 COLUMNAS (I)
Ejemplo de 3 columnas de un tamaño de 4

3 columnas
4.8 3 COLUMNAS (II)
Ejemplo de 3 columnas de un tamaño de 4
<div class="row">
<div class="col-xs-4">1</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div>
</div>
4.9 4 COLUMNAS (I)
Ejemplo de 4 columnas de un tamaño de 3

4 columnas
4.10 4 COLUMNAS (II)
Ejemplo de 4 columnas de un tamaño de 3
<div class="row">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
4.11 MULTIDISPOSITIVO
1 columna para xs (<768px)
2 columnas para sm (≥768px)
3 columnas para md (≥992px)
4 columnas para lg (≥1200px)
4.12 NORMAL
<div class="row">
<div class="col-xs-12 col-sm-6
col-md-4 col-lg-3">1</div>
<div class="col-xs-12 col-sm-6
col-md-4 col-lg-3">2</div>
<div class="col-xs-12 col-sm-6
col-md-4 col-lg-3">3</div>
<div class="col-xs-12 col-sm-6
col-md-4 col-lg-3">4</didv>
</div>
4.13 CLEARFIX (I)
Problema cuando una capa tiene un alto mayor que
la de los demás:

Problema clearfix
4.14 CLEARFIX (II)
<div class="row">
<div class="...">1
Resize your viewport</div>
<div class="...">2</div>
<div class="clearfix
visible-sm-block"></div>
<div class="...">3</div>
<div class="clearfix
visible-md-block"></div>
<div class="...">4</didv>
</div>
4.15 HUECOS CON OFFSET (I)

Huecos con offset


4.16 HUECOS CON OFFSET (II)
<div class="row">
<div class="col-md-4">
.col-md-4</div>
<div class="col-md-4
col-md-offset-4">
.col-md-4 .col-md-offset-4</div>
</div>
4.17 HUECOS CON OFFSET (III)
<div class="row">
<div class="col-md-3
col-md-offset-3">.col-md-3
.col-md-offset-3</div>
<div class="col-md-3
col-md-offset-3">.col-md-3
.col-md-offset-3</div>
</div>
4.18 HUECOS CON OFFSET (IV)
<div class="row">
<div class="col-md-6
col-md-offset-3">.col-md-6
.col-md-offset-3</div>
</div>
4.19 PUSH & PULL (I)

push & pull


4.20 PUSH & PULL (II)
<div class="row">
<div class="col-md-9
col-md-push-3">
.col-md-9 .col-md-push-3</div>
<div class="col-md-3
col-md-pull-9">
.col-md-3 .col-md-pull-9</div>
</div>
4.21 MEDIA QUERIES (I)
Estas son las Media Queries que se usan:
/* Extra small devices
(phones, less than 768px) */
/* default in Bootstrap */

/* Small devices
(tablets, 768px and up) */
@media (min-width: @screen-sm-min) {}

/* Medium devices
(desktops, 992px and up) */
@media (min-width: @screen-md-min) {}

/* Large devices
(large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {}
4.22 MEDIA QUERIES (II)
A veces también usan max-witdh para limitar
ciertas reglas.
@media (max-width: @screen-xs-max) {}

@media (min-width: @screen-sm-min)


and (max-width: @screen-sm-max) {}

@media (min-width: @screen-md-min)


and (max-width: @screen-md-max) {}

@media (min-width: @screen-lg-min) {}


5 TIPOGRAFÍA
5.1 CABECERAS (I)

Cabeceras
5.2 CABECERAS (II)
<h1>h1.Cabeceras con Bootstrap
<small>Texto secundario</small></h1>

<h2>h2.Cabeceras con Bootstrap


<small>Texto secundario</small></h2>
5.3 PÁRRAFOS (I)

Párrafos
5.4 PÁRRAFOS (II)
<p class="lead">
Párrafo con class="lead"</p>

<p>Párrafo normal</p>

<p class="small">
Párrafo con class="small"</p>
5.5 TEXTOS EN LÍNEA

Textos en línea
5.6 STRONG
mucho émfasis
<p>Puedes usar el tag strong para darle <strong>mucho émfasis</strong> a un texto</p>
5.7 EM
émfasis
<p>Puedes usar el tag em para darle <em>émfasis</em> a un texto</p>
5.8 MARK
marcar
<p>Puedes usar el tag mark para <mark>marcar</mark> un texto</p>
5.9 INS
insertar un texto (mejor que subrallar)
<p>Puedes usar el tag ins para <ins>insertar</ins> un texto</p>
5.10 DEL
borrar un texto (mejor que tachar)
<p>Puedes usar el tag del para <del>borrar</del> un texto</p>
5.11 ALINEACIÓN

Alineación
5.12 IZQUIERDA
Texto alineado a la izquierda.
<p class="text-left">Texto alineado a la izquierda.</p>
5.13 CENTRADO
Texto centrado.
<p class="text-center">Texto centrado.</p>
5.14 DERECHA
Texto alineado a la derecha.
<p class="text-right">Texto alineado a la derecha.</p>
5.15 JUSTIFICADO
Texto justificado.
<p class="text-justify">Texto justificado.</p>
5.16 SIN AJUSTE
Texto sin ajuste.
<p class="text-nowrap">Texto sin ajuste.</p>
5.17 CAPITALIZACIÓN

Capitalización
5.18 MINÚSCULAS
Minúsculas
<p class="text-lowercase">Lowercased text.</p>
5.19 MAYÚSCULAS
Mayúsculas
<p class="text-uppercase">Uppercased text.</p>
5.20 TIPO TÍTULO
Tipo Título
<p class="text-capitalize">Capitalized text.</p>
5.21 ABREVIATURAS (I)

Abreviaturas
5.22 ABREVIATURAS (II)
<abbr title="HyperText Markup Language">HTML</abbr> es una abreviatura. Pasa el ratón por encima para ave
5.23 DIRECCIONES (I)

Direcciones
5.24 DIRECCIONES (II)
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr>
(123) 456-7890
</address>

<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
5.25 CITAS (I)

Citas
5.26 CITAS (II)
<blockquote class="blockquote">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>

</blockquote>
5.27 LISTAS (I)

Listas
5.28 LISTAS (II)
<ul class="list-inline">
<li>Peras</li>
<li>Manzanas</li>
<li>Naranjas</li>
<li>Platanos</li>
</ul>
5.29 DESCRIPCIONES (I)

Descripciones
5.30 DESCRIPCIONES (II)
<dl class="dl-horizontal">
<dt>Descripción</dt>
<dd>Perfecta para definir.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula...</dd>
<dt>Felis euismod semper eget</dt>
<dd>Fusce dapibus, tellus ...</dd>
</dl>
6 TABLAS
6.1 CLASES
table: para darle el formato
table-striped: para darle formato a las pares y a
las impares
table-bordered: para ponerle bordes a la tabla
table-hover: para oscurecer la fila en donde está
el ratón
table-condensed: para que ocupe menos espacio
6.2 RESPONSIVE
Poniendo la tabla dentro de una capa con
class=table-responsive aparecerá un scroll
horizontal en la tabla en dispositivos pequeños.
6.3 EJEMPLO (I)

Tabla
6.4 EJEMPLO (II)
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>...
</thead>
<tbody>
<tr>
<td>...
</tbody>
</table>
</div>
7 FORMULARIOS
7.1 LO BÁSICO (I)
Agrupar label + control con class=form-group
Input, textarea y select con class=form-control
7.2 LO BÁSICO (II)
Layouts: normal, form-inline y form-horizontal
Para distribuir el contenido, se puede usar .col-
pero no hace falta usar .row
7.3 NORMAL

Formulario normal
7.4 INLINE

Formulario inline
7.5 HORIZONTAL

Formulario horizontal
7.6 EJEMPLO
<form class="form" role="form">
<div class="form-group">
<label for="inputEmail3"
class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input class="form-control"
id="inputEmail3"
placeholder="Enter Email"
type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2
col-sm-10">
<button type="submit"
class="btn btn-default">
Sign in</button>
</div>
</div>
</form>
7.7 INPUTS
Los de HTML5: text, password, datetime, datetime-
local, date, month, time, week, number, email, url,
search, tel, and color.
7.8 CHECKBOXES AND RADIOS
Se puede usar class=checkbox-inline o
class=radio-inline
<div class="radio">
<label>
<input type="radio"
name="optionsRadios"
id="optionsRadios1"
value="option1" checked>
checked</label>
</div>
<div class="radio disabled">
<label>
<input type="radio"
name="optionsRadios"
id="optionsRadios3"
value="option3" disabled>
disabled</label>
</div>
7.9 VALIDACIONES (I)

Formulario Validaciones
7.10 VALIDACIONES (II)
Usar los helpers has-success, has-warning y
has-error
<div class="form-group
has-success
has-feedback">

<label class="control-label"
for="inputSuccess2">
Input with success</label>
<input type="text"
class="form-control"
id="inputSuccess2">
<span class="glyphicon
glyphicon-ok
form-control-feedback"></span>
</div>
7.11 TAMAÑOS (I)

Tamaños
7.12 TAMAÑOS (II)
Usar los helpers form-group-lg o form-group-
sm o bien, en caso de inputs aislados que no estén
dentro de un form-group, usar input-lg o input-
sm
<form class="form-horizontal"
role="form">
<div class="form-group
form-group-lg">
<label class="col-sm-2
control-label"
for="formGroupInputLarge">
Large label</label>
<div class="col-sm-10">
<input class="form-control"
type="text"
id="formGroupInputLarge"
placeholder="Large input">
</div>
</div>
</form>
7.13 TAMAÑOS (III)
Usar los helpers form-group-lg o form-group-
sm o bien, en caso de inputs aislados que no estén
dentro de un form-group, usar input-lg o input-
sm
<form class="form-horizontal" role="form">
<div class="form-group
form-group-sm">
<label class="col-sm-2
control-label"
for="formGroupInputSmall">
Small label</label>
<div class="col-sm-10">
<input class="form-control"
type="text"
id="formGroupInputSmall"
placeholder="Small input">
</div>
</div>
</form>
8 BOTONES
8.1 EJEMPLOS

Ejemplos de botones
8.2 TIPOS (I)

Tipos de botones
8.3 TIPOS (II)
<button type="button"
class="btn">
Button</button>

<button type="button"
class="btn btn-default">
Default</button>

<button type="button"
class="btn btn-primary">
Primary</button>

...
8.4 ACTIVADOS (I)

Botones activados
8.5 ACTIVADOS (II)
<button type="button"
class="btn active">
Button</button>

<button type="button"
class="btn active btn-default">
Default</button>

<button type="button"
class="btn active btn-primary">
Primary</button>

...
8.6 DESACTIVADOS (I)

Botones activados
8.7 DESACTIVADOS (II)
<button type="button"
disabled="disabled"
class="btn active">
Button</button>

<button type="button"
disabled="disabled"
class="btn active btn-default">
Default</button>

<button type="button"
disabled="disabled"
class="btn active btn-primary">
Primary</button>

...
8.8 ENLACES (I)

Tamaños de los botones


8.9 ENLACES (II)
<a href="#"
class="btn btn-primary"
role="button">
Primary link</a>

<a href="#"
class="btn btn-primary active"
role="button">
Primary link Active</a>

<a href="#"
class="btn btn-primary disabled"
role="button">
Primary link Disabled</a>
8.10 TAMAÑOS (I)

Tamaños de los botones


8.11 TAMAÑOS (II)
<button type="button"
class="btn btn-primary btn-lg">
Large button</button>

<button type="button"
class="btn btn-primary">
Default button</button>

<button type="button"
class="btn btn-primary btn-sm">
Small button</button>

<button type="button"
class="btn btn-primary btn-xs">
Extra small button</button>
8.12 EXPANDIR (I)

Expandir los botones


8.13 EXPANDIR (II)
<button type="button"
class="btn btn-primary btn-lg
btn-block">Large button</button>

<button type="button"
class="btn btn-primary
btn-block">Default button</button>

<button type="button"
class="btn btn-primary btn-sm
btn-block">Small button</button>

<button type="button"
class="btn btn-primary btn-xs
btn-block">Extra small</button>
9 IMÁGENES
9.1 RESPONSIVE
Añadir class=img-responsive pondrá max-
size=100% y height=auto.
9.2 EFECTOS (I)

Efectos de imágenes
9.3 EFECTOS (II)
Se pueden añadir efectos:
class=img-rounded: redondea los bordes de la
foto.
class=img-circle: convierte la foto en circular.
class=img-thumbnail: deja un pequeño
recuadro a la foto.
10 HELPERS
10.1 TEXTOS COLOREADOS (I)

Textos coloreados
10.2 TEXTOS COLOREADOS (II)
<p class="text-muted">
text-muted</p>

<p class="text-primary">
text-primary</p>

<p class="text-success">
text-success</p>

<p class="text-info">
text-info</p>

<p class="text-warning">
text-warning</p>

<p class="text-danger">
text-dangerx</p>
10.3 COLORES DE FONDO (I)

Colores de fondo
10.4 COLORES DE FONDO (II)
<p class="bg-primary">
bg-primary</p>

<p class="bg-success">
bg-success</p>

<p class="bg-info">
bg-info</p>

<p class="bg-warning">
bg-warning</p>

<p class="bg-danger">
bg-danger</p>
10.5 FLOAT Y CLEARFIX
<div class="pull-left">
pull-left</div>

<div class="pull-right">
pull-right</div>

<p>antes del clearfix</p>

<div class="clearfix"></div>

<p>después del clearfix</p>


10.6 MOSTRAR Y OCULTAR
<p>class=show > display: block</p>
<div class="show">show</div>

<p>class=hidden > display: none</p>


<div class="hidden">hidden</div>

<p>class=invisible > visibility: hidden (no desaparece del dom) </p>


<div class="invisible">invisible</div>

<p>class=text-hide</p> útil cuando quieres una imagen de fondo


<div class="text-hide">text-hide</div>
10.7 ACCESIBILIDAD
<p>class=sr-only > solo aparece en los lectores de pantalla</p>

<p>class=sr-only-focusable > aparece cuando se hace foco sobre él</p>

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>


11 RESPONSIVE
11.1 ESCONDER SEGÚN DISPOSITIVO
<p class="hidden-xs
bg-primary">hidden-xs</p>

<p class="hidden-sm
bg-primary">hidden-sm</p>

<p class="hidden-md
bg-primary">hidden-md</p>

<p class="hidden-lg
bg-primary">hidden-lg</p>
11.2 MOSTRAR COMO BLOCK SEGÚN DISPOSITIVO
<p class="visible-xs-block
bg-primary">visible-block-xs</p>

<p class="visible-sm-block
bg-primary">visible-block-sm</p>

<p class="visible-md-block
bg-primary">visible-block-md</p>

<p class="visible-lg-block
bg-primary">visible-block-lg</p>
11.3 MOSTRAR COMO INLINE SEGÚN DISPOSITIVO
<p class="visible-xs-inline
bg-primary">visible-xs-inline</p>

<p class="visible-sm-inline
bg-primary">visible-sm-inline</p>

<p class="visible-md-inline
bg-primary">visible-md-inline</p>

<p class="visible-lg-inline
bg-primary">visible-lg-inline</p>
11.4 MOSTRAR U OCULTAR PARA IMPRIMIR
<p class="hidden-print
bg-primary">hidden-print</p>

<p class="visible-print-block
bg-primary">visible-print-block</p>

<p class="visible-print-inline
bg-primary">visible-print-inline</p>
12 COMPONENTES
12.1 ICONOS (I)
Utiliza una versión reducida de glyphicons:
http://glyphicons.com
Alternativa Font-Awesome:
http://fortawesome.github.io/Font-Awesome
12.2 ICONOS (II)

Ejemplo de iconos
12.3 ICONOS (III)
<button type="button"
class="btn btn-default">
<span class="glyphicon
glyphicon-star"></span> Star
</button>
12.4 DROPDOWN (I)

Dropdown
12.5 DROPDOWN (II)
<div class="dropdown">
<button ... data-toggle="dropdown">
Dropdown</button>
<ul ... class="dropdown-menu"
role="menu">
<li role="presentation"
class="dropdown-header">
Header</li>
<li role="presentation"
class="divider"></li>
<li role="presentation">
<a role="menuitem"... href="#">
Action</a></li>
</ul>
</div>
12.6 BUTTON GROUPS (I)

Button groups
12.7 BUTTON GROUPS (II)
<div class="btn-group">
<button type="button"
class="btn
btn-default">Left</button>

<button type="button"
class="btn
btn-default">Middle</button>

<button type="button"
class="btn
btn-default">Right</button>
</div>
12.8 INPUT GROUPS (I)

Input groups
12.9 INPUT GROUPS (II)
<div class="input-group">
<span
class="input-group-addon">
@</span>
<input type="text"
class="form-control"
placeholder="Username">
</div>
12.10 VARIOS

Tabs, pills, navbars, breadcrumbs


12.11 TABS
<ul class="nav nav-tabs"
role="tablist">
<li class="active">
<a href="#">Home</a></li>
<li><a href="#">Help</a></li>
...
</ul>
12.12 PILLS
<ul class="nav nav-pills">
<li class="active">
<a href="#">Home</a></li>
<li><a href="#">Help</a></li>
...
</ul>
12.13 NAVBARS
<nav ...>
<div class="container-fluid">
<div class="navbar-header">
<button ... id="collapse-1">
<span class="sr-only">
Toggle navigation</span>
...
</button>
<a class="navbar-brand"
href="#">Brand</a></div>
<div ... id="collapse-1">
<ul class="nav navbar-nav
navbar-right">
<li><a href="#">Link</a></li>
...
</ul></div>
</div>
</nav>
12.14 BREADCRUMBS
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
12.15 PAGINATION (I)

Pagination
12.16 PAGINATION (II)
<ul class="pagination">
<li class="disabled">
<span>&laquo;</span></li>
<li class="active">
<span>1
<span class="sr-only">
(current)</span>
</span></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>
<li><a href="#">&raquo;</a></li>
</ul>
12.17 PAGER (I)

Pager
12.18 PAGER (II)
<ul class="pager">
<li class="previous disabled">
<a href="#">&larr; Older</a></li>
<li class="next">
<a href="#">Newer &rarr;</a></li>
</ul>
12.19 LABELS (I)

Labels
12.20 LABELS (II)
<span class="label
label-default">Default</span>
<span class="label
label-primary">Primary</span>
<span class="label
label-success">Success</span>
<span class="label
label-info">Info</span>
<span class="label
label-warning">Warning</span>
<span class="label
label-danger">Danger</span>
12.21 BADGES (I)

Badges
12.22 BADGES (II)
<ul class="nav nav-pills">
<li class="active">
<a href="#">Home
<span class="badge">
42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages
<span class="badge">
3</span></a></li>
</ul>
12.23 BADGES (III)
<button class="btn btn-default"
type="button">Messages
<span class="badge">4</span>
</button>
12.24 JUMBOTRON (I)

Jumbotron
12.25 JUMBOTRON (II)
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a
class="btn btn-primary btn-lg"
role="button">
Learn more</a></p>
</div>
12.26 THUMBNAILS (I)

Thumbnails
12.27 THUMBNAILS (II)
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img.jpg"...>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
</div>
</div>
</div>
</div>
12.28 ALERTS (I)

Alerts
12.29 ALERTS (II)
<div class="alert alert-success"
role="alert">
<strong>Well done!</strong></div>
<div class="alert alert-info"
role="alert">
<strong>Heads up!</strong></div>
<div class="alert alert-warning"
role="alert">
<strong>Warning!</strong></div>
<div class="alert alert-danger"
role="alert">
<strong>Oh snap!</strong></div>
12.30 PROGRESS BAR (I)

Progress Bar
12.31 PROGRESS BAR (II)
<div class="progress">
<div class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100">
0%</div></div>
<div class="progress">
<div class="progress-bar"
role="progressbar"
aria-valuenow="2"
aria-valuemin="0"
aria-valuemax="100"
style="width: 2%;">
2%</div></div>
12.32 PROGRESS BAR (III)
<div class="progress">
<div class="progress-bar
progress-bar-success"
... style="width: 40%">
<span class="sr-only">
40% Complete (success)...
<div class="progress">
<div class="progress-bar
progress-bar-info
progress-bar-striped"
... style="width: 20%">
<span class="sr-only">
20% Complete...
<div class="progress">
<div class="progress-bar
progress-bar-warning
progress-bar-striped active"
... style="width: 60%">
<span class="sr-only">
60% Complete (warning)...
12.33 PROGRESS BAR (IV)
<div class="progress">
<div class="progress-bar"
style="width: 35%">
<span class="sr-only">
35% Complete (success)</span></div>
<div class="progress-bar
progress-bar-warning
progress-bar-striped"
style="width: 20%">
<span class="sr-only">
20% Complete (warning)</span></div>
<div class="progress-bar
progress-bar-danger
progress-bar-striped active"
style="width: 10%">
<span class="sr-only">
10% Complete (danger)</span>
</div>
</div>
12.34 MEDIA (I)

Media
12.35 MEDIA (II)
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img src="img.png">
</a>
<div class="media-body">
<h4 class="media-heading">
Media heading</h4>
<p>...</p>
</div>
</li>
</ul>
12.36 LIST GROUP (I)

List group
12.37 LIST GROUP (II)
<div class="list-group">
<a href="#"
class="list-group-item active">
Cras justo odio
</a>
<a href="#"
class="list-group-item">
Dapibus ac facilisis in</a>
...
</div>
12.38 PANEL GROUP (I)

Panel group
12.39 PANEL GROUP (II)
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Panel title</h3></div>
<div class="panel-body">
Panel content</div>
<div class="panel-footer">
Panel footer</div>
</div>
12.40 RESPONSIVE EMBED
<div class="embed-responsive
embed-responsive-16by9">
<iframe
class="embed-responsive-item"
src="//www.youtube.com/..."
allowfullscreen=""></iframe>
</div>
13 JAVASCRIPT
13.1 MODAL (I)

Dialogos modales
13.2 MODAL (II)
<button
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#myModal">
Launch demo modal
</button>
13.3 MODAL (III)
<div class="modal fade" id="myModal"
tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...</div>
<div class="modal-body">
...</div>
<div class="modal-footer">
...</div>
</div>
</div>
</div>
13.4 TABS (I)

Tabs
13.5 TABS (II)
<ul id="myTab" class="nav nav-tabs"
role="tablist">
<li class="">
<a href="#home" role="tab"
data-toggle="tab">
Home</a></li>
<li class="active">
<a href="#profile" role="tab"
data-toggle="tab">
Profile</a></li>
...
</ul>
13.6 TABS (III)
<div id="myTabContent"
class="tab-content">
<div class="tab-pane fade"
id="home">
<p>...</p>
</div>
<div class="tab-pane fade
active in" id="profile">
<p>...</p>
</div>
...
</div>
13.7 TOOLTIPS (I)

Tooltips
13.8 TOOLTIPS (II)
<script>
$( document ).ready( function() {
$('[data-toggle="tooltip"]')
.tooltip();
});
</script>
13.9 TOOLTIPS (III)
<p class="muted">
Farm-to-table seitan, mcsweeney's
fixie sustainable quinoa 8-bit
american apparel
<a href="#"
data-toggle="tooltip"
title="Another tooltip">
have a</a>
terry richardson vinyl chambray.</p>
13.10 TOOLTIPS (IV)
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right">
Tooltip on right</button>
13.11 POPOVER (I)

Popover
13.12 POPOVER (II)
<script>
$( document ).ready( function() {
$('[data-toggle="popover"]')
.popover();
});
</script>
13.13 POPOVER (III)
<button type="button"
class="btn btn-default"
title="Popover title"
data-container="body"
data-toggle="popover"
data-placement="right"
data-content="Vivamus
sagittis lacus vel
augue laoreet
rutrum faucibus.">
Popover on right
</button>
13.14 ACCORDION (I)

Accordion
13.15 ACCORDION (II)
<div class="panel-group"
id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse"
data-parent="#accordion"
href="#collapseOne">
Group Item #1</a>
</h4></div>
<div id="collapseOne"
class="panel-collapse
collapse in">
<div class="panel-body">
...</div></div>
</div>
...
</div>
13.16 CAROUSEL (I)

Carousel
13.17 CAROUSEL (II)
<div class="container"
style="max-width: 900px">
<div id="carousel-example-generic"
class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
...</ol>
<div class="carousel-inner">
...</div>
<a class="left carousel-control"
...</a>
<a class="right carousel-control"
...</a>
</div>
</div>
13.18 CAROUSEL (III)
<ol class="carousel-indicators">
<li data-target="
#carousel-example-generic"
data-slide-to="0" class=""></li>
<li data-target="
#carousel-example-generic"
data-slide-to="1"
class="active"></li>
<li data-target="
#carousel-example-generic"
data-slide-to="2" class=""></li>
</ol>
13.19 CAROUSEL (IV)
<div class="carousel-inner">
<div class="item active left">
<img src="img1.png"
data-src="..."
alt="First slide">
</div>
<div class="item next left">
<img src="img2.png"
data-src="..."
alt="Second slide">
</div>
<div class="item">
<img src="img2.png"
data-src="..."
alt="Third slide">
</div>
</div>
13.20 CAROUSEL (V)
<a class="left carousel-control"
href="#carousel-example-generic"
role="button"
data-slide="prev">
<span class="glyphicon
glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control"
href="#carousel-example-generic"
role="button"
data-slide="next">
<span class="glyphicon
glyphicon-chevron-right"></span>
</a>
14 EJEMPLOS
14.1 ÍNDICE
Using the framework
Navbars in action
Custom components
Experiments
14.2 USING THE FRAMEWORK
Starter template
Bootstrap theme
Grids
Jumbotron
Narrow jumbotron
14.3 STARTER TEMPLATE
14.4 BOOTSTRAP THEME
14.5 GRIDS
14.6 JUMBOTRON
14.7 NARROW JUMBOTRON
14.8 NAVBARS IN ACTION
Navbar
Static top navbar
Fixed navbar
14.9 NAVBAR
14.10 STATIC TOP NAVBAR
14.11 FIXED NAVBAR
14.12 CUSTOM COMPONENTS
Cover
Carousel
Blog
Dashboard
Sign-in page
Justified nav
Sticky footer
Sticky footer with navbar
14.13 COVER
14.14 CAROUSEL
14.15 BLOG
14.16 DASHBOARD
14.17 SIGN-IN PAGE
14.18 JUSTIFIED NAV
14.19 STICKY FOOTER
14.20 STICKY FOOTER WITH NAVBAR
14.21 EXPERIMENTS
Non-responsive Bootstrap
Offcanvas
14.22 NON-RESPONSIVE BOOTSTRAP
14.23 OFFCANVAS
15 PERSONALIZACIÓN
15.1 TU PROPIO CSS
Una forma de personalizar tu página web hecha
con bootstrap, es añadiendo un fichero CSS,
después de las llamadas a los CSS de
bootstrap (para que sobrescriba los valores)
Esta es una forma muy manual y muy poco
productiva.
15.2 PÁGINA CUSTOMIZE
Desde la página web de bootstrap
http://getbootstrap.com/customize se pueden
personalizar un montón de variables, y
descargar una versión personaliada de
bootstrap.

Personalizar desde la página web de bootstrap


Esta forma es más productiva, pero sigue siendo
bastante manual, y además no puedes tener un
control de cambios eficiente.
15.3 COMPILAR LESS
La forma más productiva y eficiente de
personalizar bootstrap es compilando los
ficheros Less del core a CSS.
16 COMPILAR LESS
16.1 DESCARGA
Para ver las tripas, y modificarlas (LESS), hay que
descargar la versión completa:
https://github.com/twbs/bootstrap/archive/v3.2.0.zip
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
16.2 ENTORNO
Si queremos modificar el core (LESS), necesitamos:
intalar NodeJS,
luego Grunt
y para terminar instalar las dependencias.
16.3 NODEJS
NodeJS nos permite ejecutar JavaScript del lado
del servidor.
Para instalar NodeJS, hay que seguir las
instrucciones de instalación de la página oficial
para cada sistema operativo:
http://nodejs.org
16.4 GRUNT
Grunt es un automatizador de tareas que se
ejecuta sobre NodeJS.
Una vez instalado NodeJS, hay que instalar
Grunt desde el gestor de paquetes de node
(npm) ejecutando en un terminal, como
administrador, el siguiente comando:
$ npm install -g grunt-cli
16.5 DEPENDENCIAS
Una vez instalado NodeJS y Grunt, hay que
instalar las dependencias de bootstrap.
Para ello hay que situarse en la carpeta de
bootstrap y ejecutar:
../bootstrap$npm install
16.6 DEFAULT
Si queremos lanzar todas las tareas por defecto
de grunt (compilar, minificar, pasar los test,
generar documentación...) tenemos que ejecutar lo
siguiente
$ grunt
16.7 DIST
Si lo único que queremos es compilar y minificar
el CSS y el JavaScript, tenemos que ejecutar lo
siguiente:
$ grunt dist
16.8 WATCH
También podemos recompilar automaticamente
los ficheros Less a CSS cuando salvas los
cambios, ejecutando el siguiente comando:
$ grunt watch

El problema es que sólo recompila ficheros Less


a CSS, no los minifica.
16.9 PERSONALIZAR
Uno de los ficheros que más se personaliza es
/bootstrap/less/variables.less, pues en él están
las variables más importantes que usa bootstrap.
17 ACERCA DE
17.1 LICENCIA
Estas transparencias están hechas con:
MarkdownSlides:
https://github.com/asanzdiego/markdownslides
Estas transparencias están bajo una licencia
Creative Commons Reconocimiento-CompartirIgual
3.0:
http://creativecommons.org/licenses/by-sa/3.0/es
17.2 FUENTES
Transparencias:
https://github.com/asanzdiego/curso-interfaces-
web-2014/tree/master/05-bootstrap/slides
Código:
https://github.com/asanzdiego/curso-interfaces-
web-2014/tree/master/05-bootstrap/src
17.3 BIBLIOGRAFÍA
Página oficial de Bootstrap:
http://getbootstrap.com
Bootstrap sí, pero no
http://bruno.garciaechegaray.com/Bootstrap.The.Mele
Ventajas y desventajas de usar Bootstrap
http://jorgelessin.com/ventajas-y-desventajas-de-usar

También podría gustarte