Emilio Orts López

HOME -> MÁS INFORMACIÓN -> PROGRAMACIÓN -> BOOTSTRAP

BOOTSTRAP

Twitter Bootstrap

Twitter Bootstrap es un framework o conjunto de herramientas de software libre para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.

Es el proyecto más popular en GitHub y es usado por la NASA y la MSNBC junto a demás organizaciones.

Características

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o aplicaciones esta disponible para todos los dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la información básica de un sitio web para todos los dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para su uso.

Desde la versión 2.0 también soporta diseños sensibles. Esto significa que el diseño gráfico de la página se ajusta dinámicamente, tomando en cuenta las características del dispositivo usado (Computadoras, tabletas, teléfonos móviles).

Bootstrap es de código abierto y está disponible en GitHub. Los desarrolladores están motivados a participar en el proyecto y a hacer sus propias contribuciones a la plataforma.

Estructura

Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.

Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS.

El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.

Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de "Personalizar" en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS pre-compilada.

Uso

Para usar Bootstrap en una página HTML, el desarrollador solo debe descargar la hoja de estilo Bootstrap CSS y enlazarla en el archivo HTML.

(También pueden compilar el archivo CSS desde la hoja de estilo LESS descargada. Esto puede realizarse con un compilador especial.)

Si el desarrollador también quiere usar los componentes de JavaScript, éstos deben estar referenciados junto con la librería jQuery en el documento HTML.

El siguiente ejemplo ilustra como funciona. El código HTML define un simple formulario de búsqueda y una lista de resultados en un formulario tabular. La página consiste en elementos regulares y semánticos de HTML 5, y alguna información adicional de la clase de CSS de acuerdo con la documentación de Bootstrap

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de Twitter Bootstrap</title>
    <!-- Se incluyen las hojas de estilo de bootstrap -->
   <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>Search</h1>
      <label>Ejemplo de un formulario sencillo de búsqueda.</label>
 
      <!-- Formulario de búsqueda con un campo de entrada (input) y un botón -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Buscar</button>
      </form>
 
      <h2>Results</h2>
 
      <!-- Tabla con celdas de color de fondo alternantes y con marco -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Título</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor sit amet</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Consetetur sadipscing elitr</td>
          </tr>
          <tr>
            <td>3</td>
            <td>At vero eos et accusam</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- JavaScript se situa al final del documento para que la página cargue mas rápido -->
    <!-- Optional: Incluir la librería de jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
    <!-- Optional: Incorporar los plug-ins de JavaScript de Bootstrap -->
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
  </body>
</html>

Tipografía

Titulos

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
                                

Texto

El tamaño de letra (font-size) por defecto de Bootstrap 3 es 14px y el interlineado (line-height) es 1.428. Estos valores se aplican tanto al <body> como a todos los párrafos. Estos últimos también incluyen un margen inferior cuyo valor es la mitad que su interlineado (10px por defecto).

Para destacar un párrafo sobre los demás, añade la clase .lead. Ejemplo:

<p class="lead"> Texto del parrafo </p>

Énfasis

Para marcar una parte del texto o todo un bloque de texto como poco importante, utiliza la etiqueta <small>. Bootstrap muestra ese contenido con un tamaño de letra igual al 85% del tamaño de letra de su elemento padre. En el caso de los titulares (<h1>, ..., <h6>) el tamaño de los elementos <small> se ajusta de otra forma para que tengan un mejor aspecto.

<p><small>Este contenido de texto se verá más pequeño y puede ser utilizado por ejemplo para "la letra pequeña" de la página.</small></p>

Utiliza la etiqueta <bold> para añadir énfasis a un texto mostrándolo en negrita.

<p>El siguiente trozo de texto <strong>se muestra en negrita</strong>.</p>

classes

Bootstrap 3 define varias clases CSS para alinear de diferentes formas el contenido de texto de los elementos.

<p class="text-left">Texto alineado a la izquierda.</p>
<p class="text-center">Texto centrado.</p>
<p class="text-right">Texto alineado a la derecha.</p>

Aunque no es una práctica recomendada desde el punto de vista de la accesibilidad, Bootstrap 3 también define varias clases CSS para mostrar el tipo de contenido a través del color del texto.

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Abreviaturas

Si empleas la etiqueta <abbr> de HTML para marcar las abreviaturas y los acrónimos, los usuarios podrán ver su contenido completo al pasar el ratón por encima de ellas. Además, si la abreviatura define el atributo title, Bootstrap añade un fino borde inferior punteado para indicar al usuario que puede pasar el ratón por encima (también cambia el tipo de puntero que se muestra al pasar el ratón por encima).

Incluye la definición completa del elemento <abbr> dentro de su atributo title. Ejemplo:

<p>Este texto contiene abreviaturas como <abbr title="señor">Sr.</abbr> y <abbr title="señora">Sra.</abbr></p>

Añade la clase .initialism (iniciales en inglés) a un elemento <abbr> para reducir ligeramente su tamaño de letra y así hacer que el texto se lea mejor. Ejemplo:

<p>Esta página está escrita con <abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Direcciones

Utiliza la etiqueta <address> para mostrar la información de contacto de tu sitio o página. No olvides añadir <br> al final de cada línea para mantener el texto de la dirección bien formateado. Ejemplo:

<address>
<strong>Empresa S.A.</strong><br>
Avenida Principal 123<br>
Ciudad, Provincia 00000<br>
<abbr title="Phone">Tel:</abbr> 9XX 123 456
</address>
 
<address>
<strong>Nombre Apellido</strong><br>
<a href="mailto:#">nombre.apellido@ejemplo.com</a>
</address>

Blockquotes

Estos elementos se emplean para incluir en tus páginas trozos de contenidos de otras fuentes.

Utiliza el elemento <blockquote> para encerrar el contenido que se va a incluir en la página. También se recomienda utilizar el elemento <p> para encerrar el texto dentro del <blockquote>. Ejemplo:

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

Además del estilo por defecto del elemento <blockquote>, Bootstrap 3 define algunos estilos adicionales para los otros elementos que se pueden añadir a los elementos <blockquote>.

Utiliza el elemento <small> para mostrar la fuente original del contenido y encierra el nombre concreto de la fuente (una persona, una publicación, un sitio web, etc.) con el elemento <cite>. Ejemplo:

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Frase célebre de <cite title="Nombre Apellidos">Nombre Apellidos</cite></small>
</blockquote>

Algunos autores prefieren modificar la alineación de las citas creadas con <blockquote> para que destaquen más sobre el resto del texto. Para ello, utiliza la calse .pull-right. Ejemplo:

<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Frase célebre de <cite title="Nombre Apellidos">Nombre Apellidos</cite></small>
</blockquote>

Listas

Utilízalas para agrupar elementos para los que su orden no importa. Bootstrap 3 también incluye los estilos adecuados para las las listas anidadas. Ejemplo:

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
  <ul>
    <li>Phasellus iaculis neque</li>
    <li>Purus sodales ultricies</li>
    <li>Vestibulum laoreet porttitor sem</li>
    <li>Ac tristique libero volutpat at</li>
  </ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>

En este caso, el orden de los elementos sí es importante y por eso se muestran numerados. Ejemplo:

<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>

Como resulta muy habitual mostrar las listas sin viñetas y sin margen izquierdo, Bootstrap 3 incluye una clase CSS llamada .list-unstyled para aplicar esos estilos.

La única pega de esta clase es que sólo se aplica a los elementos de una lista y no a los elementos de sus listas anidadas. Así que si quieres aplicar los estilos a todos los elementos, añade la clase .list-unstyled también a las listas anidadas. Ejemplo:

<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
  <ul>
    <li>Phasellus iaculis neque</li>
    <li>Purus sodales ultricies</li>
    <li>Vestibulum laoreet porttitor sem</li>
    <li>Ac tristique libero volutpat at</li>
  </ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>

También resulta habitual mostrar los elementos de una lista horizontalmente, como por ejemplo en el menú principal de navegación. Para ello, Bootstrap 3 define una clase CSS llamada .inline-block. Ejemplo:

<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>

No se utilizan mucho, pero Bootstrap 3 también incluye estilos por defecto para las listas de definición, formadas por pares término + definición. Ejemplo:

<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Si lo prefieres, también es posible mostrar la lista de definición horizontalmente añadiendo la clase .dl-horizontal. Ejemplo:

<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>

Código

Utiliza el elemento <code> para encerrar los fragmentos de código fuente que se muestran en línea con el texto. Ejemplo:

<p>El elemento <code>&lt;section&gt;</code> es uno de los nuevos elementos de HTML5.</p>

Cuando quieras mostrar bloques de código, utiliza la etiqueta <pre> y asegúrate de reemplazar los caracteres < por &lt; y > por &gt; para evitar problemas al mostrar el código. Ejemplo:

<pre>&lt;p&gt;Así se escribe un párrafo de texto&lt;/p&gt;</pre>

Tablas

Añade la clase .table a cualquier elemento <table> para aplicar los estilos básicos de Bootstrap 3 para tablas. El resultado es una tabla con un padding muy sutil y con líneas de separación solamente en las filas.

Puede parecer absurdo tener que añadir la clase .table para que se apliquen los estilos a las tablas, pero ten en cuenta que el elemento <table> se utiliza para muchas otras cosas que no son necesariamente tablas, como por ejemplo calendarios y selectores de fechas.

<table class="table">
...
</table>

Las tablas cebreadas son aquellas cuyas filas alternan su color de fondo para mejorar la legibilidad de los contenidos. Su aspecto recuerda a la piel de una cebra y de ahí su nombre. En inglés se denominan "striped tables" y por eso en Bootstrap 3 estas tablas se crean añadiendo la clase .table-striped. Ejemplo:

<table class="table table-striped">
...
</table>

Si prefieres utilizar el estilo tradicional de las tablas con los cuatro bordes en todas las celdas y en la propia tabla, añade la clase .table-bordered. Ejemplo:

<table class="table table-bordered">
...
</table>

Para que los contenidos de la tabla sean todavía más fáciles de entender, añade la clase .table-hover para modificar ligeramente el aspecto de las filas cuando el usuario pasa el ratón por encima de ellas (sólo funciona para las filas dentro de <tbody>).

<table class="table table-hover">
...
</table>

Cuando una tabla es muy grande o cuando tienes muchas tablas en una misma página, puede ser interesante mostrar sus contenidos de forma más compacta. Añade la clase .table-condensed a tus tablas y el padding se reducirá a la mitad. Ejemplo:

<table class="table table-condensed">
...
</table>

Las clases CSS semánticas explicadas en el capítulo anterior para el texto también se pueden aplicar a las filas y a las celdas de una tabla:

  • .active, aplica el color del estado hover a la fila o celda para que parezca que está activa.
  • .success, indica que el resultado de alguna operación ha sido un éxito.
  • .warning, avisa al usuario que se ha producido alguna circunstancia que puede requerir su atención.
  • .danger, indica que una acción es negativa o potencialmente peligrosa.
<table>
<tbody>
  <!-- Aplicadas en las filas -->
  <tr class="active">...</tr>
  <tr class="success">...</tr>
  <tr class="warning">...</tr>
  <tr class="danger">...</tr>
 
  <!-- Aplicadas en las celdas (<td> o <th>) -->
  <tr>
    <td class="active">...</td>
    <td class="success">...</td>
    <td class="warning">...</td>
    <td class="danger">...</td>
  </tr>
</tbody>
</table>

La solución que propone Bootstrap 3 para crear tablas responsive que se vean bien en dispositivos pequeños consiste en añadir un scroll horizontal a las tablas que sean demasiado anchas. Para ello, encierra cualquier tabla con la clase .table dentro de un elemento con la clase .table-responsive. Cuando las tablas responsive se muestran en dispositivos con una anchura superior a 768px, se ven igual que cualquier otra tabla normal.

<div class="table-responsive">
<table class="table">
  ...
</table>
</div>

Imágenes

Bootstrap 3 define varias clases CSS para decorar las imágenes de tus sitios web:

  • .img-rounded, añade unas pequeñas esquinas redondeadas en todos los lados de la imagen aplicando el estilo border-radius: 6px.
  • .img-thumbnail, muestra la imagen con un relleno blanco y un borde fino simulando el aspecto de las fotografías de las antiguas cámaras instantáneas. Añade además una breve animación para hacer que la imagen aparezca al cargar la página.
  • .img-circle, convierte la imagen en un círculo aplicando el estilo border-radius: 50%
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Ejemplo de Tabla

<table class="table table-hover">
    ...
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Ejemplo de imágenes

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Ejemplos Ejemplos Ejemplos

Ejemplo de Formulario

<form role="form">
  <div class="form-group">
    <label for="ejemplo_email_1">Email</label>
    <input type="email" class="form-control" id="ejemplo_email_1"
           placeholder="Introduce tu email">
  </div>
  <div class="form-group">
    <label for="ejemplo_password_1">Contraseña</label>
    <input type="password" class="form-control" id="ejemplo_password_1" 
           placeholder="Contraseña">
  </div>
  <div class="form-group">
    <label for="ejemplo_archivo_1">Adjuntar un archivo</label>
    <input type="file" id="ejemplo_archivo_1">
    <p class="help-block">Ejemplo de texto de ayuda.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Activa esta casilla
    </label>
  </div>
  <button type="submit" class="btn btn-default">Enviar</button>
</form>

Ejemplo de texto de ayuda.

Ejemplo de Botones

<!-- Botón normal -->
<butto type="button" class="btn btn-default">Normal</butto>
 
<!-- Muestra el botón de forma destacada para descubrir fácilmente
     el botón principal dentro de un grupo de botones -->
<butto type="button" class="btn btn-primary">Destacado</butto>
 
<!-- Indica una acción exitosa o positiva -->
<butto type="button" class="btn btn-success">Éxito</butto>
 
<!-- Botón pensado para los mensajes con alertas informativas -->
<butto type="button" class="btn btn-info">Información</butto>
 
<!-- Indica que hay que tener cuidado con la acción asociada al botón -->
<butto type="button" class="btn btn-warning">Advertencia</butto>
 
<!-- Indica una acción negativa o potencialmente peligrosa -->
<butto type="button" class="btn btn-danger">Peligro</butto>
 
<!-- Resta importancia al botón haciéndolo parecer un simple enlace,
     aunque conserva tu comportamiento original de botón -->
<butto type="button" class="btn btn-link">Enlace</butto>

Ejempo de Botones desplegables

<div class="btn-group">
  <butto type="button" class="btn btn-default dropdown-toggle"
          data-toggle="dropdown">
    Título del botón <spa class="caret"></spa>
  </butto>
 
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Acción #1</a></li>
    <li><a href="#">Acción #2</a></li>
    <li><a href="#">Acción #3</a></li>
    <li class="divider"></li>
    <li><a href="#">Acción #4</a></li>
  </ul>
</div>

Ejemplo de Pestañas

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Inicio</a></li>
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mensajes</a></li>
</ul>

2017 © eorts.com