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
. - 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.
<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>
Montraj titoloj estas agorditaj per la $display-font-sizes
Sass-mapo kaj du variabloj, $display-font-weight
kaj $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
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>
Atentu, ke tiuj etikedoj estu uzataj por semantika celo:
<mark>
reprezentas tekston kiu estas markita aŭ emfazita por referenco aŭ notaciaj celoj.<small>
reprezentas flankajn komentojn kaj malgrandajn limojn, kiel kopirajton kaj leĝan tekston.<s>
reprezentas elementon, kiuj ne plu rilatas aŭ ne plu precizas.<u>
reprezentas amplekson de enlinia teksto kiu devus esti igita en maniero kiel kiu indikas ke ĝi havas ne-tekstan komentarion.
Se vi volas stiligi vian tekston, vi devus uzi la sekvajn klasojn anstataŭe:
.mark
aplikos la samajn stilojn kiel<mark>
..small
aplikos la samajn stilojn kiel<small>
..text-decoration-underline
aplikos la samajn stilojn kiel<u>
..text-decoration-line-through
aplikos la samajn stilojn kiel<s>
.
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, linio-alton, dekoracion 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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Nomante fonton
La HTML-specifo postulas, ke blokquote-atribuo estu metita ekster la <blockquote>
. Donante atribuon, envolvu vian <blockquote>
en a <figure>
kaj uzu a <figcaption>
aŭ bloknivelan elementon (ekz., <p>
) kun la .blockquote-footer
klaso. Nepre envolvu ankaŭ la nomon de la fonta verko <cite>
.
<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>
Vicigo
Uzu tekstajn ilojn laŭbezone por ŝanĝi la vicigon de via blokcitaĵo.
<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>
<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>
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
En Bootstrap 5, ni ebligis respondemajn tipargrandojn defaŭlte, permesante al teksto skali pli nature laŭ aparato kaj vidfenestrograndoj. Rigardu la paĝon RFS por ekscii kiel tio funkcias.
Sass
Variabloj
Titoloj havas kelkajn dediĉitajn variablojn por grandeco kaj interspaco.
$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;
Diversaj tipografiaj elementoj kovritaj ĉi tie kaj en Reboot ankaŭ havas dediĉitajn variablojn.
$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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Miksinoj
Ne ekzistas dediĉitaj miksaĵoj por tipografio, sed Bootstrap uzas Respondan Tipar-Dimension (RFS) .