Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap es un conjunto de herramientas de Twitter diseñado para impulsar el desarrollo de sitios y aplicaciones web.
Incluye CSS y HTML básicos para tipografía, formularios, botones, tablas, cuadrículas, navegación y más.
Alerta de nerd: Bootstrap está construido con Less y fue diseñado para funcionar desde el principio con solo navegadores modernos en mente.
Para comenzar de la manera más rápida y sencilla, simplemente copie este fragmento en su página web.
¿Fanático de usar Less? No hay problema, simplemente clone el repositorio y agregue estas líneas:
Descargue, bifurque, extraiga, archive problemas y más con el repositorio oficial de Bootstrap en Github.
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.
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 = "fila" >
- < clase div = "span6 columnas" >
- ...
- </div>
- < clase div = "span10 columnas" >
- ...
- </div>
- </div>
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>
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>
Una jerarquía tipográfica estándar para estructurar sus páginas web.
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.
También puede agregar subtítulos con <strong>
y<em>
Uso de énfasis, direcciones y abreviaturas
<strong>
<em>
<address>
<abbr>
Las etiquetas de énfasis ( <strong>
y <em>
) deben usarse para agregar una distinción visual entre una palabra o frase y la copia que la rodea. Úselo <strong>
para llamar la atención simple y <em>
para llamar la atención y los títulos.
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.
El address
elemento se utiliza para, ¡lo has adivinado!, direcciones. Así es como se ve:
Nota: cada línea de un address
debe terminar con un salto de línea ( <br />
) para estructurar correctamente el contenido tal como se lee en la vida real sin aplicar ningún estilo.
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.
<blockquote>
<p>
<cite>
Asegúrese de envolver su blockquote
alrededor paragraph
y cite
etiquetas. Al citar una fuente, utilice el cite
elemento. El CSS automáticamente antecederá un nombre con un guión largo (—).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
Dr. Julio Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<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
.
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>
Ponga un poco de fantasía con sus tablas agregando rayas de cebra, solo agregue la .zebra-striped
clase.
# | Primer nombre | Apellido | Idioma |
---|---|---|---|
1 | Alguno | Una | inglés |
2 | José | Paquete de seis | inglés |
3 | Stu | Mella | Código |
- <table class="common-table-zebra-rayed"> class = "tabla común con rayas de cebra" >
- ...
- </tabla>
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 |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> tipo = "texto/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- < tipo de script = "texto/javascript" >
- $ ( documento ). listo ( función () {
- $ ( "table#sortTableExample" ). clasificador de tablas ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- < clase de tabla = "tabla común con rayas de cebra" >
- ...
- </tabla>
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.
Agregue .form-stacked
al 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.
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 .primary
hay disponible una clase azul. Además, rodar tus propios estilos es muy fácil.
Los estilos de botón se pueden aplicar a cualquier cosa con el .btn
aplicado. Por lo general, querrá aplicarlos solo a elementos a
, button
y select input
. Así es como se ve:
¿Te apetece botones más grandes o más pequeños? ¡Tienen en él!
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 .disabled
para enlaces y :disabled
para button
elementos.
Mensajes de una línea para resaltar el fallo, posible fallo o éxito de una acción. Particularmente útil para formularios.
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.
Los modales (diálogos o lightboxes) son excelentes para acciones contextuales en situaciones en las que es importante mantener el contexto de fondo.
Un buen cuerpo...
Los Twipsies son súper útiles para ayudar a un usuario confundido y señalarlo en la dirección correcta.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Use popovers para proporcionar información subtextual a una página sin afectar el diseño.
Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
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.
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" tipo="texto/css" href="menos/bootstrap.menos" media="todos" /> rel = "hoja de estilo/menos" tipo = "texto/css" href = "menos/bootstrap.menos" medios = "todos" />
- < tipo de secuencia de comandos = "texto/javascript" src = "js/less-1.0.41.min.js" ></secuencia de comandos>
¿No siente la solución .js? Pruebe la aplicación Less Mac o use Node.js para compilar cuando implemente su código.
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.
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 énfasis
- @azul : #08b5fb;
- @verde : #46a546;
- @rojo : #9d261d;
- @amarillo : #ffc40d;
- @naranja : #f89406;
- @rosa : #c3325f;
- @púrpura : #7a43b6 ;
- // línea de base
- @baseline : 20px ;
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 */
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.
- #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 ;
- }
- }
- #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) {
- ...
- }
- }
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 _
- }