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

1.3 ¿Donde encontrarme?

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

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

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
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
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
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 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
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
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
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
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
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
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
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
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
Abreviaturas

5.22 Abreviaturas (II)

<abbr title="HyperText Markup Language">HTML</abbr> es una abreviatura. Pasa el ratón por encima para averiguar de que se trata.

5.23 Direcciones (I)

Direcciones
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:#">info@name.com</a>
</address>

5.25 Citas (I)

Citas
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
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
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
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
Formulario normal

7.4 Inline

Formulario inline
Formulario inline

7.5 Horizontal

Formulario 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
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
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
Ejemplos de botones

8.2 Tipos (I)

Tipos de botones
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
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
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
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
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
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
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
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
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)

12.2 Iconos (II)

Ejemplo de iconos
Ejemplo de iconos

12.3 Iconos (III)

<button type="button"
  class="btn btn-default">
  <span class="glyphicon
    glyphicon-star"></span> Star
</button>

12.6 Button groups (I)

Button groups
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
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
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.15 Pagination (I)

Pagination
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
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
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
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
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
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
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
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
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
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
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.4 Tabs (I)

Tabs
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
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
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
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>

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.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.15 Blog

14.16 Dashboard

14.17 Sign-in page

14.18 Justified nav

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
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

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:

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

17.2 Fuentes

17.3 Bibliografía