in English

Tipografia

Bootstrap tipografiarako dokumentazioa eta adibideak, ezarpen orokorrak, goiburuak, gorputz-testua, zerrendak eta abar barne.

Orrialde honetan

Ezarpen globalak

Bootstrap-ek oinarrizko bistaratzeko, tipografia eta esteka-estilo orokorrak ezartzen ditu. Kontrol gehiago behar denean, begiratu testu-erabilgarritasun klaseak .

Erabili sistema eragile eta gailu bakoitzerako onena hautatzen duen jatorrizko letra-tipo-pila .font-family
Mota eskala inklusiboagoa eta irisgarriagoa lortzeko, arakatzailearen erro lehenetsia erabiltzen dugu font-size(normalean 16 px), bisitariek arakatzailearen lehenetsiak beharren arabera pertsonaliza ditzaten.
Erabili $font-family-base, $font-size-base, eta $line-height-baseatributuak gure oinarri tipografiko gisa <body>.
Ezarri estekaren kolore globala $link-color.
Erabili $body-bga ezartzeko background-color( <body>lehenespenez #fff).

Estilo hauek barruan aurki daitezke _reboot.scss, eta aldagai globalak -n definitzen dira _variables.scss. Ziurtatu ezarri $font-size-baseduzula rem.

Izenburuak

HTML goiburu guztiak, , <h1>bidez <h6>, eskuragarri daude.

Goiburua	Adibidea
`<h1></h1>`	h1. Bootstrap goiburua
`<h2></h2>`	h2. Bootstrap goiburua
`<h3></h3>`	h3. Bootstrap goiburua
`<h4></h4>`	h4. Bootstrap goiburua
`<h5></h5>`	h5. Bootstrap goiburua
`<h6></h6>`	h6. Bootstrap goiburua

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

.h1bidezko .h6klaseak ere eskuragarri daude, goiburu baten letra-tipoarekin bat etorri nahi baduzu baina ezin duzunean lotutako HTML elementua erabili.

h1. Bootstrap goiburua

h2. Bootstrap goiburua

h3. Bootstrap goiburua

h4. Bootstrap goiburua

h5. Bootstrap goiburua

h6. Bootstrap goiburua

html

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

Izenburuak pertsonalizatzea

Erabili sartutako erabilgarritasun-klaseak Bootstrap 3-ko bigarren mailako goiburuko testu txikia birsortzeko.

Bistaratzeko goiburu dotorea Bigarren mailako testu lausotuarekin

html

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

Bistaratu goiburuak

Goiburuko elementu tradizionalak zure orriaren edukiaren haragian ondoen funtzionatzeko diseinatuta daude. Nabarmentzeko goiburu bat behar duzunean, kontuan hartu pantailako goiburu bat erabiltzea —izenburu-estilo handiagoa eta apur bat iritzi handiagoa.

Pantaila 1

Pantaila 2

Pantaila 3

Pantaila 4

Pantaila 5

Pantaila 6

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

Bistaratzeko goiburuak $display-font-sizesSass maparen eta bi aldagaien bidez konfiguratzen dira, $display-font-weighteta $display-line-height.

Bistaratzeko goiburuak bi aldagairen bidez pertsonaliza daitezke $display-font-familyeta $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;

Beruna

Egin paragrafo bat nabarmenduz gehituz .lead.

Hau paragrafo nagusi bat da. Ohiko paragrafoetatik nabarmentzen da.

html

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

Sareko testu-elementuak

Lineako HTML5 elementu arruntentzako estiloa.

Mark etiketa erabil dezakezunabarmendutestua.

~~Testu-lerro hau ezabatutako testu gisa tratatu nahi da.~~

~~Testu-lerro hau jada zehatza ez dela tratatu nahi da.~~

Testu-lerro hau dokumentuaren gehigarri gisa tratatu nahi da.

Testu-lerro hau azpimarratutako moduan errendatuko da.

Testu-lerro hau letra xehe gisa tratatu nahi da.

Lerro hau testu lodi gisa errendatu da.

Lerro hau etzanez idatzita dago.

html

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

Kontuz etiketa horiek helburu semantikorako erabili behar direla:

erreferentzia edo notazio helburuetarako markatuta edo nabarmenduta dagoen testua adierazten du.
alboko iruzkinak eta letra txikiak adierazten ditu, egile-eskubideak eta testu juridikoak.
<s>garrantzitsuak ez diren edo zehatzak ez diren elementuak adierazten ditu.
lerroko testu tarte bat adierazten du, testua ez den oharpen bat duela adierazten duen moduan errendatu behar dena.

Zure testuari estiloa jarri nahi baduzu, klase hauek erabili behar dituzu ordez:

.markestilo berdinak aplikatuko ditu .
.smallestilo berdinak aplikatuko ditu .
.text-decoration-underlineestilo berdinak aplikatuko ditu .
.text-decoration-line-throughestilo berdinak aplikatuko ditu <s>.

Goian agertzen ez den arren, lasai erabili eta HTML5-n. Hitzak edo esaldiak nabarmendu nahi ditu garrantzi gehigarririk eman gabe, batez ere ahotsa, termino teknikoak, etab.

Testu-erabilgarritasunak

Aldatu testuaren lerrokatzea, eraldatu, estiloa, pisua, lerro-altuera, dekorazioa eta kolorea gure testu -erabilgarritasunekin eta kolore-utilitateekin .

Laburdurak

HTML elementuaren inplementazio estilizatua <abbr>laburdura eta akronimoetarako bertsio zabaldua erakusteko. Laburdurek azpimarra lehenetsia dute eta laguntza-kurtsorea lortzen dute pasatzean eta laguntza-teknologien erabiltzaileei testuinguru gehigarria eskaintzeko.

Gehitu .initialismlaburdura bati letra-tamaina apur bat txikiagoa izateko.

attr

HTML

html

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

Blokeko komatxoak

Zure dokumentuan beste iturri bateko eduki-blokeak aipatzeko. Bilatu <blockquote class="blockquote">edozein HTML aipamen gisa.

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

html

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

Iturburu bat izendatzea

HTML zehaztapenak blockquote atribuzioa kanpoan jartzea eskatzen du <blockquote>. Esleipena ematean, bildu <blockquote>a <figure>eta erabili a <figcaption>edo bloke mailako elementu bat (adibidez, ) .blockquote-footerklasearekin. Ziurtatu iturri-lanaren izena <cite>ere biltzen duzula.

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

html

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

Lerrokatzea

Erabili testu-erabilgarritasunak behar duzun moduan zure bloke-kotaren lerrokadura aldatzeko.

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

html

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

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

html

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

Zerrendak

Estilorik gabekoa

Kendu zerrendako elementuetan lehenetsitako list-styleeta ezkerreko marjina (berehalako seme-alabak soilik). Hau berehalako seme-alaben zerrendako elementuei bakarrik aplikatzen zaie , hau da, klasea gehitu beharko duzu habiaratutako edozein zerrendetarako ere.

Hau zerrenda bat da.
Erabat estilorik gabekoa dirudi.
Egitura aldetik, oraindik zerrenda bat da.
Hala ere, estilo hau berehalako elementu seme-alabei bakarrik aplikatzen zaie.
Habiaratutako zerrendak:
- estilo honek ez du eraginik
- bala bat erakutsiko du oraindik
- eta ezkerreko marjina egokia izan
Baliteke hori oraindik erabilgarria etortzea zenbait egoeratan.

html

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

Sarean

Kendu zerrenda bateko balak eta aplikatu argi pixka marginbat bi klase konbinatuz, .list-inlineeta .list-inline-item.

Hau zerrendako elementu bat da.
Eta beste bat.
Baina lerroan bistaratzen dira.

html

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

Deskribapen zerrendaren lerrokatzea

Lerrokatu terminoak eta deskribapenak horizontalki gure sareta-sistemaren aurredefinitutako klaseak (edo nahasketa semantikoak) erabiliz. Epe luzeagoetarako, aukeran klase bat gehi dezakezu .text-truncatetestua elipsi batekin mozteko.

Deskribapen zerrendak

Deskribapen zerrenda ezin hobea da terminoak definitzeko.

Epea

Terminoaren definizioa.

Eta leku-markaren definizio testu gehiago.

Beste termino bat

Definizio hau laburra da, beraz, ez dago aparteko paragraforik edo ezer.

Moztutako terminoa moztuta dago

Hau erabilgarria izan daiteke espazio estua denean. Amaieran elipsia gehitzen du.

Habia egitea

Definizio zerrenda habiaratua: Definizio zerrendak gustatzen zaizkizula entzun dut. Utzidazu definizio zerrenda bat jartzen zure definizio zerrendaren barruan.

html

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

Letra-tamaina erantzuleak

Bootstrap 5-en, lehenespenez erantzunak diren letra-tamainak gaitu ditugu, testua modu naturalean eskalatzeko aukera emanez gailuaren eta bistaratze-tamainen artean. Begiratu RFS orrialdeari nola funtzionatzen duen jakiteko.

Sass

Aldagaiak

Izenburuek aldagai dedikatu batzuk dituzte tamainari eta tarteari.

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

Hemen eta Berrabiarazin lantzen diren hainbat tipografia-elementuek ere aldagai dedikatuak dituzte.

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

Mixinak

Ez dago tipografiarako nahasketa dedikaturik, baina Bootstrap-ek Letra-tamaina erantzunkorra (RFS) erabiltzen du .