in English

Whakahou ano

Reboot, he kohinga o nga huringa CSS-motuhake i roto i te konae kotahi, kickstart Bootstrap ki te whakarato i tetahi rarangi huatau, riterite, ngawari hoki hei hanga.

I tenei wharangi

Te huarahi

Ka hanga ano te whakaara i runga i te Normalize, e whakarato ana i te maha o nga huānga HTML me nga momo ahua whakaaro ma te whakamahi i nga kaiwhiri huānga anake. Ko etahi atu taapiri ka mahia me nga karaehe anake. Hei tauira, ka whakaara ano tatou i etahi <table>momo mo te rarangi turanga ngawari ake, a muri ake ka whakarato .table, .table-bordered, me etahi atu.

Anei a maatau aratohu me nga take mo te kowhiri i nga mea hei whakakore i te Reboot:

Whakahoutia etahi uara taunoa pūtirotiro hei whakamahi i remte s hei utu mo emte s mo te mokowhiti waahanga tauineine.
Aukati margin-top. Ka tiango nga tawhē poutū, ka puta he hua ohorere. Ko te mea nui ake, ko te ahunga kotahi marginhe tauira hinengaro ngawari ake.
Kia ngawari ake te whakatauine puta noa i te rahi o te taputapu, me whakamahi nga huānga poraka rems mo marginte s.
Puritia nga whakapuakanga o fontnga taonga e pa ana ki te iti rawa, ma te whakamahi i inheritnga wa katoa ka taea.

Taurangi CSS

Kua taapirihia ki te v5.2.0

Ki te v5.1.1, i whakatauritehia e matou a matou @imports e hiahiatia ana puta noa i a matou paihere CSS katoa (tae atu ki bootstrap.csste , bootstrap-reboot.css, me te bootstrap-grid.css) hei whakauru _root.scss. Ka :roottaapirihia nga taurangi CSS taumata ki nga paihere katoa, ahakoa te maha o era e whakamahia ana ki taua paihere. I te mutunga ka kite tonu a Bootstrap 5 i te maha atu o nga taurangi CSS ka taapirihia i roto i te waa, kia nui ake ai nga whakaritenga-waahi me te kore e hiahia ki te whakahiato tonu i a Sass. Ko ta matou huarahi ko te tango i o maatau punanga Sass taurangi ka huri ki nga taurangi CSS. I taua ara, ahakoa kaore koe e whakamahi i nga taurangi CSS, kei a koe tonu te mana katoa o Sass. Kei te ahu whakamua tonu tenei, ka roa te wa ki te whakatinana katoa.

Hei tauira, whakaarohia enei :roottaurangi CSS mo nga <body>ahua noa:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

I roto i te mahi, ka whakamahia aua taurangi ki Reboot penei:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Ma tenei ka taea e koe te whakarite i nga whakaritenga-waahi ahakoa e pai ana koe:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Whārangi taunoa

Ko nga <html>me <body>nga huānga kua whakahoutia kia pai ake ai nga taunoa wharangi whanui. Ake ake:

Kei box-sizingte ao te whakatakotoranga ki runga i ia huānga—tae atu *::beforeki te *::after, ki te border-box. Ma tenei ka whakarite kia kaua rawa e hipa ake te whanui o te huānga e kiia ana na te papaa, te taitapa ranei.
- Karekau he turanga font-sizee kii ana i runga i te <html>, engari 16pxka kiia (te taunoa te pūtirotiro). font-size: 1remka whakamahia i runga i te <body>mo te ngawari te whakautu momo-tauine ma nga patai pāpāho me te whakaute i nga manakohanga a nga kaiwhakamahi me te whakarite huarahi ngawari ake. Ka taea te whakakore i tenei taunoa pūtirotiro ma te whakarereke i te $font-size-roottaurangi.
Ka <body>whakatakoto ano hoki i te ao font-family, font-weight, line-height, me color. Ka tuku iho tenei i muri mai e etahi huānga ahua hei aukati i nga momotuhi momotuhi.
Mo te haumaru, <body>kua whakahuahia te background-color, te taunoa ki #fff.

Tāpae momotuhi taketake

Ka whakamahi a Bootstrap i te "tapae momotuhi taketake" ranei "putanga momotuhi punaha" mo te whakaputa tuhinga tino pai ki nga taputapu katoa me te OS. Ko enei momotuhi punaha he mea hanga motuhake me nga whakaaro o enei ra, me te pai ake o te whakaatu i runga i nga mata, te tautoko momotuhi rereke, me etahi atu. Pānuihia atu mo nga momo momotuhi taketake i roto i tenei tuhinga mo te Moheni Smashing .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Kia mahara, na te mea kei roto i te puranga momotuhi nga momotuhi emoji, he maha nga tohu noa/dingbat Unicode ka puta hei pikitia maha-tae. Ka rereke o ratou ahua, i runga i te ahua e whakamahia ana i roto i te momotuhi emoji taketake o te kaitirotiro/turanga, a ka kore ratou e pa ki etahi colormomo CSS.

Ka font-familywhakamahia tenei ki te <body>me te tuku iho i te ao puta noa i te Bootstrap. Hei huri i te ao font-family, whakahou $font-family-baseme te whakahiato ano i a Bootstrap.

Nga upoko me nga rarangi

Ko nga huānga pane katoa—hei tauira, <h1>—ka <p>tautuhi ano kia margin-toptangohia. Kua margin-bottom: .5remtapirihia nga upoko me nga kowae margin-bottom: 1remmo te waatea ngawari.

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

Ture whakapae

Kua <hr>whakangwarihia te huānga. He rite ki nga taunoa o te kaitirotiro, ka whakaingoatia <hr>a s ma te border-top, he taunoa opacity: .25, ka tuku aunoa i a raatau border-colorma te color, tae atu ki te wa colorka whakatauhia ma te matua. Ka taea te whakarereke me nga taputapu kuputuhi, taitapa, me te opacity.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Nga rarangi

Ko nga rarangi katoa— <ul>, <ol>, me <dl>— kua margin-toptangohia me te margin-bottom: 1rem. Ko nga rarangi kohanga kaore he margin-bottom. Kua tautuhia ano e matou te padding-lefton <ul>me <ol>nga huānga.

Ko nga rarangi katoa kua tangohia o ratou tawhē runga
Na ka tau to ratou tawhē raro
Ko nga rarangi kohanga kaore he tawhwh raro
- Ma tenei ka pai ake to ratou ahua
- Ina koa ka whaia e etahi atu rarangi rarangi
Kua tautuhia ano te papa maui

Anei he rarangi whakahau
Me etahi rarangi rarangi
He rite tonu te ahua o te katoa
Ka rite ki te rarangi kore o mua

Mo te ahua ngawari ake, te naataki marama, me te mokowhiti pai ake, kua whakahouhia nga rarangi whakaahuatanga margins. <dd>s tautuhi anō margin-leftki 0te tāpiri margin-bottom: .5rem. <dt>s kua maia .

Nga rarangi whakaahuatanga: He tino pai te rarangi whakaahuatanga mo te tautuhi kupu.
Wāhanga: Whakamaramatanga mo te kupu.; He whakamaramatanga tuarua mo te kupu ano.
Ko tetahi atu kupu: Whakamaramatanga mo tenei atu kupu.

Waehere raina

Takaia nga mahanga rarangi-roto o te waehere ki te <code>. Me mawhiti mai i nga taiapa koki HTML.

Hei tauira, <section>me takai hei rarangi.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Paraka waehere

Whakamahia <pre>te s mo nga rarangi waehere maha. Ano ano, kia mawhiti mai i nga taiapa koki i roto i te waehere mo te whakaputa tika. Kua <pre>tautuhia ano te huānga ki te tango i ona margin-topme te whakamahi i remnga wae mo tana margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Taurangi

Mo te tohu taurangi whakamahia te <var>tohu.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Whakauru kaiwhakamahi

Whakamahia te <kbd>hei tohu i te whakaurunga ka whakauruhia ma te papapātuhi.

Hei huri i nga whaiaronga, patohia cdme te ingoa o te whaiaronga.
Hei whakatika i nga tautuhinga, pehia ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Putanga tauira

Mo te tohu tauira putanga mai i tetahi papatono whakamahia te <samp>tohu.

Ko te tikanga o tenei tuhinga ka kiia hei tauira putanga mai i te kaupapa rorohiko.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Ripanga

He paku whakatikatika nga ripanga ki te ahua <caption>s, tiango taitapa, me te whakarite kia rite tonu text-alignputa noa. Ko nga huringa taapiri mo nga taitapa, papaa me etahi atu ka haere mai me te .tableakomanga .

He tauira ripanga tenei, koinei tana tapanga hei whakaahua i nga korero.
Ripanga pane	Ripanga pane	Ripanga pane	Ripanga pane
Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga
Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga
Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Puka

He momo huānga ahua kua whakaara ano mo nga momo turanga ngawari ake. Anei etahi o nga huringa tino rongonui:

<fieldset>s karekau he taitapa, he papa, he tawhē ranei kia ngawari te whakamahi hei takai mo nga whakaurunga takitahi, roopu roopu ranei.
<legend>s, pera i nga huinga mara, kua whakahouhia ano kia whakaatuhia hei momo upoko.
<label>s kua whakaritea ki display: inline-blockte tuku marginki te tono.
<input>Ko nga s, <select>s, <textarea>s, me <button>nga s te nuinga e korerohia ana e Normalize, engari ka tangohia ano e Reboot o raatau marginme nga huinga line-height: inherit.
<textarea>s kua whakarerekētia kia taea te huri poutū noa i te mea he maha nga wa ka "pakaru" te whakatakotoranga wharangi.
<button>s me <input>nga huānga paatene kei te cursor: pointerwa :not(:disabled).

Ko enei huringa, me etahi atu, ka whakaatuhia i raro nei.

He tauira pakiwaitara

Tauira whakauru

He tauira imeera

Tauira waea

Tauira url

Tau tauira

Tauira rapu

Awhe tauira

Tauira urunga kōnae

Tauira whiriwhiri

Takina tenei pouakataki

Ko te whiringa tuatahi ko tenei me tera Ko te kōwhiringa tuarua tetahi atu mea e tino roa ana ki te whakaatu i te takai o enei mana ahua rerehua. Ko te kōwhiringa tuatoru kua monokia

Tauira textarea

Te ra tauira

Te wa tauira

Kupuhipa tauira

Tauira wā-rohe

Te wiki tauira

Tauira marama

Tauira tae

Putanga tauira 100

Te ra me te tautoko whakauru tae

Kia maumahara ko nga whakaurunga ra kaore i te tino tautokohia e nga kaitirotiro katoa, ara ko Safari.

Tohutohu i runga i nga paatene

Kei roto i te whakaara ano he whakapainga hei role="button"huri i te pehu taunoa ki pointer. Tāpirihia tēnei huanga ki ngā huānga hei tohu he pāhekoheko ngā huānga. Kare e tika ana tenei mahi mo <button>nga huānga, ka riro i a raatau ake cursorhuringa.

Pātene huānga kore-pātene

html

<span role="button" tabindex="0">Non-button element button</span>

He momo huānga

Wāhitau

Ka <address>whakahouhia te huānga ki te tautuhi i te taunoa o te pūtirotiro font-stylemai i italicki normal. line-heightkua tuku iho ano inaianei, margin-bottom: 1remkua apititia atu. <address>s mo te whakaatu korero whakapā mo te tipuna tata (he mahi katoa ranei). Tiakina te whakahōpututanga mā te whakamutu i ngā rārangi ki te <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Ingoa Katoa
[email protected]

Poraka

Ko te taunoa margini runga i nga korero poraka ko 1em 40px, no reira ka tautuhia e matou tera 0 0 1remmo tetahi mea e rite ana ki etahi atu huānga.

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

He tangata rongonui i te Taitara Puna

Huānga rōraina

Ka <abbr>whiwhi te huānga i te whakaahuatanga taketake kia kitea ai i waenga i nga kuputuhi whiti.

Ko te huānga whakarāpopoto HTML .

Whakarāpopototanga

Ko te taunoa cursori runga i te whakarāpopototanga ko te text, no reira ka tautuhia e matou tera ki pointerte whakaatu ka taea te taunekeneke te huānga ma te panui ki runga.

Ko etahi korero

Ētahi atu korero mo nga korero.

Ko etahi atu korero

Anei etahi atu korero mo nga korero.

`[hidden]`Hunga HTML5

Ka taapirihia e HTML5 tetahi huanga o te ao hou kua whakaingoatia[hidden] , kua whakaingoatia hei display: nonetaunoa. Ma te tarewa i tetahi whakaaro mai i te PureCSS , ka whakapai ake i tenei taunoa ma te mahi [hidden] { display: none !important; }ki te aukati i ona whakaaro kia kore displaye pokanoa.

<input type="text" hidden>

jQuery hotokoretanga

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.

Whakahou ano

Te huarahi

Taurangi CSS

Whārangi taunoa

Tāpae momotuhi taketake

Nga upoko me nga rarangi

Ture whakapae

Nga rarangi

Waehere raina

Paraka waehere

Taurangi

Whakauru kaiwhakamahi

Putanga tauira

Ripanga

Puka

Te ra me te tautoko whakauru tae

Tohutohu i runga i nga paatene

He momo huānga

Wāhitau

Poraka

Huānga rōraina

Whakarāpopototanga

[hidden]Hunga HTML5

jQuery hotokoretanga

`[hidden]`Hunga HTML5