Source

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 font-size(normalean 16 px) hartzen dugu, bisitariek beren 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.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Hori bai, ez da nolanahikoa.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Iturburu bat izendatzea

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iturria Tituluan ospetsua den norbait

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iturria Tituluan ospetsua den norbait

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iturria Tituluan ospetsua den norbait

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem eta masa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ak tristique libre voltpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Sarean

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

Lorem ipsum
Phasellus iaculis
Nulla voltpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

Euismod

Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Moztutako terminoa moztuta dago

Fusce dapibus, tellus ac cursus commodo, Tortor Mauris condimentum nibh, ut fermentum massa justo eseri amet risus.

Habia egitea

Definizio zerrenda habiaratua: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Tipografia erantzunkorra

Tipografia sentikorra testua eta osagaiak eskalatzeari egiten dio erreferentzia, erroko elementuak font-sizemultimedia-kontsulta batzuen barruan doitzea besterik ez baita. Bootstrap-ek ez dizu hau egiten, baina nahiko erraza da gehitzea behar baduzu.

Hona hemen praktikan horren adibide bat. Aukeratu font-sizenahi dituzun komunikabideetako kontsultak.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}