Tipografía rehegua

Kuatiahaipyre ha techapyrã Bootstrap tipografía-pe g̃uarã, oikehápe ñemboheko global, iñakãrapuꞌa, jehaipyre retepy, lista ha hetave mbaꞌe.

Umi escenario global rehegua

Bootstrap omohenda jehechaukaha global, tipografía ha enlace estilo básico. Oñeikotevẽ jave hetave control, ehecha umi clase utilidad textual rehegua .

Eipuru peteĩ pila fuente nativa oiporavóva iporãvéva font-familypeteĩteĩva SO ha tembipururã.
Peteĩ escala tipo rehegua oikevéva ha ojeikekuaavévape g̃uarã, roipuru kundahára ypykue font-size(jepivegua 16px) ikatu hag̃uáicha umi tapicha ohóva omohenda iñemohendaha ñepyrũrã oñeikotevẽháicha.
Eipuru $font-family-base, $font-size-base, ha $line-height-baseatributokuéra ñande base tipográfica ramo ojeporúva <body>.
Emohenda enlace global color vía $link-colorha emoĩ enlace subrayado-pe añoite :hover.
Eipuru $body-bgemohenda hag̃ua peteĩ background-colorpe <body>( #fffpor defecto).

Koꞌã estilo ikatu ojejuhu ryepýpe _reboot.scss, ha umi mbaꞌekuaarã global oñemboheko _variables.scss. Ejeasegura eñemoĩ $font-size-basehag̃ua rem.

Umi Ñe’ẽryru

Opaite HTML akãrapu’ã, , <h1>rupive <h6>ojeguereko.

Ñe’ẽryru	Tembiecharã
`<h1></h1>`	h1 rehegua. Ñe’ẽmondo bootstrap rehegua
`<h2></h2>`	h2 rehegua. Ñe’ẽmondo bootstrap rehegua
`<h3></h3>`	h3 rehegua. Ñe’ẽmondo bootstrap rehegua
`<h4></h4>`	h4 rehegua. Ñe’ẽmondo bootstrap rehegua
`<h5></h5>`	h5 rehegua. Ñe’ẽmondo bootstrap rehegua
`<h6></h6>`	h6 rehegua. Ñe’ẽmondo bootstrap rehegua

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1clase rupive .h6ojeguereko avei, oñembojojaséramo peteĩ iñakãrapuꞌa letra estilo ha katu ndaikatúi reipuru elemento HTML ojoajúva.

h1 rehegua. Ñe’ẽmondo bootstrap rehegua

h2 rehegua. Ñe’ẽmondo bootstrap rehegua

h3 rehegua. Ñe’ẽmondo bootstrap rehegua

h4 rehegua. Ñe’ẽmondo bootstrap rehegua

h5 rehegua. Ñe’ẽmondo bootstrap rehegua

h6 rehegua. Ñe’ẽmondo bootstrap rehegua

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Oñemohenda porãvo umi rubro

Eipuru umi mboꞌepy utilidad rehegua oikevaꞌekue emoheñói jey hag̃ua jehaipyre iñakãrapuꞌa mokõiha michĩva Bootstrap 3-gui.

Encabezado de visualización de lujo Con texto secundario descolorido

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Ohechauka umi título

Umi elemento rubro tradicional ojejapo omba’apo porãve hag̃ua so’o nde página contenido-pe. Reikotevẽ jave peteĩ iñakãrapu’ã ojedestaca hag̃ua, ekonsidera eipuru peteĩ rubro jehechaukarã —peteĩ estilo de rubro tuichavéva, michĩmi oguerekóva opinión. Eñongatu ne akãme ko’ã iñakãrapu’ã ndaha’éi ombohováiva por defecto, ha katu ikatu emboguata umi letra tuichakue ombohováiva .

Ohechauka 1.1

Ohechauka 2.1

Ohechauka 3.1

Ohechauka 4.1

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Myakã

Ejapo peteĩ párrafo ojehecharamovéva remoĩvo .lead.

Kóva ha’e peteĩ párrafo principal. Ojedestaca umi párrafo jepiguágui.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Umi elemento jehaipyre en línea rehegua

Estilo umi elemento HTML5 en línea común-pe g̃uarã.

Ikatu reipuru pe etiqueta marca reheguajehechaukakuaavemaranduhai.

~~Ko línea jehaipyre rehegua ojeꞌe ojeguereko hag̃ua jehaipyre oñemboguevaꞌekue ramo.~~

~~Ko línea de texto oje’ese oñetrata haĝua ndaha’evéimava exacto.~~

Ko línea jehaipyre rehegua ojeꞌe ojeguereko hag̃ua peteĩ kuatiañeꞌepyre oñembojoapýramo.

Ko línea de texto orrepresentáta ojesubrayaháicha

Ko línea de texto ojejapo ojeguereko haguã letra fina ramo.

Ko línea oñembohasa jehaipyre negrita ramo.

Ko línea oñembohasa jehaipyre cursiva ramo.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.markha .smallumi mbo’esyry ojeguereko avei ojeporu hag̃ua umi estilo peteĩchagua <mark>ha <small>ojehekýivo mba’eveichagua implicancia semántica ojeipota’ỹva oguerútava umi etiqueta.

Ndojehechaukáiramo jepe yvate, eñeñandu porã eipuru hag̃ua <b>ha <i>HTML5-pe. <b>he’ise ojehechauka haguã ñe’ẽ térã ñe’ẽjoaju ombohasa’ỹre importancia adicional ha <i>katu hetavehápe ñe’ẽ, término técnico, hamba’e rehegua.

Utilidades de texto rehegua

Emoambue jehaipyre ñemboheko, emoambue, estilo, ipohýi ha sa’y ore jehaipyre utilidad ha color utilidad reheve .

Ñe’ẽ mbykymi

Implementación estilizada HTML <abbr>elemento rehegua umi abreviatura ha acrónimo-pe g̃uarã ohechauka hag̃ua versión oñembotuicháva hover-pe. Umi abreviatura oguereko peteĩ subrayado por defecto ha ohupyty peteĩ cursor pytyvõrã omeꞌe hag̃ua contexto adicional hover-pe ha umi tecnología oipytyvõva puruhárape.

Emoĩ .initialismpeteĩ ñemombykype peteĩ font-size michĩmivévape g̃uarã.

attr rehegua

HTML rehegua

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Umi cita bloque rehegua

Oñecita haguére umi bloque contenido ambue fuente-gui nde kuatia ryepýpe. Embojere <blockquote class="blockquote">oimeraẽ HTML rehe cita ramo.

Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Ombohéra peteĩ fuente

Oñemoĩve peteĩ <footer class="blockquote-footer">ojekuaa hag̃ua pe fuente. Embojere tembiapo ypykue réra <cite>.

Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.

Alguien famoso en Título de Fuente

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alineación rehegua

Eipuru jehaipyre purupyrã tekotevẽháicha emoambue hag̃ua nde blockquote ñemohenda.

Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.

Alguien famoso en Título de Fuente

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.

Alguien famoso en Título de Fuente

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Umi lista rehegua

No estilo rehegua

Eipe’a margen por defecto list-styleha izquierda umi elemento lista rehegua (mitãnguéra pya’e añoite). Kóva ojeporu umi mba’e lista mitãnguéra pya’e rehegua añoite , he’iséva tekotevẽtaha emoĩ mbo’esyry oimeraẽva lista anidado-pe g̃uarã avei.

Kóva ha’e peteĩ lista.
Ojekuaa completamente sin estilo.
Estructuralmente, ha'e gueteri peteî lista.
Ha katu ko estilo ojeporu umi elemento mitã pyaꞌeteguápe añoite.
Umi lista oñembohysýiva:
- ndojeafectái ko estilo rehe
- ohechaukáta gueteri peteî bala
- ha oreko margen izquierdo apropiado
Upéva ikatu gueteri ideprovécho algún situasiónpe.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

En línea rehegua

Eipe'a peteĩ lista bala ha emoĩ michĩmi tesape marginmokõi clase ñembojoaju reheve, .list-inlineha .list-inline-item.

Kóva ha’e peteĩ mba’e lista-pegua.
Ha ambue.
Ha katu ojehechauka hikuái en línea.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Descripción lista alineación rehegua

Emohenda umi término ha descripción horizontalmente eipurúvo ñande sistema cuadrícula rehegua clase ojedefinivaꞌekue (térã mixin semántico). Ipukuvévape g̃uarã, ikatu opcionalmente emoĩ peteĩ .text-truncatemboꞌepy emboty hag̃ua jehaipyre peteĩ elipsis reheve.

Umi lista descripción rehegua

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

Ñe'ẽ

Definición para el término rehegua.

Ha oĩve jehaipyre ñe’ẽñemi tenda’i rehegua.

Ambue término

Ko definición mbyky, upévare ndaipóri párrafo extra ni mba'eve.

Término oñembotýva oñembotýma

Péva ikatu ideprovécho oĩ jave espacio apretado. Omoĩ peteĩ elipsis ipahápe.

Nidación rehegua

Lista de definición anidado rehegua: Ahendu peẽme pegusta umi lista definición rehegua. Eheja tamoĩ peteĩ lista definición rehegua nde lista definición ryepýpe.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Umi letra tuichakue ombohováiva

v4.3.0 guive, Bootstrap oñemondo opción reheve ombohapévo letra tuichakue ombohováiva, ohejáva jehaipyre ojeescala naturalmente tembipuru ha jehechaukaha tuichakue rupi. RFS ikatu oñemboguata oñemoambuévo $enable-responsive-font-sizesSass mbaꞌekuaarã trueha oñemboheko jeývo Bootstrap-pe.

Oipytyvõ hag̃ua RFS , jaipuru peteĩ Sass mixin ñamyengovia hag̃ua ñande font-sizepropiedad normal. Umi letra tuichakue ombohováiva oñembyatýta calc()tembiaporãme oguerekóva peteĩ mezcla remha unidad jehechaukaha rehegua ikatu hag̃uáicha ojejapo escalado ombohováiva jepokuaa. Ojekuaave hag̃ua RFS ha iñemboheko rehegua ikatu ojejuhu iGitHub ryru’ípe .