Tipografia

Dokumentacioni dhe shembujt për tipografinë Bootstrap, duke përfshirë cilësimet globale, titujt, tekstin e trupit, listat dhe më shumë.

Në këtë faqe

Parametrat globale

Bootstrap vendos stilet bazë globale të ekranit, tipografisë dhe lidhjeve. Kur nevojitet më shumë kontroll, shikoni klasat e përdorimit të tekstit .

Përdorni një grumbull font origjinal që zgjedh më të mirën font-familypër çdo OS dhe pajisje.
Për një shkallë më gjithëpërfshirëse dhe më të aksesueshme të tipit, ne përdorim rrënjën e paracaktuar të shfletuesit font-size(zakonisht 16 pikselë) në mënyrë që vizitorët të mund të personalizojnë parazgjedhjet e shfletuesit të tyre sipas nevojës.
Përdorni atributet $font-family-base, $font-size-basedhe $line-height-basesi bazën tonë tipografike të aplikuar në <body>.
Vendosni ngjyrën globale të lidhjes nëpërmjet $link-color.
Përdorni $body-bgpër të vendosur një background-colornë <body>( #fffsi parazgjedhje).

Këto stile mund të gjenden brenda _reboot.scss, dhe variablat globale përcaktohen në _variables.scss. Sigurohuni që të $font-size-basevendosni rem.

Titujt

Të gjithë titujt HTML, <h1>përmes <h6>, janë të disponueshëm.

Drejtimi	Shembull
`<h1></h1>`	h1. Titulli i bootstrap
`<h2></h2>`	h2. Titulli i bootstrap
`<h3></h3>`	h3. Titulli i bootstrap
`<h4></h4>`	h4. Titulli i bootstrap
`<h5></h5>`	h5. Titulli i bootstrap
`<h6></h6>`	h6. Titulli i 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>

.h1përmes .h6klasave janë gjithashtu të disponueshme, kur dëshironi të përputheni me stilin e shkronjave të një titulli, por nuk mund të përdorni elementin e lidhur HTML.

h1. Titulli i bootstrap

h2. Titulli i bootstrap

h3. Titulli i bootstrap

h4. Titulli i bootstrap

h5. Titulli i bootstrap

h6. Titulli i bootstrap

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>

Përshtatja e titujve

Përdorni klasat e përfshira të shërbimeve për të rikrijuar tekstin e vogël të titullit dytësor nga Bootstrap 3.

Titulli i zbukuruar i ekranit Me tekst dytësor të zbehur

html

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

Shfaq titujt

Elementet tradicionale të titullit janë krijuar për të funksionuar më mirë në përmbajtjen e përmbajtjes së faqes suaj. Kur keni nevojë për një titull për t'u dalluar, merrni parasysh përdorimin e një titulli të ekranit - një stil titulli më të madh dhe pak më të opinionit.

Ekrani 1

Ekrani 2

Ekrani 3

Ekrani 4

Ekrani 5

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

Titujt e shfaqjes konfigurohen nëpërmjet $display-font-sizeshartës Sass dhe dy variablave, $display-font-weightdhe $display-line-height.

Titujt e shfaqjes janë të personalizueshëm nëpërmjet dy variablave $display-font-familydhe $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;

Plumbi

Bëni një paragraf të dallohet duke shtuar .lead.

Ky është një paragraf kryesor. Ai dallohet nga paragrafët e rregullt.

html

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

Elementet e tekstit në linjë

Stilimi për elementët e zakonshëm të linjës HTML5.

Ju mund të përdorni etiketën e shenjës për tënxjerr në pahteksti.

~~Ky rresht teksti është menduar të trajtohet si tekst i fshirë.~~

~~Ky rresht teksti është menduar të trajtohet si jo më i saktë.~~

Ky rresht teksti është menduar të trajtohet si një shtesë në dokument.

Ky rresht teksti do të shfaqet siç është nënvizuar.

Ky rresht teksti është menduar të trajtohet si shtyp i imët.

Ky rresht është paraqitur si tekst i trashë.

Ky rresht përkthehet si tekst i pjerrët.

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>

Kujdes që ato etiketa duhet të përdoren për qëllime semantike:

përfaqëson tekstin i cili është shënuar ose theksuar për qëllime referimi ose shënimi.
përfaqëson komente anësore dhe shkronja të vogla, si e drejta e autorit dhe teksti ligjor.
<s>përfaqëson elemente që nuk janë më relevante ose jo më të sakta.
përfaqëson një hapësirë të tekstit inline i cili duhet të jepet në një mënyrë që të tregojë se ka një shënim jotekstual.

Nëse dëshironi të stiloni tekstin tuaj, duhet të përdorni klasat e mëposhtme:

.markdo të aplikojë të njëjtat stile si .
.smalldo të aplikojë të njëjtat stile si .
.text-decoration-underlinedo të aplikojë të njëjtat stile si .
.text-decoration-line-throughdo të aplikojë të njëjtat stile si <s>.

Edhe pse nuk tregohet më lart, mos ngurroni të përdorni dhe në HTML5. ka për qëllim të nxjerrë në pah fjalë ose fraza pa përcjellë rëndësi shtesë, ndërsa është kryesisht për zërin, termat teknike, etj.

Shërbimet e tekstit

Ndryshoni shtrirjen e tekstit, transformimin, stilin, peshën, lartësinë e rreshtit, dekorimin dhe ngjyrën me shërbimet tona të tekstit dhe shërbimet e ngjyrave .

Shkurtesat

Implementimi i stilizuar i <abbr>elementit HTML për shkurtesat dhe akronimet për të treguar versionin e zgjeruar në lëvizje. Shkurtesat kanë një nënvizim të paracaktuar dhe fitojnë një kursor ndihme për të ofruar kontekst shtesë në lëvizje dhe për përdoruesit e teknologjive ndihmëse.

Shtoni .initialismnë një shkurtim për një madhësi fonti pak më të vogël.

attr

HTML

html

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

Blloqe kuotash

Për të cituar blloqe të përmbajtjes nga një burim tjetër brenda dokumentit tuaj. Mbështilleni <blockquote class="blockquote">rreth çdo HTML si citat.

Një citat i njohur, i përfshirë në një element blloku.

html

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

Emërtimi i një burimi

Specifikimet HTML kërkojnë që atribuimi i bllokut të kuotave të vendoset jashtë <blockquote>. Kur jepni atribut, mbështilleni <blockquote>me një <figure>dhe përdorni një <figcaption>ose një element të nivelit të bllokut (p.sh., ) me .blockquote-footerklasën. Sigurohuni që të mbështillni edhe emrin e punës burimore <cite>.

Një citat i njohur, i përfshirë në një element blloku.

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>

Radhitje

Përdorni shërbimet e tekstit sipas nevojës për të ndryshuar shtrirjen e kuotimit tuaj të bllokut.

Një citat i njohur, i përfshirë në një element blloku.

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>

Një citat i njohur, i përfshirë në një element blloku.

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>

Listat

E pa stiluar

Hiqni kufirin e paracaktuar list-styledhe të majtë në artikujt e listës (vetëm fëmijët e menjëhershëm). Kjo vlen vetëm për artikujt e listës së fëmijëve të menjëhershëm , që do të thotë se do t'ju duhet të shtoni klasën edhe për çdo listë të ndërthurur.

Kjo është një listë.
Duket krejtësisht e pa stiluar.
Strukturisht, është ende një listë.
Megjithatë, ky stil vlen vetëm për elementët e menjëhershëm të fëmijëve.
Listat e mbivendosura:
- nuk ndikohen nga ky stil
- do të tregojë ende një plumb
- dhe kanë diferencën e duhur të majtë
Kjo mund të jetë ende e dobishme në disa situata.

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>

Në rradhë

Hiqni pikat e një liste dhe aplikoni pak dritë marginme një kombinim të dy klasave, .list-inlinedhe .list-inline-item.

Ky është një artikull në listë.
Dhe një tjetër.
Por ato shfaqen në linjë.

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>

Përafrimi i listës së përshkrimit

Lidhni termat dhe përshkrimet horizontalisht duke përdorur klasat e paracaktuara të sistemit tonë të rrjetit (ose përzierjet semantike). Për afate më të gjata, mund të shtoni opsionalisht një .text-truncateklasë për të shkurtuar tekstin me një elipsë.

Listat e përshkrimeve

Një listë përshkrimi është e përkryer për përcaktimin e termave.

Afati

Përkufizimi për termin.

Dhe disa tekste të tjera të përkufizimit të mbajtësit të vendit.

Një term tjetër

Ky përkufizim është i shkurtër, kështu që nuk ka paragrafë shtesë ose asgjë.

Termi i cunguar është i cunguar

Kjo mund të jetë e dobishme kur hapësira është e ngushtë. Shton një elipsë në fund.

Folezimi

Lista e përcaktimeve të ndërlidhura: Kam dëgjuar që ju pëlqeni listat e definicioneve. Më lejoni të vendos një listë përkufizimesh brenda listës suaj të përkufizimeve.

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>

Madhësitë e përgjegjshme të shkronjave

Në Bootstrap 5, ne kemi aktivizuar madhësitë e përgjegjshme të shkronjave si parazgjedhje, duke lejuar që teksti të shkallëzohet më natyrshëm në madhësinë e pajisjes dhe portit të pamjes. Hidhini një sy faqes RFS për të zbuluar se si funksionon kjo.

Sass

Variablat

Titujt kanë disa variabla të dedikuar për madhësinë dhe ndarjen.

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

Elementët e ndryshëm të tipografisë të mbuluar këtu dhe në Reboot gjithashtu kanë variabla të dedikuar.

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

Përzierjet

Nuk ka përzierje të dedikuara për tipografi, por Bootstrap përdor madhësinë e shkronjave të përgjegjshme (RFS) .