Avereno indray
Reboot, fitambarana fanovana CSS manokana amin'ny singa iray ao anaty rakitra tokana, kickstart Bootstrap mba hanomezana tsipika kanto, tsy miovaova ary tsotra hananganana azy.
fomba Fiasa
Reboot dia miorina amin'ny Normalize, manome singa HTML maro miaraka amin'ny fomba fijery somary tsy misy afa-tsy amin'ny alàlan'ny fisafidianana singa. Ny styling fanampiny dia atao amin'ny kilasy ihany. Ohatra, averinay indray ny <table>
fomba sasany ho an'ny tsipika fototra ary avy eo dia manome .table
, .table-bordered
, sy ny maro hafa.
Ireto ny torolalana sy antony hisafidianana izay hosoloina amin'ny Reboot:
- Havaozy ny soatoavin'ny navigateur sasany hampiasaina
rem
s fa tsyem
s ho an'ny elanelan'ny singa azo esorina. - Halaviro
margin-top
. Mety hirodana ny sisiny mitsangana, ka miteraka vokatra tsy ampoizina. Ny tena zava-dehibe anefa, ny tari-dalana tokanamargin
dia modely ara-tsaina tsotra kokoa. - Mba hanamafisana kokoa ny haben'ny fitaovana, ny singa sakana dia tokony hampiasa
rem
s ho an'nymargin
s. - Tazony
font
ho faran'izay kely ny fanambaràna momba ny fananana mifandraika amin'izany,inherit
raha azo atao.
CSS variables
Nampiana v5.1.1
Miaraka amin'ny v5.1.1, dia nanara-penitra ny fepetra takianay amin'ny @import
fitambaran'ny CSS rehetra (anisan'izany ny bootstrap.css
, bootstrap-reboot.css
, ary bootstrap-grid.css
ny fampidirana _root.scss
. Izany dia manampy :root
ny fari-piainan'ny CSS amin'ny fitambarana rehetra, na firy na firy amin'izy ireo no ampiasaina amin'io amboara io. Amin'ny farany dia hitohy ny Bootstrap 5 jereo ny fari-pahaizan'ny CSS fanampiny fanampiny rehefa mandeha ny fotoana.
Pejy tsy mety
Ny <html>
sy <body>
ny singa dia nohavaozina mba hanomezana default tsara kokoa manerana ny pejy. manokana kokoa:
- Ny
box-sizing
dia napetraka maneran-tany amin'ny singa rehetra—anisan'izany*::before
ny*::after
, toborder-box
. Izany dia miantoka fa ny sakan'ny singa nambara dia tsy mihoatra na oviana na oviana noho ny padding na sisintany.- Tsy misy fototra
font-size
ambara amin'ny<html>
, fa16px
heverina (ny navigateur default).font-size: 1rem
dia ampiharina amin'ny<body>
karazana-scaling mora mamaly amin'ny alàlan'ny fangatahan'ny haino aman-jery sady manaja ny safidin'ny mpampiasa ary miantoka ny fomba azo idirana kokoa. Ity navigateur default ity dia azo ovaina amin'ny alàlan'ny fanovana ny$font-size-root
variable.
- Tsy misy fototra
- Mametraka
<body>
globalfont-family
,font-weight
,line-height
, arycolor
. Ity dia nolovain'ny singa endrika sasany mba hisorohana ny tsy fitovian'ny endritsoratra. - Ho an'ny fiarovana, ny
<body>
manana nambarabackground-color
, default amin'ny#fff
.
Antontan'ny endritsoratra teratany
Bootstrap dia mampiasa "stack font native" na "stack font system" ho an'ny famoahana lahatsoratra tsara indrindra amin'ny fitaovana sy OS rehetra. Ireo endri-tsoratra rafitra ireo dia novolavolaina manokana miaraka amin'ireo fitaovana ankehitriny ao an-tsaina, miaraka amin'ny famandrihana nohatsaraina eo amin'ny efijery, fanohanana endri-tsoratra miovaova, sy ny maro hafa. Mamakia bebe kokoa momba ny antontam-peon'ny teratany ato amin'ity lahatsoratra Smashing Magazine ity .
$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;
Mariho fa satria misy endri-tsoratra emoji ny fitambaran'ny endri-tsoratra, maro ireo tarehin-tsoratra unicode marika/dingbat mahazatra no hadika ho sary miloko maro loko. Hiovaova ny endrik'izy ireo, miankina amin'ny fomba ampiasaina amin'ny endri-tsoratra emoji teratany an'ny navigateur/sehatra, ary tsy hisy fiantraikany amin'ny color
endrika CSS izy ireo.
Izany font-family
dia ampiharina amin'ny <body>
ary nolovaina ho azy maneran-tany manerana ny Bootstrap. Raha hanova ny global font-family
, manavao $font-family-base
ary mamerina indray ny Bootstrap.
CSS variables
Rehefa mitohy ny fahamatorana ny Bootstrap 5, dia mihamaro hatrany ny fomba hatsangana miaraka amin'ny fari-piainan'ny CSS ho fitaovana hanomezana fanamboarana amin'ny fotoana tena izy nefa tsy mila mamerina ny Sass foana. Ny fomba fiasantsika dia ny maka ireo fari-piadidiana Sass loharano ary manova azy ireo ho fari-piadidiana CSS. Amin'izany fomba izany, na dia tsy mampiasa CSS variables aza ianao dia mbola manana ny herin'ny Sass rehetra. Mbola an-dalam-pandrosoana izany ary mila fotoana hanatanterahana izany.
Ohatra, diniho ireto :root
variable CSS ireto ho an'ny fomba mahazatra <body>
:
@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};
Amin'ny fampiharana, ireo variable ireo dia ampiharina amin'ny Reboot toy izao:
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
}
Izany dia mamela anao hanao fanamboarana amin'ny fotoana tena izy araka izay tianao:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Lohateny sy fehintsoratra
Ny singa lohateniny rehetra—ohatra, <h1>
—ary <p>
averina ho margin-top
esorina. Nampiana lohateny margin-bottom: .5rem
sy fehintsoratra margin-bottom: 1rem
ho mora ny elanelana.
sasin-tenin'ny | OHATRA |
---|---|
<h1></h1> |
h1. Lohatenin'ny bootstrap |
<h2></h2> |
h2. Lohatenin'ny bootstrap |
<h3></h3> |
h3. Lohatenin'ny bootstrap |
<h4></h4> |
h4. Lohatenin'ny bootstrap |
<h5></h5> |
h5. Lohatenin'ny bootstrap |
<h6></h6> |
h6. Lohatenin'ny bootstrap |
Lisitra
Ny lisitra rehetra— <ul>
, <ol>
, ary <dl>
— dia margin-top
nesorina ary a margin-bottom: 1rem
. Ny lisitra voatokana dia tsy misy margin-bottom
. Naverinay ihany koa ny padding-left
on <ul>
sy ny <ol>
singa.
- Ny lisitra rehetra dia nesorina ny sisiny ambony
- Ary nilamina ny sisiny ambany
- Tsy misy sisiny ambany ny lisitra voatokana
- Amin'izany fomba izany dia manana endrika mirindra kokoa izy ireo
- Indrindra rehefa arahin'ny lisitra maromaro kokoa
- Naverina ihany koa ny padding havia
- Ity misy lisitra voalamina
- Miaraka amin'ny lisitra vitsivitsy
- Mitovy endrika amin'ny ankapobeny izy io
- Toy ny lisitra tsy voalamina teo aloha
Ho an'ny fomba tsotra kokoa, ambaratonga mazava ary elanelana tsara kokoa, ny lisitry ny famaritana dia nohavaozina margin
s. <dd>
s reset margin-left
ary 0
ampio margin-bottom: .5rem
. <dt>
s dia matavy .
- Lisitry ny famaritana
- Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.
- teny
- Famaritana ny teny.
- Famaritana faharoa amin'ny teny mitovy.
- Teny iray hafa
- Famaritana ho an'ity teny hafa ity.
Kaody inline
Fonosy sombin-kaody an-tsipika miaraka amin'ny <code>
. Ataovy azo antoka fa mandositra ny brackets zoro HTML.
<section>
tokony hofonosina toy ny inline.
For example, <code><section></code> should be wrapped as inline.
Sakana kaody
Ampiasao <pre>
s amin'ny andalana maromaro amin'ny kaody. Indray mandeha, ataovy azo antoka fa mandositra ny brackets amin'ny zoro amin'ny kaody mba handikana araka ny tokony ho izy. Ny <pre>
singa dia averina mba hanesorana azy margin-top
sy hampiasa rem
ireo singa ho an'ny 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>
hiovaova
Ho an'ny fanondro ny fari-piainana dia ampiasao ny <var>
tag.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Fampidirana mpampiasa
Ampiasao ny <kbd>
famantarana ny fampidirana izay matetika ampidirina amin'ny klavier.
Raha hanova ny fanovana dia tsindrio 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>
Santionany vokatra
Mba hanondroana santionany vokatra avy amin'ny programa dia ampiasao ny <samp>
tag.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
latabatra
Ny latabatra dia amboarina kely amin'ny fomba <caption>
s, mirodana ny sisin-tany, ary miantoka ny tsy fitoviana text-align
manerana. Ny fanovana fanampiny ho an'ny sisin-tany, ny padding, ary ny maro hafa dia tonga miaraka amin'ny .table
kilasy .
Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra |
---|---|---|---|
Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra |
Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra |
Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra |
teny
Ny singa endrika isan-karazany dia naverina naverina ho an'ny fomba fototra tsotra kokoa. Ireto ny sasany amin'ireo fiovana misongadina indrindra:
<fieldset>
Tsy manana sisin-tany, padding, na sisiny izy ireo mba ho mora ampiasaina ho famonosana ho an'ny fampidirana tsirairay na vondrona fampidirana.<legend>
s, toy ny fieldsets, dia navaozina ihany koa mba haseho ho lohatenin'ny karazana.<label>
s dia apetraka mbadisplay: inline-block
avelamargin
hampiharina.<input>
s,<select>
s,<textarea>
s, ary<button>
s dia matetika no resahin'ny Normalize, fa ny Reboot dia manala azy ireomargin
aryline-height: inherit
koa.<textarea>
s dia ovaina ho azo ovaina mitsangana fotsiny satria matetika "manapaka" ny fisehon'ny pejy ny fanovana ny haben'ny horizontaly.<button>
s sy ny<input>
bokotra singa mananacursor: pointer
rehefa:not(:disabled)
.
Ireo fiovana ireo sy ny maro hafa dia aseho eto ambany.
Fanohanana fampidirana daty sy loko
Ataovy ao an-tsaina fa ny fampidirana daty dia tsy tohanan'ny navigateur rehetra, izany hoe Safari.
Tondro amin'ny bokotra
Ny reboot dia misy fanatsarana role="button"
hanovana ny cursor default ho pointer
. Ampio amin'ny singa ity toetra ity mba hanondroana ny singa mifanentana. Ity andraikitra ity dia tsy ilaina amin'ny <button>
singa, izay mahazo ny cursor
fanovana azy manokana.
<span role="button" tabindex="0">Non-button element button</span>
singa samihafa
Adiresy
Havaozina ny <address>
singa mba hamerenana ny default amin'ny navigateur font-style
manomboka italic
amin'ny normal
. line-height
efa lova koa ankehitriny, ary margin-bottom: 1rem
nampiana. <address>
s dia ny fanolorana fampahalalana mifandray amin'ny razambe akaiky indrindra (na asa iray manontolo). Tehirizo ny fandrafetana amin'ny famaranana andalana miaraka amin'ny <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Anarana feno
[email protected]
Blockquote
Ny default margin
amin'ny blockquotes dia 1em 40px
, noho izany dia averinay izany 0 0 1rem
ho zavatra mifanaraka kokoa amin'ny singa hafa.
Teny nalaina fanta-daza, voarakitra ao anaty singa blockquote.
Olona malaza amin'ny Lohateny Loharano
Elements inline
Ny <abbr>
singa dia mahazo styling fototra mba hampisongadina azy amin'ny lahatsoratra andalana.
FAMINTINANA
Ny default cursor
amin'ny famintinana dia text
, noho izany dia averinay izany pointer
mba hampita fa ny singa dia azo ifandraisana amin'ny fipihana azy.
Ny antsipiriany sasany
Fanazavana bebe kokoa momba ny antsipiriany.
Ny antsipiriany bebe kokoa
Ireto misy antsipiriany bebe kokoa momba ny antsipiriany.
HTML5 [hidden]
toetra
HTML5 dia manampy toetra manerantany vaovao antsoina hoe[hidden]
, izay atao display: none
amin'ny fomba mahazatra. Mindrana hevitra avy amin'ny PureCSS , manatsara an'io default io izahay amin'ny alàlan'ny [hidden] { display: none !important; }
fanampiana amin'ny fisorohana azy display
tsy ho voasoloky tsy nahy.
<input type="text" hidden>
jQuery tsy mifanaraka
[hidden]
dia tsy mifanaraka amin'ny jQuery $(...).hide()
sy ny $(...).show()
fomba. Noho izany, tsy manohana manokana [hidden]
ny teknika hafa amin'ny fitantanana ny display
singa izahay amin'izao fotoana izao.
Raha te hanova fotsiny ny fahitan'ny singa iray, midika display
izany fa tsy ovaina ary mbola mety hisy fiantraikany amin'ny fandehan'ny antontan-taratasy ilay singa, ampiasao ny .invisible
kilasy .