Tipografia

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

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 honen bidez $link-coloreta aplikatu estekaren azpimarratzekoak bakarrik :hover.
Erabili $body-bga ezartzeko background-color( <body>lehenespenez #fff).

Estilo hauek barruan aurki daitezke _reboot.scss, eta aldagai globalak hemen 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

<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

<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. Kontuan izan goiburu hauek ez direla erantzuten lehenespenez, baina posible da erantzunezko letra-tamaina gaitzea .

Pantaila 1

Pantaila 2

Pantaila 3

Pantaila 4

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

Beruna

Egin paragrafo bat nabarmenduz gehituz .lead.

Hau paragrafo nagusi bat da. Ohiko paragrafoetatik nabarmentzen da.

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

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

.marketa .smallklaseak ere erabilgarri daude estilo berdinak aplikatzeko <mark>eta <small>etiketak ekarriko lituzkeen inplikazio semantiko nahigabeak saihestuz.

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

Testu-erabilgarritasunak

Aldatu testu-lerrokatzea, eraldatu, estiloa, pisua 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

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

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

Iturburu bat izendatzea

Gehitu a <footer class="blockquote-footer">iturria identifikatzeko. Itzul ezazu iturburu-lanaren izena <cite>.

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

Iturria Tituluan ospetsua den norbait

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

Lerrokatzea

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

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

Iturria Tituluan ospetsua den norbait

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

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

Iturria Tituluan ospetsua den norbait

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

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.

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

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

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

4.3.0 bertsiotik aurrera, Bootstrap-ek letra-tamaina erantzuleak gaitzeko aukera eskaintzen du, testua modu naturalean eskalatzea ahalbidetuz gailu eta bistaratze tamainetan. RFS gaitu daiteke $enable-responsive-font-sizesSass aldagaia trueBootstrap-era aldatuz eta berriro konpilatuz.

RFS onartzeko , Sass mixin bat erabiltzen dugu gure font-sizepropietate arruntak ordezkatzeko. Letra-tamaina erantzuleak dituzten funtzioetan konpilatuko dira eta bista-unitateen calc()nahasketa batekin, remeskalatze-portaera sentikorra gaitzeko. RFSri eta bere konfigurazioari buruzko informazio gehiago bere GitHub biltegian aurki daiteke .