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-base
atributuak gure oinarri tipografiko gisa<body>
. - Ezarri estekaren kolore globala honen bidez
$link-color
eta aplikatu estekaren azpimarratzekoak bakarrik:hover
. - Erabili
$body-bg
a ezartzekobackground-color
(<body>
lehenespenez#fff
).
Estilo hauek barruan aurki daitezke _reboot.scss
, eta aldagai globalak hemen definitzen dira _variables.scss
. Ziurtatu ezarri $font-size-base
duzula 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>
.h1
bidezko .h6
klaseak 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>
.mark
eta .small
klaseak 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 .initialism
laburdura 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.
<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.
<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.
<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-style
eta 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 margin
bat bi klase konbinatuz, .list-inline
eta .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-truncate
testua 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-sizes
Sass aldagaia true
Bootstrap-era aldatuz eta berriro konpilatuz.
RFS onartzeko , Sass mixin bat erabiltzen dugu gure font-size
propietate arruntak ordezkatzeko. Letra-tamaina erantzuleak dituzten funtzioetan konpilatuko dira eta bista-unitateen calc()
nahasketa batekin, rem
eskalatze-portaera sentikorra gaitzeko. RFSri eta bere konfigurazioari buruzko informazio gehiago bere GitHub biltegian aurki daiteke .