in English

Tipografio

Dokumentado kaj ekzemploj por Bootstrap-tipografio, inkluzive de tutmondaj agordoj, titoloj, korpa teksto, listoj kaj pli.

Sur ĉi tiu paĝo

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-familypor ĉ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-baseatributojn kiel nian tipografian bazon aplikitan al la <body>.
Agordu la tutmondan ligan koloron per $link-color.
Uzu $body-bgpor agordi background-colorsur la <body>( #fffdefaŭlte).

Ĉi tiuj stiloj troviĝas ene de _reboot.scss, kaj la tutmondaj variabloj estas difinitaj en _variables.scss. Certiĝu $font-size-baseeniri 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>

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

html

<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

html

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

Montro 1

Montro 2

Montro 3

Montro 4

Montro 5

Montro 6

<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-sizesSass-mapo kaj du variabloj, $display-font-weightkaj $display-line-height.

Montraj titoloj estas agordeblaj per du variabloj, $display-font-familykaj $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$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.

html

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

html

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

reprezentas tekston kiu estas markita aŭ emfazita por referenco aŭ notaciaj celoj.
reprezentas flankajn komentojn kaj malgrandajn limojn, kiel kopirajton kaj leĝan tekston.
<s>reprezentas elementon, kiuj ne plu rilatas aŭ ne plu precizas.
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:

.markaplikos la samajn stilojn kiel .
.smallaplikos la samajn stilojn kiel .
.text-decoration-underlineaplikos la samajn stilojn kiel .
.text-decoration-line-throughaplikos la samajn stilojn kiel <s>.

Kvankam ne montrite supre, bonvolu uzi kaj en HTML5. celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon, dum 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 .initialismal mallongigo por iomete pli malgranda tiparo.

attr

HTML

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.

html

<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., ) kun la .blockquote-footerklaso. Nepre envolvu ankaŭ la nomon de la fonta verko <cite>.

Bonkonata citaĵo, enhavita en blokcita elemento.

html

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

Bonkonata citaĵo, enhavita en blokcita elemento.

html

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

Bonkonata citaĵo, enhavita en blokcita elemento.

html

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

html

<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 marginkun kombinaĵo de du klasoj, .list-inlinekaj .list-inline-item.

Ĉi tio estas listo.
Kaj alia.
Sed ili estas montrataj enlinie.

html

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

html

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

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Miksinoj

Ne ekzistas dediĉitaj miksaĵoj por tipografio, sed Bootstrap uzas Respondan Tipar-Dimension (RFS) .