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
rem
le s nai lo leem
s 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 omargin
se 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
rem
s momargin
le s. - Fa'atumauina fa'aitiitiga fa'amatalaga o
font
meatotino e feso'ota'i, fa'aaogainherit
i so'o se taimi e mafai ai.
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-sizing
lo'o fa'atulagaina i le lalolagi atoa i elemene uma—e aofia ai*::before
ma le*::after
, i leborder-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-size
e fa'ailoa i luga ole<html>
, ae16px
fa'apea (le browser default).font-size: 1rem
o 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. - O
<body>
lo'o fa'atūina fo'i se lalolagifont-family
,line-height
, matext-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'aaligabackground-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 vainu'u masani 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,
// Linux
"Noto Sans",
"Liberation Sans",
// 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 fa'aputu e aofia ai emoji fonuka, o le tele o fa'ailoga masani/dingbat Unicode mataitusi o le a fa'aliliuina o ni ata e tele-lanu. 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 color
sitaili CSS.
E font-family
fa'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-base
ma toe faʻapipiʻi Bootstrap.
Ulutala ma parakalafa
O elemene ulutala uma—faataitaiga, <h1>
—ma <p>
ua toe setiina ina ia margin-top
aveese. Ua margin-bottom: .5rem
faaopoopo ulutala ma parakalafa margin-bottom: 1rem
mo 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-top
ia aveese ma a margin-bottom: 1rem
. O lisi fa'aputu e leai margin-bottom
.
- 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
- Ua toe setiina foi le pito agavale
- 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 margin
s. <dd>
s toe seti margin-left
i 0
ma 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'asologa o tusitusiga
Ua <pre>
toe setiina le elemene e aveese ona margin-top
ma faaaoga rem
iunite 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-align
taimi atoa. Suiga faaopoopo mo tuaoi, padding, ma isi mea e sau faatasi ma le .table
vasega .
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 edisplay: inline-block
fa'atagamargin
e fa'aoga.<input>
s,<select>
s,<textarea>
s, ma<button>
s e tele lava ina tautalagia e Normalize, ae Toe aveese latoumargin
ma setiline-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 lecursor: pointer
taimi:not(:disabled)
.
O nei suiga, ma isi mea, o loʻo faʻaalia i lalo.
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 cursor
suiga.
<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-style
mai italic
ile 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Igoa Atoa
[email protected]
Blockquote
Ole faaletonu margin
ile poloka upusii ole 1em 40px
, o lea matou te toe setiina lena 0 0 1rem
mea 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.
Elemene i totonu
O le <abbr>
elemene e maua le sitaili masani e fa'aalia ai i totonu o tusitusiga parakalafa.
Aotelega
O le faaletonu cursor
i luga o le aotelega o le text
, o lea matou te toe setiina ai pointer
e 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: none
e 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 display
mai 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 display
o elemene.
Ina ia na'o le fesuia'iina o le va'aia o se elemene, o lona uiga display
e le o suia ma o le elemene e mafai lava ona a'afia ai le tafe o le pepa, fa'aoga le .invisible
vasega .