Tipografio
Dokumentado kaj ekzemploj por Bootstrap-tipografio, inkluzive de tutmondaj agordoj, titoloj, korpa teksto, listoj kaj pli.
Tutmondaj agordoj
Bootstrap starigas bazajn tutmondajn ekranajn, tipografiojn kaj ligajn stilojn. Kiam pli da kontrolo necesas, kontrolu la tekstajn utilajn klasojn .
- Uzu denaskan tiparon , kiu elektas la plej bonan
font-family
por ĉiu OS kaj aparato. - Por pli inkluziva kaj alirebla tipskalo, ni uzas la defaŭltan radikon de la retumilo
font-size
(tipe 16px) por ke vizitantoj povu agordi siajn retumilon defaŭltajn laŭbezone. - Uzu la
$font-family-base
,$font-size-base
, kaj$line-height-base
atributojn kiel nian tipografian bazon aplikitan al la<body>
. - Agordu la tutmondan ligan koloron per
$link-color
kaj apliku ligilsubstrekojn nur ĉe:hover
. - Uzu
$body-bg
por agordibackground-color
sur la<body>
(#fff
defaŭlte).
Ĉi tiuj stiloj troviĝas ene de _reboot.scss
, kaj la tutmondaj variabloj estas difinitaj en _variables.scss
. Certiĝu $font-size-base
eniri rem
.
Titoloj
Ĉiuj HTML-titoloj, <h1>
tra <h6>
, estas haveblaj.
Titolo | Ekzemplo |
---|---|
<h1></h1> |
h1. Bootstrap-titolo |
<h2></h2> |
h2. Bootstrap-titolo |
<h3></h3> |
h3. Bootstrap-titolo |
<h4></h4> |
h4. Bootstrap-titolo |
<h5></h5> |
h5. Bootstrap-titolo |
<h6></h6> |
h6. Bootstrap-titolo |
<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
tra .h6
klasoj ankaŭ disponeblas, por kiam vi volas kongrui kun la tiparo de titolo sed ne povas uzi la rilatan HTML-elementon.
h1. Bootstrap-titolo
h2. Bootstrap-titolo
h3. Bootstrap-titolo
h4. Bootstrap-titolo
h5. Bootstrap-titolo
h6. Bootstrap-titolo
<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>
Agordado de titoloj
Uzu la inkluzivitajn utilajn klasojn por rekrei la malgrandan sekundaran titolon tekston de Bootstrap 3.
Fantazia montra titolo Kun paliĝinta sekundara teksto
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Montru titolojn
Tradiciaj titolelementoj estas dizajnitaj por funkcii plej bone en la viando de via paĝa enhavo. Kiam vi bezonas titolon por elstari, konsideru uzi montran titolon — pli grandan, iomete pli opinietan titolon. Memoru, ke ĉi tiuj titoloj ne respondas defaŭlte, sed eblas ebligi respondajn tipargrandojn .
Montro 1 |
Montro 2 |
Montro 3 |
Montro 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>
Plumbo
Elstarigu alineon aldonante .lead
.
Ĉi tio estas gvida alineo. Ĝi elstaras el regulaj alineoj.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Enliniaj tekstaj elementoj
Stilado por komunaj enliniaj HTML5 elementoj.
Vi povas uzi la marketikedon porreliefigiteksto.
Ĉi tiu linio de teksto estas traktata kiel forigita teksto.
Ĉi tiu linio de teksto estas traktata kiel ne plu preciza.
Ĉi tiu linio de teksto estas traktata kiel aldono al la dokumento.
Ĉi tiu linio de teksto prezentiĝos kiel substrekita
Ĉi tiu linio de teksto estas intencita esti traktata kiel bela preskribo.
Ĉi tiu linio prezentita kiel grasa teksto.
Ĉi tiu linio bildigita kiel kursiva teksto.
<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
kaj .small
klasoj ankaŭ disponeblas por apliki la samajn stilojn kiel <mark>
kaj <small>
evitante ajnajn nedeziratajn semantikajn implicojn, kiujn la etikedoj alportus.
Kvankam ne montrite supre, bonvolu uzi <b>
kaj <i>
en HTML5. <b>
celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon dum <i>
estas plejparte por voĉo, teknikaj terminoj ktp.
Tekstaj utilecoj
Ŝanĝu tekstan vicigon, transformu, stilon, pezon kaj koloron per niaj tekstaj utilecoj kaj koloraj utilecoj .
Mallongigoj
Stiligita efektivigo de HTML-a <abbr>
elemento por mallongigoj kaj akronimoj por montri la vastigitan version sur ŝvebado. Mallongigoj havas defaŭltan substrekon kaj akiras helpkursoron por provizi plian kuntekston dum ŝvebado kaj al uzantoj de helpaj teknologioj.
Aldonu .initialism
al mallongigo por iomete pli malgranda tiparo.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blokcitaĵoj
Por citado de enhavoblokoj de alia fonto ene de via dokumento. Envolvi <blockquote class="blockquote">
ajnan HTML kiel la citaĵo.
Bonkonata citaĵo, enhavita en blokcita elemento.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Nomante fonton
Aldonu <footer class="blockquote-footer">
por identigi la fonton. Envolvu la nomon de la fontverko en <cite>
.
Bonkonata citaĵo, enhavita en blokcita elemento.
<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>
Vicigo
Uzu tekstajn ilojn laŭbezone por ŝanĝi la vicigon de via blokcitaĵo.
Bonkonata citaĵo, enhavita en blokcita elemento.
<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>
Bonkonata citaĵo, enhavita en blokcita elemento.
<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>
Listoj
Senstila
Forigu la defaŭltan list-style
kaj maldekstran marĝenon sur listaĵoj (nur tujaj infanoj). Ĉi tio validas nur por tujaj filaj listeroj , kio signifas, ke vi devos aldoni la klason ankaŭ por iuj nestitaj listoj.
- Ĉi tio estas listo.
- Ĝi aperas tute senstila.
- Strukture, ĝi ankoraŭ estas listo.
- Tamen ĉi tiu stilo nur validas por tujaj infanaj elementoj.
- Nestitaj listoj:
- estas netuŝitaj de ĉi tiu stilo
- ankoraŭ montros kuglon
- kaj havas taŭgan maldekstran marĝenon
- Ĉi tio ankoraŭ povas esti utila en iuj situacioj.
<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 linio
Forigu la kuglojn de listo kaj apliku iom da lumo margin
kun kombinaĵo de du klasoj, .list-inline
kaj .list-inline-item
.
- Ĉi tio estas listo.
- Kaj alia.
- Sed ili estas montrataj enlinie.
<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>
Priskriblista vicigo
Vicigu terminojn kaj priskribojn horizontale uzante la antaŭdifinitajn klasojn de nia kradsistemo (aŭ semantikajn miksaĵojn). Por pli longaj terminoj, vi povas laŭvole aldoni .text-truncate
klason por detranĉi la tekston per elipso.
- Priskribolistoj
- Priskriba listo estas perfekta por difini terminojn.
- Terminon
-
Difino por la termino.
Kaj iom pli da lokokupilo difinteksto.
- Alia termino
- Ĉi tiu difino estas mallonga, do neniuj kromaj alineoj aŭ io ajn.
- Detranĉita termino estas detranĉita
- Ĉi tio povas esti utila kiam spaco estas malvasta. Aldonas elipson ĉe la fino.
- Nestumado
-
- Nestita difina listo
- Mi aŭdis, ke vi ŝatas difinlistojn. Permesu al mi meti difinliston en vian difinliston.
<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>
Respondema tipargrandoj
Ekde v4.3.0, Bootstrap ekspediĝas kun la opcio por ebligi respondemajn tipargrandojn, permesante al teksto skali pli nature tra aparato kaj vidfenestrograndoj. RFS povas esti ebligita ŝanĝante la $enable-responsive-font-sizes
variablon Sass al true
kaj rekompilante Bootstrap.
Por subteni RFS , ni uzas Sass-miksaĵon por anstataŭigi niajn normalajn font-size
ecojn. Respondema tipargrandoj estos kompilitaj en calc()
funkcioj kun miksaĵo de rem
kaj vidportunuoj por ebligi la respondema skalkonduto. Pli pri RFS kaj ĝia agordo troveblas sur ĝia GitHub-deponejo .