Exemplos de inicio rápido

Necesitas uns modelos rápidos? Consulte estes exemplos básicos que reunimos:

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 grella

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" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Columnas aniñadas

Aniña o teu contido se é necesario creando un .rowdentro dunha columna existente.

Exemplo de columnas aniñadas

<div class = "fila" > 
  <div class = "span12" > 
    Nivel 1 da columna
    <div class = "fila" > 
      <div class = "span6" > 
        Nivel 2
      </div>
      <div class = "span6" > 
        Nivel 2
      </div>
    </div>
  </div>
</div>

Rode a súa propia grella

En Bootstrap hai un puñado de variables para personalizar o sistema de grade predeterminado de 940px. Cun pouco de personalización, pode modificar o tamaño das columnas, as súas cunetas e o recipiente no que residen.

Dentro da grella

As variables necesarias para modificar o sistema de reixa residen actualmente en preboot.less.

Agora a personalizar

Modificar a grade significa cambiar as tres @grid-*variables e recompilar os ficheiros Less.

Bootstrap vén equipado para manexar un sistema de reixa con ata 24 columnas; o valor predeterminado é só 16. Así é como se verían as súas variables de grade personalizadas nunha grade de 24 columnas.

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

Unha vez recompilado, estarás listo!

Disposición fixa

O deseño predeterminado e sinxelo de 940 píxeles de ancho e centrado para case calquera sitio web ou páxina proporcionado por un único ficheiro <div.container>.

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

Disposición de fluídos

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

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

Toda a grella tipográfica baséase en dúas variables Less do noso ficheiro preboot.less: @basefonte @baseline. 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.

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

Varios elementos

Usando énfases, enderezos e abreviaturas

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

Cando usar

As etiquetas de énfase ( <strong>e <em>) deben usarse para indicar importancia ou énfase adicional dunha palabra ou frase en relación coa súa copia circundante. Utilízao <strong>para a importancia e <em>para a énfase .

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

Nota: aínda está ben usar <b>e <i>etiquetas en HTML5 e non teñen que ter estilos en negra e cursiva, respectivamente (aínda que se hai un elemento máis semántico, utilízao). <b>está destinado a resaltar palabras ou frases sen transmitir importancia adicional, mentres que <i>é principalmente para voz, termos técnicos, etc.

Enderezos

O <address>elemento úsase para a información de contacto do seu antepasado máis próximo ou de todo o traballo. Aquí tes dous exemplos de como se pode usar:

Nota: cada liña <address>debe rematar cun salto de liña ( <br />) ou estar envolta nunha etiqueta de nivel de bloque (por exemplo, <p>) para estruturar correctamente o contido.

Abreviaturas

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

Citas de bloque

<blockquote> <p> <small>

Como citar

<blockquote>Para incluír unha cita en bloque, envolve <p>e <small>etiqueta. Usa o <small>elemento para citar a túa fonte e terás un guión em —antes.

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

Doutor Julius Hibbert

<cota de bloque>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

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

Código

<code> <pre>

Proxeneta o teu código con estilo con dúas etiquetas sinxelas. Para obter aínda máis fantásticos a través de javascript, introduza a biblioteca de código de Google prettify e xa está.

Presentando código

O código, os bloques ou só fragmentos en liña pódense mostrar con estilo só envolvendo a etiqueta correcta. Para bloques de código que abranguen varias liñas, use o <pre>elemento. Para o código en liña, use o <code>elemento.

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

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

Etiquetas en liña

<span class="label">

Chama a atención ou marca calquera frase do teu texto corporal.

Etiqueta calquera cousa

Algunha vez necesitou un deses novos novos! ou Bandeiras importantes ao escribir código? Pois agora tes. Aquí tes o que se inclúe por defecto:

Grella multimedia

Mostra miniaturas de diferentes tamaños en páxinas cunha pegada HTML baixa e estilos mínimos.

Miniaturas de exemplo

As miniaturas .media-gridpoden ser de calquera tamaño, pero funcionan mellor cando se asignan directamente ao sistema de grade Bootstrap integrado. Os anchos das imaxes como 90, 210 e 330 combínanse cuns poucos píxeles de recheo para igualar os tamaños das columnas .span2, .span4, e ..span6

Grande

Medio

Pequena

Codificándoos

As cuadrículas multimedia son fáciles de usar e bastante sinxelas no lado das marcas. As súas dimensións baséanse exclusivamente no tamaño das imaxes incluídas.

<ul class = "media-grid" > 
  <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>

Construíndo táboas

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

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

Engade sempre as cabeceiras das túas columnas de <thead>forma 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 <tbody>para 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.

<táboa>
  ...
</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.

Nota: o Zebra-striping é unha mellora progresiva que non está dispoñible para navegadores máis antigos como IE8 e anteriores.

<table class = "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.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( función () { 
    $ ( "táboa#sortTableExample" ). clasificador de táboas ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "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.

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.

Tamaños dos campos do formulario

Personaliza calquera formulario input, select, ou textareaancho engadindo só algunhas clases ao teu marcado.

A partir da versión 1.3.0, engadimos as clases de tamaño baseadas en grade para os elementos do formulario. Use estes sobre as clases existentes .mini, .small, etc.

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 pódense aplicar unha serie de clases funcionais para diferentes estilos de cores. Estas clases inclúen unha .primaryclase azul, unha .infoclase celeste, unha clase verde .successe unha clase vermella .danger.

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

Queres 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 <button>elementos.

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. liAs etiquetas de menú despregable tamén admiten mostrar .activea selección de páxina actual.

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
• Despregar menú
  • Enlace secundario
  • Algo máis aquí
  • Outra ligazón

<ul 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" > 
  <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>

Migas de pan

A navegación por rutas de navegación úsase como unha forma de mostrar aos usuarios onde están dentro dunha aplicación ou dun sitio, pero non para a navegación principal.

• Casa

• Inicio /
• Páxina do medio

• Inicio /
• Páxina do medio /
• Outro

• Inicio /
• Páxina do medio /
• Outra /
• Estás aquí

<ul class = "breadcrumb" > 
  <li><a href = "#" > Inicio </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Páxina do medio </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Outro </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Estás aquí </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 = "paxinación" > 
  <ul>
    <li class = "anterior desactivada" ><a href = "#" > ← Anterior </a></li>  
    <li class = "active" ><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

.alert-message

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

Obter o javascript »

Código de exemplo

<div class = "aviso de mensaxe de alerta" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> ¡Santo guacamole! </strong> O mellor que che faga a ti mesmo, non tes un aspecto moi bo. </p>
</div>

Bloquear mensaxes

.alert-message.block-message

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.

Obter o javascript »

Código de exemplo

<div class = "aviso de bloqueo de mensaxes de alerta" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> ¡Santo guacamole! Este é un aviso! </strong> O mellor que che faga a ti mesmo, non tes un aspecto moi bo. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "accións de alerta" > 
    <a class = "btn small" href = "#" > Realiza esta acción </a> <a class = "btn small" href = "#" > Ou fai isto </a>     
  </div>
</div>

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.

Obter o javascript »

Suxestións sobre ferramentas

Os Twipsies son moi útiles para axudar a un usuario confuso e apuntalo na dirección correcta.

Obter o javascript »

Popovers

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

Obter o javascript »

Comezando

Integrar javascript coa biblioteca Bootstrap é moi sinxelo. A continuación repasamos os conceptos básicos e ofrecémosche algúns complementos fantásticos para comezar!

Ver documentos de javascript »

Que está incluído

Da vida a algúns dos compoñentes principais de Bootstrap con novos complementos personalizados que funcionan con jQuery e Ender . Animámosche a amplialos e modificalos para adaptalos ás túas necesidades específicas de desenvolvemento.

É necesario javascript?

Non! Bootstrap está deseñado ante todo para ser unha biblioteca CSS. Este javascript proporciona unha capa interactiva básica encima dos estilos incluídos.

Non obstante, para aqueles que necesitan javascript, fornecemos os complementos anteriores para axudarche a comprender como integrar Bootstrap con javascript e para ofrecerche unha opción rápida e lixeira para a funcionalidade básica de inmediato.

Para obter máis información e ver algunhas demostracións en directo, consulte a nosa páxina de documentación do complemento .