in English

Clóghrafaíocht

Doiciméadú agus samplaí le haghaidh clóghrafaíocht Bootstrap, lena n-áirítear socruithe domhanda, ceannteidil, téacs coirp, liostaí agus go leor eile.

Ar an leathanach seo

Socruithe domhanda

Socraíonn Bootstrap bunstíleanna taispeána domhanda, clóghrafaíochta agus naisc. Nuair a bhíonn gá le níos mó smachta, seiceáil na ranganna fóntais téacs .

Bain úsáid as cruach cló dúchais a roghnaíonn an ceann is fearr font-familydo gach OS agus gléas.
Le haghaidh cineálscála níos cuimsithí agus níos inrochtana, úsáidimid fréamh réamhshocraithe an bhrabhsálaí font-size(16px go hiondúil) ionas gur féidir le cuairteoirí a réamhshocruithe brabhsálaí a shaincheapadh de réir mar is gá.
Bain úsáid as an $font-family-base, $font-size-base, agus $line-height-basetréithe mar ár mbonn clóghrafach a chuirtear i bhfeidhm ar an <body>.
Socraigh dath an naisc dhomhanda trí $link-color.
Bain úsáid as $body-bga shocrú background-colorar an <body>( #fffde réir réamhshocraithe ).

Is féidir na stíleanna seo a fháil laistigh de _reboot.scss, agus sainmhínítear na hathróga domhanda i _variables.scss. Bí cinnte socrú $font-size-baseisteach rem.

Ceannteidil

Tá gach ceannteideal HTML, <h1>trí <h6>, ar fáil.

Ceannteideal	Sampla
`<h1></h1>`	h1. Ceannteideal Bootstrap
`<h2></h2>`	h2. Ceannteideal Bootstrap
`<h3></h3>`	h3. Ceannteideal Bootstrap
`<h4></h4>`	h4. Ceannteideal Bootstrap
`<h5></h5>`	h5. Ceannteideal Bootstrap
`<h6></h6>`	h6. Ceannteideal 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>

.h1trí .h6ranganna ar fáil freisin, le haghaidh nuair is mian leat a mheaitseáil le stíl cló ceannteidil ach nach féidir leat úsáid a bhaint as an eilimint HTML gaolmhar.

h1. Ceannteideal Bootstrap

h2. Ceannteideal Bootstrap

h3. Ceannteideal Bootstrap

h4. Ceannteideal Bootstrap

h5. Ceannteideal Bootstrap

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

Ceannteidil a shaincheapadh

Bain úsáid as na ranganna fóntais atá san áireamh chun an téacs ceannteidil beag tánaisteach ó Bootstrap 3 a athchruthú.

Ceannteideal taispeána mhaisiúil Le téacs tánaisteach faded

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Taispeáin ceannteidil

Tá na heilimintí ceannteidil traidisiúnta deartha le go n-oibreoidh siad ar an mbealach is fearr maidir le hábhar do leathanaigh. Nuair a bheidh ceannteideal uait le seasamh amach, smaoinigh ar cheannteideal taispeána a úsáid — stíl ceannteidil níos mó agus níos tuairimí.

Taispeáin 1

Taispeáin 2

Taispeáin 3

Taispeáin 4

Taispeáint 5

Taispeáint 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>

Déantar ceannteidil taispeána a chumrú trí $display-font-sizesléarscáil Sass agus dhá athróg, $display-font-weightagus $display-line-height.

Is féidir ceannteidil taispeána a shaincheapadh trí dhá athróg, $display-font-familyagus $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;

Luaidhe

Déan alt seasamh amach trí chur leis .lead.

Is mír luaidhe é seo. Seasann sé amach ó ailt rialta.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Eilimintí téacs inlíne

Stíleáil le haghaidh eilimintí coitianta inlíne HTML5.

Is féidir leat an chlib marc a úsáid chunaird a tharraingttéacs.

~~Tá sé i gceist go ndéileálfaí leis an líne téacs seo mar théacs scriosta.~~

~~Tá sé i gceist go ndéileálfar leis an líne téacs seo mar rud nach bhfuil cruinn a thuilleadh.~~

Tá sé i gceist go ndéileálfaí leis an líne téacs seo mar bhreis ar an doiciméad.

Déanfaidh an líne seo téacs mar a bhfuil líne faoi.

Tá sé i gceist go ndéileálfaí leis an líne téacs seo mar phriontáil mhín.

Rinneadh an líne seo mar théacs trom.

Rinneadh an líne seo mar théacs iodálach.

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>

Tabhair faoi deara gur chóir na clibeanna sin a úsáid chun críche séimeantach:

is ionann é agus téacs atá marcáilte nó aibhsithe chun críocha tagartha nó nodaireachta.
seasann taobh-ráitis agus cló beag, cosúil le cóipcheart agus téacs dlíthiúil.
<s>is ionann é agus eilimint nach bhfuil ábhartha a thuilleadh nó nach bhfuil cruinn a thuilleadh.
is ionann é agus réise téacs inlíne ar cheart é a rindreáil ar bhealach a thabharfadh le fios go bhfuil anótáil neamhthéacsúil aige.

Más mian leat do théacs a stíl, ba cheart duit na ranganna seo a leanas a úsáid ina ionad sin:

.markbeidh feidhm ag na stíleanna céanna le .
.smallbeidh feidhm ag na stíleanna céanna le .
.text-decoration-underlinebeidh feidhm ag na stíleanna céanna le .
.text-decoration-line-throughbeidh feidhm ag na stíleanna céanna le <s>.

Cé nach bhfuil sé léirithe thuas, ná bíodh drogall ort é a úsáid agus i HTML5. Tá sé i gceist béim a chur ar fhocail nó ar fhrásaí gan tábhacht bhreise a chur in iúl, cé go mbaineann sé den chuid is mó le guth, téarmaí teicniúla, etc.

Fóntais téacs

Athraigh ailíniú téacs, claochlú, stíl, meáchan, airde líne, maisiú agus dath lenár bhfóntais téacs agus ár bhfóntais datha .

Giorrúcháin

Cur i bhfeidhm stílithe <abbr>eilimint HTML do ghiorrúcháin agus acrainmneacha chun an leagan leathnaithe ar ainlíon a thaispeáint. Tá béim réamhshocraithe ar ghiorrúcháin agus faigh cúrsóir cabhrach chun comhthéacs breise a sholáthar maidir le hover agus d’úsáideoirí teicneolaíochtaí cúnta.

Cuir .initialismle giorrúchán le haghaidh clómhéid atá beagán níos lú.

attr

HTML

html

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

Blockquotes

Chun bloic ábhar a lua ó fhoinse eile laistigh de do dhoiciméad. Wrap <blockquote class="blockquote">thart ar aon HTML mar an ceanglófar.

Sleachta mór le rá, atá in eilimint bhlocquote.

html

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

Foinse a ainmniú

Éilíonn an tsonraíocht HTML go gcuirfí sannadh blocquote taobh amuigh den <blockquote>. Agus sannadh á sholáthar agat, tim <blockquote>isteach do a <figure>agus bain úsáid as <figcaption>eilimint bhlocleibhéil (m.sh., ) leis an .blockquote-footerrang. Bí cinnte ainm na foinse oibre a chuimilt isteach <cite>freisin.

Sleachta mór le rá, atá in eilimint bhlocquote.

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>

Ailíniú

Úsáid fóntais téacs de réir mar is gá chun ailíniú do bhlocchuóta a athrú.

Sleachta mór le rá, atá in eilimint bhlocquote.

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>

Sleachta mór le rá, atá in eilimint bhlocquote.

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>

Liostaí

Gan stíl

Bain an list-stylecorrlach réamhshocraithe agus clé ar mhíreanna liosta (leanaí láithreacha amháin). Ní bhaineann sé seo ach le míreanna liostaí leanaí láithreacha , rud a chiallaíonn go mbeidh ort an rang a chur le haon liostaí neadaithe freisin.

Is liosta é seo.
Dealraíonn sé go hiomlán unstyled.
Go struchtúrach, tá sé fós ina liosta.
Mar sin féin, ní bhaineann an stíl seo ach le heilimintí linbh láithreach.
Liostaí neadaithe:
- nach bhfuil tionchar ag an stíl seo
- taispeánfaidh piléar fós
- agus imeall clé cuí a bheith acu
Seans go mbeidh sé seo áisiúil i gcásanna áirithe.

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>

I líne

Bain urchair an liosta agus cuir roinnt solais i bhfeidhm marginle meascán de dhá rang, .list-inlineagus .list-inline-item.

Is mír liosta é seo.
Agus ceann eile.
Ach tá siad ar taispeáint inlíne.

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>

Ailíniú liosta tuairisce

Déan téarmaí agus tuairiscí a ailíniú go cothrománach trí úsáid a bhaint as aicmí réamhshainithe ár gcóras eangaí (nó meascáin shéimeantacha). Ar mhaithe le téarmaí níos faide, is féidir leat rang a chur leis go roghnach .text-truncatechun an téacs a cheansú le héilips.

Liostaí cur síos

Tá liosta tuairisce foirfe chun téarmaí a shainiú.

Téarma

Sainmhíniú don téarma.

Agus roinnt téacs sainmhínithe áitshealbhóir níos mó.

Téarma eile

Tá an sainmhíniú seo gearr, mar sin níl aon mhíreanna breise nó rud ar bith.

Gearrtar téarma teasctha

Is féidir é seo a bheith úsáideach nuair a bhíonn spás daingean. Cuireann sé éilips ag an deireadh.

Neadaithe

Liosta sainmhínithe neadaithe: Chuala mé gur maith leat liostaí sainmhínithe. Lig dom liosta sainmhínithe a chur taobh istigh de do liosta sainmhínithe.

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>

Clómhéideanna sofhreagracha

In Bootstrap 5, chuireamar ar chumas clómhéideanna sofhreagracha de réir réamhshocraithe, rud a ligeann do théacs scála níos nádúrtha a dhéanamh thar mhéideanna gléasanna agus amhairc. Breathnaigh ar leathanach an RFS le fáil amach conas a oibríonn sé seo.

Sass

Athróga

Tá roinnt athróg tiomnaithe ag ceannteidil maidir le méid agus spásáil.

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

Tá athróga tiomnaithe ag eilimintí clóghrafaíochta ilghnéitheacha atá clúdaithe anseo agus in Atosaigh .

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

Meascáin

Níl aon mheascáin tiomnaithe don chlóghrafaíocht, ach úsáideann Bootstrap Clómhéid Sofhreagrach (RFS) .