Historia

En los primeros días de Twitter, los ingenieros usaban casi cualquier biblioteca con la que estaban familiarizados para cumplir con los requisitos de front-end. Bootstrap comenzó como una respuesta a los desafíos que se presentaron y el desarrollo se aceleró rápidamente durante la primera Hackweek de Twitter.

Con la ayuda y los comentarios de muchos ingenieros de Twitter, Bootstrap ha crecido significativamente para abarcar no solo estilos básicos, sino patrones de diseño frontal más elegantes y duraderos.

Lea más en dev.twitter.com ›

Compatibilidad con navegador

Bootstrap está probado y es compatible con los principales navegadores modernos como Chrome, Safari, Internet Explorer y Firefox.

• Safari más reciente
• Google Chrome más reciente
• Firefox 4+
• Internet Explorer 7+

Qué está incluido

Bootstrap viene completo con CSS compilado, sin compilar y plantillas de ejemplo.

• Todos los archivos .less originales
• CSS completamente compilado y minimizado
• Documentación completa de la guía de estilo
• Plantilla de página de ejemplo (más próximamente)

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.

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

Diseño fijo

Un diseño básico de contenedor centrado de 940 px de ancho para casi cualquier sitio o página.

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

Diseño fluido

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

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

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, pero ya no vienen con estilos inherentes. <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. Así es como se ve:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Teléfono
: (123) 456-7890

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

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.

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.

#	Primer nombre	Apellido	Idioma
1	Alguno	Una	inglés
2	José	Paquete de seis	inglés
3	Stu	Mella	Código

<clase de tabla="tabla-común"> clase = "tabla-comun" >
  ...
</tabla>

Ejemplo: rayas de cebra

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

#	Primer nombre	Apellido	Idioma
1	Alguno	Una	inglés
2	José	Paquete de seis	inglés
3	Stu	Mella	Código

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

<table class="common-table-zebra-rayed"> class = "tabla común con rayas 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.

#	Primer nombre	Apellido	Idioma
1	Su	Una	inglés
2	José	Paquete de seis	inglés
3	Stu	Mella	Código

<guión src="js/jquery/jquery.tablesorter.min.js"></guión> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<guión > 
  $ ( función () { 
    $ ( "table#sortTableExample" ). clasificador de tablas ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< clase de tabla = "tabla común con rayas 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.

Leyenda de formulario de ejemplo

Entrada extragrande

Seleccione

1 2 3 4 5

Seleccione

1 2 3 4 5

Entrada no editable

Algo de valor aquí

Entrada deshabilitada

Entrada extragrande

Pequeño fragmento de texto de ayuda

Leyenda de formulario de ejemplo

Texto antepuesto

@

Casilla de verificación antepuesta

Casilla de verificación adjunta

Entrada de archivo

Leyenda de formulario de ejemplo

Lista de opciones

• Opción uno es esto y eso ---- asegúrate de incluir por qué es bueno
• La opción dos también se puede marcar e incluir en los resultados del formulario
• La opción tres puede, sí, lo adivinó, también se puede marcar e incluir en los resultados del formulario
• La opción cuatro no se puede marcar porque está deshabilitada.

Nota: Las etiquetas rodean todas las opciones para áreas de clic mucho más grandes y un formulario más útil.

Rango de fechas

a Todos los horarios se muestran como hora estándar del Pacífico (GMT -08:00).

área de texto

Bloque de texto de ayuda para describir el campo anterior si es necesario.

Lista de opciones

• Opción uno es esto y eso ---- asegúrate de incluir por qué es bueno
• La opción dos también se puede marcar e incluir en los resultados del formulario

Guardar cambios  Cancelar

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.

Leyenda de formulario de ejemplo

Entrada extragrande

Seleccione

1 2 3 4 5

Leyenda de formulario de ejemplo

Entrada extragrande

Pequeño fragmento de texto de ayuda

Lista de opciones

• Opción uno es esto y eso ---- asegúrate de incluir por qué es bueno
• La opción dos también se puede marcar e incluir en los resultados del formulario

Nota: Las etiquetas rodean todas las opciones para áreas de clic mucho más grandes y un formulario más útil.

Guardar cambios  Cancelar

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 .primaryhay disponible una clase azul. Además, rodar tus propios estilos es muy fácil.

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.

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

<ul class="pestañas"> clase = "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 class="pastillas"> 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>

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.

<div class="paginación"> clase = "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

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

Bloquear mensajes

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.

modales

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

Consejos sobre herramientas

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

Popovers

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

Bootstrap se creó con Preboot , un paquete de código abierto de mixins y variables para usar junto con Less , un preprocesador de CSS para un desarrollo web más rápido y sencillo.

Vea cómo usamos Preboot en Bootstrap y cómo puede usarlo si elige ejecutar Less en su próximo proyecto.

Cómo usarlo

Use esta opción para hacer un uso completo de Less variables, mixins y anidamiento de Bootstrap en CSS a través de javascript en su navegador.

<enlace rel="hoja de estilo/menos" href="menos/bootstrap.menos" media="todos" /> rel = "hoja de estilo/menos" href = "menos/bootstrap.menos" media = "todos" />   
<script src = "js/less-1.0.41.min.js" ></script> 

¿No siente la solución .js? Pruebe la aplicación Less Mac o use Node.js para compilar cuando implemente su código.

Qué está incluido

Estos son algunos de los aspectos más destacados de lo que se incluye en Twitter Bootstrap como parte de Bootstrap. Dirígete al sitio web de Bootstrap o a la página del proyecto Github para descargar y obtener más información.

Variables de color

Las variables en Less son perfectas para mantener y actualizar su CSS sin dolores de cabeza. Cuando desee cambiar un valor de color o un valor de uso frecuente, actualícelo en un lugar y listo.

// Enlaces
@linkColor : #8b59c2;         
@linkColorHover :     oscurecer ( @linkColor , 10 ); 
// Grises
@negro : #000;             
@grayDark :           aclarar ( @black , 25 %); 
@gray :               aclarar ( @black , 50 %); 
@grayLight :          aclarar ( @black , 70 %); 
@grayLighter :        aclarar ( @black , 90 %); 
@blanco : #fff;             
// Colores de acento
@azul : #08b5fb;              
@verde : #46a546;             
@rojo : #9d261d;               
@amarillo : #ffc40d;            
@naranja : #f89406;            
@rosa : #c3325f;              
@púrpura : #7a43b6 ;            
// línea de base
@baseline : 20px ;          

Comentando

Less también proporciona otro estilo de comentarios además de la /* ... */sintaxis normal de CSS.

// Esto es un comentario
/* Esto también es un comentario */

Mezclando el wazoo

Los mixins son básicamente inclusiones o parciales para CSS, lo que le permite combinar un bloque de código en uno. Son excelentes para propiedades con prefijos de proveedores box-shadow, como gradientes entre navegadores, pilas de fuentes y más. A continuación se muestra una muestra de los mixins que se incluyen con Bootstrap.

pilas de fuentes

#fuente {
  . taquigrafía ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
tamaño de     fuente : @ tamaño ; 
    fuente - peso : @peso ; 
    línea - altura : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
familia de     fuentes : " Helvetica Neue" , Helvetica , Arial , sans - serif ;   
tamaño de     fuente : @ tamaño ; 
    fuente - peso : @peso ; 
    línea - altura : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
familia de     fuentes : "Georgia" , Times New Roman , Times , sans - serif ;     
tamaño de     fuente : @ tamaño ; 
    fuente - peso : @peso ; 
    línea - altura : @lineHeight ; 
  }
  . monoespaciado ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
familia de     fuentes : "Monaco" , Courier New , monoespaciado ;   
tamaño de     fuente : @ tamaño ; 
    fuente - peso : @peso ; 
    línea - altura : @lineHeight ; 
  }
}

Gradientes

#degradado {
  . horizontal ( @startColor : #555, @endColor: #333) { 
color de     fondo : @endColor ; 
    fondo - repetir : repetir - x ;
imagen de     fondo : - khtml - degradado ( lineal , arriba a la izquierda, arriba a la derecha , desde ( @startColor ), hasta ( @endColor ) ); // Conquistador   
imagen de     fondo : - moz - linear - degradado ( izquierda , @startColor , @endColor ) ; // FF 3.6+    
imagen de     fondo : - ms - linear - degradado ( izquierda , @startColor , @endColor ) ; // IE10    
imagen de     fondo : - webkit - degradado ( lineal , arriba a la izquierda, arriba a la derecha , color - detener ( 0 %, @startColor ), color - detener ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
imagen de     fondo : - webkit - linear - degradado ( izquierda , @startColor , @endColor ) ; // Safari 5.1+, Chrome 10+    
imagen de     fondo : - o - linear - degradado ( izquierda , @startColor , @endColor ) ; // Ópera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filtro : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 e IE7 
imagen de     fondo : degradado lineal ( izquierda , @startColor , @endColor ) ; // El estándar   
  }
  . verticales ( @startColor : #555, @endColor: #333) { 
color de     fondo : @endColor ; 
    fondo - repetir : repetir - x ;
imagen de     fondo : - khtml - degradado ( lineal , arriba a la izquierda , abajo a la izquierda, desde ( @startColor ) , hasta ( @endColor )); // Conquistador   
imagen de     fondo : - moz - linear - degradado ( @startColor , @endColor ) ; // FF 3.6+   
imagen de     fondo : - ms - linear - degradado ( @startColor , @endColor ) ; // IE10   
imagen de     fondo : - webkit - degradado ( lineal , arriba a la izquierda , abajo a la izquierda, color - detener ( 0 % , @startColor ), color - detener ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
imagen de     fondo : - webkit - linear - degradado ( @startColor , @endColor ) ; // Safari 5.1+, Chrome 10+   
    fondo - imagen : - o - lineal - degradado ( @startColor , @endColor ); // Ópera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filtro : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 e IE7 
imagen de     fondo : degradado lineal ( @startColor , @endColor ) ; // El estandar  
  }
  . direccional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertical - tres - colores ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operaciones y sistema de red

Ponte elegante y realiza algunos cálculos matemáticos para generar mixins flexibles y potentes como el que se muestra a continuación.

// Cuadrícula
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistema de red
. contenedor {
  ancho : @sitioAncho ; 
  margen : 0 automático ;  
  . arreglo claro ();
}
. columnas ( @columnSpan : 1 ) {  
  pantalla : en línea ; 
  flotante : izquierda ;
  ancho : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margen izquierdo : @gridGutterWidth ; _ 
  &: primero - hijo {
    margen izquierdo : 0 ; _ 
  }
}
. compensación ( @columnOffset : 1 ) {  
  margen - izquierda : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! importante _          
}