Source

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, glacaimid le 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í.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dolor. 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>

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.

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

Foinse a ainmniú

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.

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

Ailíniú

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.

Duine a bhfuil cáil air in 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. Slánuimhir posuere erat a ante.

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

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Slánuimhir molestie lorem ag massa
  • Facilisis i pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttititor sem
    • Ac tristique libero volutpat ag
  • Faucibus porta lacus fringilla nó
  • 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>

I líne

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

  • Ipsum
  • Phasellus iaculis
  • Níl ort ach
<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>

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

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

Donec id elit non mi porta gravida agus eget metus.

Porta Malesuada
Etiam porta sem malesuada magna mollis euismod.
Gearrtar téarma teasctha
Fusce dapibus, tellus ac cursus comodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Neadaithe
Liosta sainmhínithe neadaithe
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>

Clóghrafaíocht sofhreagrach

Tagraíonn clóghrafaíocht sofhreagrach do théacs agus do chomhpháirteanna a scálú go simplí trí na buneilimintí a choigeartú font-sizelaistigh de shraith ceisteanna ó na meáin. Ní dhéanann Bootstrap é seo duit, ach tá sé sách éasca é a chur leis más gá duit.

Seo sampla de go praiticiúil. Roghnaigh cibé font-sizeceisteanna agus ceisteanna ó na meáin is mian leat.

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