Source

Kuputuhi

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

Tautuhinga o te ao

Ka whakatakotohia e Bootstrap nga whakaaturanga taketake o te ao, te tuhi tuhi, me nga momo hono. Ina hiahiatia kia nui ake te mana whakahaere, tirohia nga akomanga 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 uru atu, 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>

.h1na roto i .h6nga karaehe e waatea ana, ina hiahia koe ki te whakataurite i te momo momotuhi o te pane 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 hei hanga ano i te kupu 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

Ko nga huānga pane o mua kua hangaia kia pai ake te mahi i roto i te kiko o to ihirangi whaarangi. Ki te hiahia koe ki tetahi pane kia tu ake, whakaaro ki te whakamahi i te pane whakaatu —he ahua nui ake, he ahua ake te ahua o te upoko.

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 penei <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 acronym hei whakaatu i te putanga whakaroa 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>

Kuputuhi whakautu

Ko te momotuhi whakautu e pa ana ki te whakamaarama i nga tuhinga me nga waahanga ma te whakatika noa i te huānga pakiaka i font-sizeroto i te raupapa o nga patai pāpāho. Kaore a Bootstrap e mahi i tenei mo koe, engari he ngawari noa te taapiri mena ka hiahia koe.

Anei tetahi tauira o te mahi. Kōwhirihia font-sizengā pātai me ngā pātai pāpāho e hiahia ana koe.

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