Escala tipográfica

Toda a grella tipográfica baséase en dúas variables Menos do noso ficheiro variables.less: @baseFontSizee @baseLineHeight. O primeiro é o tamaño da fonte base empregado en todo e o segundo é a altura da liña base.

Usamos esas variables, e algunhas matemáticas, para crear as marxes, recheos e alturas de liña de todo o noso tipo e moito máis.

Exemplo de texto do corpo

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, is not commodo luctus, ninsi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Usando a énfase

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.

Nota: non dubides en usar <b>e <i>en HTML5, pero o seu uso cambiou un pouco. <b>está destinado a resaltar palabras ou frases sen transmitir importancia adicional, mentres que <i>é principalmente para voz, termos técnicos, etc.

Enderezos de exemplo

Aquí tes dous exemplos de como <address>se pode usar a etiqueta:

Exemplos de abreviaturas

As abreviaturas teñen un estilo con texto en maiúscula e un bordo inferior de puntos claros. Tamén teñen un cursor de axuda ao pasar o cursor para que os usuarios teñan unha indicación adicional de que algo se mostrará ao pasar o cursor.

HTML é o mellor desde o pan rebanado.

Unha abreviatura da palabra atributo é attr .

Para incluír unha cita en bloque, envolve <blockquote>calquera HTML como cita. Para citas directas recomendamos un <p>.

Inclúe un elemento opcional <small>para citar a túa fonte e terás un guión em —antes con fins de estilismo.

<cota de bloque>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Alguén famoso </small>
</blockquote>

As comillas de bloque predeterminadas teñen o estilo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Alguén famoso en Body of work

Para colocar a túa cita de bloque á dereita, engade class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Alguén famoso en Body of work

Sen orde

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie Lorem at Massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget portttitor Lorem

Sen estilo

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie Lorem at Massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget portttitor Lorem

Ordenado

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie Lorem at Massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget portttitor Lorem

Descrición

<dl>

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.

En liña

Envolve fragmentos de código en liña con <code>.

Por exemplo , a sección < code> </ code > debe ser envolveda como en liña .  

Bloque básico

Use <pre>para varias liñas de código. Asegúrate de converter os cursores nos seus caracteres Unicode para unha representación correcta.

<p>Texto de mostra aquí...</p>

<pre>
  <p>Texto de mostra aquí...</p>
</pre>

Nota: Asegúrese de manter o código dentro das <pre>etiquetas o máis preto posible da esquerda; renderizará todas as pestanas.

Google Prettify

Toma o mesmo <pre>elemento e engade dúas clases opcionais para mellorar a representación.

<p> Texto de mostra aquí... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Texto de mostra aquí...</p>
</pre>

Descarga google-code-prettify e consulta o readme para saber como usalo.

<táboa>
  <cabeza>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</táboa>

As táboas teñen un estilo automaticamente con só algúns bordos para garantir a lexibilidade e manter a estrutura. Con 2.0, a .tableclase é necesaria.

<table class = "table" > 
  …
</táboa>

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

Nota: As táboas sprites usan o :nth-childselector CSS e non están dispoñibles en IE7-IE8.

<table class = "table table-striped" > 
  …
</táboa>

Engade bordos ao redor de toda a mesa e esquinas redondeadas con fins estéticos.

<table class = "táboa con bordes de táboa" > 
  …
</táboa>

Fai as túas táboas máis compactas engadindo a .table-condensedclase para cortar o recheo das celas da táboa á metade (de 8px a 4px).

<table class = "table table-condensed" > 
  …
</táboa>

Non dubides en combinar calquera das clases da táboa para conseguir diferentes looks utilizando calquera das clases dispoñibles.

<table class = "táboa con raias de táboa con bordes de táboa condensada" > 
  ...
</táboa>

HTML e CSS flexibles

A mellor parte dos formularios en Bootstrap é que todas as túas entradas e controis teñen un aspecto estupendo sen importar como os constrúas no teu marcado. Non é necesario HTML superfluo, pero fornecemos os patróns para aqueles que o precisen.

Os deseños máis complicados inclúen clases sucintas e escalables para facilitar o estilo e a vinculación de eventos, polo que estás cuberto en cada paso.

Catro esquemas incluídos

Bootstrap inclúe catro tipos de deseños de formularios:

• Vertical (predeterminado)
• Busca
• En liña
• Horizontal

Os distintos tipos de deseños de formularios requiren algúns cambios no marcado, pero os propios controis permanecen e se comportan igual.

Controla estados e moito máis

Os formularios de Bootstrap inclúen estilos para todos os controis do formulario base, como entrada, área de texto e selección que esperarías. Pero tamén inclúe unha serie de compoñentes personalizados, como entradas anexas e antepostas e soporte para listas de caixas de verificación.

Inclúense estados como erro, aviso e éxito para cada tipo de control de formulario. Tamén se inclúen estilos para controis desactivados.

Coa versión 2.0, temos valores predeterminados máis claros e intelixentes para os estilos de formulario. Sen marcado adicional, só controis de formulario.

Reflicte os estilos predeterminados de WebKit, só tes que engadir .form-searchos campos de busca máis redondeados.

As entradas están a nivel de bloque para comezar. Para .form-inlinee .form-horizontal, usamos inline-block.

Que está incluído

Á esquerda móstranse todos os controis de formulario predeterminados que admitimos. Aquí está a lista con viñetas:

• entradas de texto (texto, contrasinal, correo electrónico, etc.)
• caixa de verificación
• radio
• seleccionar
• selección múltiple
• entrada de ficheiro
• área de texto

Novos valores predeterminados coa versión 2.0

Ata a versión 1.4, os estilos de formulario predeterminados de Bootstrap usaban o deseño horizontal. Con Bootstrap 2, eliminamos esa limitación para ter valores predeterminados máis intelixentes e escalables para calquera formulario.

Estados do navegador redeseñado

disabledBootstrap presenta estilos para estados e enfocados compatibles co navegador . Eliminamos o Webkit predeterminado outlinee aplicamos un box-shadowno seu lugar para :focus.

Validación de formularios

Tamén inclúe estilos de validación de erros, avisos e éxito. Para usalo, engade a clase de erro ao .control-group.

<fieldset
  class = "erro do grupo de control" >
  …
</fieldset>

Anteponer e engadir entradas

Os grupos de entrada (con texto anexado ou anteposto) ofrecen un xeito sinxelo de dar máis contexto ás túas entradas. Exemplos excelentes inclúen o signo @ para os nomes de usuario de Twitter ou $ para as finanzas.

Caixas de verificación e radios

Ata a versión 1.4, Bootstrap requiría un marcado adicional nas caixas de verificación e nas radios para apilalas. Agora, é unha simple cuestión de repetir o <label class="checkbox">que envolve o <input type="checkbox">.

Tamén se admiten caixas de verificación e radios en liña. Só ten que engadir .inlinea calquera .checkboxou .radioe xa está.

Formularios en liña e anexar/antes

Para usar entradas de antecedentes ou anexas nun formulario en liña, asegúrate de colocar .add-one inputna mesma liña, sen espazos.

Formulario de texto de axuda

Para engadir texto de axuda para as entradas do formulario, inclúa texto de axuda en liña <span class="help-inline">ou un bloque de texto de axuda <p class="help-block">despois do elemento de entrada.

Botóns para accións

Como convención, os botóns só deben usarse para accións mentres que os hipervínculos deben usarse para os obxectos. Por exemplo, "Descargar" debería ser un botón mentres que "Actividade recente" debería ser unha ligazón.

Para áncoras e formas

Os estilos de botón pódense aplicar a calquera cousa que teña .btnaplicada. Non obstante, normalmente quererás aplicar estes só a elementos <a>e <button>.

Nota: Todos os botóns deben incluír a .btnclase. Deben aplicarse estilos de botón <button>e <a>elementos para a coherencia.

Varios tamaños

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

Acción primaria Acción

Acción primaria Acción

Estado desactivado

Para os botóns desactivados, úsao .btn-disabledpara ligazóns e :disabledpara <button>elementos.

Acción primaria Acción

Acción primaria Acción

Compatibilidade entre navegadores

En IE9, soltamos o degradado en todos os botóns en favor das esquinas redondeadas xa que IE9 non recorta os degradados de fondo nas esquinas.

Relacionado, IE9 modifica os buttonelementos desactivados, facendo que o texto sexa gris cunha sombra de texto desagradable; desafortunadamente, non podemos solucionar isto.

Construído como un sprite

En lugar de facer que cada icona sexa unha solicitude adicional, recompilámolas nun sprite: un montón de imaxes nun ficheiro que usa CSS para situar as imaxes con background-position. Este é o mesmo método que usamos en Twitter.com e funcionounos ben.

Todas as clases de iconas teñen como prefixo .icon-un espazo de nomes e un alcance axeitados, ao igual que os nosos outros compoñentes. Isto axudará a evitar conflitos con outras ferramentas.

Glyphicons concedeunos o uso do conxunto de Halflings no noso conxunto de ferramentas de código aberto sempre que proporcionemos unha ligazón e un crédito aquí nos documentos. Considera facer o mesmo nos teus proxectos.

Como empregar

Coa versión 2.0.0, optamos por usar unha <i>etiqueta para todas as nosas iconas, pero non teñen clase de maiúsculas e minúsculas, só un prefixo compartido. Para usalo, coloque o seguinte código en calquera lugar:

<i class = "busca de iconas" ></i> 

Tamén hai estilos dispoñibles para iconas invertidas (brancas), preparadas cunha clase adicional:

<i class = "icona-busca icona-branca" ></i> 

Hai 120 clases para escoller para as túas iconas. Só ten que engadir unha <i>etiqueta coas clases correctas e xa está. Podes atopar a lista completa en sprites.less ou aquí mesmo neste documento.

Casos de uso

As iconas son xeniais, pero onde se usarían? Aquí tes algunhas ideas:

• Como elementos visuais para a súa navegación na barra lateral
• Para unha navegación puramente guiada por iconas
• Para botóns para axudar a transmitir o significado dunha acción
• Con ligazóns para compartir contexto no destino dun usuario

Esencialmente, en calquera lugar onde poidas poñer unha <i>etiqueta, podes poñer unha icona.

Actualizar Comprobar Eliminar

Comenta Configuración Máis información