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-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
te whakamahi i nga tohu hono ki runga anake:hover
. - 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.
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>
.h1
kei .h6
te 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>
.mark
kei te .small
watea 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 .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 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.
<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.
<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.
<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-style
me 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 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 to tatou 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
- 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 true
a Bootstrap.
Hei tautoko i te RFS , ka whakamahi matou i te Sass mixin hei whakakapi i o maatau font-size
taonga. Ka whakahiatohia nga rahi momotuhi whakautu ki roto i calc()
nga mahi me te whakakotahitanga o rem
nga 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 .