in English

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.

Ko páhinape

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

html 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

html rehegua

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

Ohechauka 1.1

Ohechauka 2.1

Ohechauka 3.1

Ohechauka 4.1

Ohechauka 5.1

Ohechauka 6.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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Umi iñakãrapuꞌa jehechaukaha oñemboheko $display-font-sizesSass mapa ha mokõi mbaꞌekuaarã rupive, $display-font-weightha $display-line-height.

Umi iñakãrapuꞌa jehechaukarã oñembohekokuaa mokõi mbaꞌekuaarã rupive, $display-font-familyha $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Myakã

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

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

html rehegua

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

html rehegua

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

Eñangareko umi etiqueta ojepuruva’erãha semántico-rã:

ohechauka jehaipyre oñemarkáva térã oñembohekopyréva ojehecha hag̃ua térã oñenota hag̃ua.
orrepresenta umi comentario lateral ha letra michĩva, derecho de autor ha texto legal-icha.
<s>ohechauka elemento ndaha’evéimava relevante térã ndaha’evéimava exacto.
ohechauka peteĩ span de texto en línea oñembohasavaꞌerãva peteĩ tape ohechaukáva oguerekoha peteĩ anotación ndahaꞌeiva textual.

Emoĩséramo estilo nde jehaipyre, reipuruva’erã ko’ã mbo’esyry rangue:

.markoipurúta umi estilo ojoguáva .
.smalloipurúta umi estilo ojoguáva .
.text-decoration-underlineoipurúta umi estilo ojoguáva .
.text-decoration-line-throughoipurúta umi estilo ojoguáva <s>.

Ndojehechaukáiramo jepe yvate, eñeñandu porã eipuru hag̃ua ha HTML5-pe. oje’ese ojehechauka haguã ñe’ẽ térã ñe’ẽjoaju oñembohasa’ỹre importancia adicional, ha katu ha’e hetave ñe’ẽme g̃uarã, término técnico, hamba’e.

Utilidades de texto rehegua

Emoambue jehaipyre alineación, emoambue, estilo, ipohýi, línea-altura, decoración ha color ore utilidad jehaipyre ha utilidad color rehegua ndive .

Ñ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

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

html rehegua

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

Ombohéra peteĩ fuente

Pe HTML especificación ojerure oñemoĩ hag̃ua atribución blockquote <blockquote>. Oñemeꞌe jave atribución, embojere nde <blockquote>peteĩ-pe <figure>ha eipuru peteĩ <figcaption>térã peteĩ elemento nivel bloque rehegua (techapyrã, ) .blockquote-footermboꞌepy ndive. Ejesareko katuete embojere hag̃ua tembiapo fuente réra ipype <cite>avei.

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

html rehegua

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

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.

html rehegua

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

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

html rehegua

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

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.

html rehegua

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

html rehegua

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

html rehegua

<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

Bootstrap 5-pe, romboguata umi letra tuichakue ombohováiva por defecto, ohejáva jehaipyre ojeescala naturalmente tembipuru ha jehechaukaha tuichakue rupi. Ejesarekomína RFS página rehe reikuaa hag̃ua mba’éichapa omba’apo kóva.

Sass rehegua

Variables rehegua

Umi rubro oguereko algunas variables dedicadas ojejapo hagua tamaño ha espaciado.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Opaichagua elemento tipografía rehegua oñembohapéva koꞌape ha Reboot -pe oguereko avei umi variable oñembohekopyréva.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixin-kuéra rehegua

Ndaipóri mixin oñembohekopyréva tipografía-pe g̃uarã, ha katu Bootstrap oipuru Responsive Font Sizing (RFS) .