Source

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 supozojmë se rrënja e parazgjedhur e shfletuesit font-size(zakonisht 16 px) 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-colordhe aplikoni nënvizimet e lidhjes vetëm në :hover.
  • 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

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

Plumbi

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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>

.markdhe .smallklasat janë gjithashtu të disponueshme për të aplikuar të njëjtat stile si <mark>dhe <small>duke shmangur çdo implikim semantik të padëshiruar që do të sillnin etiketat.

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Emërtimi i një burimi

Shto një <footer class="blockquote-footer">për identifikimin e burimit. Mbështillni emrin e punës burimore në <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit 
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Radhitje

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit 
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit 
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Lehtësimi në pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Enean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Në rradhë

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Termi i cunguar është i cunguar
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Folezimi
Lista e përcaktimeve të ndërlidhura
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. 
<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Tipografi e përgjegjshme

Tipografia reaguese i referohet shkallëzimit të tekstit dhe komponentëve duke rregulluar thjesht elementin rrënjësor font-sizebrenda një serie pyetjesh mediatike. Bootstrap nuk e bën këtë për ju, por është mjaft e lehtë për ta shtuar nëse ju nevojitet.

Ja një shembull i tij në praktikë. Zgjidhni çfarëdo font-sizes dhe pyetje mediatike që dëshironi.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}