Source

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, nassumu l-għerq default tal-brawżer font-size(tipikament 16px) sabiex il-viżitaturi jkunu jistgħu jippersonalizzaw in-nuqqasijiet 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 $link-coloru applika s-sottolinja tal-link biss fuq :hover.
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

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

Ċomb

Agħmel paragrafu jispikkaw billi żżid .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>

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>

.marku .smallklassijiet huma wkoll disponibbli biex japplikaw l-istess stili kif <mark>u <small>filwaqt li tiġi evitata kwalunkwe implikazzjoni semantika mhux mixtieqa li jġibu t-tags.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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>

Ismijiet sors

Żid a <footer class="blockquote-footer">għall-identifikazzjoni tas-sors. Kebbeb l-isem tax-xogħol tas-sors fi <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Xi ħadd famuż fit- Titolu Sors

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

Allinjament

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Xi ħadd famuż fit- Titolu Sors

<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. Integer posuere erat a ante.

Xi ħadd famuż fit- Titolu Sors

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

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in 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
Aenean 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>

F'konformità

Neħħi l-balal ta 'lista u applika ftit dawl marginb'kombinazzjoni ta' żewġ klassijiet, .list-inlineu .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>

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.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

It-terminu maqtugħ huwa maqtugħ

Fusce dapibus, tellus ac cursus commodo, torttor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Ibejtu

Lista ta' definizzjoni mnaqqsa: 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>

Tipografija li tirreaġixxi

Tipografija li tirrispondi tirreferi għall-iskala tat-test u l-komponenti billi sempliċement taġġusta l-element għerq font-sizef'serje ta 'mistoqsijiet tal-midja. Bootstrap ma jagħmilx dan għalik, iżda huwa pjuttost faċli li żżid jekk ikollok bżonnha.

Hawn eżempju ta 'dan fil-prattika. Agħżel kwalunkwe font-sizemistoqsijiet u midja li tixtieq.

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