Source

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 ruigsinneach, bidh sinn a’ gabhail ri 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 a’ cheangail chruinneil tro $link-coloragus cuir an gnìomh fo-cheanglaichean ceangail a-mhàin air :hover.
  • 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. Cumaibh cuimhne nach eil na cinn sin freagairteach gu bunaiteach, ach tha e comasach meudan cruth-clò freagairteach a chomasachadh .

Taisbeanadh 1
Taisbeanadh 2
Taisbeanadh 3
Taisbeanadh 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>

Stiùir

Dèan paragraf a’ seasamh a-mach le bhith a’ cur .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 mhìneachadh

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>

.markagus .smalltha clasaichean rim faighinn cuideachd gus na h-aon stoidhlichean a chuir an sàs <mark>agus <small>fhad ‘s a tha iad a’ seachnadh buaidh semantach gun iarraidh a bheireadh na tagaichean.

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 teignigeach, msaa.

Goireasan teacsa

Atharraich co-thaobhadh teacsa, cruth-atharraich, stoidhle, cuideam, 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Ag ainmeachadh stòr

Cuir a-steach <footer class="blockquote-footer">airson an stòr aithneachadh. Còmhdaich ainm an tùs obrach ann am <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

Cuideigin ainmeil ann an Source Title
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Co-thaobhadh

Cleachd goireasan teacsa mar a dh’ fheumar gus co-thaobhadh do blockquote atharrachadh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

Cuideigin ainmeil ann an Source Title
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

Cuideigin ainmeil ann an Source Title
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem aig massa
  • Facilisis ann am pretium nisl aliquet
  • Gun a bhith a 'dol a-mach à bith
    • Phasellus iaculis saor an asgaidh
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat aig
  • Faucibus porta lacus fringilla no
  • Aenean sit amet erat nunc
  • Luchdaich a-nuas porttitor lorem
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</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.

  • Ipsum
  • Phasellus iaculis
  • Gu h-obann
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.
Eusmod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida agus eget metus.

Port-adhair Malesuada
Etiam porta sem malesuada magna mollis euismod.
Tha teirm gearraidh air a ghearradh sìos
Fusce dapibus, tellus ac cursus comodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
A' neadachadh
Liosta de mhìneachaidhean air an neadachadh
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Meudan cruth-clò freagairteach

Soithichean Bootstrap v4.3 leis an roghainn meudan cruth-clò freagairteach a chomasachadh, a’ leigeil le teacsa sgèile nas nàdarraiche thairis air meudan inneal is sealladh-seallaidh. Faodar RFS a chomasachadh le bhith ag atharrachadh an $enable-responsive-font-sizescaochladair Sass gu trueagus ag ath-chruinneachadh Bootstrap.

Gus taic a thoirt do RFS , bidh sinn a’ cleachdadh Sass mixin an àite ar font-sizetogalaichean àbhaisteach. Thèid meudan cruth-clò freagairteach a chur ri chèile ann an calc()gnìomhan le measgachadh de remdh'aonadan sealladh agus sealladh gus an giùlan sgèile freagairteach a chomasachadh. Gheibhear barrachd mu RFS agus an rèiteachadh aige air an stòr GitHub aige .