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.
I gael graddfa deip fwy cynhwysol a hygyrch, rydym yn defnyddio gwraidd rhagosodedig y porwr font-size(16px fel arfer) fel y gall ymwelwyr addasu rhagosodiadau eu 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. Cofiwch nad yw'r penawdau hyn yn ymatebol yn ddiofyn, ond mae'n bosibl galluogi meintiau ffont ymatebol .

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.

Mae hwn yn baragraff arweiniol. Mae'n sefyll allan o baragraffau rheolaidd.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.

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

Enwi ffynhonnell

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

Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.

Rhywun enwog yn Source Title

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.

Rhywun enwog yn Source Title

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.

Rhywun enwog yn Source Title

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

Dyma restr.
Mae'n ymddangos yn hollol anstyled.
Yn strwythurol, mae'n rhestr o hyd.
Fodd bynnag, dim ond i elfennau plentyn uniongyrchol y mae'r arddull hon yn berthnasol.
Rhestrau nythu:
- nad ydynt yn cael eu heffeithio gan yr arddull hon
- bydd yn dal i ddangos bwled
- ac mae ganddynt ymyl chwith priodol
Gall hyn ddod yn ddefnyddiol o hyd mewn rhai sefyllfaoedd.

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

Mewn llinell

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

Mae hwn yn eitem rhestr.
Ac un arall.
Ond maen nhw'n cael eu harddangos mewn llinell.

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

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.

Tymor

Diffiniad ar gyfer y term.

A rhywfaint mwy o destun diffiniad dalfan.

Term arall

Mae'r diffiniad hwn yn fyr, felly dim paragraffau ychwanegol na dim byd.

Mae term cwtogi yn cael ei gwtogi

Gall hyn fod yn ddefnyddiol pan fo gofod yn brin. Yn ychwanegu elipsis ar y diwedd.

Nythu

Rhestr diffiniad nythu: Clywais i chi'n hoffi rhestrau diffiniad. Gadewch imi roi rhestr ddiffiniadau y tu mewn i'ch rhestr ddiffiniadau.

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

Meintiau ffontiau ymatebol

O v4.3.0, mae Bootstrap yn cludo gyda'r opsiwn i alluogi meintiau ffont ymatebol, gan ganiatáu i destun raddfa'n fwy naturiol ar draws meintiau dyfais a phorthladdoedd. Gellir galluogi RFS$enable-responsive-font-sizes trwy newid y newidyn Sass i trueBootstrap a'i ail-grynhoi.

I gefnogi RFS , rydym yn defnyddio Sass mixin i gymryd lle ein font-sizeheiddo arferol. Bydd meintiau ffontiau ymatebol yn cael eu crynhoi yn calc()swyddogaethau gyda chymysgedd o remunedau ac unedau golygfa i alluogi'r ymddygiad graddio ymatebol. Gellir dod o hyd i fwy am RFS a'i ffurfweddiad ar ei gadwrfa GitHub .