in English

Toe fai

Toe fa'afou, o se fa'aputuga o suiga CSS fa'apitoa i elemene i se faila e tasi, kickstart Bootstrap e tu'uina atu ai se laina fa'alelei, tumau, ma faigofie e fausia i luga.

I luga o lenei itulau

Auala

Toe fa'afou i luga ole Normalize, tu'uina atu le tele o elemene HTML fa'atasi ai ma sitaili manatu fa'aaoga na'o elemene filifilia. Fa'aopoopo sitaili e faia na'o vasega. Mo se faʻataʻitaʻiga, matou te toe faʻafou nisi <table>sitaili mo se laina faʻavae faigofie ma mulimuli ane tuʻuina atu .table, .table-bordered, ma isi mea.

O a matou taʻiala ma mafuaʻaga mo le filifilia o mea e faʻamalo ile Toe Faʻafouina:

Fa'afou nisi o mea tau su'esu'e fa'aletonu e fa'aoga ai remle s nai lo le ems mo le fa'aogaina o le va o vaega.
Aloese mai margin-top. E mafai ona pa'u i lalo pito tu'usa'o, ma maua ai i'uga e le'i fa'amoemoeina. Ae sili atu ona taua, o le tasi itu o marginse faʻataʻitaʻiga faigofie o le mafaufau.
Mo le fa'afaigofieina ole fa'asili ile tele ole masini, e tatau ona fa'aoga elemene poloka rems mo marginle s.
Fa'atumauina fa'aitiitiga fa'amatalaga o fontmeatotino e feso'ota'i, fa'aaoga inheriti so'o se taimi e mafai ai.

CSS fesuiaiga

Fa'aopoopo i le v5.2.0

Faatasi ai ma le v5.1.1, matou te fa'avasegaina a matou @imports mana'omia i luga oa matou fusi CSS uma (e aofia ai bootstrap.css, bootstrap-reboot.css, ma bootstrap-grid.css) e aofia ai _root.scss. Ole mea lea e fa'aopoopoina ai :rootle tulaga ole CSS fesuiaiga i fusi uma, tusa lava po'o le a le tele o latou fa'aoga i lena fusi. Mulimuli ane Bootstrap 5 o le a faʻaauau pea ona vaʻaia le tele o fesuiaiga CSS faʻaopoopo i le taimi, ina ia mafai ai ona tuʻuina atu le tele o taimi faʻapitoa e aunoa ma le manaʻomia e toe faʻapipiʻi Sass i taimi uma. O la matou auala o le ave lea o a matou punaoa Sass fesuiaiga ma suia i latou i CSS fesuiaiga. I lena auala, e tusa lava pe e te le faʻaogaina suiga CSS, o loʻo ia te oe le mana uma o Sass. O lo'o fa'agasolo pea ma e umi se taimi e fa'atino atoatoa ai.

Mo se faʻataʻitaʻiga, mafaufau i nei :rootfesuiaiga CSS mo <body>sitaili masani:

  @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 le faʻataʻitaʻiga, o na fesuiaiga e faʻaaogaina i le Toe Faʻafouina e pei o lea:

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
}

Le mea e mafai ai ona e faia faʻataʻitaʻiga taimi moni e tusa lava pe e te manaʻo ai:

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

Itulau fa'aletonu

O le <html>ma <body>elemene ua fa'afouina ina ia maua ai le fa'aletonu o itulau-lautele. Aemaise lava:

O box-sizinglo'o fa'atulagaina i le lalolagi atoa i elemene uma—e aofia ai *::beforema le *::after, i le border-box. Ole mea lea e fa'amautinoa ai e le sili atu le lautele o le elemene ona o le padding po'o le tuaoi.
- E leai se fa'avae font-sizee fa'ailoa i luga ole <html>, ae 16pxfa'apea (le browser default). font-size: 1remo lo'o fa'aogaina i luga ole <body>laiga mo le fa'afaigofieina ole fa'avasegaina o ituaiga e ala i fa'asalalauga fa'asalalauga a'o fa'aaloalo i mana'oga o tagata fa'aoga ma fa'amautinoaina se auala e sili atu ona faigofie. E mafai ona suitulaga lenei masini su'esu'e e ala i le suia o le $font-size-rootfesuiaiga.
O <body>lo'o fa'atulagaina fo'i se lalolagi font-family, font-weight, line-height, ma color. O lenei mea e tu'ufa'atasia mulimuli ane e nisi o elemene foliga e puipuia ai le le tutusa o vaitusi.
Mo le saogalemu, o <body>lo'o i ai se fa'aaliga background-color, fa'aletonu i #fff.

Fa'aputu fa'aputu

E fa'aogaina e Bootstrap se "fa'aputu vaitusi masani" po'o le "fa'aputu fa'apolokalame fa'apipi'i" mo le fa'aliliuina lelei o tusitusiga i masini uma ma OS. O nei fonuka faiga ua mamanuina faapitoa ma masini o aso nei i le mafaufau, faatasi ai ma le faʻaleleia atili o le faʻaliliuga i luga o lau, lagolago fesuiaiga o vai, ma isi mea. Faitau atili e uiga i fa'aputuga vainu'u masani i totonu o lenei Smashing Magazine article .

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

Manatua talu ai ona o le fa'aputu vaitusi e aofia ai mataitusi emoji, o le tele o fa'ailoga masani/dingbat Unicode mataitusi o le a fa'aliliuina o ni ata felanulanua'i. O latou foliga o le a eseese, faʻatatau i le sitaili o loʻo faʻaogaina i le browser/platform's native emoji font, ma e le afaina i latou i soʻo se colorsitaili CSS.

E font-familyfa'aoga lea i le <body>ma otometi ona fa'atosina i le lalolagi atoa i Bootstrap. Ina ia fesuiai le lalolagi font-family, faʻafouina $font-family-basema toe faʻapipiʻi Bootstrap.

Ulutala ma parakalafa

O elemene ulutala uma—faataitaiga, <h1>—ma <p>ua toe setiina ina ia margin-topaveese. Ua margin-bottom: .5remfaaopoopo ulutala ma parakalafa margin-bottom: 1remmo le faafaigofieina o avanoa.

Ulutala	Faataitaiga
`<h1></h1>`	h1. Ulutala Bootstrap
`<h2></h2>`	h2. Ulutala Bootstrap
`<h3></h3>`	h3. Ulutala Bootstrap
`<h4></h4>`	h4. Ulutala Bootstrap
`<h5></h5>`	h5. Ulutala Bootstrap
`<h6></h6>`	h6. Ulutala Bootstrap

Tulafono faalava

Ua <hr>faafaigofieina le elemene. E tutusa ma le fa'aletonu ole browser, <hr>s e fa'ailogaina e ala i le border-top, e iai se faaletonu opacity: .25, ma otometi ona fa'atosina a latou border-colore ala i le color, e aofia ai le taimi colore fa'atulaga e ala ile matua. E mafai ona suia i tusitusiga, tuaoi, ma opacity utilities.

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

Lisi

O lisi uma— <ul>, <ol>, ma <dl>— margin-topia aveese ma a margin-bottom: 1rem. O lisi fa'aputu e leai margin-bottom. Ua matou toe setiina foi le padding-lefton <ul>ma <ol>elemene.

O lisi uma ua aveese o latou pito pito i luga
Ma o latou pito pito i lalo ua fa'asalaina
O lisi fa'aputu e leai se pito i lalo
- O le auala lea e sili atu ona foliga tutusa
- Aemaise lava pe a soso'o ma isi mea lisi
O le padding agavale ua toe setiina foi

O se lisi fa'atonu
Faatasi ai ma ni nai mea lisi
E tutusa uma foliga
E pei o le lisi muamua e le fa'atonuina

Mo sitaili faigofie, manino fa'atonuga, ma sili atu avanoa, lisi fa'amatalaga ua fa'afouina margins. <dd>s toe seti margin-lefti 0ma faaopoopo margin-bottom: .5rem. <dt>s ua fa'amalosi .

Lisi fa'amatalaga: Ole lisi fa'amatalaga e lelei atoatoa mo le fa'amalamalamaina o upu.
Vaitaimi: Uiga mo le upu.; O se faauigaga lona lua mo le faaupuga lava e tasi.
O le isi faaupuga: Fa'amatalaga mo lenei isi faaupuga.

Fa'ailoga laina

Afifi fasi laina fa'ailoga fa'ailoga ma <code>. Ia mautinoa e sola ese mai puipui tulimanu HTML.

Mo se faʻataʻitaʻiga, <section>e tatau ona afifi i totonu.

html

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

Fa'ailoga poloka

Fa'aoga <pre>le s mo le tele o laina fa'ailoga. Toe fo'i, ia mautinoa e sola ese mai so'o se fa'amaufa'ailoga fa'ailoga i le fa'ailoga mo le fa'aliliuga tatau. Ua <pre>toe setiina le elemene e aveese ona margin-topma faaaoga remiunite mo lona 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>

Fuafuaga

Mo le faʻaalia o fesuiaiga faʻaaoga le <var>tag.

y = m x + b

html

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

Fa'aoga tagata

Fa'aoga le <kbd>fa'ailoga e fa'ailoa ai mea e masani ona fa'aulu ile piano.

Ina ia fesuia'i fa'atonuga, ta'i cdsoso'o ma le igoa o le fa'atonuga.
Ina ia teuteu tulaga, fetaomi 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>

Fa'ata'ita'iga galuega

Mo le fa'ailoaina o fa'ata'ita'iga fa'atino mai se polokalame fa'aaoga le <samp>tag.

O lenei tusitusiga o lo'o fa'atatau e fa'atatauina o se fa'ata'ita'iga o mea na maua mai se polokalame komepiuta.

html

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

Laupapa

E fetuutuunai teisi laulau i sitaili <caption>s, pa'u i lalo tuaoi, ma fa'amautinoa e tumau i le text-aligntaimi atoa. Suiga faaopoopo mo tuaoi, padding, ma isi mea e sau faatasi ma le .tablevasega .

O se fa'ata'ita'iga laulau lea, ma o lona fa'amatalaga lea e fa'amatala ai mea o lo'o i totonu.
Ulutala laulau	Ulutala laulau	Ulutala laulau	Ulutala laulau
Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau
Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau
Laulau laulau	Laulau laulau	Laulau laulau	Laulau laulau

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>

Fomu

O elemene fomu eseese ua toe fa'afouina mo sitaili fa'avae faigofie. O nisi nei o suiga iloga:

<fieldset>s e leai ni tuaoi, padding, poʻo se pito e faigofie ona faʻaaogaina e fai ma afifi mo mea faʻaoga taʻitasi poʻo vaega o mea faʻaoga.
<legend>s, pei o fieldsets, ua toe fa'afo'i fo'i ina ia fa'aalia o se ulutala o ituaiga.
<label>s ua seti e display: inline-blockfa'ataga margine fa'aoga.
<input>s, <select>s, <textarea>s, ma <button>s e tele lava ina tautalagia e Normalize, ae Toe aveese latou marginma seti line-height: inherit, foi.
<textarea>s ua suia ina ia na'o le mafai ona sui i luga i luga o le sa'o e pei o le fa'alava fa'alava e masani ona "ta'atia" le fa'atulagaina o itulau.
<button>s ma <input>elemene faamau e iai le cursor: pointertaimi :not(:disabled).

O nei suiga, ma isi mea, o loʻo faʻaalia i lalo.

Faataitaiga talatuu

Fa'ata'ita'iga fa'aoga

Fa'ata'ita'iga imeli

Fa'ata'ita'iga telefoni

Fa'ata'ita'iga url

Fa'ata'ita'iga numera

Fa'ata'ita'iga su'esu'ega

Fa'ata'ita'iga lautele

Faataitaiga faila faila

Faataitaiga filifili

Siaki le pusa siaki lenei

O le filifiliga muamua o le mea lea ma lena Filifiliga lona lua o se isi mea e sili atu le umi e faʻaalia ai le afifiina o nei faʻatonuga foliga. O le filifiliga lona tolu ua le atoatoa

Fa'ata'ita'iga textarea

Fa'ata'ita'iga aso

Taimi fa'ata'ita'iga

Faataitaiga upu faataga

Fa'ata'ita'iga taimitaimi-fa'alenu'u

Fa'ata'ita'iga vaiaso

Faataitaiga masina

Fa'ata'ita'iga lanu

Faataitaiga galuega faatino 100

Aso & lanu lagolago i totonu

Ia manatua e le'o atoatoa ona lagolagoina e tagata su'esu'e uma mea e tu'uina atu i aso, o Safari.

Fa'ailoga i fa'amau

Toe fa'afou e aofia ai se fa'aleleia atili mo role="button"le suia o le fa'ailoga fa'aletonu i le pointer. Fa'aopoopo lenei uiga i elemene e fesoasoani e fa'ailoa ai elemene o lo'o fegalegaleai. O lenei matafaioi e le mana'omia mo <button>elemene, e maua a latou lava cursorsuiga.

Fa'amau elemene e leai se fa'amau

html

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

Elemene eseese

tuatusi

Ua <address>toe faafou le elemene e toe setiina ai le faaletonu ole browser font-stylemai italicile normal. line-height‘ua fai fo‘i ma tofi, ma margin-bottom: 1rem‘ua fa‘aopoopoina. <address>s e mo le tu'uina atu o fa'amatalaga fa'afeso'ota'i mo tuaa lata ane (po'o se galuega atoa). Fa'asao le fa'atulagaina e ala i le fa'au'uina o laina i le <br>.

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

Igoa Atoa
[email protected]

Blockquote

Ole faaletonu marginile poloka upusii ole 1em 40px, o lea matou te toe setiina lena 0 0 1remmea mo se mea e sili atu ona ogatasi ma isi elemene.

O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.

O se tasi lauiloa i le Source Title

Elemene i totonu

O le <abbr>elemene e maua le sitaili masani e fa'aalia ai i totonu o tusitusiga parakalafa.

Le HTML fa'apuupuuga elemene.

Aotelega

O le faaletonu cursori luga o le aotelega o le text, o lea matou te toe setiina ai pointere faʻaalia ai e mafai ona fegalegaleai le elemene e ala i le kiliki i luga.

O nisi fa'amatalaga

Fa'amatalaga atili e uiga i fa'amatalaga.

E sili atu faʻamatalaga

O nisi nei fa'amatalaga e uiga i fa'amatalaga.

HTML5 `[hidden]`uiga

E fa'aopoopo e le HTML5 se uiga fou o le lalolagi ua ta'ua[hidden] , lea e fa'aigoaina display: nonee le mafai. Nono mai se manatu mai le PureCSS , matou te fa'alelei i luga o lenei fa'aletonu e ala i le faia [hidden] { display: none !important; }e fesoasoani e puipuia ai displaymai le fa'afuase'i ona soloia.

<input type="text" hidden>

jQuery le fetaui

[hidden]e le fetaui ma jQuery $(...).hide()ma $(...).show()metotia. O le mea lea, matou te le o faʻamaonia faapitoa [hidden]i le taimi nei isi metotia mo le puleaina displayo elemene.

Ina ia na'o le fesuia'iina o le va'aia o se elemene, o lona uiga displaye le o suia ma o le elemene e mafai lava ona a'afia ai le tafe o le pepa, fa'aoga le .invisiblevasega .

Toe fai

Auala

CSS fesuiaiga

Itulau fa'aletonu

Fa'aputu fa'aputu

Ulutala ma parakalafa

Tulafono faalava

Lisi

Fa'ailoga laina

Fa'ailoga poloka

Fuafuaga

Fa'aoga tagata

Fa'ata'ita'iga galuega

Laupapa

Fomu

Aso & lanu lagolago i totonu

Fa'ailoga i fa'amau

Elemene eseese

tuatusi

Blockquote

Elemene i totonu

Aotelega

HTML5 [hidden]uiga

jQuery le fetaui

HTML5 `[hidden]`uiga