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-family
do 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-base
tréithe mar ár mbonn clóghrafach a chuirtear i bhfeidhm ar an<body>
. - Socraigh dath an naisc dhomhanda trí
$link-color
agus cuir béim ar nasc ar:hover
. - Bain úsáid as
$body-bg
a shocrúbackground-color
ar an<body>
(#fff
de 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-base
isteach 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>
.h1
trí .h6
ranganna 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>
.mark
agus .small
tá 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 .initialism
le 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.
<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.
<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.
<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-style
corrlach 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 margin
le meascán de dhá rang, .list-inline
agus .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-truncate
chun 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-sizes
athróg Sass a athrú go true
Bootstrap agus é a ath-thiomsú.
Chun tacú le RFS , úsáidimid Sass mixin chun ár ngnáth- font-size
airíonna a athsholáthar. Tiomsófar clómhéideanna sofhreagracha ina calc()
bhfeidhmeanna le meascán d’ rem
aonaid 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 .