Aqbeż għall-kontenut prinċipali Aqbeż għan-navigazzjoni tad-dokumenti
in English

Tipografija

Dokumentazzjoni u eżempji għat-tipografija Bootstrap, inklużi settings globali, intestaturi, test tal-korp, listi, u aktar.

Settings globali

Bootstrap jistabbilixxi stili ta' wiri, tipografija u link globali bażiċi. Meta jkun meħtieġ aktar kontroll, iċċekkja l- klassijiet ta 'utilità testwali .

  • Uża munzell ta 'font indiġeni li jagħżel l-aħjar font-familygħal kull OS u apparat.
  • Għal skala tat-tip aktar inklużiva u aċċessibbli, nużaw l-għerq default tal-brawżer font-size(tipikament 16px) sabiex il-viżitaturi jkunu jistgħu jippersonalizzaw il-inadempjenzi tal-browser tagħhom kif meħtieġ.
  • Uża l- $font-family-base, $font-size-base, u l- $line-height-baseattributi bħala l-bażi tipografika tagħna applikata għall- <body>.
  • Issettja l-kulur tal-link globali permezz ta' $link-color.
  • Uża $body-bgbiex tissettja background-colorfuq il- <body>( #fffb'mod awtomatiku).

Dawn l-istili jistgħu jinstabu fi ħdan _reboot.scss, u l-varjabbli globali huma definiti fi _variables.scss. Kun żgur li $font-size-basetissettja rem.

Intestaturi

L-intestaturi HTML kollha, <h1>sa <h6>, huma disponibbli.

Intestatura Eżempju
<h1></h1> h1. Intestatura Bootstrap
<h2></h2> h2. Intestatura Bootstrap
<h3></h3> h3. Intestatura Bootstrap
<h4></h4> h4. Intestatura Bootstrap
<h5></h5> h5. Intestatura Bootstrap
<h6></h6> h6. Intestatura Bootstrap
<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>

.h1permezz ta' .h6klassijiet huma wkoll disponibbli, għal meta trid tqabbel l-istil tat-tipa ta' intestatura iżda ma tistax tuża l-element HTML assoċjat.

h1. Intestatura Bootstrap

h2. Intestatura Bootstrap

h3. Intestatura Bootstrap

h4. Intestatura Bootstrap

h5. Intestatura Bootstrap

h6. Intestatura Bootstrap

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

Customizing intestaturi

Uża l-klassijiet ta 'utilità inklużi biex toħloq mill-ġdid it-test ta' l-intestatura sekondarja żgħira minn Bootstrap 3.

Intestatura fancy display B'test sekondarju faded

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Uri l-intestaturi

Elementi tal-intestatura tradizzjonali huma ddisinjati biex jaħdmu l-aħjar fil-laħam tal-kontenut tal-paġna tiegħek. Meta jkollok bżonn intestatura biex tispikka, ikkunsidra li tuża intestatura tal- wiri — stil taʼ intestatura ikbar u kemmxejn iktar opinjonista.

Display 1
Display 2
Display 3
Wiri 4
Wiri 5
Wiri 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>

L -intestaturi tal-wiri huma kkonfigurati permezz tal- $display-font-sizesmappa Sass u żewġ varjabbli, $display-font-weightu $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;

Ċomb

Agħmel paragrafu jispikkaw billi żżid .lead.

Dan huwa paragrafu ewlieni. Jispikka minn paragrafi regolari.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Elementi tat-test inline

Styling għal elementi HTML5 inline komuni.

Tista' tuża t-tikketta tal-marka biexjenfasizzawtest.

Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala test imħassra.

Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala li m'għadhiex preċiża.

Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala żieda mad-dokument.

Din il-linja tat-test se tirrendi kif issottolinjat.

Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala stampar fini.

Din il-linja mogħtija bħala test grassett.

Din il-linja mogħtija bħala test korsiv.

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

Oqgħod attent li dawk it-tikketti għandhom jintużaw għal skop semantiku:

  • <mark>jirrappreżenta test li huwa mmarkat jew enfasizzat għal skopijiet ta' referenza jew notazzjoni.
  • <small>jirrappreżenta kummenti sekondarji u titra żgħira, bħall-awtur u test legali.
  • <s>jirrappreżenta element li m'għadhomx rilevanti jew m'għadhomx preċiżi.
  • <u>jirrappreżenta medda ta' test inline li għandu jiġi rrappreżentat b'mod li jindika li għandu annotazzjoni mhux testwali.

Jekk trid tfassal it-test tiegħek, għandek tuża l-klassijiet li ġejjin minflok:

  • .markse tapplika l-istess stili bħal <mark>.
  • .smallse tapplika l-istess stili bħal <small>.
  • .text-decoration-underlinese tapplika l-istess stili bħal <u>.
  • .text-decoration-line-throughse tapplika l-istess stili bħal <s>.

Filwaqt li mhux muri hawn fuq, tħossok liberu li tuża <b>u <i>fl-HTML5. <b>huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali, filwaqt li <i>huwa l-aktar għal vuċi, termini tekniċi, eċċ.

Utilitajiet tat-test

Ibdel l-allinjament tat-test, ittrasforma, stil, piż, għoli tal-linja, dekorazzjoni u kulur bl-utilitajiet tat- test u l-utilitajiet tal- kulur tagħna .

Abbrevjazzjonijiet

Implimentazzjoni stilizzata tal- <abbr>element tal-HTML għall-abbrevjazzjonijiet u l-akronimi biex turi l-verżjoni estiża fuq il-post. L-abbrevjazzjonijiet għandhom sottolinja awtomatika u jiksbu cursor ta' għajnuna biex jipprovdu kuntest addizzjonali fuq il-passaġġ u lill-utenti tat-teknoloġiji ta' assistenza.

Żid .initialismma' abbrevjazzjoni għal font-size kemmxejn iżgħar.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes

Biex tikkwota blokki ta' kontenut minn sors ieħor fid-dokument tiegħek. Kebbeb <blockquote class="blockquote">madwar kwalunkwe HTML bħala l-kwotazzjoni.

Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Ismijiet sors

L-ispeċifikazzjoni HTML teħtieġ li l-attribuzzjoni tal-blockquote titqiegħed barra l- <blockquote>. Meta tipprovdi l-attribuzzjoni, wrap tiegħek <blockquote>fi a <figure>u uża a <figcaption>jew element ta' livell ta' blokka (eż., <p>) mal- .blockquote-footerklassi. Kun żgur li wrap l-isem tax-xogħol tas-sors <cite>ukoll.

Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.

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

Allinjament

Uża utilitajiet tat-test kif meħtieġ biex tbiddel l-allinjament tal-blockquote tiegħek.

Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.

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

Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.

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

Listi

Unstyled

Neħħi l-marġni default list-styleu tax-xellug fuq l-oġġetti tal-lista (tfal immedjati biss). Dan japplika biss għal oġġetti tal-lista tat-tfal immedjati , li jfisser li jkollok bżonn iżżid il-klassi għal kwalunkwe listi mnaqqsa wkoll.

  • Din hija lista.
  • Jidher kompletament unstyled.
  • Strutturalment, għadu lista.
  • Madankollu, dan l-istil japplika biss għal elementi tfal immedjati.
  • Listi mdaħħla:
    • mhumiex affettwati minn dan l-istil
    • xorta se juri bulit
    • u jkollhom marġini tax-xellug xierqa
  • Dan xorta jista 'jkun utli f'xi sitwazzjonijiet.
<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>

F'konformità

Neħħi l-balal ta 'lista u applika ftit dawl marginb'kombinazzjoni ta' żewġ klassijiet, .list-inlineu .list-inline-item.

  • Din hija oġġett tal-lista.
  • U ieħor.
  • Iżda huma murija inline.
<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>

Lista ta 'deskrizzjoni allinjament

Allinja termini u deskrizzjonijiet orizzontalment billi tuża l-klassijiet predefiniti tas-sistema tal-grilja tagħna (jew mixins semantiċi). Għal termini itwal, tista' b'għażla żżid .text-truncateklassi biex taqta' t-test b'ellipsis.

Listi ta' deskrizzjoni
Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
Terminu

Definizzjoni għat-terminu.

U xi test ta' definizzjoni ta' placeholder aktar.

Terminu ieħor
Din id-definizzjoni hija qasira, għalhekk l-ebda paragrafi żejda jew xejn.
It-terminu maqtugħ huwa maqtugħ
Dan jista 'jkun utli meta l-ispazju huwa strett. Iżżid ellissi fl-aħħar.
Ibejtu
Lista ta' definizzjoni mnaqqsa
Smajt li tħobb il-listi tad-definizzjonijiet. Ħa npoġġi lista ta' definizzjoni fil-lista ta' definizzjoni tiegħek.
<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>

Daqsijiet tat-tipa li jirrispondu

F'Bootstrap 5, ippermettejna daqsijiet tat-tipa li jirrispondu b'mod awtomatiku, u b'hekk it-test ikun jista' jiskala b'mod aktar naturali madwar id-daqsijiet tal-apparat u tal-viewport. Agħti ħarsa lejn il- paġna tal-RFS biex issir taf kif jaħdem dan.

Sass

Varjabbli

L-intestaturi għandhom xi varjabbli ddedikati għad-daqs u l-ispazjar.

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

Elementi mixxellanji tat-tipografija koperti hawn u f'Reboot għandhom ukoll varjabbli ddedikati.

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

Mixins

M'hemm l-ebda mixins dedikati għat-tipografija, iżda Bootstrap juża Daqs tal-Font Responsive (RFS) .