in English

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.

I tenei wharangi

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

html

<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

html

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

Whakaatu 1

Whakaatu 2

Whakaatu 3

Whakaatu 4

Whakaatu 5

Whakaatu 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Ka whirihorahia nga pane whakaatu ma te $display-font-sizesmahere Sass me nga taurangi e rua, $display-font-weightme te $display-line-height.

Ko nga pane whakaatu ka taea te whakarite ma nga taurangi e rua, $display-font-familyme te $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Arataki

Whakanuia tetahi kowae ma te taapiri .lead.

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

html

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

html

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

Kia tupato me whakamahi aua tohu mo te kaupapa kupu:

he tohu kupu kua tohua, kua miramirahia hei tohutoro, tohu tohu ranei.
e tohu ana i nga korero-taha me te tuhinga iti, penei i te mana pupuri me te tuhinga ture.
<s>he tohu i te huānga kua kore e whai take, kua kore e tika.
e tohu ana i te roanga o te kuputuhi rōraina e tika ana ki te whakaputa i runga i te ahua e tohu ana he tuhi tuhi kore.

Mena kei te pirangi koe ki te tarai i to tuhinga, me whakamahi nga akomanga e whai ake nei:

.markka whakamahi i nga momo ahua rite .
.smallka whakamahi i nga momo ahua rite .
.text-decoration-underlineka whakamahi i nga momo ahua rite .
.text-decoration-line-throughka whakamahi i nga momo ahua rite <s>.

Ahakoa kaore i whakaatuhia i runga ake nei, kaua e pai ki te whakamahi me te HTML5. Ko te tikanga ki te whakanui i nga kupu, kinga kianga ranei me te kore e kawe i te hiranga atu, engari 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, te teitei o te raina, te whakapaipai 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

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.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Te whakaingoa i tetahi puna

Ko te tohu HTML e kii ana me whakanoho te tohu poraka ki waho o te <blockquote>. Ina hoatu he tohu, takai koe <blockquote>ki roto i te <figure>a ka whakamahi i te <figcaption>huānga taumata paraka (hei tauira, ) me te .blockquote-footerakomanga. Kia mau ki te takai i te ingoa o te puna mahi <cite>.

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

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

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.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

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

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

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

html

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

html

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

He tino pai te rarangi whakaahuatanga 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 kia hoatu e ahau he rarangi whakamaramatanga ki roto i to rarangi whakamaramatanga.

html

<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

I roto i te Bootstrap 5, kua whakahohea e matou nga rahi momotuhi urupare ma te taunoa, ka taea e te kuputuhi te whakarahi ake i nga rahi o te taputapu me te rahinga tauranga. Tirohia te wharangi RFS kia mohio ai me pehea te mahi.

Sass

Taurangi

Kei nga pane etahi taurangi motuhake mo te rahi me te mokowhiti.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

He maha nga huānga momotuhi e hipokina ana ki konei me te Reboot ano he taurangi whakatapua.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Whakaranu

Karekau he ranunga i whakatapua mo te tuhi tuhi, engari ka whakamahia e Bootstrap te Rahinga Momotuhi Whakautu (RFS) .