Iconos de pictograma disponibles

Incluye 180 pictogramas con formato de fuente del juego de Glyphicon Halflings. Glyphicons Halflings no están normalmente disponibles de forma gratuita, pero su creador ha permitido que Bootstrap los use sin ningún costo. Para agradecerle, le pedimos que incluya un enlace a Glyphicons, siempre que sea posible.

  • .glyphicon .glyphicon-adjust
  • .glyphicon .glyphicon-align-center
  • .glyphicon .glyphicon-align-justify
  • .glyphicon .glyphicon-align-left
  • .glyphicon .glyphicon-align-right
  • .glyphicon .glyphicon-arrow-down
  • .glyphicon .glyphicon-arrow-left
  • .glyphicon .glyphicon-arrow-right
  • .glyphicon .glyphicon-arrow-up
  • .glyphicon .glyphicon-asterisk
  • .glyphicon .glyphicon-backward
  • .glyphicon .glyphicon-ban-circle
  • .glyphicon .glyphicon-barcode
  • .glyphicon .glyphicon-bell
  • .glyphicon .glyphicon-bold
  • .glyphicon .glyphicon-book
  • .glyphicon .glyphicon-bookmark
  • .glyphicon .glyphicon-briefcase
  • .glyphicon .glyphicon-bullhorn
  • .glyphicon .glyphicon-calendar
  • .glyphicon .glyphicon-camera
  • .glyphicon .glyphicon-certificate
  • .glyphicon .glyphicon-check
  • .glyphicon .glyphicon-chevron-down
  • .glyphicon .glyphicon-chevron-left
  • .glyphicon .glyphicon-chevron-right
  • .glyphicon .glyphicon-chevron-up
  • .glyphicon .glyphicon-circle-arrow-down
  • .glyphicon .glyphicon-circle-arrow-left
  • .glyphicon .glyphicon-circle-arrow-right
  • .glyphicon .glyphicon-circle-arrow-up
  • .glyphicon .glyphicon-cloud
  • .glyphicon .glyphicon-cloud-download
  • .glyphicon .glyphicon-cloud-upload
  • .glyphicon .glyphicon-cog
  • .glyphicon .glyphicon-collapse-down
  • .glyphicon .glyphicon-collapse-up
  • .glyphicon .glyphicon-comment
  • .glyphicon .glyphicon-compressed
  • .glyphicon .glyphicon-copyright-mark
  • .glyphicon .glyphicon-credit-card
  • .glyphicon .glyphicon-cutlery
  • .glyphicon .glyphicon-dashboard
  • .glyphicon .glyphicon-download
  • .glyphicon .glyphicon-download-alt
  • .glyphicon .glyphicon-earphone
  • .glyphicon .glyphicon-edit
  • .glyphicon .glyphicon-eject
  • .glyphicon .glyphicon-envelope
  • .glyphicon .glyphicon-euro
  • .glyphicon .glyphicon-exclamation-sign
  • .glyphicon .glyphicon-expand
  • .glyphicon .glyphicon-export
  • .glyphicon .glyphicon-eye-close
  • .glyphicon .glyphicon-eye-open
  • .glyphicon .glyphicon-facetime-video
  • .glyphicon .glyphicon-fast-backward
  • .glyphicon .glyphicon-fast-forward
  • .glyphicon .glyphicon-file
  • .glyphicon .glyphicon-film
  • .glyphicon .glyphicon-filter
  • .glyphicon .glyphicon-fire
  • .glyphicon .glyphicon-flag
  • .glyphicon .glyphicon-flash
  • .glyphicon .glyphicon-floppy-disk
  • .glyphicon .glyphicon-floppy-open
  • .glyphicon .glyphicon-floppy-remove
  • .glyphicon .glyphicon-floppy-save
  • .glyphicon .glyphicon-floppy-saved
  • .glyphicon .glyphicon-folder-close
  • .glyphicon .glyphicon-folder-open
  • .glyphicon .glyphicon-font
  • .glyphicon .glyphicon-forward
  • .glyphicon .glyphicon-fullscreen
  • .glyphicon .glyphicon-gbp
  • .glyphicon .glyphicon-gift
  • .glyphicon .glyphicon-glass
  • .glyphicon .glyphicon-globe
  • .glyphicon .glyphicon-hand-down
  • .glyphicon .glyphicon-hand-left
  • .glyphicon .glyphicon-hand-right
  • .glyphicon .glyphicon-hand-up
  • .glyphicon .glyphicon-hd-video
  • .glyphicon .glyphicon-hdd
  • .glyphicon .glyphicon-header
  • .glyphicon .glyphicon-headphones
  • .glyphicon .glyphicon-heart
  • .glyphicon .glyphicon-heart-empty
  • .glyphicon .glyphicon-home
  • .glyphicon .glyphicon-import
  • .glyphicon .glyphicon-inbox
  • .glyphicon .glyphicon-indent-left
  • .glyphicon .glyphicon-indent-right
  • .glyphicon .glyphicon-info-sign
  • .glyphicon .glyphicon-italic
  • .glyphicon .glyphicon-leaf
  • .glyphicon .glyphicon-link
  • .glyphicon .glyphicon-list
  • .glyphicon .glyphicon-list-alt
  • .glyphicon .glyphicon-lock
  • .glyphicon .glyphicon-log-in
  • .glyphicon .glyphicon-log-out
  • .glyphicon .glyphicon-magnet
  • .glyphicon .glyphicon-map-marker
  • .glyphicon .glyphicon-minus
  • .glyphicon .glyphicon-minus-sign
  • .glyphicon .glyphicon-move
  • .glyphicon .glyphicon-music
  • .glyphicon .glyphicon-new-window
  • .glyphicon .glyphicon-off
  • .glyphicon .glyphicon-ok
  • .glyphicon .glyphicon-ok-circle
  • .glyphicon .glyphicon-ok-sign
  • .glyphicon .glyphicon-open
  • .glyphicon .glyphicon-paperclip
  • .glyphicon .glyphicon-pause
  • .glyphicon .glyphicon-pencil
  • .glyphicon .glyphicon-phone
  • .glyphicon .glyphicon-phone-alt
  • .glyphicon .glyphicon-picture
  • .glyphicon .glyphicon-plane
  • .glyphicon .glyphicon-play
  • .glyphicon .glyphicon-play-circle
  • .glyphicon .glyphicon-plus
  • .glyphicon .glyphicon-plus-sign
  • .glyphicon .glyphicon-print
  • .glyphicon .glyphicon-pushpin
  • .glyphicon .glyphicon-qrcode
  • .glyphicon .glyphicon-question-sign
  • .glyphicon .glyphicon-random
  • .glyphicon .glyphicon-record
  • .glyphicon .glyphicon-refresh
  • .glyphicon .glyphicon-registration-mark
  • .glyphicon .glyphicon-remove
  • .glyphicon .glyphicon-remove-circle
  • .glyphicon .glyphicon-remove-sign
  • .glyphicon .glyphicon-repeat
  • .glyphicon .glyphicon-resize-full
  • .glyphicon .glyphicon-resize-horizontal
  • .glyphicon .glyphicon-resize-small
  • .glyphicon .glyphicon-resize-vertical
  • .glyphicon .glyphicon-retweet
  • .glyphicon .glyphicon-road
  • .glyphicon .glyphicon-save
  • .glyphicon .glyphicon-saved
  • .glyphicon .glyphicon-screenshot
  • .glyphicon .glyphicon-sd-video
  • .glyphicon .glyphicon-search
  • .glyphicon .glyphicon-send
  • .glyphicon .glyphicon-share
  • .glyphicon .glyphicon-share-alt
  • .glyphicon .glyphicon-shopping-cart
  • .glyphicon .glyphicon-signal
  • .glyphicon .glyphicon-sort
  • .glyphicon .glyphicon-sort-by-alphabet
  • .glyphicon .glyphicon-sort-by-alphabet-alt
  • .glyphicon .glyphicon-sort-by-attributes
  • .glyphicon .glyphicon-sort-by-attributes-alt
  • .glyphicon .glyphicon-sort-by-order
  • .glyphicon .glyphicon-sort-by-order-alt
  • .glyphicon .glyphicon-sound-5-1
  • .glyphicon .glyphicon-sound-6-1
  • .glyphicon .glyphicon-sound-7-1
  • .glyphicon .glyphicon-sound-dolby
  • .glyphicon .glyphicon-sound-stereo
  • .glyphicon .glyphicon-star
  • .glyphicon .glyphicon-star-empty
  • .glyphicon .glyphicon-stats
  • .glyphicon .glyphicon-step-backward
  • .glyphicon .glyphicon-step-forward
  • .glyphicon .glyphicon-stop
  • .glyphicon .glyphicon-subtitles
  • .glyphicon .glyphicon-tag
  • .glyphicon .glyphicon-tags
  • .glyphicon .glyphicon-tasks
  • .glyphicon .glyphicon-text-height
  • .glyphicon .glyphicon-text-width
  • .glyphicon .glyphicon-th
  • .glyphicon .glyphicon-th-large
  • .glyphicon .glyphicon-th-list
  • .glyphicon .glyphicon-thumbs-down
  • .glyphicon .glyphicon-thumbs-up
  • .glyphicon .glyphicon-time
  • .glyphicon .glyphicon-tint
  • .glyphicon .glyphicon-tower
  • .glyphicon .glyphicon-transfer
  • .glyphicon .glyphicon-trash
  • .glyphicon .glyphicon-tree-conifer
  • .glyphicon .glyphicon-tree-deciduous
  • .glyphicon .glyphicon-unchecked
  • .glyphicon .glyphicon-upload
  • .glyphicon .glyphicon-usd
  • .glyphicon .glyphicon-user
  • .glyphicon .glyphicon-volume-down
  • .glyphicon .glyphicon-volume-off
  • .glyphicon .glyphicon-volume-up
  • .glyphicon .glyphicon-warning-sign
  • .glyphicon .glyphicon-wrench
  • .glyphicon .glyphicon-zoom-in
  • .glyphicon .glyphicon-zoom-out

Cómo usarlos

Por motivos de rendimiento, todos los iconos requiere una clase de base y una de iconos individuales. Para usarlos, coloque el código fuente siguiente en casi cualquier lado. Asegúrese de dejar un espacio entre el icono y el texto para el relleno adecuado.

<span class="glyphicon glyphicon-search"></span>

Ejemplos

Utilícelos en botones, grupos de botones para una barra de herramientas, navegación o en entradas de forma agregadas al inicio.

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

Es un menú activable contextual para desplegar las listas de enlaces. Se hace interactivo con plug- in desplegable de JavaScript .

Encapsule el accionador y el menú desplegable en .dropdown, o cualquier otros elemento que declare position: relative;. Agregue después el HTML del menú.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Agregue .pull-right a .dropdown-menu para alinear a la derecha el menú desplegable.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Agregue un encabezado a las secciones de etiquetas en cualquier menú desplegable.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>

Agregue .disabled a <li>, en la lista desplegable para desactivar el enlace.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

Con el botón de grupo, junte varios botones en una sola línea. Agregue un botón de radio opcional de JavaScript y un comportamiento de estilo de casilleros con nuestro plug-in de botones.

Las herramientas de ayuda y popover del grupos de botones requieren configuraciones especiales.

Cuando utilice herramientas de ayuda o popover en un .btn-group, tendrá que especificar la opción container: 'body' para evitar los efectos secundarios no deseados (tales como que el elemento se haga más ancho o pierda las esquinas redondas cuando estos se activen).

Ejemplo básico

Encapsule varios botones con .btn en .btn-group.

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

Barra de herramientas de botones

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

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

Configuración de tamaños

En vez de aplicar clases de tamaños de botones a cada uno del grupo, solo agregue .btn-group-* a .btn-group.

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

Anidado

Coloque .btn-group con otro .btn-group, si desea que los menús desplegables se combinen con varios botones.

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

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Variación vertical

Se puede lograr que varios botones se apilen verticalmente en vez de horizontalmente.

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

Variación de enlaces justificada

Sirve para que un grupo de botones se expandan y sean del mismo tamaño, con el fin de abarcar el ancho completo de su padre.

Uso específico en elementos

Esto solo funciona con elementos de <a> ya que <button> no obtiene estos estilos.

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

Utilice cualquier botón para activar un menú desplegable al colocarlo en .btn-group y proveer el marcado adecuado de menú.

Dependencia de plug-in

Los botones desplegables requieren la inclusión de plug-in de desplegable en su versión de Bootstrap.

Desplegables de botones individuales

Convierta un botón en un activador / desactivador de desplegables con algunos cambios de marcado básico.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Desplegables de botones divididos

De forma similar, cree desplegables de botones divididos con los mismos cambios de marcado, solamente con un botón separado.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Configuración de tamaños

Los desplegables de botones sirven para botones de todos los tamaños.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Variación de desplegables hacia arriba

Active los elementos superiores de los menús desplegables al agregar .dropup al pariente.

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

Ampliar los controles de formas agregando texto o botones antes, después, o en ambos lados de cualquier entrada basada en texto. Utilice .input-group con .input-group-addon para agregar elementos antes o después de .form-control.

Compatibilidad con varios navegadores

Evite el uso de elementos <select> aquí, porque no se pueden configurar completamente con el estilo en navegadores de WebKit.

Herramientas de ayuda y popover en grupos de entradas requieren configuraciones especiales

Cuando se utilizan herramientas de ayuda o popover en elementos con un .input-group, debe especificar la opción container: 'body' para evitar los efectos secundarios no deseados (tales como elementos que se vuelven más anchos y/o pierden sus esquinas redondas cuando se accione la herramienta de ayuda o el popover).

Ejemplo básico

@

.00

$ .00
<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

Configuración de tamaños

Agregue las clases de tamaño de la forma relativa a .input-group en sí y los contenidos cambiarán de tamaño automáticamente, sin que haga falta repetir las clases de de tamaño de control de la forma para cada elemento.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control input-lg" placeholder="Username">
</div>

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Casilleros y botones de radio agregados

Coloque cualquier opción de casillero de verificación o botón de radio en un agregado de grupo de entrada en vez de texto.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botones agregados

Los botones de grupos de entrada son algo distintos y requiere un nivel adicional de anidado. En vez de .input-group-addon, debe usar .input-group-btn para encapsular los botones. Esto se requiere debido a los estilos predeterminados de navegador que no pueden reemplazarse.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botones con desplegables

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botones segmentados

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn btn-group">
    <!-- Button and dropdown menu -->
  </div>
</div>

Los elementos de navegación disponibles en Bootstrap tienen un marcado compartido, desde la clase de base .nav, y estados compartidos. Permute las clases de modificador para modificarlos según cada estilo.

Tome en cuenta que la clase .nav-tabs requiere la clase de base .nav.

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Si usa el mismo código HTML, pero con .nav-pills:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Se pueden apilar verticalmente las píldoras. Solo agregue .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Los anchos de las fichas o las píldoras pueden ser iguales a los de su padre con .nav-justified.

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Para cualquier componente de navegación (fichas, píldoras o listas), agregue .disabled para que los enlaces estén grises y no haya efectos al desplazarse el ratón.

No se afecta la funcionalidad de los enlaces.

Esta clase solo cambia la apariencia de <a>, no su funcionalidad. Utilice JavaScript personalizado para desactivar estos enlaces aquí.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Agregue menús desplegables con algo de código HTML adicional y plug-in de JavaScript de desplegables.

Fichas con desplegables

<ul class="nav nav-tabs">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Píldoras con desplegables

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Las barras de navegación son componentes de tipo meta con respuestas que actúan como encabezados de navegación en su aplicación o sitio. En vistas de móviles están expandidos (que se pueden activar o desactivar). Se vuelven horizontales cuando aumenta el ancho de la ventanilla disponible.

Personalizar el punto de contracción

Dependiendo del contenido de su barra de navegación, usted puede cambiar el punto en el que esta va de contraída a horizontal. Puede personalizar la variable @grid-float-breakpoint o agregar su propia consulta de medios.

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

Dependencia de plug-in

En su versión de Bootstrap, se debe incluir plug-in de contracción para barra de navegación con respuestas.

Permitir que las barras de navegación sean accesibles

Asegúrese de agregar role="navigation" a cada barra de navegación para ayudar a la accesibilidad.

Para los botones que no están en un <form>, agregue esta clase a los centrados verticalmente en una barra de navegación.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Encapsule las cadenas de texto en un elemento con .navbar-text, generalmente, en una etiqueta <p> para tener interlineado y colores correctos.

<p class="navbar-text">Signed in as Mark Otto</p>

Para las personas que utilizan los enlaces estándar que no están en el componente de navegación de la barra normal, utilice la clase .navbar-link con el de agregar los colores adecuados para opciones de la barra invertida y predeterminada.

<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Alinee los enlaces de navegación, formas, botones o texto, utilizando las clases de utilitarios .navbar-left o .navbar-right. Ambas agregarán un flotador de CSS en la dirección especificada. Por ejemplo, para alinear los enlaces de navegación, colóquelos en un <ul> separado con la clase respectiva de utilitarios aplicada.

Estas clases son versiones de mixin-ed de .pull-left y .pull-right, pero se incluyen en consultas de medios, con el fin de manejar más fácilmente los componentes de navegación en dispositivos de distintos tamaños.

Agregue .navbar-fixed-top.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  ...
</nav>

Relleno de cuerpo requerido

La barra de navegación fija cubrirá el resto del contenido, excepto si añade padding a la parte superior de <body>. Intente con sus propios valores o utilice nuestro pedazo sig(Xperia™ and Cyber-shot). Consejo: de forma predeterminada, la barra de navegación tiene 50px de alto.

body { padding-top: 70px; }

Asegúrese de incluir esto después del Bootstrap y CSS principales.

Agregue en vez .navbar-fixed-bottom.

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  ...
</nav>

Relleno de cuerpo requerido

La barra de navegación fija cubrirá el resto del contenido, excepto si agrega padding en la parte inferior de the <body>.. Intente con sus propios valores o utilice el pedazo siguiente. Consejo: de forma predeterminada, la barra de navegación tendrá un alto de 50px.

body { padding-bottom: 70px; }

Asegúrese de incluir esto después del Bootstrap y CSS principales.

Cree una barra de navegación de ancho completo que se desplaza con la página al agregar .navbar-static-top.. De forma contraria a las clases .navbar-fixed-*, no necesita cambiar ningún relleno en body.

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  ...
</nav>

Modifique la apariencia de la barra de navegación, al agregar .navbar-inverse.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

Indica la ubicación actual de la página en una jerarquía de navegación.

Se añaden automáticamente los separadores en CSS, por medio de :before y ode2content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Provea enlaces de paginación para su sitio o aplicación con el componente de páginas múltiples para esto, o alternativa de controlador de paginación más sencillo.

Paginación predeterminada

Esta es una paginación sencilla inspirada por Rdio, buena para aplicaciones y resultados de búsqueda. No es difícil detectar el bloque grande, que puede aumentar de tamaño y permitir tener grandes áreas para hacer clic.

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><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="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

Estados desactivados y activos

Se pueden personalizar los enlaces, para diferentes circunstancias. Utilice .disabled para enlaces no clicables y .active para indicar la página actual.

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  ...
</ul>

Puede opcionalmente permutar anclajes activos o desactivados para <span>, con el fin de quitar la funcionalidad de clic, y retener los estilos necesarios.

<ul class="pagination">
  <li class="disabled"><span>&laquo;</span></li>
  <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
  ...
</ul>

Configuración de tamaños

¿Desea paginación más grande o más pequeña? Agregue .pagination-lg o .pagination-sm para tamaños adicionales.

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Control de paginación

Enlaces rápidos previos y siguientes para implementaciones más sencillas de navegación con marcado leve y estilos. Es muy bueno para sitios sencillos de blogs o revistas.

Ejemplo predeterminado

De forma predeterminada, el componente de paginación centra los enlaces.

<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>

Enlaces alineados

Alternativamente, puede alinear cada enlace a los lados:

<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Estado opcional de desactivado

Los enlaces del componente de paginación usan la clase de utilitarios .disabled de la paginación.

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Ejemplo

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h3>Example heading <span class="label label-default">New</span></h3>

Variaciones disponibles

Agregue cualquiera de las clases de modificadores mencionados a continuación para cambiar la apariencia de una etiqueta.

Default Primary Success Info Warning Danger
<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>

Resalte fácilmente los ítems nuevos o no leídos al agregar <span class="badge"> a los enlaces, navegación de Bootstrap y más.

<a href="#">Inbox <span class="badge">42</span></a>

Contracción automática

Cuando no hay elementos nuevos ni no leídos, las insignias solo se contraerán (mediante el seleccionador :empty de CSS), en caso de que no haya contenido en este.

Compatibilidad con varios navegadores

Las insignias no se contraerán por su cuenta en Internet Explorer 8 porque no tiene compatibilidad con el seleccionador :empty.

Se adapta a estados activos de navegación

Se incluyen estilos incorporados para colocar insignias en estados activos de navegaciones de píldoras y listas.

<ul class="nav nav-pills nav-stacked">
  <li class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>
  </li>
  ...
</ul>

Un componente flexible y liviana que puede opcionalmente extender toda la ventanilla para mostrar el contenido clave de su sitio. Para usar el ancho completo del jumbotron, no lo incluya en un .container. Si lo coloca en un contenedor, se mantendrá en el mismo ancho del resto de su contenido y se verán las esquinas redondas.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg">Learn more</a></p>
  </div>
</div>

Es una estructura sencilla para un h1 para tener espacios adecuados y secciones de segmento de contenido de una página. Puede utilizar el elemento small predeterminado de h1, además de la mayoría de otros componentes (con estilos adicionales).

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

Amplíe sistema de cuadrícula de Bootstrap con el componente de miniaturas para fácilmente desplegar las cuadrículas de imágenes, videos, texto y más.

Ejemplo predeterminado

De forma predeterminada, las miniaturas de Bootstrap fueron creadas para mostrar el funcionamiento de imágenes enlazadas con un marcado requerido mínimo.

<div class="row">
  <div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

Contenido personalizado

Con algo de marcado adicional, es posible agregar cualquier tipo de contenido HTML como encabezados, párrafos o botones en miniaturas.

300x200

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.

Button Button

300x200

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.

Button Button

300x200

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.

Button Button

<div class="row">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>
      </div>
    </div>
  </div>
</div>

Proveer mensajes de comentarios contextuales para las acciones típicas de usuarios con un conjunto de mensajes de alerta flexibles y disponibles. Para desechar componentes alineados, utilice plug-in jQuery de alertas.

Ejemplos

Encapsule cualquier texto y un botón para desechar que es opcional en .alert y una de cuatro clases contextuales (por ejemplo: .alert-success) para mensajes básicos de alerta).

No hay una clase predeterminada

Las alertas no tienen clases predeterminadas, solamente clases básicas y de modificadores. Una alerta gris predeterminada no tiene mucho sentido, entonces debe especificar un tipo mediante una clase contextual. Escoja de éxito, info, advertencia o peligro.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

Alertas desechables

Agregue a cualquier alerta con .alert-dismissable opcional y un botón de cierre.

Warning! Best check yo self, you're not looking too good.
<div class="alert alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Asegúrese que el comportamiento será correcto para todos los dispositivos.

Siempre utilice el elemento <button> con el atributo de datos data-dismiss="alert".

Use la clase de utilitarios .alert-link para rápidamente proveer enlaces de color coincidentes en cualquier alerta.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-success">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger">
  <a href="#" class="alert-link">...</a>
</div>

Provea comentarios actualizados sobre el avance de un flujo de trabajo o acción con barras de avance sencillas pero flexibles.

Compatibilidad con varios navegadores

Las barras de avance usan transiciones y animaciones de CSS3 para lograr algunos de sus efectos. Estas características no son compatibles con Internet Explorer 9 ni versiones anteriores ni versiones más antiguas de Firefox. Opera 12 no admite animaciones.

Ejemplo básico

Barra de avance predeterminada

60% Complete
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Alternativas contextuales

Las barras de avance usan algunos de las mismas clases de botos y alertas para lograr estilos uniformes.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>

Franjas de colores

Utilice una gradiente para crear un efecto de franjas. Esto no está disponible en IE 8.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animación

Agregue .active a .progress-striped para animar las franjas de derecha a izquierda. No está disponible en todas las versiones de IE.

45% Complete
<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Apilado

Coloque varias barras en el mismo .progress para apilarlas.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Estilos de objetos abstractos para crear varios tipos de componentes (como comentarios de blog, tuiteos, etc.) que tienen una imagen alineada a la derecha o a la izquierda junto con contenido de texto.

Medios predeterminados

Los medios predeterminados permiten flotar objetos de medios (imágenes, videos o audios) a la izquierda o derecha de un bloque de contenido.

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Lista de medios

Con algo de marcado adicional, puede utilizar los medios en una lista (es útil para cadenas de comentarios o listas de artículos).

  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
        ...
    </div>
  </li>
</ul>

Los grupos de listas son componentes flexibles y potentes para desplegar no solo listas sencillas de elementos sino también complejas con contenido personalizado.

Ejemplo básico

El grupo de listas más básico es solo una lista sin orden con ítems y clases adecuadas. Se pueden añadir opciones como las siguientes, o su propio CSS, según se requiera.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Insignias

Agregar el componente de insignias a cualquier ítem de grupo de listas y se posicionará automáticamente en la derecha.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Ítems enlazados

Enlace los ítems de grupos de listas al utilizar etiquetas de anclaje en vez de ítems de listas. (Esto significa también un <div> padre en vez de un <ul>)..) No hace falta padres individuales alrededor de cada elemento.

<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>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Contenido personalizado

Agregue casi cualquier pedazo de código de HTML, incluso para grupos de listas enlazadas como el siguiente.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Si bien no es necesario siempre, a veces hace falta colocar su DOM en un cuadro. En tales casos, intente usar el componente de paneles.

Ejemplo básico

De forma predeterminada, todo lo que hace .panel es aplicar un borde básico y relleno para rodear algo de contenido.

Basic panel example
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel con encabezado

Puede agregar fácilmente un contenedor de encabezado a su panel con .panel-heading. También es posible incluir cualquier <h1> - <h6> con una clase .panel-title para añadir un encabezado con estilo previo.

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>

Encapsule los botones o texto secundario en .panel-footer. Tome en cuenta que los pies de página de paneles no heredan colores ni bordes al utilizar variaciones contextuales, porque no deben estar en la parte delantera.

Panel content
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Alternativas contextuales

Al igual que otros componentes, se puede fácilmente hacer que el panel sea más acorde a un contexto particular al agregar cualquiera de las clases de estado contextual.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

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>

Con cuadros

Agregue cualquier .table sin borde en un panel para un diseño de una sola pieza. Si hay .panel-body,, agregamos un borde adicional a la parte superior del cuadro, como separación.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Si no hay un cuerpo de panel, el componente se mueve del encabezado del panel al cuadro, sin interrupciones.

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Con grupos de listas

Incluya fácilmente grupos de lista de ancho completo en cualquier panel.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Pozo predeterminado

Utilice el pozo como un efecto sencillo de un elemento, para que luzca como metido.

Look, I'm in a well!
<div class="well">...</div>

Clases opcionales

Controle el relleno y las esquinas redondas con dos clases de modificadores opcionales.

Look, I'm in a large well!
<div class="well well-lg">...</div>
Look, I'm in a small well!
<div class="well well-sm">...</div>