Rach gu prìomh shusbaint Air adhart gu seòladh docs
in English

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

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

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.

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

  • .markcuiridh e na h-aon stoidhlichean ri <mark>.
  • .smallcuiridh e na h-aon stoidhlichean ri <small>.
  • .text-decoration-underlinecuiridh e na h-aon stoidhlichean ri <u>.
  • .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 <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 .initialismri 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-footerchlas. Dèan cinnteach gun cuir thu a-steach ainm an stòr obrach <cite>cuideachd.

Aithris ainmeil, ann an eileamaid blockquote.

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

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

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