Componentes

Docenas de componentes reutilizables se crean en Boostrap para proporcionar navegación, alertas y mucho más..

Grupo de Botones

Utiliza grupos de botones para unir botones múltiples como un componente compuesto. Créalos con una serie de elemento <a> o <button>.

Buenas Prácticas

Recomendamos las siguientes pautas para el uso de grupos de botones y barras de herramientas:

  • Siempre utiliza el mismo elemento en un grupo individual de botones, <a> o <button>.
  • No mezcles botones de diferente color.
  • Utiliza iconos además del o en lugar del texto, pero asegúrate de incluir el texto de título y alt donde creas apropiado.

Relación Los grupos de botones con menús desplegables (ver abajo) deberían llamarse de manera separada y siempre incluir una símbolo de intercalación desplegable para indicar un comportamiento deseado. (revisar)

Ejemplo por defecto

Aquí tienes como se ve el HTML para un grupo de botones estándar creado con la etiqueta button:

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

Ejemplo de toolbar

Combina conjuntos de <div class="btn-group"> en un <div class="btn-toolbar"> para componentes más complejos.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Checkbox and radio

Los grupos de botones también funcionan como radios, donde solo un botón puede estar activo, o las casillas de verificación, donde cualquier número de botones pueden estar activos. Mira los documentos Javascript para eso.

Obtén javascript »

Desplegables en grupos de botones

¡Atención! Los botones con desplegables deben estar envueltos individualmente en su propio .btn-group dentro de un .btn-toolbar para un rendimiento adecuado..

Botones desplegables

Vista previa y ejemplos

Utiliza cualquier botón para provocar un menú desplegable colocándolo dentro de un .btn-group y proporcionando el etiquetado de menú desplegable.

Ejemplo de etiquetado

Similar a un grupo de botones, nuestro etiquetado utiliza un etiquetado de botones regulares, pero con la suma de otros útiles para refinar el estilo y soportar el plugin de jQUery del desplegable de Boostrap.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Funciona con todos los tamaños de botón

Los botones desplegables funcionan con cualquier tamaño. Tu tamaño de botones .btn-large, .btn-small, or .btn-mini.

Requiere javascript

Los botones desplegables requieren el plugin de desplegable de Boostrap para funcionar.

En algunos casos—como en móviles—los menús desplegables se agrandarán fuera del viewport. Necesitas solucionar el alineamiento manualmente o personalizar javascript.


Botones desplegables con separación

Vista previa y ejemplos

Construyendo en los estilos y los etiquetados de los grupos de botones, podemos crear fácilmente botones con separación. Los botones con separación tienen una acción estándar a la izquierda y un flip-flop desplegable a la derecha con enlaces contextuales.

Tamaños

Utiliza la clase de botón extra .btn-mini, .btn-small, o .btn-large para elegir un tamaño.

<div class="btn-group">
  ...
  <ul class="dropdown-menu pull-right">
    <!-- dropdown menu links -->
  </ul>
</div>

Ejemplo de etiquetado

Nos expandimos en un botón desplegable normal para proporcionar una segunda acción de botón que funciona como un menú desplegable separado.

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Paginación de página con multi-iconos

Cuando usarlo

La paginación con estilo minimalista y ultra simple está inspirada por Rdio, ideales para aplicaciones y resultados de búsqueda. Un gran bloque difícil de que se te escape, fácil de poner a escala y que proporciona grandes áreas de clic.

Enlaces de página de estado

Los enlaces se personalizan y funcionan en un número de ocasiones con la clase correcta. .disabled para enlaces no aptos para el clic y .active para la página actual.

Alienamiento flexible

Añade cualquiera de las dos clases opcionales para cambiar el alineamiento de la paginación de enlaces: .pagination-centered y .pagination-right.

Ejemplos

El componente de paginación por defecto es flexible y funciona en diferentes variaciones.

Etiquetado

Envuelto en un <div>, la paginación es solo un <ul>.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active">
      <a href="#">1</a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

Pager (Localizador) Para enlaces rápidos de anterior y siguiente.

Sobre pager

El componente pager es un conjunto de enlaces para implementaciones de paginación simples con un etiquetado ligero e incluso estilos más ligeros. Es ideal para sitios individuales como blogs o revistas.

Estado deshabilitado opcional

Los enlaces pager también utilizan la clase general .disabled desde la paginación.

Ejemplo por defecto

Por defecto, pager centra los enlaces.

<ul class="pager">
  <li>
    <a href="#">Anterior</a>
  </li>
  <li>
    <a href="#">Siguiente</a>
  </li>
</ul>

Enlaces alineados

Alternativamente, puedes alinear cada enlace a los lados:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Antiguo</a>
  </li>
  <li class="next">
    <a href="#">Nuevo &rarr;</a>
  </li>
</ul>
Etiquetas Código
Por Defecto <span class="label">Por Defecto</span>
Éxito <span class="label label-success">Éxito</span>
Advertencia <span class="label label-warning">Advertencia</span>
Importante <span class="label label-important">Importante</span>
Información <span class="label label-info">Información</span>
Inverso <span class="label label-inverse">Inverso</span>

Sobre

Los emblemas son componentes pequeños e individuales que muestran un indicador o una cuenta de algún tipo. Se encuentran normalmente en clientes email como Mail.app o en aplicaciones móviles para notificaciones push.

Las clases disponibles

Nombre Ejemplo Código
Por Defecto 1 <span class="badge">1</span>
Éxito 2 <span class="badge badge-success">2</span>
Advertencia 4 <span class="badge badge-warning">4</span>
Error 6 <span class="badge badge-error">6</span>
Información 8 <span class="badge badge-info">8</span>
Inverso 10 <span class="badge badge-inverse">10</span>

Unidad principal (Hero Unit)

Boostrap proporciona un componente ligero y flexible llamado unidad principal (hero unit) para exhibir contenido en tu sitio. Funciona bien en sitios de marqueting y de contenido pesado.

Etiquetado

Envuelve tu contenido en un div como este:

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

¡Hola, Mundo!

Esta es una unidad principal simple, un componente con estilo jumbo simple para llamar atención extra para contenido o información destacado.

Aprende más

Encabezado de página

Una estructura simple para un h1 para dar espacio adecuadamente y segmentar secciones de contenido en una página. Puede utilizar el elemento por defecto de h1 small, como también muchos otros componentes (con estilos adicionales).

<div class="page-header">
  <h1>Example page header</h1>
</div>

Thumbnails por defecto

Por defecto, las miniaturas de imagen de Boostrap están diseñadas para exhibir imágenes enlazadas con un etiquetado mínimo requerido.

Altamente personalizable

Con un poco de etiquetado extra, es posible añadir cualquier tipo de contenido HTML como encabezameintos, párrafos o botones en minitaturas de imagen.

  • Etiqueta Thumbnail

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Acción Acción

  • Etiqueta Thumbnail

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Acción Acción

Por qué usar thumbnails

Las miniaturas de imágen (anteriormente .media-grid hasta v1.4) son unos grids ideales para fotos o videos, resultados de búsqueda de imágenes, productos en venta, y mucho más. Pueden ser enlaces de contenido estático.

Etiquetado simple y flexible

El etiquetado de miniaturas de imágen es simple—un ul con cualquier número de elementos li es todo lo que se requiere. También es súper flexible, y permite que cualquier tipo de contenido con solo un poco más de etiquetado envuelva tus contenidos.

Usos de los tamaños de las columnas de grid

Últimamente, los componentes thumbnail utilizan un sistema de clases de grid ya existente — como .span2 o .span3—para el control de las dimensiones de los thumbnails.

El etiquetado

Como se ha mencionado anteriormente, el etiquetado requerido para las miniaturas de imágenes es ligero y muy directo. Aquí tienes como se ve la aplicación por defecto de imágenes enlazadas:

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

Para personalizar el contenido de HTML en miniaturas de imagen, el etiquetado cambia muy poco. Para permitir el contenido de nivel de bloque en cualquier lugar, cambiamos el <a> por el <div> así:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
      <h5>Thumbnail label</h5>
      <p>Thumbnail caption right here...</p>
    </div>
  </li>
  ...
</ul>

Más ejemplos

Explora todas tus opciones con las diferentes clases de grid disponibles. Puedes mezclar y combinar diferentes tamaños, también.

Predeterminados ligeros

Clase base re-escritas

Con Boostrap 2, hemos simplificado la clase base: .alert en lugar de .alert-message. También hemos reducido el etiquetado mínimo requerido —no se requiere <p> por defecto, añade un <div> exerior.

Mensaje de alerta individual

Para un componente más durable con menos código, hemos eliminado la apariencia diferenciadora para alertas de bloque, mensajes que vienen con más texto de relleno y más típico. La clase también se ha cambiado a .alert-block.


Va bien con javascript

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

Obtén el plugin »

Ejemplos de alertas

Envuelve tu mensaje y un icono cerrado opcional en un div con una simple clase.

× ¡Advertencia! Mejor compruébalo tú mismo, no parece que veas muy bien.
<div class="alert">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Fácilmente extienden mensajes de texto estándar con dos clases opcionales: .alert-block para más relleno y controles de texto y .alert-heading para combinar un encabezamiento.

×

¡Advertencia!

Mejor compruébalo tú mismo, no parece que veas muy bien. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <a class="close" data-dismiss="alert">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you're not...
</div>

Alternativas contextuales Añadir clases opcionales para cambiar una connotación de alerta

Error o peligro

× ¡Oh, no! Cambia un par de cosas e intenta enviarlo otra vez.
<div class="alert alert-error">
  ...
</div>

Éxito (Success)

× ¡Bien hecho! Has leído satisfactoriamente este mensaje de alerta importante.
<div class="alert alert-success">
  ...
</div>

Información

× ¡Atención! Esta alerta necesita tu atención, pero no es muy importante.
<div class="alert alert-info">
  ...
</div>

Ejemplos y etiquetado

Básico

Progreso de barra por defecto con un degradado vertical

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

A rayas

Usa un degradado para crear un efecto a rayas (no IE).

<div class="progress progress-striped">
  <div class="bar"
       style="width: 20%;"></div>
</div>

Animado

Toma este ejemplo a rayas y anímalo (no IE).

<div class="progress progress-striped
     active">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Opciones y soporte de navegador

Colores adicionales

Las barras de progreso utilizan algunos de los mismos botones y clases de alertas para estilos consistentes.

Barras a rayas

Similares a los colores sólidos, tenemos varias barras de progreso a rayas.

Comportamiento

Las barras de progreso utilizan transiciones CSS, de manera que si quieres ajustar dinámicamente el ancho a través de javascript, se aplicará el tamaño suavemente.

Si usas la clase .active tus barras de progreso .progress-striped mostrarán rayas de izquierda a derecha.

Soporte de navegadaor

Las barras de progreso usan degradados CSS3, transiciones y animaciones para conseguir sus efectos. Estas características no se soportan en IE7-9 o versiones más antiguas de Firefox.

Opera e IE no son compatibles con las animaciones en este momento.

Cajas (Wells)

Usa esta caja como efecto simple en un elemento para darle un efecto intercalado.

¡Mira, soy una caja!
<div class="well">
  ...
</div>

Icono cerrado

Usa un icono cerrado genérico para un contenido desechable como los modales o alertas.

×

<a class="close">&times;</a>