Clò-sgrìobhaidh
Sgrìobhainnean agus eisimpleirean airson clò-sgrìobhaidh Bootstrap, a’ toirt a-steach suidheachaidhean cruinneil, cinn, teacsa bodhaig, liostaichean, agus barrachd.
Suidhichidhean cruinne
Bidh Bootstrap a’ suidheachadh taisbeanadh cruinneil bunaiteach, clò-sgrìobhadh, agus stoidhlichean ceangail. Nuair a tha feum air barrachd smachd, thoir sùil air na clasaichean goireis teacsa .
- Cleachd cruach cruth-clò dùthchasach a thaghas an fheadhainn as fheàrr
font-family
airson gach OS agus inneal. - Airson sgèile seòrsa nas in-ghabhaltach agus nas ruigsinneach, bidh sinn a’ cleachdadh freumh bunaiteach a’ bhrobhsair
font-size
(16px mar as trice) gus an urrainn do luchd-tadhail na roghainnean brobhsair aca a ghnàthachadh mar a dh’ fheumar. - Cleachd na
$font-family-base
,$font-size-base
, agus$line-height-base
buadhan mar a tha ar bunait clò-sgrìobhaidh a 'buntainn ris an fhaidhle<body>
. - Suidhich dath ceangail cruinne tro
$link-color
. - Cleachd
$body-bg
airson suidheachadhbackground-color
air an<body>
(#fff
gu bunaiteach).
Gheibhear na stoidhlichean sin taobh a-staigh _reboot.scss
, agus tha na caochladairean cruinneil air am mìneachadh ann an _variables.scss
. Feuch an cuir thu a- $font-size-base
steach rem
.
Cinn
Tha a h-uile ceann HTML, <h1>
tro <h6>
, ri fhaighinn.
Ceann-cinnidh | eisimpleir |
---|---|
<h1></h1> |
h1. Ceann-uidhe Bootstrap |
<h2></h2> |
h2. Ceann-uidhe Bootstrap |
<h3></h3> |
h3. Ceann-uidhe Bootstrap |
<h4></h4> |
h4. Ceann-uidhe Bootstrap |
<h5></h5> |
h5. Ceann-uidhe Bootstrap |
<h6></h6> |
h6. Ceann-uidhe 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
tro .h6
chlasaichean rim faighinn cuideachd, airson nuair a tha thu airson stoidhle cruth-clò ceann-cinn a mhaidseadh ach nach urrainn dhut an eileamaid HTML co-cheangailte ris a chleachdadh.
h1. Ceann-uidhe Bootstrap
h2. Ceann-uidhe Bootstrap
h3. Ceann-uidhe Bootstrap
h4. Ceann-uidhe Bootstrap
h5. Ceann-uidhe Bootstrap
h6. Ceann-uidhe 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>
A 'gnàthachadh cinn
Cleachd na clasaichean goireis a tha air an toirt a-steach gus an teacsa cinn beag àrd-sgoile ath-chruthachadh bho Bootstrap 3.
Ceann taisbeanaidh sùbailte Le teacsa àrd-sgoile faded
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Cinn-taisbeanaidh
Tha eileamaidean cinn traidiseanta air an dealbhadh gus obrachadh nas fheàrr ann am feòil susbaint na duilleige agad. Nuair a bhios feum agad air ceann airson seasamh a-mach, smaoinich air a bhith a’ cleachdadh ceann taisbeanaidh - stoidhle cinn nas motha, beagan nas beachdail.
<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>
Tha cinn taisbeanaidh air an rèiteachadh tro $display-font-sizes
mhapa Sass agus dà chaochladair, $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;
Stiùir
Dèan paragraf a’ seasamh a-mach le bhith a’ cur .lead
.
Is e seo prìomh pharagraf. Tha e a’ seasamh a-mach bho pharagrafan àbhaisteach.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Eileamaidean teacsa in-loidhne
Stoidhle airson eileamaidean cumanta in-loidhne HTML5.
Faodaidh tu an taga comharra a chleachdadh gusoilleireachadhteacs.
Tha còir aig an loidhne teacsa seo a bhith air a làimhseachadh mar theacsa air a dhubhadh às.
Thathas an dùil gun tèid dèiligeadh ris an loidhne teacsa seo mar rud nach eil ceart tuilleadh.
Thathas an dùil gun tèid dèiligeadh ris an loidhne teacsa seo mar chur ris an sgrìobhainn.
Bidh an loidhne teacsa seo a’ nochdadh mar a chaidh a shoilleireachadh.
Tha còir aig an loidhne teacsa seo a bhith air a làimhseachadh mar chlò-bhualadh grinn.
Tha an loidhne seo air a thoirt seachad mar theacsa trom.
Chaidh an loidhne seo a thoirt seachad mar theacsa eadailteach.
<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>
Thoir an aire gum bu chòir na tagaichean sin a chleachdadh airson adhbhar semantach:
<mark>
a’ riochdachadh teacsa a tha air a chomharrachadh no air a chomharrachadh airson adhbharan fiosrachaidh no comharrachaidh.<small>
a’ riochdachadh taobh-bheachdan agus clò-bhualadh beag, leithid dlighe-sgrìobhaidh agus teacsa laghail.<s>
a’ riochdachadh eileamaid nach eil buntainneach tuilleadh no nach eil ceart tuilleadh.<u>
a’ riochdachadh rèis de theacsa in-loidhne a bu chòir a thoirt seachad ann an dòigh a tha a’ nochdadh gu bheil nota neo-theacsach aige.
Ma tha thu airson an teacsa agad a stoidhleachadh, bu chòir dhut na clasaichean a leanas a chleachdadh nan àite:
.mark
cuiridh e na h-aon stoidhlichean ri<mark>
..small
cuiridh e na h-aon stoidhlichean ri<small>
..text-decoration-underline
cuiridh e na h-aon stoidhlichean ri<u>
..text-decoration-line-through
cuiridh e na h-aon stoidhlichean ri<s>
.
Ged nach eil e air a shealltainn gu h-àrd, faodaidh tu a chleachdadh <b>
agus <i>
ann an HTML5. <b>
thathar an dùil faclan no abairtean a shoilleireachadh gun a bhith a’ toirt cuideam a bharrachd, fhad ‘s <i>
a tha e gu ìre mhòr airson guth, teirmean teicnigeach, msaa.
Goireasan teacsa
Atharraich co-thaobhadh teacsa, cruth-atharraich, stoidhle, cuideam, àirde loidhne, sgeadachadh agus dath leis na goireasan teacsa agus na goireasan dath againn .
Giorrachaidhean
Gnìomhachadh stoidhle de eileamaid HTML <abbr>
airson giorrachaidhean agus geàrr-chunntasan gus an dreach leudaichte air hover a shealltainn. Tha fo-loidhne bunaiteach aig giorrachaidhean agus gheibh iad cursair cuideachaidh gus co-theacs a bharrachd a thoirt seachad air hover agus do luchd-cleachdaidh teicneòlasan cuideachaidh.
Cuir .initialism
ri giorrachadh airson cruth-clò beagan nas lugha.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquotes
Airson a bhith a’ togail bhlocaichean de shusbaint bho thùs eile san sgrìobhainn agad. Còmhdaich <blockquote class="blockquote">
timcheall HTML sam bith mar an cuòt.
Aithris ainmeil, ann an eileamaid blockquote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Ag ainmeachadh stòr
Tha an t-sònrachadh HTML ag iarraidh gun tèid buadhachadh blockquote a chuir taobh a-muigh an fhaidhle <blockquote>
. Nuair a bhios tu a’ toirt seachad brìgh, cuir a-steach do <blockquote>
a <figure>
agus cleachd <figcaption>
eileamaid ìre bloc (me, <p>
) leis a’ .blockquote-footer
chlas. Dèan cinnteach gun cuir thu a-steach ainm an stòr obrach <cite>
cuideachd.
<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>
Co-thaobhadh
Cleachd goireasan teacsa mar a dh’ fheumar gus co-thaobhadh do blockquote atharrachadh.
<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>
Liostaichean
Gun stoidhle
list-style
Thoir air falbh an iomall bunaiteach agus clì air nithean liosta (clann sa bhad a-mhàin). Chan eil seo a’ buntainn ach ri nithean liosta chloinne sa bhad , a’ ciallachadh gum feum thu an clas a chur ris airson liostaichean neadachaidh sam bith cuideachd.
- Seo liosta.
- Tha e a’ nochdadh gu tur gun samhail.
- Gu structarail, tha e fhathast na liosta.
- Ach, chan eil an stoidhle seo a 'buntainn ach ri eileamaidean leanabh sa bhad.
- Liostaichean neadachaidh:
- chan eil buaidh aig an stoidhle seo orra
- seallaidh e peileir fhathast
- agus tha iomall clì iomchaidh aca
- Dh’ fhaodadh seo a thighinn gu feum fhathast ann an cuid de shuidheachaidhean.
<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>
In-loidhne
Thoir air falbh peilearan liosta agus cuir beagan solas margin
an sàs le measgachadh de dhà chlas, .list-inline
agus .list-inline-item
.
- Is e seo cuspair liosta.
- Agus fear eile.
- Ach tha iad air an taisbeanadh ann an loidhne.
<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>
Co-thaobhadh liosta tuairisgeul
Co-thaobhadh teirmean agus tuairisgeulan gu còmhnard le bhith a’ cleachdadh chlasaichean ro-mhìnichte an t-siostam clèithe againn (no measgachadh semantach). Airson teirmean nas fhaide, faodaidh tu .text-truncate
clas a chur ris gu roghnach gus an teacsa a ghearradh le ellipsis.
- Liostaichean tuairisgeul
- Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.
- Teirm
-
Mìneachadh airson an teirm.
Agus beagan a bharrachd teacsa mìneachaidh neach-àite.
- Teirm eile
- Tha am mìneachadh seo goirid, mar sin chan eil paragrafan a bharrachd no dad ann.
- Tha teirm gearraidh air a ghearradh sìos
- Faodaidh seo a bhith feumail nuair a tha àite teann. A 'cur ellipsis ris aig an deireadh.
- A' neadachadh
-
- Liosta de mhìneachaidhean air an neadachadh
- Chuala mi gur toil leat liostaichean mìneachaidh. Leig leam liosta mìneachaidh a chuir am broinn an liosta mhìneachaidh agad.
<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>
Meudan cruth-clò freagairteach
Ann am Bootstrap 5, tha sinn air meudan cruth-clò freagairteach a chomasachadh gu bunaiteach, a’ leigeil le teacsa sgèile nas nàdarraiche thairis air meudan inneal is sealladh-seallaidh. Thoir sùil air duilleag RFS gus faighinn a-mach mar a tha seo ag obair.
Sass
Caochlaidhean
Tha cuid de chaochladairean sònraichte aig cinn airson meud agus farsaingeachd.
$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;
Tha caochladairean sònraichte aig na h-eileamaidean clò-sgrìobhaidh measgaichte a tha air an còmhdach an seo agus ann an Reboot .
$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;
Measgachadh
Chan eil measgachadh sònraichte ann airson clò-sgrìobhadh, ach bidh Bootstrap a’ cleachdadh Responsive Font Sizing (RFS) .