Ejemplos de inicio rápido

¿Necesita algunas plantillas rápidas? Echa un vistazo a estos ejemplos básicos que hemos reunido:

Cuadrícula predeterminada

El sistema de cuadrícula predeterminado proporcionado como parte de Bootstrap es una cuadrícula de 16 columnas de 940 px de ancho. Es una versión del popular sistema de cuadrícula 960, pero sin el margen/relleno adicional en los lados izquierdo y derecho.

Ejemplo de marcado de cuadrícula

Como se muestra aquí, se puede crear un diseño básico con dos "columnas", cada una de las cuales abarca un número de las 16 columnas fundamentales que definimos como parte de nuestro sistema de cuadrícula. Consulte los ejemplos a continuación para ver más variaciones.

< clase div = "fila" > 
  < clase div = "span6" > 
    ...
  </div>
  < clase div = "span10" > 
    ...
  </div>
</div>

Columnas de anidamiento

Anide su contenido si es necesario creando un .rowdentro de una columna existente.

Ejemplo de columnas anidadas

< clase div = "fila" > 
  < clase div = "span12" > 
    Nivel 1 de columna
    < clase div = "fila" > 
      < clase div = "span6" > 
        Nivel 2
      </div>
      < clase div = "span6" > 
        Nivel 2
      </div>
    </div>
  </div>
</div>

Enrolla tu propia cuadrícula

En Bootstrap hay un puñado de variables para personalizar el sistema de cuadrícula predeterminado de 940 px. Con un poco de personalización, puede modificar el tamaño de las columnas, sus medianeras y el contenedor en el que residen.

dentro de la red

Las variables necesarias para modificar el sistema de cuadrícula actualmente residen todas en archivos preboot.less.

Ahora a personalizar

Modificar la cuadrícula significa cambiar las tres @grid-*variables y volver a compilar los archivos Less.

Bootstrap viene equipado para manejar un sistema de cuadrícula con hasta 24 columnas; el valor predeterminado es solo 16. Así es como se verían sus variables de cuadrícula personalizadas en una cuadrícula de 24 columnas.

@gridColumnas : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Una vez recompilado, ¡estará listo!

Diseño fijo

El diseño centrado predeterminado y simple de 940 px de ancho para casi cualquier sitio web o página proporcionado por un solo archivo <div.container>.

<cuerpo>
  < clase div = "contenedor" > 
    ...
  </div>
</cuerpo>

Diseño fluido

Una estructura de página fluida alternativa y flexible con anchos mínimos y máximos y una barra lateral izquierda. Ideal para aplicaciones y documentos.

<cuerpo>
  <div clase = "líquido-contenedor" > 
    < clase div = "barra lateral" > 
      ...
    </div>
    < clase div = "contenido" > 
      ...
    </div>
  </div>
</cuerpo>

Encabezados y copia

Una jerarquía tipográfica estándar para estructurar sus páginas web.

Toda la cuadrícula tipográfica se basa en dos variables Less en nuestro archivo preboot.less: @basefonty @baseline. El primero es el tamaño de fuente base utilizado en todo el texto y el segundo es la altura de línea base.

Usamos esas variables y algunas matemáticas para crear los márgenes, rellenos y alturas de línea de todo nuestro tipo y más.

h1. Título 1

h2. Título 2

h3. Título 3

h4. Título 4

h5. Título 5

h6. Título 6

Ejemplo de párrafo

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Título de ejemplo Tiene un subtítulo...

Varios elementos

Uso de énfasis, direcciones y abreviaturas

<strong> <em> <address> <abbr>

Cuándo usar

Las etiquetas de énfasis ( <strong>y <em>) deben usarse para indicar una importancia o énfasis adicional de una palabra o frase en relación con la copia que la rodea. Úselo <strong>para la importancia y <em>para enfatizar el énfasis.

Énfasis en un párrafo

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, un pharetra augue.

Nota: Todavía está bien usar etiquetas <b>y <i>en HTML5 y no es necesario que tengan un estilo en negrita y cursiva, respectivamente (aunque si hay un elemento más semántico, utilícelo). <b>está destinado a resaltar palabras o frases sin transmitir una importancia adicional, mientras que <i>es principalmente para voz, términos técnicos, etc.

direcciones

El <address>elemento se utiliza para la información de contacto de su antepasado más cercano o de todo el trabajo. Aquí hay dos ejemplos de cómo podría usarse:

Nota: cada línea de un <address>debe terminar con un salto de línea ( <br />) o estar envuelta en una etiqueta de nivel de bloque (p. ej., <p>) para estructurar correctamente el contenido.

abreviaturas

Para abreviaturas y acrónimos, use la <abbr>etiqueta ( <acronym>está en desuso en HTML5 ). Coloque la forma abreviada dentro de la etiqueta y establezca un título para el nombre completo.

cotizaciones en bloque

<blockquote> <p> <small>

como cotizar

<blockquote>Para incluir una cita en bloque, envolver <p>y <small>etiquetas. Use el <small>elemento para citar su fuente y obtendrá un guión largo —delante de él.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julio Hibbert

<cita en bloque>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <pequeño> Dr. Julius Hibbert </pequeño>
</blockquote>

desordenado<ul>

• Lorem ipsum dolor siéntate amet
• Consectetur adipiscing elit
• entero molestie lorem en massa
• Facilisis en aliquet pretium nisl
• nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat en
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

sin estilo<ul.unstyled>

• Lorem ipsum dolor siéntate amet
• Consectetur adipiscing elit
• entero molestie lorem en massa
• Facilisis en aliquet pretium nisl
• nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat en
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ordenado<ol>

1. Lorem ipsum dolor siéntate amet
2. Consectetur adipiscing elit
3. entero molestie lorem en massa
4. Facilisis en aliquet pretium nisl
5. nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Descripcióndl

Listas de descripción

Una lista de descripción es perfecta para definir términos.

eusmod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Código

<code> <pre>

Mejora tu código con estilo con dos etiquetas simples. Para obtener aún más asombro a través de javascript, ingrese la biblioteca de código embellecedor de Google y listo.

Código de presentación

El código, los bloques o solo los fragmentos en línea se pueden mostrar con estilo simplemente envolviéndolos en la etiqueta correcta. Para bloques de código que abarcan varias líneas, use el <pre>elemento. Para el código en línea, use el <code>elemento.

<div>
  <h1>Título</h1>
  <p>Algo justo aquí...</p>
</div>

<div> <h1> Encabezado </h1> <p> Algo justo aquí... </p> </div>
  
  

Etiquetas en línea

<span class="label">

Llame la atención o marque cualquier frase en su cuerpo de texto.

etiqueta cualquier cosa

¿Alguna vez necesitó uno de esos nuevos y elegantes! o Indicadores importantes al escribir código? Pues ahora los tienes. Esto es lo que se incluye de forma predeterminada:

cuadrícula de medios

Muestre miniaturas de diferentes tamaños en páginas con poco espacio HTML y estilos mínimos.

Miniaturas de ejemplo

Las miniaturas en .media-gridpueden ser de cualquier tamaño, pero funcionan mejor cuando se asignan directamente al sistema de cuadrícula Bootstrap integrado. Anchos de imagen como 90, 210 y 330 se combinan con unos pocos píxeles de relleno para igualar los tamaños .span2de columna .span4, y ..span6

Largo

Medio

Pequeña

Codificándolos

Las cuadrículas de medios son fáciles de usar y bastante simples en el lado del marcado. Sus dimensiones se basan puramente en el tamaño de las imágenes incluidas.

< clase ul = "red de medios" > 
  <li>
    <a href = "#" > 
      <img class = "miniatura" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "miniatura" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Mesas de construcción

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Las mesas son geniales, para muchas cosas. Las grandes tablas, sin embargo, necesitan un poco de amor por el marcado para ser útiles, escalables y legibles (a nivel de código). Aquí hay algunos consejos para ayudar.

Siempre envuelva los encabezados de sus columnas de <thead>tal manera que la jerarquía sea <thead>> <tr>> <th>.

De manera similar a los encabezados de las columnas, todo el contenido del cuerpo de la tabla debe estar envuelto en una <tbody>para que su jerarquía sea <tbody>> <tr>> <td>.

Ejemplo: estilos de tabla predeterminados

Todas las tablas se diseñarán automáticamente con solo los bordes esenciales para garantizar la legibilidad y mantener la estructura. No es necesario agregar clases o atributos adicionales.

<tabla>
  ...
</tabla>

Ejemplo: rayas de cebra

Ponga un poco de fantasía con sus tablas agregando rayas de cebra, solo agregue la .zebra-stripedclase.

Nota: Zebra-striping es una mejora progresiva que no está disponible para navegadores más antiguos como IE8 e inferiores.

< clase de tabla = "rayado de cebra" > 
...
</tabla>

Ejemplo: rayas de cebra con TableSorter.js

Tomando el ejemplo anterior, mejoramos la utilidad de nuestras tablas al proporcionar la funcionalidad de clasificación a través de jQuery y el complemento Tablesorter . Haga clic en el encabezado de cualquier columna para cambiar el orden.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<guión > 
  $ ( función () { 
    $ ( "table#sortTableExample" ). clasificador de tablas ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< clase de tabla = "rayado de cebra" > 
  ...
</tabla>

Estilos predeterminados

Todos los formularios tienen estilos predeterminados para presentarlos de forma legible y escalable. Se proporcionan estilos para entradas de texto, listas de selección, áreas de texto, botones de opción y casillas de verificación y botones.

formularios apilados

Agregue .form-stackedal HTML de su formulario y tendrá etiquetas en la parte superior de sus campos en lugar de a su izquierda. Esto funciona muy bien si sus formularios son cortos o si tiene dos columnas de entradas para formularios más pesados.

Tamaños de campo de formulario

Personalice cualquier forma input, selecto textareaancho agregando solo unas pocas clases a su marcado.

A partir de la versión 1.3.0, agregamos las clases de tamaño basadas en cuadrículas para los elementos de formulario. Utilice estos sobre las clases existentes .mini, .smalletc.

Botones

Como convención, los botones se usan para acciones mientras que los enlaces se usan para objetos. Por ejemplo, "Descargar" podría ser un botón y "actividad reciente" podría ser un enlace.

Todos los botones tienen un estilo gris claro predeterminado, pero se pueden aplicar varias clases funcionales para diferentes estilos de color. Estas clases incluyen una .primaryclase azul, una clase azul claro .info, una clase verde .successy una clase roja .danger.

Botones de ejemplo

Los estilos de botón se pueden aplicar a cualquier cosa con el .btnaplicado. Por lo general, querrá aplicarlos solo a elementos <a>, <button>y select <input>. Así es como se ve:

Tamaños alternativos

¿Te apetece botones más grandes o más pequeños? ¡Tienen en él!

Estado deshabilitado

Para los botones que no están activos o que la aplicación los ha deshabilitado por un motivo u otro, use el estado deshabilitado. Eso es .disabledpara enlaces y :disabledpara <button>elementos.

Enlaces

Botones

Qué es

Nuestra barra superior es una barra fija que alberga el logotipo o el nombre de un sitio web, la navegación principal y el formulario de búsqueda.

personalizable

Todos los elementos dentro, y toda la barra superior también, son opcionales. Puede optar por incluir un logotipo/nombre, navegación, búsqueda y una navegación secundaria, o cualquier combinación de eso.

Desplegables incluidos

Como parte de la navegación principal, hemos incluido la posibilidad de agregar menús desplegables a su navegación. Echa un vistazo a la navegación secundaria arriba (alineada a la derecha) para ver cómo se hace. liLas etiquetas desplegables también admiten .activemostrar la selección de página actual.

Pestañas y pastillas

Cree una navegación secundaria simple con un archivo <ul>. Cambia entre pestañas o píldoras agregando la clase apropiada.

Excelente para subsecciones de contenido como nuestras páginas de configuración de cuenta y líneas de tiempo de usuario para alternar entre páginas de contenido similar. Disponible en estilos con pestañas o pastillas.

• Hogar
• Perfil
• Mensajes
• Ajustes
• Contacto
• Desplegable
  • Enlace secundario
  • algo mas aqui
  • otro enlace

< clase ul = "pestañas" > 
  <li class = "activo" ><a href = "#" > Inicio </a></li>  
  <li><a href = "#" > Perfil </a></li> 
  <li><a href = "#" > Mensajes </a></li> 
  <li><a href = "#" > Configuración </a></li> 
  <li><a href = "#" > Contacto </a></li> 
</ul>

• Hogar
• Perfil
• Mensajes
• Ajustes
• Contacto

<ul clase = "pastillas" > 
  <li class = "activo" ><a href = "#" > Inicio </a></li>  
  <li><a href = "#" > Perfil </a></li> 
  <li><a href = "#" > Mensajes </a></li> 
  <li><a href = "#" > Configuración </a></li> 
  <li><a href = "#" > Contacto </a></li> 
</ul>

Migas de pan

La navegación con migas de pan se usa como una forma de mostrar a los usuarios dónde se encuentran dentro de una aplicación o un sitio, pero no para la navegación principal.

• Hogar

• Inicio /
• página del medio

• Inicio /
• página media /
• Otro

• Inicio /
• página media /
• otro /
• Estás aquí

<ul clase = "miga de pan" > 
  <li><a href = "#" > Inicio </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Página central </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Otro </a> <span class = "divider" > / </span></li>   
  <li  class = "active" > Estás aquí </li>
</ul>

Paginación

Paginación ultrasimplista y de estilo minimalista inspirada en Rdio. El bloque grande es difícil de perder, fácilmente escalable y proporciona grandes áreas de clic.

< clase div = "paginación" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Anterior </a></li>  
    <li clase = "activo" ><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 class = "siguiente" ><a href = "#" > Siguiente → </a></li>  
  </ul>
</div>

Alertas básicas

.alert-message

Mensajes de una línea para resaltar el fallo, posible fallo o éxito de una acción. Particularmente útil para formularios.

Obtener el javascript »

Código de ejemplo

<div class = "advertencia de mensaje de alerta" > 
  <a clase = "cerrar" href = "#" > × </a>  
  <p><strong> ¡Santo guacamole! </strong> Será mejor que lo compruebes tú mismo, no te ves muy bien. </p>
</div>

Bloquear mensajes

.alert-message.block-message

Para mensajes que requieren un poco de explicación, tenemos alertas de estilo de párrafo. Estos son perfectos para generar mensajes de error más largos, advertir a un usuario de una acción pendiente o simplemente presentar información para enfatizar más la página.

Obtener el javascript »

Código de ejemplo

<div class = "advertencia de mensaje de bloque de mensaje de alerta" > 
  <a clase = "cerrar" href = "#" > × </a>  
  <p><strong> ¡Santo guacamole! ¡Esto es una advertencia! </strong> Será mejor que lo compruebes tú mismo, no te ves muy bien. Nulla vitae elit libero, un pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div clase = "acciones de alerta" > 
    <a class = "btn small" href = "#" > Realice esta acción </a> <a class = "btn small" href = "#" > O haga esto </a>     
  </div>
</div>

modales

Los modales (diálogos o lightboxes) son excelentes para acciones contextuales en situaciones en las que es importante mantener el contexto de fondo.

Obtener el javascript »

Información sobre herramientas

Los Twipsies son súper útiles para ayudar a un usuario confundido y señalarlo en la dirección correcta.

Obtener el javascript »

Popovers

Use popovers para proporcionar información subtextual a una página sin afectar el diseño.

Obtener el javascript »

Empezando

Integrar javascript con la biblioteca Bootstrap es muy fácil. ¡A continuación, repasamos los conceptos básicos y le brindamos algunos complementos increíbles para que pueda comenzar!

Ver documentos javascript »

Qué está incluido

Dé vida a algunos de los componentes principales de Bootstrap con nuevos complementos personalizados que funcionan con jQuery y Ender . Le recomendamos que los amplíe y modifique para adaptarlos a sus necesidades específicas de desarrollo.

¿Es necesario javascript?

¡No! Bootstrap está diseñado ante todo para ser una biblioteca CSS. Este javascript proporciona una capa interactiva básica además de los estilos incluidos.

Sin embargo, para aquellos que necesitan javascript, proporcionamos los complementos anteriores para ayudarlos a comprender cómo integrar Bootstrap con javascript y brindarles una opción rápida y liviana para la funcionalidad básica de inmediato.

Para obtener más información y ver algunas demostraciones en vivo, consulte nuestra página de documentación del complemento .