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.

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-coloragus cuir béim ar nasc ar :hover.
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

<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

<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í. Cuimhnigh nach bhfuil na ceannteidil seo sofhreagrach de réir réamhshocraithe, ach is féidir clómhéideanna sofhreagracha a chumasú .

Taispeáin 1

Taispeáin 2

Taispeáin 3

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

Luaidhe

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

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

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

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

.markagus .smalltá ranganna ar fáil freisin chun na stíleanna céanna a chur i bhfeidhm <mark>agus <small>a sheachnódh aon impleachtaí séimeantacha nach dteastaíonn ó na clibeanna.

Cé nach bhfuil sé léirithe thuas, ná bíodh drogall ort é a úsáid <b>agus <i>i HTML5. <b>Tá sé i gceist focail nó frásaí a aibhsiú gan tábhacht bhreise a chur in iúl agus <i>é don chuid is mó do ghuthú, téarmaí teicniúla, etc.

Fóntais téacs

Athraigh ailíniú téacs, claochlú, stíl, meáchan, 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

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

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

Foinse a ainmniú

Cuir <footer class="blockquote-footer">leis chun an fhoinse a shainaithint. Wrap ainm an tsaothair foinse i <cite>.

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

Duine a bhfuil cáil air in 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>

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.

Duine a bhfuil cáil air in 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>

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

Duine a bhfuil cáil air in 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>

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.

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

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

<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

Ó v4.3.0, tá an rogha ag Bootstrap clómhéideanna sofhreagracha a chumasú, rud a ligeann do théacs scála níos nádúrtha a dhéanamh thar mhéideanna gléasanna agus amhairc. Is féidir RFS a chumasú tríd an $enable-responsive-font-sizesathróg Sass a athrú go trueBootstrap agus é a ath-thiomsú.

Chun tacú le RFS , úsáidimid Sass mixin chun ár ngnáth- font-sizeairíonna a athsholáthar. Tiomsófar clómhéideanna sofhreagracha ina calc()bhfeidhmeanna le meascán d’ remaonaid agus amharcchláir chun iompar freagrúil scálaithe a chumasú. Is féidir tuilleadh a fháil faoi RFS agus a chumraíocht ar a stór GitHub .