Escala tipográfica rehegua

Pe cuadrícula tipográfica tuichakue oñemopyenda mokõi variable Less rehe ñande variables.less archivo-pe: @baseFontSizeha @baseLineHeight. Peteĩha haꞌehína base font-size ojeporúva opaite rupi ha mokõiha haꞌehína base line-height.

Jaipuru umi variable, ha michĩmi matemática, jajapo hag̃ua umi margen, acolchado ha línea-altura opaite ñande tipo rehegua ha hetave mbaꞌe.

Tembiecharã jehaipyre tete rehegua

Nullam quis risus eget urna mollis ornare vel eu leo ​​rehegua. Cum sociis natoque penatibus ha magnis umi montes parturiente, nascetur ridiculus mus. Nullam id dolor id nibh ultrices mba'yrumýi ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor rehegua. Duis mollis, est no comodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit rehegua. Donec sed odio dui.

Oipurúvo énfasis

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum masa justo oguapy amet risus. Maecenas faucibus mollis interdum rehegua. Nulla vitae elit libero, peteĩ pharetra augue.

Ñe’ẽñemi: Eñeñandu porã eipuru hag̃ua <b>ha <i>HTML5-pe, ha katu ijeporu iñambue’imi. <b>oje’ese ojehechauka haguã ñe’ẽ térã ñe’ẽjoaju ombohasa’ỹre importancia adicional ha <i>katu hetavehápe ñe’ẽ, término técnico, hamba’e rehegua.

Tembiecharã dirección-kuéra

Ko’ápe oĩ mokõi techapyrã mba’éichapa <address>ikatu ojeporu pe etiqueta:

Tembiecharã ñemombyky

Umi abreviatura ojejapo estilo jehaipyre tuicháva reheve ha peteĩ borde inferior punteado tesape reheve. Avei oguereko hikuái peteĩ cursor pytyvõrã hover-pe upéicha umi puruhára oguereko indicación extra peteĩ mba’e ojehechaukáta hover-pe.

HTML ha’e pe mba’e iporãvéva mbujape oñembojy guive.

Peteĩ ñe’ẽ atributo ñemombyky ha’e attr .

Oñemoĩ hag̃ua peteĩ vore bloque rehegua, embojere <blockquote>oimeraẽ HTML comilla ramo. Umi cita recta-pe g̃uarã romomarandu peteĩ <p>.

Emoĩ peteĩ elemento opcional <small>ecita hag̃ua nde fuente ha rehupytýta peteĩ em dash —henondépe estilo rehegua.

<bloqueo rehegua>
  <p> Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante venenatis. </p> rehegua
  <michĩ> Peteĩ tapicha herakuã guasúva </michĩ>
</blockquote> rehegua

Umi blockquote por defecto oñemboheko péicha:

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante venenatis.

Alguien famoso en Cuerpo de trabajo

Ojepyso hag̃ua nde blockquote akatúa gotyo, emoĩve class="pull-right":

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante venenatis.

Alguien famoso en Cuerpo de trabajo

Noñeordenáiva

<ul>

• Lorem ipsum dolor oguapy amet
• Consectetur adipiscing rehegua elit
• Entero molestie lorem en masa rehegua
• Facilisis en aliquet nisl de pretio rehegua
• Nulla volutpat aliquam rehegua
  • Fasello iaculis neque rehegua
  • Purus sodales ultricies rehegua
  • Vestibulo laoreet porttitor sem rehegua
  • Ac tristique libero volutpat rehegua
• Faucibus porta lacus fringilla vel rehegua
• Aenegua oguapy amet erat nunc
• Eget porttitor lorem rehegua

No estilo rehegua

<ul class="unstyled">

• Lorem ipsum dolor oguapy amet
• Consectetur adipiscing rehegua elit
• Entero molestie lorem en masa rehegua
• Facilisis en aliquet nisl de pretio rehegua
• Nulla volutpat aliquam rehegua
  • Fasello iaculis neque rehegua
  • Purus sodales ultricies rehegua
  • Vestibulo laoreet porttitor sem rehegua
  • Ac tristique libero volutpat rehegua
• Faucibus porta lacus fringilla vel rehegua
• Aenegua oguapy amet erat nunc
• Eget porttitor lorem rehegua

Oñemanda

<ol>

1. Lorem ipsum dolor oguapy amet
2. Consectetur adipiscing rehegua elit
3. Entero molestie lorem en masa rehegua
4. Facilisis en aliquet nisl de pretio rehegua
5. Nulla volutpat aliquam rehegua
6. Faucibus porta lacus fringilla vel rehegua
7. Aenegua oguapy amet erat nunc
8. Eget porttitor lorem rehegua

Techaukaha

<dl>

Umi lista descripción rehegua

Peteĩ lista descripción rehegua iporãiterei ojedefini hag̃ua umi término.

Euismod rehegua

Vestibulo id ligula porta felis euismod semper eget lacinia odio sem nec elit rehegua.

Donec id elit ndaha'éiva mi porta gravida eget metus-pe.

Malesuada porta rehegua

Etiam porta sem malesuada magna mollis euismod rehegua.

En línea rehegua

Embojere umi fragmento código rehegua línea ryepýpe <code>.

Techapyrã , < código> vore </ código > ojejokuava’erã línea ryepýpe ramo .  

Bloque básico rehegua

Eipuru <pre>heta línea código rehegua. Ejesareko katuete oimeraẽ carret rehe ikarameg̃ua unicode-pe ojejapo porã hag̃ua.

<p>Tembiecharã jehaipyre ko’ápe...</p>

<pre> rehegua
  <p>Tembiecharã jehaipyre ko’ápe...</p>
</pre> rehegua

Ñe’ẽñemi: Eñongatu katuete código <pre>etiqueta ryepýpe hi’aguĩvéva ijasu gotyo ikatuháicha; omoĩta opaite ficha.

Google Ñe’ẽporãhaipyre

Ejagarra peteĩchagua <pre>elemento ha emoĩ mokõi clase opcional renderización oñembotuichave hag̃ua.

<p> Jehaipyre techapyrã ko’ápe... </p>

<pre clase = "impresión iporãva." 
     linenums" > rehegua
  <p>Tembiecharã jehaipyre ko’ápe...</p>
</pre> rehegua

Emboguejy google-code-prettify ha ehecha readme mba’éichapa ojepuru.

<mesa> rehegua
  <akã>
    <tr> rehegua
      <th> ... </th> rehegua
      <th> ... </th> rehegua
    </tr> rehegua
  </thead> rehegua
  <tete rehegua>
    <tr> rehegua
      <td> ... </td> rehegua
      <td> ... </td> rehegua
    </tr> rehegua
  </tbody> rehegua
</tabla> rehegua

Umi cuadro ojejapo ijeheguiete estilo mbovymi borde reheve añoite ikatu hag̃uáicha ojelee ha oñemantene estructura. 2.0 reheve, .tableoñeikotevẽ pe clase.

< clase de mesa = "tabla" > 
  ...
</tabla> rehegua

Ejepy’amongeta’imi nde mesakuéra ndive remoĩvo zebra-rayado —pemoĩnte pe .table-stripedclase.

Ñembohysýi: Umi cuadro sprited oipuru :nth-childCSS jeporavoha ha ndojeguerekói IE7-IE8-pe.

< clase de mesa = "tabla tabla-rayada" > 
  ...
</tabla> rehegua

Oñemoĩ umi borde mesa tuichakue jerére ha umi esquina redondeada ojejapo hag̃ua estética.

< clase de mesa = "tabla tabla-pegua" > 
  ...
</tabla> rehegua

Ejapo nde mesakuéra ijyvyku’ivéva emoĩvo .table-condensedmbo’esyry eikytĩ hag̃ua acolchado celda mesa rehegua mbytépe (8px guive 4px peve).

< clase de mesa = "tabla cuadro-condensado" > 
  ...
</tabla> rehegua

Eñeñandu líbre embojoaju hag̃ua oimeraẽva umi mbo’esyry mesa rehegua rehupyty hag̃ua iñambuéva jehecha reiporúvo oimeraẽva umi mbo’esyry ojeguerekóva.

<table class = "tabla tabla-rayado mesa-mbotyha mesa-condensado" > 
  ...
</tabla> rehegua

HTML ha CSS oñembohekopyréva

Pe mba’e iporãvéva umi formulario rehegua Bootstrap-pe ha’e opaite ne entrada ha control ojehecha porãiterei noimportái mba’éichapa remopu’ã ne marcado-pe. Noñeikotevẽi HTML superfluo, ha katu rome’ẽ umi pa’ũ umi oikotevẽvape g̃uarã.

Umi diseño ikomplikadovéva oúva clase sucinta ha escalable reheve estilo ha evento jejopy ndahasýivape g̃uarã, upévare reime cubierto opaite paso-pe.

Irundy diseño oike

Bootstrap oúva pytyvõ reheve irundyichagua formulario ñemohendarã:

• Vertical (oñemoĩva’ekue) .
• Jeheka
• En línea rehegua
• Ipekuévo

Opaichagua formulario ñemohenda oikotevẽ peteĩ ñemoambue marca-pe g̃uarã, ha katu umi control ijeheguiete opyta ha oñekomporta peteĩcha.

Estado-kuéra control ha hetave mba’e

Bootstrap formulario-kuéra oguereko estilo opaite formulario base control-kuérape g̃uarã haꞌeháicha entrada, textarea ha jeporavo rehaꞌarõva. Ha katu avei oúva heta componente personalizado reheve haꞌeháicha entrada oñembojoapýva ha oñembojoajúva ha pytyvõ umi lista de casilla de verificación rehegua.

Umi estado haꞌeháicha error, advertencia ha éxito oike peteĩteĩva tipo de control formulario rehegua. Avei oike umi estilo umi control discapacitado-pe g̃uarã.

v2.0 rupive, jaguereko ñepyrũrã tesape ha iñaranduvéva umi estilo formulario-pe g̃uarã. Ndaipóri marcado extra, umi control de formulario-nte.

Ohechaukávo umi estilo WebKit ñepyrũrã, emoĩnte .form-searchumi tenda jeheka redondeado extra-pe g̃uarã.

Umi entrada ha'e nivel bloque oñepyrü haguã. Ha -pe g̃uarã .form-inline, .form-horizontaljaipuru inline-block.

Mba'épa oike ipype

Ojehechauka ijasu gotyo opaite umi control formulario por defecto roipytyvõva. Ko'ápe oime lista de balas:

• jehaipyre jeike (jehaipyre, ñe’ẽñemi, correo electrónico, ha mba’e) .
• peteĩ vore’i
• radio rupive
• poravo
• heta jeporavo
• vore jeike rehegua
• área de texto rehegua

Umi mba’e pyahu por defecto v2.0 ndive

v1.4 peve, Bootstrap forma forma por defecto oipuru pe diseño horizontal. Bootstrap 2 rupive, roipeꞌa upe jejopy roguereko hag̃ua iñaranduvéva, escalable por defecto oimeraẽva formulario-pe g̃uarã.

Ojejapóma jey kundahára he’i

Bootstrap oguereko estilokuéra kundahára oipytyvõva oñembohapéva ha disabledestado-kuérape g̃uarã. Roipe’a Webkit ñepyrũrã outlineha romoĩ peteĩ box-shadowhendaguépe :focus.

Formulario jegueroviapy rehegua

Avei oike ipype umi estilo validación rehegua ojejavy, advertencia ha éxito rehegua. Eipuru hag̃ua, emoĩ pe mbo’esyry jejavy rehegua ijerére .control-group.

<camposet rehegua
  class = "jejavy control-grupo rehegua" >
  ...
</fieldset> rehegua

Prepender & agregar umi insumo rehegua

Umi aty jeike rehegua —jehaipyre oñembojoapýva térã oñembojoapýva reheve— omeꞌe peteĩ tape ndahasýiva omeꞌe hag̃ua hetave contexto ne jeikekuérape g̃uarã. Umi techapyrã tuicháva oike @ signo Twitter puruhára rérape g̃uarã térã $ viru rehegua.

Umi cuadro de verificación ha umi rrádio

v1.4 peve, Bootstrap oikotevẽkuri marcado extra umi casilla de verificación ha radio jerére oñembojeheꞌa hag̃ua. Ko’áğa, ha’e peteĩ cuestión simple ojerrepeti haĝua pe <label class="checkbox">ombojeguáva pe <input type="checkbox">.

Avei oñepytyvõ umi casilla de verificación en línea ha umi radio. Oñembojoapy mante .inlineoimeraẽva .checkboxtérã .radioha rejapopa.

Umi formulario en línea ha omoĩ/prepender

Oipuru hag̃ua umi entrada prepend térã append peteĩ forma en línea-pe, katuete emoĩ pe .add-onha inputpeteĩ línea-pe, espacio’ỹre.

Forma texto de ayuda

Oñemoĩ hag̃ua ñe’ẽñemi pytyvõrã ne formulario jeikekuérape g̃uarã, emoinge ñe’ẽñemi pytyvõrã línea-pe orekóva <span class="help-inline">térã peteĩ jehaipyre pytyvõha bloque orekóva <p class="help-block">elemento jeike rire.

Umi botón tembiaporãme g̃uarã

Convención ramo, umi botón ojepuruvaꞌerã tembiaporãme g̃uarãnte umi hipervínculo ojepuruvaꞌerã aja mbaꞌekuérape g̃uarã. Techapyrã, "Emboguejy" ha'eva'erã peteĩ mboajepyréva "mba'apo nda'aréi ojejapóva" katu ha'eva'erã peteĩ joajuha.

Ancla ha forma-kuérape guarã

Umi estilo botón rehegua ikatu ojeporu oimeraẽ mbaꞌe rehe pe .btnojejapóva reheve. Ha katu, típicamente reipuruse ko’ãva umi elemento -pe añoite <a>ha .<button>

Nota: Opaite botón oguerekova’erã pe .btnclase. Umi estilo botón rehegua ojepuruvaꞌerã <button>ha <a>umi elemento ojoaju hag̃ua.

Múltiple tamaño rehegua

¿Reipotaiterei umi botón tuichavéva térã michĩvéva? ¡Eguereko upépe!

Acción primaria rehegua Ojejapóva

Acción primaria rehegua Ojejapóva

Estado discapacitado rehegua

Umi botón oñemboykévape g̃uarã, eipuru .btn-disabledumi enlace-pe g̃uarã ha :disabledumi <button>elemento-pe g̃uarã.

Acción primaria rehegua Ojejapóva

Acción primaria rehegua Ojejapóva

Kurusu kundahára joaju

IE9-pe, jaity pe gradiente opaite botón rehe a favor umi esquina redondeada rehe IE9 ndoikytĩrigui umi gradiente fondo rehegua umi esquina-pe.

Ojoajúva, IE9 omboja’o umi buttonelemento oñemboykéva, omoĩvo jehaipyre gris peteĩ jehaipyre-sombra iñañaitéva reheve—mbyasy ndaikatúi ñamyatyrõ kóva.

Oñemopu’ã peteĩ sprite ramo

Opaite ikóna jajapo rangue peteĩ mba’ejerure ambuéva, ñambyaty peteĩ sprite-pe —peteĩ ta’ãngamýi aty peteĩ vore’ípe oipurúva CSS omoĩ hag̃ua ta’ãngamýi background-position. Kóva ha’e pe método roiporúva Twitter.com-pe ha omba’apo porã oréve ĝuarã.

Opaite icono mbo’esyry oñemboguapy mboyvegua ndive.icon- téra espaciado ha alcance hekopete g̃uarã, ojoguaiterei ñande ambue componente-kuérape. Péicha oipytyvõta ani hag̃ua ojoavy ambue erramiénta ndive.

Glyphicons ome’ẽ oréve jepuru Halflings oñemohendava’ekue ore tembipuru’i código abierto-pe rome’ẽ aja peteĩ enlace ha crédito ko’ápe docs-pe. Epensamína rejapo hag̃ua avei upéicha umi ne projéktope.

Mba’éichapa ojeporu

v2.0.0 ndive, roiporavo roipuru hag̃ua peteĩ <i>etiqueta opaite ore icono-pe g̃uarã, ha katu ndorekói hikuái clase de caso —peteĩ prefijo oñembojaꞌopyréva añoite. Eipuru hag̃ua, emoĩ ko kódigo haimete oimeraẽ hendápe:

<i clase = "ikóna-jeporeka" </i> 

Oĩ avei estilo ojeguerekóva umi icono invertido (morotĩ)-pe g̃uarã, ojejapóva listo peteĩ clase extra reheve:

<i clase = "ikóna-jeheka icono-morotĩ" ></i> 

Oĩ 120 mbo’esyry reiporavo hag̃ua nde iconokuérape g̃uarã. Emoĩnte peteĩ <i>etiqueta umi clase oike porãva reheve ha reñemohenda. Ikatu rejuhu lista henyhẽva sprites.less -pe térã ko’ápe voi ko kuatiaroguépe.

Umi káso jeporu rehegua

Umi icono tuichaiterei, ha katu moõpa oiporúta peteĩva? Ko’ápe oĩ mbovymi temiandu:

• Ta’ãngamýi ramo nde barra lateral jeguatarã
• Peteĩ navegación puramente icono-pe g̃uarã
• Umi botón oipytyvõvape g̃uarã oñembohasa hag̃ua mbaʼépa heʼise peteĩ tembiapo
• Umi enlace reheve okomparti hag̃ua contexto peteĩ puruhára destino-pe

Esencialmente, oimeraẽ hendápe ikatuhápe remoĩ peteĩ <i>etiqueta, ikatu remoĩ peteĩ icono.

Ombopyahu Ojehepyme’ẽ haguã Mboje'oha

Oje'éva Ñembohekorã Más Info