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.
CSS fesuiaiga
Fa'aopoopo i le v5.1.1
Faatasi ai ma le v5.1.1, matou te faʻavasegaina a matou @import
s manaʻomia i luga o a matou fusi CSS uma (e aofia ai bootstrap.css
, bootstrap-reboot.css
, ma bootstrap-grid.css
ia aofia ai _root.scss
. E faʻaopoopoina :root
tulaga fesuiaʻi CSS i fusi uma, e tusa lava po o le a le tele o latou faʻaaogaina i lena fusi. Mulimuli ane Bootstrap 5 o le a faaauau pea va'ai nisi fesuiaiga CSS fa'aopoopo ile taimi.
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-sizing
lo'o fa'atulagaina i le lalolagi atoa i elemene uma—e aofia ai*::before
ma le*::after
, i leborder-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-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 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. E mafai ona suitulaga lenei masini su'esu'e e ala i le suia o le$font-size-root
fesuiaiga.
- E leai se fa'avae
- O
<body>
lo'o fa'atulagaina fo'i se lalolagifont-family
,font-weight
,line-height
, macolor
. 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
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 vaitusi fa'ale-aganu'u 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,
// 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 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 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.
CSS fesuiaiga
Aʻo faʻaauau pea le faʻatupuina o le Bootstrap 5, o le a sili atu ma sili atu sitaili o le a fausia i le CSS fesuiaiga o se auala e tuʻuina atu ai 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 :root
fesuiaiga CSS mo <body>
sitaili masani:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-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(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-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>
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
. Ua matou toe setiina foi le padding-left
on <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 lenei auala 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 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'ailoga laina
Afifi fasi laina fa'ailoga fa'ailoga ma <code>
. Ia mautinoa e sola ese mai puipui tulimanu HTML.
<section>
e tatau ona afifi i totonu.
For example, <code><section></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-top
ma faaaoga rem
iunite mo lona margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Fuafuaga
Mo le faʻaalia o fesuiaiga faʻaaoga le <var>
tag.
<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 teuteu tulaga, fetaomi ctrl + ,
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.
<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-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.
Aso & lanu lagolago i totonu
Ia manatua e le'o lagolagoina atoatoa 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 cursor
suiga.
<span role="button" tabindex="0">Non-button element button</span>
Elemene eseese
tuatusi
Ua <address>
toe faafou le elemene e toe setiina le faaletonu o le browser font-style
mai italic
i 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>
.
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.
O se tasi lauiloa i le Source Title
Elemene i totonu
The <abbr>
element receives basic styling to make it stand out amongst paragraph text.
Summary
The default cursor
on summary is text
, so we reset that to pointer
to convey that the element can be interacted with by clicking on it.
Some details
More info about the details.
Even more details
Here are even more details about the details.
HTML5 [hidden]
attribute
HTML5 adds a new global attribute named [hidden]
, which is styled as display: none
by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; }
to help prevent its display
from getting accidentally overridden.
<input type="text" hidden>
jQuery incompatibility
[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.