Clò-sgrìobhaidh

Sgrìobhainnean agus eisimpleirean airson clò-sgrìobhaidh Bootstrap, a’ toirt a-steach suidheachaidhean cruinneil, cinn, teacsa bodhaig, liostaichean, agus barrachd.

Air an duilleig seo

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-familyairson 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-basebuadhan mar a tha ar bunait clò-sgrìobhaidh a 'buntainn ris an fhaidhle <body>.
Suidhich dath ceangail cruinne tro $link-color.
Cleachd $body-bgairson suidheachadh background-colorair an <body>( #fffgu 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-basesteach 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>

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

html

<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

html

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

Taisbeanadh 1

Taisbeanadh 2

Taisbeanadh 3

Taisbeanadh 4

Taisbeanadh 5

Taisbeanadh 6

<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-sizesmhapa Sass agus dà chaochladair, $display-font-weightagus $display-line-height.

Faodar cinn taisbeanaidh a ghnàthachadh tro dhà chaochladair, $display-font-familyagus $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$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.

html

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

html

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

a’ riochdachadh teacsa a tha air a chomharrachadh no air a chomharrachadh airson adhbharan fiosrachaidh no comharrachaidh.
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.
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:

.markcuiridh e na h-aon stoidhlichean ri .
.smallcuiridh e na h-aon stoidhlichean ri .
.text-decoration-underlinecuiridh e na h-aon stoidhlichean ri .
.text-decoration-line-throughcuiridh e na h-aon stoidhlichean ri <s>.

Ged nach eil e air a shealltainn gu h-àrd, faodaidh tu a chleachdadh agus ann an HTML5. thathar an dùil faclan no abairtean a shoilleireachadh gun a bhith a’ toirt cuideam a bharrachd, fhad ‘s 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 .initialismri giorrachadh airson cruth-clò beagan nas lugha.

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes

Airson blocaichean de shusbaint a thogail 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.

html

<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, ) leis a’ .blockquote-footerchlas. Dèan cinnteach gun cuir thu a-steach ainm an stòr obrach <cite>cuideachd.

Aithris ainmeil, ann an eileamaid blockquote.

html

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

Aithris ainmeil, ann an eileamaid blockquote.

html

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

Aithris ainmeil, ann an eileamaid blockquote.

html

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

html

<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 marginan sàs le measgachadh de dhà chlas, .list-inlineagus .list-inline-item.

Is e seo cuspair liosta.
Agus fear eile.
Ach tha iad air an taisbeanadh ann an loidhne.

html

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

html

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

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Measgachadh

Chan eil measgachadh sònraichte ann airson clò-sgrìobhadh, ach bidh Bootstrap a’ cleachdadh Responsive Font Sizing (RFS) .