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
. - 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í.
<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-sizes
léarscáil Sass agus dhá athróg, $display-font-weight
agus $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$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.
<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>
Tabhair faoi deara gur chóir na clibeanna sin a úsáid chun críche séimeantach:
<mark>
is ionann é agus téacs atá marcáilte nó aibhsithe chun críocha tagartha nó nodaireachta.<small>
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.<u>
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:
.mark
beidh feidhm ag na stíleanna céanna le<mark>
..small
beidh feidhm ag na stíleanna céanna le<small>
..text-decoration-underline
beidh feidhm ag na stíleanna céanna le<u>
..text-decoration-line-through
beidh feidhm ag na stíleanna céanna le<s>
.
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 béim a chur ar fhocail nó ar fhrásaí gan tábhacht bhreise a chur in iúl, cé <i>
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 .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>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., <p>
) leis an .blockquote-footer
rang. Bí cinnte ainm na foinse oibre a chuimilt isteach <cite>
freisin.
<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ú.
<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>
<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-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 cur síos
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
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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Meascáin
Níl aon mheascáin tiomnaithe don chlóghrafaíocht, ach úsáideann Bootstrap Clómhéid Sofhreagrach (RFS) .