PDF de programación - Bootstrap

Capítulo 1. Primeros pasos
1.1. Descargando Bootstrap
Existen varias formas diferentes de empezar con Bootstrap, cada una orientada a
un tipo de público en función de su nivel técnico. Sigue leyendo para conocer cuál
de estas opciones se ajusta mejor a tus necesidades.

1. Descargar el código CSS y JavaScript compilado, que es la forma más

sencilla de empezar a utilizar Bootstrap. La desventaja es que esta versión no
incluye ni los archivos originales ni la documentación. Para descargar esta
versión, accede a getbootstrap.com y pulsa el botónDownload Bootstrap.

2. Descargar el código fuente, contiene todos los archivos Less, y JavaScript

originales de Bootstrap. La desventaja es que requiere un compilador de
archivos Less y cierto trabajo de configuración. Descarga la versión más
reciente en el sitio github.com/twbs/bootstrap/releases.

3. Descargar el código fuente en formato Sass, se trata de una variante de la

versión anterior y que se ha creado para facilitar la integración de Bootstrap
en las aplicaciones Ruby On Rails, Compass o cualquier otro proyecto basado
en Sass. Descarga la versión más reciente en el
sitio github.com/twbs/bootstrap-sass/releases.

1.1.1. Utiliza la CDN de Bootstrap
La empresa NetDNA aloja de forma gratuita en su CDN una copia de los archivos
CSS y JavaScript de Bootstrap. Para utilizar estos archivos, modifica los
siguientes dos enlaces en tus páginas (cambia el valor 3.0.0 por la versión
específica de Bootstrap que quieras):

<!-- Versión compilada y comprimida del CSS de Bootstrap -->

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.
0/css/bootstrap.min.css">



<!-- Tema opcional -->

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.
0/css/bootstrap-theme.min.css">



<!-- Versión compilada y comprimida del JavaScript de Bootstrap -->

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.m
in.js"></script>

1.1.2. Instala Bootstrap con Bower
utiliza este gestor de dependencias para gestionar los archivos CSS y JavaScript
originales de Bootstrap y mantener una copia local de su documentación. Para
ello, ejecuta el siguiente comando:

$ bower install bootstrap

1.2. Contenidos de Bootstrap
Bootstrap se puede descargar de dos maneras, compilado o mediante el código
fiente original. Dependiendo de la forma que hayas elegido, verás una estructura
de directorios u otra. En esta sección se muestran los detalles de cada una de
ellas.

ADVERTENCIA Todos los plugins JavaScript de Bootstrap requieren la librería
jQuery para funcionar, por lo que deberás incluirlo en tus plantillas, tal y como se
muestra en los ejemplos de las siguientes secciones. Para saber qué versiones
concretas de jQuery se soportan, consulta el contenido de nuestro
archivo bower.json.
1.2.1. Contenidos de la versión compilada de Bootstrap
Después de descomprimir el archivo que te has descargado con la versión
compilada de Bootstrap, verás la siguiente estructura de archivos y directorios:

bootstrap/

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

Estos archivos son la forma más sencilla de utilizar Bootstrap en cualquier
proyecto web. Para cada archivo se ofrecen dos variantes: los archivos
compilados (cuyo nombre es bootstrap.*) y los archivos compilados +
comprimidos (cuyo nombre es bootstrap.min.*). También se incluyen las fuentes
de los iconos del proyecto Glyphicons y el tema opcional de Bootstrap.

1.2.2. Contenidos de la versión original de Bootstrap
La versión original de Bootstrap incluye, además de las versiones compiladas de
los archivos CSS y JavaScript, las versiones originales de esos mismos archivos y
toda la documentación. Tras descomprimir el archivo que te has descargado con
la versión original de Bootstrap, verás la siguiente estructura de archivos y
directorios:

bootstrap/

├── less/

├── js/

├── fonts/

├── dist/

│ ├── css/

│ ├── js/

│ └── fonts/

└── docs/

└── examples/

Los directorios less/, js/ y fonts/ contienen el código fuente utilizado para
generar los archivos CSS, JavaScript y las fuentes. El directorio dist/ contiene los
mismos archivos que se han mostrado en la sección anterior para la versión
compilada de Bootstrap. El direcotrio docs/ incluye el código fuente de la
documentación de Bootstrap y un directorio llamado examples/ con varios
ejemplos de uso. El resto de archivos están relacionados con otros temas
secundarios, como por ejemplo las licencias del código.

1.3. La primera plantilla Bootstrap
Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se
muestra a continuación o puedes echar un vistazo a los ejemplos de plantillas que
hemos preparado. La idea de estos ejemplos es que los utilices como punto de
partida para crear tus propios diseños.

El siguiente código HTML muestra una plantilla muy sencilla creada con Bootstrap:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<title>Plantilla básica de Bootstrap</title>



<!-- CSS de Bootstrap -->

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



<!-- librerías opcionales que activan el soporte de HTML5 para IE
8 -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5s
hiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respo
nd.min.js"></script>

<![endif]-->

</head>

<body>

<h1>¡Hola mundo!</h1>



<!-- Librería jQuery requerida por los plugins de JavaScript -->

<script src="http://code.jquery.com/jquery.js"></script>



<!-- Todos los plugins JavaScript de Bootstrap (también puedes

incluir archivos JavaScript individuales de los únicos

plugins que utilices) -->

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

</body>

</html>

1.3.1. Ejemplos de plantillas creadas con Bootstrap
Bootstrap 3 incluye varias plantillas de ejemplo que puedes acceder en el
repositorio de ejemplos de GitHub y que puedes probar directamente en tu
navegador. En este momento hay más de 15 plantillas de ejemplo de todo tipo que
muestran cómo utilizar y aprovechar al máximo Bootstrap.

La siguiente tabla recoge los principales ejemplos así como su descripción y una
imagen de su aspecto. Pincha en cada imagen para ver el ejemplo en vivo en tu
navegador y así poder estudiar su código.

Imagen

Nombr

e

Descripción

Plantill
a
básica

Solamente
contiene los
archivos CSS y
JavaScript
compilados y
un
elemento.co
ntainer

Rejilla

Varios
ejemplos de



Imagen

Nombr

e

Descripción

rejillas con
diferente
división en
columnas,
anidamientos,
etc.



Jumbo
tron

Contiene un
elemento muy
destacado
llamado jumb

Imagen

Nombr

e

Descripción

otron, un
menú de
navegación y
varias
columnas



Jumbo
tron
estrec
ho

Similar a la
anterior, pero
con un diseño
personalizado

Imagen

Nombr

e

Descripción

más estrecho
del habitual



Barra
de
navega
ción

Ejemplo muy
sencillo de
cómo crear
una barra de

Imagen

Nombr

e

Descripción

navegación



Naveg
ación
estátic
a

Similar al
anterior, pero
la barra de
navegación

Imagen

Nombr

e

Descripción

ocupa toda la
anchura de la
página



Naveg
ación
fija

Similar al
anterior, pero
la barra de
navegación

Imagen

Nombr

e

Descripción

permanece
fija cuando se
hace scroll en
la página



Login

Página
de login con
un formulario
sencillo para

Imagen

Nombr

e

Descripción

introducir
usuario y
contraseña



Pie de
página
fijo

El pie de
página se
muestra fijo
en la parte

Imagen

Nombr

e

Descripción

inferior de la
página



Naveg
ación y
pie de
página

Similar al
ejemplo
anterior, pero
ahora demás

Imagen

Nombr

e

fijos

Descripción

la página tiene
una barra de
navegación
fija en la parte
superior



Naveg
ación
person
alizada

Página con
una barra de
navegación
personalizada

Imagen

Nombr

e

Descripción

(y que no
funciona del
todo bien en
los
navegadores
que utilizan
WebKit)



Naveg
ación
fuera
de

El menú de
navegación es
lateral y se
oculta en

Imagen

Nombr

e

página

Descripción

dispositivos
estrechos
(cuenta con
un botón para
hacer que
aparezca de
nuevo)



Carrus
el

Página con un
carrusel y una
barra de
navegación

Imagen

Nombr

e

Descripción

personalizado
s



Sin
respon
sive

Página con
todas las
características
responsive de

Imagen

Nombr

e

Descripción

Bootstrap 3
desactivadas



Tema
de
Bootst
rap

Página que
utiliza el tema
opcional de
Bootstrap

Imagen

Nombr

e

Descripción

para mejorar
la experiencia
de los
usuarios



1.4. La comunidad Bootstrap
Utiliza los siguientes recursos para estar al tanto de las novedades de Bootstrap y
mantener el contacto con otros miembros de la comunidad.

 El blog oficial de Bootstrap.

 Chatea con otros miembros de la comunidad a través de nuestro

canal ##twitter-bootstrap en el servidor irc.freenode.net.

 Descubre algunos de los proyectos más alucinantes creados con Bootstrap en

el sitio Bootstrap Expo.

También puedes seguir nuestra cuenta oficial en Twitter: @twbootstrap.

1.5. Desactivando el diseño responsive
¿No quieres que tu sitio o aplicación web modifique su aspecto según el
dispositivo utilizado po