Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

Tipografia

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

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

<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

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

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

Plumbi

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

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

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

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

  • <mark>përfaqëson tekstin i cili është shënuar ose theksuar për qëllime referimi ose shënimi.
  • <small>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.
  • <u>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 <mark>.
  • .smalldo të aplikojë të njëjtat stile si <small>.
  • .text-decoration-underlinedo të aplikojë të njëjtat stile si <u>.
  • .text-decoration-line-throughdo të aplikojë të njëjtat stile si <s>.

Edhe pse nuk tregohet më lart, mos ngurroni të përdorni <b>dhe <i>në HTML5. <b>ka për qëllim të nxjerrë në pah fjalë ose fraza pa përcjellë rëndësi shtesë, ndërsa <i>ë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 ngjyrat .

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

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

<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., <p>) 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.

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

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

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

Përzierjet

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