Componentes Bootstrap

Botones

Utilice cualquiera de las clases de botones disponibles para crear rápidamente un botón de estilo.

<button type="button" class="btn btn-default">Predeterminado</button>
<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-success">Correcto!</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-danger">Error!</button>

Puede utilizar la etiqueta <a> con las clases de botones disponibles, así como el estilo de los íconos de Font Awesome.

Eliminar Leer más... Click aquí para
descargar!

<a class="btn btn-danger" href="#"><i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default" href="#"><i class="fa fa-plus-square"></i> Read more...</a>
<a class="btn btn-info" href="#"><i class="fa fa-download fa-3x pull-left"></i> Click here to download!</a>

Bootstrap soporta contenido desplegable. De esta manera, al clickear sobre un botón, puede mostrar u ocultar contenidos especiales. Mantenga así su contenido ordenado y libre de scrolls (barra de desplazamiento).

<p>
<button class="btn btn-danger collapsed" data-target="#demo" data-toggle="collapse" type="button">CLICK AQUÍ</button>
</p>
<div style="height: 0px;" id="demo" class="collapse">
<img src="http://placehold.it/260x180" alt="" ></img>
</div>

Miniaturas

Miniaturas por defecto

De forma predeterminada, las miniaturas de Bootstrap están diseñados para mostrar imágenes vinculadas con el margen mínimo requerido.

<div class="row-fluid">
  <ul class="thumbnails">
    <li class="span4">
      <a href="..." class="thumbnail"><img data-src="..." alt="..."></a>
    </li>
     ...
  </ul>
</div>


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

Altamente personalizable

Con un poco de esfuerzo, es posible añadir cualquier tipo de contenido HTML como encabezamientos, párrafos, o botones en miniaturas

Thumbnail label

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.

Action Action
Thumbnail label

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.

Action Action
Thumbnail label

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.

Action Action

<div class="row-fluid">
  <ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="..." alt="...">
      <h3>Thumbnail label</h3>
      <p>Cras justo odio, ...</p>
    </div>
  </li>
  <li class="span4">...</li>
  <li class="span4">...</li>
  </ul>
</div>


<div class="row-fluid">
<ul class="thumbnails">
  <li class="span4">
  <div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
  <h4>Thumbnail label</h4>
  <p>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.</p>
  <p>
  <a class="btn btn-primary" href="#">Action</a>
  <a class="btn btn-default" style="margin-left:10px;" href="#">Action</a>
  </p>
  </div>
  </div>
  </li>
  <li class="span4">
  <div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
  <h4>Thumbnail label</h4>
  <p>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.</p>
  <p>
  <a class="btn btn-primary" href="#">Action</a>
  <a class="btn btn-default" style="margin-left:10px;" href="#">Action</a>
  </p>
  </div>
  </div>
  </li>
  <li class="span4">
  <div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
  <h4>Thumbnail label</h4>
  <p>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.</p>
  <p>
  <a class="btn btn-primary" href="#">Action</a>
  <a class="btn btn-default" style="margin-left:10px;" href="#">Action</a>
  </p>
  </div>
  </div>
  </li>
  </ul>
</div>

Paneles

Ejemplo básico

Por defecto, todos las clases .panel lo que hacen es aplicar un poco de frontera básica y el relleno para almacenar algún contenido.

Panel heading without title

Panel content

Panel title

Panel content

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<div class="panel panel-default"> 
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Alternativas contextuales

Al igual que otros componentes, usted puede fácilmente hacer un panel más significativo para un contexto particular mediante la adición de cualquiera de las clases de estado contextuales.

Panel primary

Panel content

Panel success

Panel content

Panel info

Panel content

Panel warning

Panel content

Panel danger

Panel content

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>