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.

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>

Clò-sgrìobhaidh freagairteach

Tha clò-sgrìobhaidh freagairteach a’ toirt iomradh air sgèileadh teacsa agus co-phàirtean le bhith dìreach ag atharrachadh bun-eileamaidean taobh a- font-sizestaigh sreath de cheistean meadhanan. Cha dèan Bootstrap seo dhut, ach tha e gu math furasta a chuir ris ma tha feum agad air.

Seo eisimpleir dheth ann an cleachdadh. Tagh ge bith dè font-sizena ceistean meadhanan is meadhanan a tha thu ag iarraidh.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}