Source

Kuputuhi

Ko nga tuhinga me nga tauira mo te momotuhi Bootstrap, tae atu ki nga tautuhinga o te ao, nga pane, te tuhinga tinana, nga rarangi, me etahi atu.

Tautuhinga o te ao

Ka whakatakotohia e Bootstrap nga whakaaturanga puta noa i te ao, te momotuhi, me nga momo hono. Ina hiahiatia kia nui ake te mana whakahaere, tirohia nga karaehe whaipainga tuhinga .

Whakamahia he puranga momotuhi taketake e whiriwhiri ana i te mea pai font-familymo ia OS me ia taputapu.
Mo te momo tauine whakauru me te waatea, ka whakaaro matou ko te putake taunoa o te pūtirotiro font-size(te nuinga o te 16px) kia taea ai e nga manuhiri te whakarite i o ratou taunoa pūtirotiro ina hiahiatia.
Whakamahia te $font-family-base, $font-size-base, me $line-height-basenga huanga kia rite ki ta matou turanga tuhi ki te <body>.
Tautuhia te tae hono o te ao ma $link-colorte whakamahi i nga tohu hono ki runga anake :hover.
Whakamahia $body-bghei tautuhi background-colori te <body>( #fffma te taunoa).

Ka kitea enei momo i roto _reboot.scss, ka tautuhia nga taurangi o te ao ki roto _variables.scss. Me whakarite ki te $font-size-basewhakauru rem.

Nga Upoko

Ko nga pane HTML katoa, <h1>ma te <h6>, e waatea ana.

Upoko	Tauira
`<h1></h1>`	h1. Upoko Bootstrap
`<h2></h2>`	h2. Upoko Bootstrap
`<h3></h3>`	h3. Upoko Bootstrap
`<h4></h4>`	h4. Upoko Bootstrap
`<h5></h5>`	h5. Upoko Bootstrap
`<h6></h6>`	h6. Upoko 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>

.h1kei .h6te waatea ano nga karaehe, ina hiahia koe ki te whakarite i te momo momotuhi o te upoko engari kaore e taea te whakamahi i te huānga HTML e hono ana.

h1. Upoko Bootstrap

h2. Upoko Bootstrap

h3. Upoko Bootstrap

h4. Upoko Bootstrap

h5. Upoko Bootstrap

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

Whakaritea nga pane

Whakamahia nga karaehe whaipainga kua whakauruhia ki te hanga ano i te tuhinga pane iti tuarua mai i Bootstrap 3.

Pane whakaatu rerehua Me te kupu tuarua kua memenge

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Whakaatu pane

Kua hoahoatia nga huānga pane tuku iho kia pai ake te mahi i roto i te kiko o to ihirangi whaarangi. Ki te hiahia koe ki tetahi pane kia puta ake, whakaaro ki te whakamahi i te pane whakaatu —he ahua nui ake, he ahua ake te whakaaro. Kia maumahara karekau enei pane i te whakautu taunoa, engari ka taea te whakaahei i nga rahi momotuhi whakautu .

Whakaatu 1

Whakaatu 2

Whakaatu 3

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

Arataki

Whakanuia tetahi kowae ma te taapiri .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, he kore noa.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Huānga kuputuhi rōraina

Te whakaahua mo nga huānga HTML5 rōraina noa.

Ka taea e koe te whakamahi i te tohu tohu kimiramirakuputuhi.

~~Ko te tikanga o tenei rarangi kuputuhi ka kiia he tuhinga kua mukua.~~

~~Ko te tikanga o tenei rarangi o te kuputuhi ka kiia kua kore e tika.~~

Ko te tikanga o tenei rarangi tuhinga hei taapiri ki te tuhinga.

Ko tenei rarangi o te kuputuhi ka huri hei tararo

Ko te tikanga o tenei rarangi o te kuputuhi kia rite ki te tuhi pai.

Ko tenei rarangi ka puta hei kuputuhi maia.

Ko tenei rarangi ka huri hei kuputuhi whakatītaha.

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

.markkei te .smallwatea ano hoki nga karaehe ki te whakamahi i nga momo ahua rite <mark>me <small>te karo i nga huanga kupu kore e hiahiatia ka kawea mai e nga tohu.

Ahakoa kaore i whakaatuhia i runga ake nei, kaua e pai ki te whakamahi <b>me <i>te HTML5. <b>Ko te tikanga ki te whakanui i nga kupu, kinga kianga ranei me te kore e kawe i te hiranga atu i <i>te nuinga o te waa mo te reo, kupu hangarau, aha atu.

Nga taputapu kuputuhi

Hurihia te tiaroaro o te kupu, te huri, te ahua, te taumaha me te tae me o maatau taputapu tuhinga me nga taputapu tae .

Whakapoto

Whakamahinga whakaahua o te huānga HTML <abbr>mo nga whakapoto me nga acronyms hei whakaatu i te putanga whakawhanui ki te whakaparo. He tararo taunoa nga whakapototanga ka whiwhi i te pehu awhina hei whakarato i etahi atu horopaki mo te whakaparo me nga kaiwhakamahi o nga hangarau awhina.

Tāpirihia .initialismki tētahi whakarāpopototanga mō te momotuhi iti ake.

attr

HTML

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

Poraka korero

Mo te whakahua i nga poraka ihirangi mai i tetahi atu puna i roto i to tuhinga. Takaia <blockquote class="blockquote">tetahi HTML hei korero.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

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

Te whakaingoa i tetahi puna

Tāpirihia he <footer class="blockquote-footer">mo te tautuhi i te puna. Takaia te ingoa o te puna mahi ki <cite>.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

He tangata rongonui i te Taitara Puna

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

Tirohanga

Whakamahia nga taputapu kuputuhi ina hiahiatia hei whakarereke i te tirohanga o to kupu poraka.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

He tangata rongonui i te Taitara Puna

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

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

He tangata rongonui i te Taitara Puna

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

Nga rarangi

Kore-ahua

Tango i te tawhē taunoa list-styleme te taha maui ki te rārangi tūemi (tamariki tonu anake). E pa ana tenei ki nga mea e whakarārangihia ana e nga tamariki tonu , ko te tikanga me taapiri koe i te akomanga mo nga rarangi kohanga.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Tauoti molestie lorem me massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean noho amet erat nunc
Eget 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>

Raina

Tangohia nga matā o te rarangi ka tono i etahi rama marginme te huinga o nga karaehe e rua, .list-inlineme te .list-inline-item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Whakaritenga rarangi whakaahuatanga

Tiarohia nga kupu me nga whakaahuatanga whakapae ma te whakamahi i nga karaehe kua tautuhia e to tatou punaha matiti (me nga whakaurunga kupu ranei). Mo nga kupu roa ake, ka taea e koe te taapiri i tetahi .text-truncatekaraehe hei tapahi i te tuhinga me te ellipsis.

Nga rarangi whakaahuatanga

Ko te rarangi whakaahuatanga he tino pai mo te tautuhi kupu.

Euismod

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

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kua tapahia te kupu kua tapahia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Kohanga

Rarangi whakamaarama kohanga: 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>

Nga rahi momotuhi whakautu

Ka tukuna e Bootstrap v4.3 te whiringa ki te whakaahei i nga rahi momotuhi whakautu, ka taea e te kuputuhi te awhatatia noa atu puta noa i nga taputapu me nga rahi tauranga. Ka taea te RFS$enable-responsive-font-sizes ma te huri i te taurangi Sass ki te whakahou i truea Bootstrap.

Hei tautoko i te RFS , ka whakamahi matou i te Sass mixin hei whakakapi i o maatau font-sizetaonga. Ka whakahiatohia nga rahi momotuhi whakautu ki roto i calc()nga mahi me te whakakotahitanga o remnga waeine tiro me te tiro kia taea ai te whanonga tauine aro. Ka kitea etahi atu korero mo te RFS me tana whirihoranga i runga i tana putunga GitHub .