Reboot
Reboot, ġabra ta 'bidliet CSS speċifiċi għall-element f'fajl wieħed, kickstart Bootstrap biex tipprovdi linja bażi eleganti, konsistenti u sempliċi biex tibni fuqha.
Approċċ
Reboot jibni fuq Normalize, u jipprovdi ħafna elementi HTML bi stili kemmxejn opinjonisti bl-użu biss ta 'seletturi ta' elementi. Grafika addizzjonali ssir biss bil-klassijiet. Pereżempju, aħna nibdew mill-ġdid xi <table>
stili għal linja bażi aktar sempliċi u aktar tard nipprovdu .table
, .table-bordered
, u aktar.
Hawn huma l-linji gwida u r-raġunijiet tagħna biex nagħżlu x'għandu jinqabeż f'Reboot:
- Aġġorna xi valuri default tal-brawżer biex tuża
rem
s minflokem
s għall-ispazjar tal-komponenti skalabbli. - Evita
margin-top
. Il-marġini vertikali jistgħu jikkrollaw, u jagħtu riżultati mhux mistennija. Aktar importanti minn hekk, direzzjoni waħda ta 'margin
huwa mudell mentali aktar sempliċi. - Għal skalar aktar faċli fuq id-daqsijiet tal-apparat, l-elementi tal-blokk għandhom jużaw
rem
s għalmargin
s. - Żomm dikjarazzjonijiet ta'
font
proprjetajiet relatati għall-minimu, billi tużainherit
kull meta jkun possibbli.
Paġni defaults
L -elementi <html>
u <body>
huma aġġornati biex jipprovdu defaults aħjar għall-paġna kollha. B'mod aktar speċifiku:
- Il
box-sizing
huwa globalment stabbilit fuq kull element—inklużi*::before
u*::after
, saborder-box
. Dan jiżgura li l-wisa 'ddikjarata tal-element qatt ma tinqabeż minħabba padding jew bordura.- L-ebda bażi
font-size
ma hija ddikjarata fuq il-<html>
, iżda16px
hija preżunta (il-browser default).font-size: 1rem
hija applikata fuq<body>
it-tip ta' skalar faċli li jirrispondu permezz ta' mistoqsijiet tal-midja filwaqt li tirrispetta l-preferenzi tal-utent u tiżgura approċċ aktar aċċessibbli. Din il-inadempjenza tal-brawżer tista' tiġi sostitwita billi timmodifika l-$font-size-root
varjabbli.
- L-ebda bażi
- Il
<body>
jistabbilixxi wkoll globalifont-family
,font-weight
,line-height
, ucolor
. Dan jintiret aktar tard minn xi elementi tal-forma biex jipprevjenu inkonsistenzi tat-tipa. - Għas-sigurtà, il-
<body>
għandu ddikjaratbackground-color
, inadempjenti għal#fff
.
Munzell tat-tipa indiġena
Bootstrap juża "munzell ta 'font indiġeni" jew "munzell ta' font tas-sistema" għall-aħjar rendering tat-test fuq kull apparat u OS. Dawn il-fonts tas-sistema ġew iddisinjati speċifikament bil-mezzi tal-lum f'moħħhom, b'rendiment imtejjeb fuq l-iskrins, appoġġ ta 'font varjabbli, u aktar. Aqra aktar dwar munzelli ta 'font indiġeni f'dan l- artikolu Smashing Magazine .
$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;
Innota li minħabba li l-munzell tat-tipa jinkludi fonts emoji, ħafna karattri komuni ta' simbolu/dingbat unicode se jingħataw bħala pittografi b'ħafna kuluri. Id-dehra tagħhom se tvarja, skont l-istil użat fil-font nattiv tal-emoji tal-browser/pjattaforma, u mhux se jiġu affettwati minn xi color
stili CSS.
Dan font-family
huwa applikat għall- <body>
u awtomatikament wiret globalment matul Bootstrap. Biex taqleb il-globali font-family
, aġġorna $font-family-base
u rikompila Bootstrap.
Intestaturi u paragrafi
L-elementi kollha tal-intestatura—eż, <h1>
—u <p>
huma reset biex margin-top
jitneħħew. Żdiedu l-intestaturi margin-bottom: .5rem
u l-paragrafi margin-bottom: 1rem
għal spazjar faċli.
Intestatura | Eżempju |
---|---|
<h1></h1> |
h1. Intestatura Bootstrap |
<h2></h2> |
h2. Intestatura Bootstrap |
<h3></h3> |
h3. Intestatura Bootstrap |
<h4></h4> |
h4. Intestatura Bootstrap |
<h5></h5> |
h5. Intestatura Bootstrap |
<h6></h6> |
h6. Intestatura Bootstrap |
Listi
Il-listi kollha— <ul>
, <ol>
, u <dl>
—tneħħew margin-top
u a margin-bottom: 1rem
. Listi mdaħħla m'għandhom l-ebda margin-bottom
. Imxejna wkoll reset il- padding-left
on <ul>
u l- <ol>
elementi.
- Il-listi kollha jitneħħew il-marġni ta' fuq
- U l-marġni tal-qiegħ tagħhom normalizzat
- Il-listi mdaħħla m'għandhom l-ebda marġni tal-qiegħ
- Dan il-mod ikollhom dehra aktar uniformi
- Partikolarment meta segwit minn aktar oġġetti tal-lista
- L-ikkuttunar tax-xellug ġie reset ukoll
- Hawn lista ordnata
- Bi ftit oġġetti tal-lista
- Għandu l-istess dehra ġenerali
- Bħala l-lista mhux ordnata preċedenti
Għal stil aktar sempliċi, ġerarkija ċara, u spazjar aħjar, il-listi tad-deskrizzjoni aġġornaw margin
s. <dd>
s reset margin-left
għal 0
u żid margin-bottom: .5rem
. <dt>
s huma b'tipa grassa .
- Listi ta' deskrizzjoni
- Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
- Terminu
- Definizzjoni għat-terminu.
- It-tieni definizzjoni għall-istess terminu.
- Terminu ieħor
- Definizzjoni għal dan it-terminu l-ieħor.
Kodiċi inline
Kebbeb snippets inline tal-kodiċi b' <code>
. Kun żgur li taħrab parentesi angolari HTML.
<section>
għandhom ikunu mgeżwra bħala inline.
For example, <code><section></code> should be wrapped as inline.
Blokki tal-kodiċi
Uża <pre>
s għal linji multipli ta 'kodiċi. Għal darb'oħra, kun żgur li taħrab kwalunkwe parentesi angolari fil-kodiċi għal rendering xieraq. L- <pre>
element jiġi reset biex jitneħħa margin-top
u juża l- rem
unitajiet tiegħu 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>
Varjabbli
Biex tindika varjabbli uża t- <var>
tikketta.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Input tal-utent
Uża l- <kbd>
biex tindika input li tipikament jiddaħħal permezz tat-tastiera.
Biex teditja s-settings, agħfas 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>
Output tal-kampjun
Biex tindika l-output tal-kampjun minn programm uża t- <samp>
tikketta.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabelli
Tabelli huma kemmxejn aġġustati għall-istil <caption>
s, kollass fruntieri, u jiżguraw konsistenti text-align
madwar. Bidliet addizzjonali għall-fruntieri, ikkuttunar, u aktar jiġu mal - .table
klassi .
Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda |
---|---|---|---|
Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda |
Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda |
Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda |
Formoli
Diversi elementi tal-forma ġew rebooted għal stili bażi aktar sempliċi. Hawn huma xi wħud mill-aktar bidliet notevoli:
<fieldset>
s m'għandhom l-ebda fruntieri, padding, jew marġini sabiex ikunu jistgħu jintużaw faċilment bħala tgeżwir għal inputs individwali jew gruppi ta 'inputs.<legend>
s, bħal fieldsets, ġew ukoll restyled biex jintwerew bħala intestatura ta 'tip.<label>
s huma stabbiliti biexdisplay: inline-block
jippermettumargin
li jiġu applikati.<input>
s,<select>
s,<textarea>
s, u<button>
s huma l-aktar indirizzati minn Normalize, iżda Reboot tneħħi tagħhommargin
u settijietline-height: inherit
, ukoll.<textarea>
s huma modifikati biex ikunu jistgħu jinbidlu biss b'mod vertikali peress li d-daqs orizzontali ta 'spiss "tkisser" it-tqassim tal-paġna.<button>
s u l-<input>
elementi tal-buttuna għandhomcursor: pointer
meta:not(:disabled)
.
Dawn il-bidliet, u aktar, huma murija hawn taħt.
Data u appoġġ għall-input tal-kulur
Żomm f'moħħok li l-inputs tad-data mhumiex appoġġjati bis -sħiħ mill-browsers kollha, jiġifieri Safari.
Pointers fuq buttuni
Reboot jinkludi titjib role="button"
biex jibdel il-cursor default għal pointer
. Żid dan l-attribut ma' elementi biex tgħin tindika li l-elementi huma interattivi. Dan ir-rwol mhuwiex meħtieġ għall- <button>
elementi, li jiksbu l- cursor
bidla tagħhom stess.
<span role="button" tabindex="0">Non-button element button</span>
Elementi varji
Indirizz
L- <address>
element jiġi aġġornat biex jerġa' jissettja l-default tal-browser font-style
minn italic
għal normal
. line-height
huwa wkoll issa wiret, u margin-bottom: 1rem
ġie miżjud. <address>
s huma għall-preżentazzjoni ta 'informazzjoni ta' kuntatt għall-eqreb antenat (jew korp sħiħ ta 'xogħol). Ippreserva l-ifformattjar billi tispiċċa l-linji b' <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Isem sħiħ
[email protected]
Blockquote
Id-default margin
fuq blockquotes huwa 1em 40px
, għalhekk aħna reset dak 0 0 1rem
għal xi ħaġa aktar konsistenti ma 'elementi oħra.
Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.
Xi ħadd famuż fit- Titolu Sors
Elementi inline
L- <abbr>
element jirċievi stil bażiku biex jagħmilha jispikka fost it-test tal-paragrafu.
Sommarju
Id-default cursor
fuq is-sommarju huwa text
, għalhekk aħna reset li pointer
biex inwasslu li l-element jista 'jiġi interazzjoni miegħu billi tikklikkja fuqu.
Xi dettalji
Aktar informazzjoni dwar id-dettalji.
Saħansitra aktar dettalji
Hawn huma saħansitra aktar dettalji dwar id-dettalji.
[hidden]
attribut HTML5
HTML5 iżid attribut globali ġdid bl-isem[hidden]
, li huwa mfassal bħala display: none
awtomatikament. Billi nissellef idea minn PureCSS , intejbu dan in-nuqqas billi nagħmlu [hidden] { display: none !important; }
biex ngħinu biex jiġi evitat li jiġi display
aċċidentalment overridut.
<input type="text" hidden>
Inkompatibbiltà jQuery
[hidden]
mhix kompatibbli ma 'jQuery $(...).hide()
u $(...).show()
metodi. Għalhekk, bħalissa ma napprovawx b'mod speċjali [hidden]
tekniki oħra għall-ġestjoni display
tal-elementi.
Biex sempliċement taqleb il-viżibilità ta' element, jiġifieri display
mhux immodifikat u l-element xorta jista' jaffettwa l-fluss tad-dokument, uża l- .invisible
klassi minflok.