Teipograffeg

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

Ar y dudalen hon

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

html

<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

html

<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

Arddangosfa 5

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

Mae penawdau arddangos yn cael eu ffurfweddu trwy'r $display-font-sizesmap Sass a dau newidyn, $display-font-weighta $display-line-height.

Gellir addasu penawdau arddangos trwy ddau newidyn, $display-font-familya $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Arwain

Gwnewch i baragraff sefyll allan trwy ychwanegu .lead.

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

html

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

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.

html

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

Byddwch yn ofalus y dylid defnyddio'r tagiau hynny at ddiben semantig:

cynrychioli testun sydd wedi'i farcio neu ei amlygu at ddibenion cyfeirio neu nodiant.
cynrychioli ochr-sylwadau a phrint mân, fel hawlfraint a thestun cyfreithiol.
<s>cynrychioli elfen nad yw bellach yn berthnasol neu ddim yn gywir mwyach.
cynrychioli rhychwant o destun mewnol y dylid ei rendro mewn ffordd sy'n dangos bod ganddo anodiad di-destun.

Os ydych chi am arddullio'ch testun, dylech ddefnyddio'r dosbarthiadau canlynol yn lle hynny:

.markyn cymhwyso'r un arddulliau â .
.smallyn cymhwyso'r un arddulliau â .
.text-decoration-underlineyn cymhwyso'r un arddulliau â .
.text-decoration-line-throughyn cymhwyso'r un arddulliau â <s>.

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

Cyfleustodau testun

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

Byrfoddau

Gweithredu HTML's mewn arddull<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

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.

html

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

Enwi ffynhonnell

Mae'r fanyleb HTML yn ei gwneud yn ofynnol i briodoli blockquote gael ei osod y tu allan i'r <blockquote>. Wrth roi priodoliad, amlapiwch eich <blockquote>mewn <figure>a defnyddiwch <figcaption>elfen lefel bloc (ee, ) gyda'r .blockquote-footerdosbarth. Gwnewch yn siŵr eich bod chi'n lapio enw'r ffynhonnell waith <cite>hefyd.

Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.

html

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

Aliniad

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

Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.

html

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

Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.

html

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

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.

html

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

html

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

html

<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

Yn Bootstrap 5, rydym wedi galluogi meintiau ffont ymatebol yn ddiofyn, gan ganiatáu i destun raddfa'n fwy naturiol ar draws meintiau dyfais a phorthladdoedd. Edrychwch ar dudalen RFS i ddarganfod sut mae hyn yn gweithio.

Sass

Newidynnau

Mae gan benawdau rai newidynnau penodol ar gyfer maint a bylchau.

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

Mae gan elfennau teipograffeg amrywiol a gwmpesir yma ac yn Reboot newidynnau pwrpasol hefyd.

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

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

cymysgeddau

Nid oes unrhyw gymysgeddau pwrpasol ar gyfer teipograffeg, ond mae Bootstrap yn defnyddio Maint Ffontiau Ymatebol (RFS) .