in English

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 uru atu, ka whakamahia e matou te putake taunoa o te kaitirotiro 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.

He kowae matua tenei. Ka tu mai i nga whiti noa.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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 engari <i>ko te nuinga 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.

He korero rongonui, kei roto i te huānga blockquote.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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>.

He korero rongonui, kei roto i te huānga blockquote.

He tangata rongonui i te Taitara Puna 
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

He korero rongonui, kei roto i te huānga blockquote.

He tangata rongonui i te Taitara Puna 
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

He korero rongonui, kei roto i te huānga blockquote.

He tangata rongonui i te Taitara Puna 
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

  • He rarangi tenei.
  • He ahua kore rawa.
  • Ko te hanganga, he rarangi tonu.
  • Heoi, ko tenei momo ka pa ana ki nga huānga tamariki tonu.
  • Nga rarangi kohanga:
    • kaore e pa ana ki tenei ahua
    • ka whakaatu tonu i te matā
    • me whai tawhē maui tika
  • Ka whai hua tonu tenei i etahi ahuatanga.
<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>

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.

  • He tuemi rarangi tenei.
  • Me tetahi atu.
  • Engari e whakaatuhia ana i roto i te raarangi.
<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>

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.
Wāhanga

Whakamaramatanga mo te kupu.

Me etahi atu tuhinga whakamaarama waahi.

Ko tetahi atu kupu
He poto tenei whakamaramatanga, no reira kaore he waahanga taapiri, he aha ranei.
Kua tapahia te kupu kua tapahia
Ka whai hua tenei ina raru te waahi. Ka taapirihia he ellipsis ki te mutunga.
Kohanga
Rarangi whakamaarama kohanga
I rongo au e pai ana koe ki nga rarangi whakamaramatanga. Tukuna mai e au he rarangi whakamaramatanga ki roto i to rarangi whakamaramatanga. 
<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>

Nga rahi momotuhi whakautu

Mai i te v4.3.0, ka tukuna e Bootstrap te whiringa ki te whakaahei i nga rahi momotuhi whakautu, ka taea e te kuputuhi te awhatatia noa atu puta noa i te rahi o te taputapu me te tauranga tirohanga. 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 .