Source

Teipograffeg

Dogfennaeth ac enghreifftiau ar gyfer teipograffeg Bootstrap, gan gynnwys gosodiadau byd-eang, penawdau, testun corff, rhestrau, a mwy.

Gosodiadau byd-eang

Mae Bootstrap yn gosod arddangosiad byd-eang sylfaenol, teipograffeg, ac arddulliau cyswllt. Pan fydd angen mwy o reolaeth, edrychwch ar y dosbarthiadau cyfleustodau testunol .

  • Defnyddiwch stac ffont brodorol sy'n dewis y gorau font-familyar gyfer pob OS a dyfais.
  • Ar gyfer graddfa deip fwy cynhwysol a hygyrch, rydym yn tybio gwraidd rhagosodedig y porwr font-size(16px fel arfer) fel y gall ymwelwyr addasu eu rhagosodiadau porwr yn ôl yr angen.
  • Defnyddiwch y $font-family-base, $font-size-base, a'r $line-height-basepriodoleddau fel ein sylfaen deipograffaidd sy'n berthnasol i'r <body>.
  • Gosodwch y lliw cyswllt byd-eang trwy $link-colora chymhwyso tanlinelliadau dolen yn unig ar :hover.
  • Defnyddiwch $body-bgi osod background-colorar y <body>( #fffyn ddiofyn).

Mae'r arddulliau hyn i'w cael o fewn _reboot.scss, ac mae'r newidynnau byd-eang wedi'u diffinio yn _variables.scss. Gwnewch yn siwr i osod i $font-size-basemewn rem.

Penawdau

Mae pob pennawd HTML, <h1>trwy <h6>, ar gael.

Pennawd Enghraifft

<h1></h1>

 h1. Pennawd Bootstrap

<h2></h2>

 h2. Pennawd Bootstrap

<h3></h3>

 h3. Pennawd Bootstrap

<h4></h4>

 h4. Pennawd Bootstrap

<h5></h5>

 h5. Pennawd Bootstrap

<h6></h6>

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

.h1trwy .h6ddosbarthiadau hefyd ar gael, ar gyfer pan fyddwch eisiau cyfateb arddull ffont pennawd ond yn methu defnyddio'r elfen HTML cysylltiedig.

h1. Pennawd Bootstrap

h2. Pennawd Bootstrap

h3. Pennawd Bootstrap

h4. Pennawd Bootstrap

h5. Pennawd Bootstrap

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

Addasu penawdau

Defnyddiwch y dosbarthiadau cyfleustodau sydd wedi'u cynnwys i ail-greu'r testun pennawd eilaidd bach o Bootstrap 3.

Pennawd arddangos ffansi Gyda thestun eilaidd wedi pylu 
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Arddangos penawdau

Mae elfennau pennawd traddodiadol wedi'u cynllunio i weithio orau yng nghig cynnwys eich tudalen. Pan fydd angen pennawd arnoch i sefyll allan, ystyriwch ddefnyddio pennawd arddangos - arddull pennawd mwy, ychydig yn fwy barn.

Arddangos 1
Arddangosfa 2
Arddangosfa 3
Arddangosfa 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>

Arwain

Gwnewch i baragraff sefyll allan trwy ychwanegu .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>

Elfennau testun mewnol

Steilio ar gyfer elfennau HTML5 mewnol cyffredin.

Gallwch ddefnyddio'r tag marc iuchafbwynttestun.

Mae'r llinell hon o destun i fod i gael ei thrin fel testun wedi'i ddileu.

Mae'r llinell hon o destun i fod i gael ei thrin fel un nad yw'n gywir mwyach.

Mae'r llinell hon o destun i fod i gael ei thrin fel ychwanegiad at y ddogfen.

Bydd y llinell hon o destun yn rendro fel y'i tanlinellir

Mae'r llinell hon o destun i fod i gael ei thrin fel print mân.

Mae'r llinell hon wedi'i rendro fel testun trwm.

Mae'r llinell hon wedi'i rendro fel testun italig.

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

.markac .smallmae dosbarthiadau hefyd ar gael i ddefnyddio'r un arddulliau ag <mark>a <small>thra'n osgoi unrhyw oblygiadau semantig diangen a ddaw yn sgil y tagiau.

Er na ddangosir uchod, mae croeso i chi ddefnyddio <b>ac <i>yn HTML5. <b>i fod i amlygu geiriau neu ymadroddion heb gyfleu pwysigrwydd ychwanegol tra ei fod <i>yn bennaf ar gyfer llais, termau technegol, ac ati.

Cyfleustodau testun

Newid aliniad testun, trawsnewid, arddull, pwysau a lliw gyda'n cyfleustodau testun a lliw .

Byrfoddau

Gweithrediad arddulliedig o <abbr>elfen HTML ar gyfer byrfoddau ac acronymau i ddangos y fersiwn estynedig ar hofran. Mae gan dalfyriadau danlinelliad diofyn ac maent yn cael cyrchwr cymorth i ddarparu cyd-destun ychwanegol ar hofran ac i ddefnyddwyr technolegau cynorthwyol.

Ychwanegu .initialismat dalfyriad ar gyfer maint ffont ychydig yn llai.

attr

HTML

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

Blockquotes

Am ddyfynnu blociau o gynnwys o ffynhonnell arall yn eich dogfen. Lapiwch <blockquote class="blockquote">unrhyw HTML fel y dyfyniad.

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

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

Enwi ffynhonnell

Ychwanegu ar <footer class="blockquote-footer">gyfer adnabod y ffynhonnell. Lapiwch enw'r gwaith ffynhonnell yn <cite>.

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

Rhywun enwog yn Source Title 
<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>

Aliniad

Defnyddiwch gyfleustodau testun yn ôl yr angen i newid aliniad eich blockquote.

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

Rhywun enwog yn Source Title 
<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. Cyfanrif posuere erat ante.

Rhywun enwog yn Source Title 
<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>

Rhestrau

Unstyled

Tynnwch y rhagosodiad list-stylea'r ymyl chwith ar eitemau rhestr (plant ar unwaith yn unig). Mae hyn ond yn berthnasol i eitemau rhestr plant uniongyrchol , sy'n golygu y bydd angen i chi ychwanegu'r dosbarth ar gyfer unrhyw restrau nythu hefyd.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Cyfanrif molestie lorem yn massa
  • Facilitis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttititor 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>

Mewn llinell

Tynnwch fwledi rhestr a rhowch ychydig o oleuni margingyda chyfuniad o ddau ddosbarth, .list-inlinea .list-inline-item.

  • Ystyr geiriau: Lorem ipsum
  • Phasellus iaculis
  • Ystyr geiriau: 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>

Aliniad rhestr disgrifiad

Alinio termau a disgrifiadau yn llorweddol trwy ddefnyddio dosbarthiadau rhagddiffiniedig ein system grid (neu gymysgeddau semantig). Am delerau hirach, gallwch ychwanegu .text-truncatedosbarth yn ddewisol er mwyn blaendorri'r testun ag elipsis.

Rhestri disgrifiadau
Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.
Euismod

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

Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.

Porthladd Malesuada
Etiam porta sem malesuada magna mollis euismod.
Mae term cwtogi yn cael ei gwtogi
Fusce dapibus, tellus ac cursus comodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nythu
Rhestr diffiniad nythu
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>

Teipograffeg ymatebol

Mae teipograffeg ymatebol yn cyfeirio at raddio testun a chydrannau trwy addasu'r elfennau gwraidd o font-sizefewn cyfres o ymholiadau cyfryngau. Nid yw Bootstrap yn gwneud hyn i chi, ond mae'n weddol hawdd ei ychwanegu os oes ei angen arnoch.

Dyma enghraifft ohono yn ymarferol. Dewiswch pa bynnag font-sizeymholiadau a chyfryngau y dymunwch.

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