Source

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.

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.

Itulau fa'aletonu

O elemene <html>ma <body>ua fa'afouina ina ia maua ai fa'aletonu e sili atu le 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. 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 ole ituaiga e ala ile 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.
  • O <body>lo'o fa'atūina fo'i se lalolagi font-family, line-height, ma text-align. 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

O mataitusi i luga ole laiga (Helvetica Neue, Helvetica, ma Arial) ua lafoa'i ile Bootstrap 4 ma suia i se "fa'aputu vaitusi masani" mo le fa'aliliuina o tusitusiga sili i masini uma ma OS. Faitau atili e uiga i fa'aputuga vaitusi fa'ale-aganu'u i totonu o lenei Smashing Magazine article .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

Lisi

O lisi uma— <ul>, <ol>, ma <dl>margin-topia aveese ma a margin-bottom: 1rem. O lisi fa'aputu e leai margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ma masa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean nofo amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem ma masa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean nofo amet erat nunc
  8. Eget porttitor lorem

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.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida and eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Fa'asologa o tusitusiga

Ua <pre>toe setiina le elemene e aveese ona margin-topma faaaoga remiunite mo lona margin-bottom.

.example-element {
  pito i lalo: 1rem;
}

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

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.

Fa'ata'ita'iga talatu'u

100

Elemene eseese

tuatusi

Ua <address>toe faafou le elemene e toe setiina le faaletonu o le browser font-stylemai italici le 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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.

Nulla attr vitae elit libero, a pharetra augue.

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. E ui [hidden]e le o lagolagoina e le IE10, o le taʻutinoga manino i la tatou CSS e faʻafefe ai lena faʻafitauli.

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