Grella predeterminada

O sistema de grade predeterminado que se proporciona como parte de Bootstrap é unha grade de 16 columnas de 940 píxeles de ancho. É un sabor do popular sistema de reixa 960, pero sen a marxe/recheo adicional nos lados esquerdo e dereito.

Exemplo de marcado de grade

Como se mostra aquí, pódese crear un deseño básico con dúas "columnas", cada unha abarcando un número das 16 columnas fundamentais que definimos como parte do noso sistema de cuadrícula. Vexa os exemplos a continuación para obter máis variacións.

<div class="fila">
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Disposición fixa

Un deseño básico de contedores centrado de 940 píxeles de ancho para case calquera sitio ou páxina.

<corpo>
  <div class = "contedor" > 
    ...
  </div>
</corpo>

Disposición de fluídos

Unha estrutura de páxina fluída ou líquida flexible con anchos mínimos e máximos e unha barra lateral esquerda. Ideal para aplicacións.

<corpo>
  <div class = "container-fluid" > 
    <div class = "barra lateral" > 
      ...
    </div>
    <div class = "contido" > 
      ...
    </div>
  </div>
</corpo>

Títulos e copia

Unha xerarquía tipográfica estándar para estruturar as túas páxinas 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

Parágrafo de exemplo

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.

Exemplo de título Ten un subtítulo...

Tamén pode engadir subtítulos co <strong>e<em>

Varios elementos

Usando énfases, enderezos e abreviaturas

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

Cando usar

As etiquetas de énfase ( <strong>e <em>) deben usarse para engadir unha distinción visual entre unha palabra ou frase e a súa copia circundante. Utilízao <strong>para a atención sinxela e <em>para a atención e os títulos.

Énfase nun parágrafo

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

Enderezos

O addresselemento utilízase para —xa o adiviñaches!— enderezos. Así é como se ve:

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

Nota: cada liña addressdebe rematar cun salto de liña ( <br />) para estruturar correctamente o contido mentres se le na vida real sen aplicar ningún estilo.

Abreviaturas

Para abreviaturas e acrónimos, use a abbretiqueta ( acronymestá obsoleto en HTML5 ). Coloque o formulario abreviado dentro da etiqueta e estableza un título para o nome completo.

Citas de bloque

<blockquote> <p> <cite>

Asegúrate de envolver blockquotee paragraphetiquetar cite. Ao citar unha fonte, use o citeelemento. O CSS prefará automaticamente un nome cun guión em (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Doutor Julius Hibbert

Sen orde<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Antón Capresi
• Os meus compañeiros de equipo
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Xoán Jacob
• Paul Pierce
• Kevin Garnett

Sen estilo<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Antón Capresi
• Os meus compañeiros de equipo
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Xoán Jacob
• Paul Pierce
• Kevin Garnett

Ordenado<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Antón Capresi
5. Os meus compañeiros de equipo
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. Xoán Jacob
7. Paul Pierce
8. Kevin Garnett

Descricióndl

Listas de descricións

Unha lista de descricións é perfecta para definir termos.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

Construíndo táboas

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

As táboas son xeniais, para moitas cousas. As táboas xeniais, con todo, necesitan un pouco de amor de marcado para ser útiles, escalables e lexibles (a nivel de código). Aquí tes algúns consellos para axudar.

Engade sempre as cabeceiras das súas columnas de theadforma que a xerarquía sexa thead> tr> th.

Do mesmo xeito que as cabeceiras das columnas, todo o contido do corpo da túa táboa debería estar envolto nun formato tbodypara que a túa xerarquía sexa tbody> tr> td.

Exemplo: estilos de táboa predeterminados

Todas as táboas terán un estilo automaticamente só cos bordos esenciais para garantir a lexibilidade e manter a estrutura. Non é necesario engadir clases ou atributos adicionais.

#	Nome	Apelido	Lingua
1	Algunhas	Un	inglés
2	Joe	Sixpack	inglés
3	Stu	Dent	Código

<table class="table-común"> class = "taboa común" >
  ...
</táboa>

Exemplo: raias de cebra

Déixate un pouco coas túas táboas engadindo raias de cebra; só tes que engadir a .zebra-stripedclase.

#	Nome	Apelido	Lingua
1	Algunhas	Un	inglés
2	Joe	Sixpack	inglés
3	Stu	Dent	Código

<table class="common-table zebra-striped"> class = "taboa común con raias de cebra" >
...
</táboa>

Exemplo: raias de cebra con TableSorter.js

Tomando o exemplo anterior, melloramos a utilidade das nosas táboas proporcionando funcionalidades de ordenación mediante jQuery e o complemento Tablesorter . Fai clic na cabeceira de calquera columna para cambiar a ordenación.

#	Nome	Apelido	Lingua
1	O teu	Un	inglés
2	Joe	Sixpack	inglés
3	Stu	Dent	Código

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( documento ). listo ( función () { 
    $ ( "táboa#sortTableExample" ). clasificador de táboas ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "taboa común con raias de cebra" > 
  ...
</táboa>

Estilos predeterminados

Todos os formularios reciben estilos predeterminados para presentalos dun xeito lexible e escalable. Ofrécense estilos para entradas de texto, listas de selección, áreas de texto, botóns de opción e caixas de verificación e botóns.

Exemplo de lenda do formulario

Entrada X-Large

Seleccione

1 2 3 4 5

Seleccione

1 2 3 4 5

Entrada non editable

Algún valor aquí

Entrada desactivada

Entrada X-Large

Pequeno fragmento de texto de axuda

Exemplo de lenda do formulario

Texto anteposto

@

Caixa de verificación anteposta

Caixa de verificación anexa

Entrada de ficheiro

Exemplo de lenda do formulario

Lista de Opcións

• A primeira opción é isto e aquilo; asegúrate de incluír por que é xenial
• A segunda opción tamén se pode comprobar e incluír nos resultados do formulario
• A opción tres tamén se pode comprobar e incluír nos resultados do formulario, si, adiviñaches
• A opción catro non se pode comprobar xa que está desactivada.

Nota: As etiquetas rodean todas as opcións para áreas de clic moito máis grandes e un formulario máis utilizable.

Intervalo de datas

a Todas as horas móstranse como a hora estándar do Pacífico (GMT -08:00).

Área de texto

Bloque de texto de axuda para describir o campo anterior se é necesario.

Lista de Opcións

• A primeira opción é isto e aquilo; asegúrate de incluír por que é xenial
• A segunda opción tamén se pode comprobar e incluír nos resultados do formulario

Gardar cambios Cancelar

Formularios apilados

Engade .form-stackedao HTML do teu formulario e terás etiquetas enriba dos seus campos en lugar de á esquerda. Isto funciona moi ben se os teus formularios son curtos ou tes dúas columnas de entradas para os formularios máis pesados.

Exemplo de lenda do formulario

Entrada X-Large

Seleccione

1 2 3 4 5

Exemplo de lenda do formulario

Lista de Opcións

• A primeira opción é isto e aquilo; asegúrate de incluír por que é xenial
• A segunda opción tamén se pode comprobar e incluír nos resultados do formulario

Nota: As etiquetas rodean todas as opcións para áreas de clic moito máis grandes e un formulario máis utilizable.

Gardar cambios Cancelar

Botóns

Como convención, os botóns úsanse para accións mentres que as ligazóns úsanse para os obxectos. Por exemplo, "Descargar" pode ser un botón e "actividade recente" pode ser unha ligazón.

Todos os botóns teñen por defecto un estilo gris claro, pero hai unha .primaryclase azul dispoñible. Ademais, facer os teus propios estilos é fácil.

Botóns de exemplo

Os estilos de botón pódense aplicar a calquera cousa que teña .btnaplicada. Normalmente quererá aplicalos só a elementos a, button, e seleccionados input. Así é como se ve:

Tamaños alternativos

Apetece botóns máis grandes ou pequenos? ¡Así!

Estado desactivado

Para os botóns que non están activos ou están desactivados pola aplicación por un motivo ou outro, usa o estado desactivado. Iso é .disabledpara ligazóns e :disabledpara buttonelementos.

Ligazóns

Botóns

Que é

A nosa barra superior é unha barra fixa que alberga o logotipo ou o nome dun sitio web, a navegación principal e o formulario de busca.

Personalizable

Todos os elementos dentro e toda a barra superior tamén son opcionais. Podes escoller incluír un logotipo/nome, navegación, busca e unha navegación secundaria, ou calquera combinación destes.

Menú despregable incluído

Como parte da navegación principal, incluímos a posibilidade de engadir menús despregables ao teu navegador. Consulta o navegador secundario superior (aliñado á dereita) para ver como se fai.

Pastillas e pastillas

Crea unha navegación secundaria sinxela cun ul. Cambia entre pastillas ou pílulas engadindo a clase adecuada.

Ideal para subseccións de contido, como as páxinas de configuración da nosa conta e as liñas de tempo dos usuarios para alternar entre páxinas de contido similar. Dispoñible en estilos con fichas ou comprimidos.

• Casa
• Perfil
• Mensaxes
• Configuración
• Contacto

<ul class="tabs"> class = "pestanas" >
  <li class = "active" ><a href = "" > Inicio </a></li>  
  <li><a href = "" > Perfil </a></li> 
  <li><a href = "" > Mensaxes </a></li> 
  <li><a href = "" > Configuración </a></li> 
  <li><a href = "" > Contacto </a></li> 
</ul>

• Casa
• Perfil
• Mensaxes
• Configuración
• Contacto

<ul class="pílulas"> clase = "pílulas" >
  <li class = "active" ><a href = "" > Inicio </a></li>  
  <li><a href = "" > Perfil </a></li> 
  <li><a href = "" > Mensaxes </a></li> 
  <li><a href = "" > Configuración </a></li> 
  <li><a href = "" > Contacto </a></li> 
</ul>

Paxinación

Paxinación ultra simplista e de estilo minimalista inspirada en Rdio. O bloque grande é difícil de perder, facilmente escalable e ofrece grandes áreas de clic.

<div class="paginación"> class = "paxinación" >
  <ul>
    <li class = "anterior desactivada" ><a href = "" > ← Anterior </a></li>  
    <li class = "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 = "seguinte" ><a href = "" > Seguinte → </a></li>  
  </ul>
</div>

Alertas básicas

Mensaxes dunha liña para destacar o fracaso, posible fracaso ou éxito dunha acción. Particularmente útil para formularios.

Bloquear mensaxes

Para as mensaxes que requiren un pouco de explicación, temos alertas de estilo de parágrafo. Estes son perfectos para enviar mensaxes de erro máis longas, avisar a un usuario dunha acción pendente ou simplemente presentar información para facer máis énfase na páxina.

Modais

Os modais (diálogos ou caixas de luz) son excelentes para accións contextuais en situacións nas que é importante que se manteña o contexto de fondo.

Popovers

Use popovers para proporcionar información subtextual a unha páxina sen afectar ao deseño.

Bootstrap foi construído con Preboot , un paquete de código aberto de mixins e variables que se usará xunto con Less , un preprocesador CSS para un desenvolvemento web máis rápido e sinxelo.

Comproba como usamos Preboot en Bootstrap e como podes facer uso del se decides executar Less no teu próximo proxecto.

Como usalo

Use esta opción para facer un uso completo das variables, mixins e anidamento de Less de Bootstrap en CSS mediante javascript no seu navegador.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Non sentes a solución .js? Proba a aplicación Less Mac ou usa Node.js para compilar cando despregas o teu código.

Que está incluído

Aquí tes algúns dos aspectos máis destacados do que se inclúe en Twitter Bootstrap como parte de Bootstrap. Diríxete ao sitio web de Bootstrap ou á páxina do proxecto Github para descargar e obter máis información.

Variables de cor

As variables en Less son perfectas para manter e actualizar o teu CSS sen dor de cabeza. Cando queiras cambiar un valor de cor ou un valor de uso frecuente, actualízao nun lugar e xa está.

// Ligazóns
@linkColor : #8b59c2;         
@linkColorHover :     escurecer ( @linkColor , 10 ); 
// Grises
@negro : #000;             
@grayDark :           aclarar ( @negro , 25 %); 
@gris :               aclarar ( @negro , 50 %); 
@grayLight :          aclarar ( @negro , 70 %); 
@grayLighter :        aclarar ( @negro , 90 %); 
@branco : #fff ;             
// Cores de acento
@azul : #08b5fb;              
@verde : #46a546;             
@vermello : #9d261d;               
@amarelo : #ffc40d;            
@laranxa : #f89406;            
@rosa : #c3325f;              
@morado : #7a43b6;            
// Liña base
@ línea base : 20px ;          

Comentando

Less tamén ofrece outro estilo de comentario ademais da /* ... */sintaxe normal de CSS.

// Este é un comentario
/* Este tamén é un comentario */

Mestura o wazoo

Os mixins son basicamente inclusións ou parciais para CSS, o que lle permite combinar un bloque de código nun só. Son excelentes para propiedades con prefixos de provedores como box-shadow, gradientes entre navegadores, pilas de fontes e moito máis. A continuación móstrase unha mostra dos mixins que se inclúen con Bootstrap.

Pilas de fontes

#font {
  . abreviatura ( @peso : normal , @tamaño : 14px , @lineHeight : 20px ) {     
tamaño da     fonte : @ tamaño ; 
    font - weight : @weight ; 
    liña - altura : @lineHeight ; 
  }
  . sans - serif ( @peso : normal , @tamaño : 14px , @lineHeight : 20px ) {     
familia     tipográfica : "Helvetica Neue " , ​​Helvetica , Arial , sans - serif ;   
tamaño da     fonte : @ tamaño ; 
    font - weight : @weight ; 
    liña - altura : @lineHeight ; 
  }
  . serif ( @peso : normal , @tamaño : 14px , @lineHeight : 20px ) {     
familia     tipográfica : "Georgia " , Times New Roman , Times , sans - serif ;     
tamaño da     fonte : @ tamaño ; 
    font - weight : @weight ; 
    liña - altura : @lineHeight ; 
  }
  . monoespazo ( @peso : normal , @tamaño : 12px , @lineHeight : 20px ) {     
familia     tipográfica : " Monaco" , Courier New , monoespazo ;   
tamaño da     fonte : @ tamaño ; 
    font - weight : @weight ; 
    liña - altura : @lineHeight ; 
  }
}

Degradados

#gradiente {
  . horizontal ( @startColor : #555, @endColor: #333) { 
cor de     fondo : @endColor ; 
    fondo - repetir : repetir - x ;
    fondo - imaxe : - khtml - degradado ( lineal , esquerda superior , dereita superior , de ( @startColor ), a ( @endColor )); // Konqueror   
    fondo - imaxe : - moz - lineal - degradado ( esquerda , @startColor , @endColor ); // FF 3.6+    
    fondo - imaxe : - ms - lineal - degradado ( esquerda , @startColor , @endColor ); // IE10    
    fondo - imaxe : - webkit - degradado ( lineal , esquerda superior , dereita superior , cor - stop ( 0 %, @startColor ), cor - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fondo - imaxe : - webkit - lineal - degradado ( esquerda , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    fondo - imaxe : - o - lineal - degradado ( esquerda , @startColor , @endColor ); // Opera 11.10    
    - ms - filtro : %( "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 
    fondo - imaxe : lineal - degradado ( esquerda , @startColor , @endColor ); // O estándar   
  }
  . vertical ( @startColor : #555, @endColor: #333) { 
cor de     fondo : @endColor ; 
    fondo - repetir : repetir - x ;
    background - image : - khtml - gradient ( lineal , esquerda superior , esquerda inferior , de ( @startColor ), a ( @endColor )); // Konqueror   
    fondo - imaxe : - moz - lineal - degradado ( @startColor , @endColor ); // FF 3.6+   
    fondo - imaxe : - ms - lineal - degradado ( @startColor , @endColor ); // IE10   
    fondo - imaxe : - webkit - degradado ( lineal , esquerda superior , esquerda inferior , cor - stop ( 0 %, @startColor ), cor - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fondo - imaxe : - webkit - lineal - gradiente ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    fondo - imaxe : - o - lineal - degradado ( @startColor , @endColor ); // Opera 11.10   
    - ms - filtro : %( "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 
    fondo - imaxe : lineal - degradado ( @startColor , @endColor ); // O estándar  
  }
  . direccional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertical - tres cores ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operacións e sistema de rede

Anímate e realiza algunhas matemáticas para xerar mixins flexibles e potentes como o seguinte.

// Gridade
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistema de reixa
. recipiente {
  ancho : @siteWidth ; 
  marxe : 0 auto ;  
  . clearfix ();
}
. columnas ( @columnSpan : 1 ) {  
  visualización : en liña ; 
  flotar : esquerda ;
  ancho : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  marxe - esquerda : @gridGutterWidth ; 
  &: primeiro - fillo {
    marxe - esquerda : 0 ; 
  }
}
. compensación ( @columnOffset : 1 ) {  
  marxe - esquerda : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! importante ;          
}