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-family
mo 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-base
nga huanga kia rite ki ta matou turanga tuhi ki te<body>
. - Tautuhia te tae hono o te ao ma
$link-color
. - Whakamahia
$body-bg
hei tautuhibackground-color
i te<body>
(#fff
ma 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-base
whakauru rem
.
Nga Upoko
Ko nga pane HTML katoa, <h1>
ma te <h6>
, e waatea ana.
Pane | 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>
.h1
na roto i .h6
nga 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.
<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-sizes
mahere Sass me nga taurangi e rua, $display-font-weight
me te $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
Arataki
Whakanuia tetahi waahanga 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>
Kia tupato me whakamahi aua tohu mo te kaupapa kupu:
<mark>
he tohu kupu kua tohua, kua miramirahia ranei hei tohutoro, tohu tohu ranei.<small>
e tohu ana i nga korero-taha me te tuhinga iti, penei i te mana pupuri me te tuhinga ture.<s>
he tohu huānga kua kore e whai take, kua kore e tika.<u>
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:
.mark
ka whakamahi i nga momo ahua rite<mark>
..small
ka whakamahi i nga momo ahua rite<small>
..text-decoration-underline
ka whakamahi i nga momo ahua rite<u>
..text-decoration-line-through
ka whakamahi i nga momo ahua rite<s>
.
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 whakaatu 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, 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 .initialism
ki 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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Te whakaingoa i tetahi puna
Ko te tohu HTML e kii ana me tuu 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, <p>
) me te .blockquote-footer
akomanga. Kia mau ki te takai i te ingoa o te puna mahi <cite>
.
<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 korero poraka.
<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>
<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 list-style
tawhē taunoa me te taha mauī i runga i ngā tūemi rārangi (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 karaehe mo nga raarangi 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 margin
me te huinga o nga karaehe e rua, .list-inline
me 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 ta maatau punaha matiti (me nga whakaurunga kupu ranei). Mo nga kupu roa ake, ka taea e koe te taapiri i tetahi .text-truncate
karaehe 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 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
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 tauranga tirohanga. 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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Whakaranu
Karekau he ranunga i whakatapua mo te tuhi tuhi, engari ka whakamahia e Bootstrap te Rahinga Momotuhi Whakautu (RFS) .