Reboot
Reboot — elementiem raksturīgu CSS izmaiņu kolekcija vienā failā — palaidiet Bootstrap, lai nodrošinātu elegantu, konsekventu un vienkāršu bāzes līniju, uz kuras balstīties.
Pieeja
Atsāknēšana balstās uz Normalize, nodrošinot daudzus HTML elementus ar zināmā mērā pārdomātiem stiliem, izmantojot tikai elementu atlasītājus. Papildu stils tiek veikts tikai ar klasēm. Piemēram, mēs atsāknējam dažus <table>
stilus, lai iegūtu vienkāršāku bāzes līniju, un vēlāk nodrošinām .table
, .table-bordered
, un citus.
Tālāk ir sniegtas mūsu vadlīnijas un iemesli, kādēļ izvēlēties, ko ignorēt iestatījumā Reboot.
- Atjauniniet dažas pārlūkprogrammas noklusējuma vērtības, lai mērogojamu komponentu atstarpēm izmantotu
rem
s, nevis s.em
- Izvairieties
margin-top
. Vertikālās piemales var sabrukt, radot negaidītus rezultātus. Tomēr vēl svarīgāk ir tas, ka viens virziensmargin
ir vienkāršāks garīgais modelis. - Lai atvieglotu mērogošanu starp ierīču izmēriem, bloku elementos s ir jāizmanto
rem
smargin
. - Samaziniet ar saistīto rekvizītu deklarāciju skaitu
font
līdz minimumam, izmantojot,inherit
kad vien iespējams.
Lapas noklusējuma iestatījumi
Elementi <html>
un <body>
ir atjaunināti, lai nodrošinātu labākus visas lapas noklusējuma iestatījumus. Konkrētāk:
- Ir
box-sizing
globāli iestatīts katram elementam, tostarp*::before
un*::after
, uzborder-box
. Tas nodrošina, ka deklarētais elementa platums nekad netiek pārsniegts polsterējuma vai apmales dēļ.- Nekāda bāze
font-size
nav deklarēta<html>
, bet16px
tiek pieņemta (pārlūka noklusējuma iestatījums).font-size: 1rem
tiek izmantots,<body>
lai viegli reaģētu tipa mērogošana, izmantojot multivides vaicājumus, vienlaikus ievērojot lietotāju preferences un nodrošinot pieejamāku pieeju. Šo pārlūkprogrammas noklusējumu var ignorēt, mainot$font-size-root
mainīgo.
- Nekāda bāze
- Arī
<body>
nosaka globālofont-family
,font-weight
,line-height
, uncolor
. To vēlāk pārmanto daži formas elementi, lai novērstu fontu nekonsekvenci. - Drošības nolūkos
<body>
ir norādītsbackground-color
, ka noklusējuma vērtība ir#fff
.
Vietējā fontu kaudze
Bootstrap izmanto “native font steck” vai “system font steck” optimālai teksta renderēšanai katrā ierīcē un OS. Šie sistēmas fonti ir īpaši izstrādāti, ņemot vērā mūsdienu ierīces, ar uzlabotu renderēšanu ekrānos, mainīgo fontu atbalstu un daudz ko citu. Plašāku informāciju par vietējo fontu kaudzēm lasiet šajā Smashing Magazine rakstā .
$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;
Ņemiet vērā: tā kā fontu kaudzīte ietver emocijzīmju fontus, daudzas izplatītas simbolu/dingbat unikoda rakstzīmes tiks atveidotas kā daudzkrāsainas piktogrammas. To izskats var atšķirties atkarībā no stila, kas tiek izmantots pārlūkprogrammas/platformas vietējā emocijzīmju fontā, un tos neietekmēs nekādi CSS color
stili.
Tas font-family
tiek piemērots <body>
un automātiski mantots globāli visā Bootstrap. Lai pārslēgtu globālo font-family
, atjauniniet $font-family-base
un atkārtoti kompilējiet Bootstrap.
Virsraksti un rindkopas
Visi virsraksta elementi, piemēram, <h1>
un <p>
tiek atiestatīti, lai tos margin-top
noņemtu. Ir pievienoti virsraksti margin-bottom: .5rem
un rindkopas margin-bottom: 1rem
, lai atvieglotu atstarpi.
Virsraksts | Piemērs |
---|---|
<h1></h1> |
h1. Bootstrap virsraksts |
<h2></h2> |
h2. Bootstrap virsraksts |
<h3></h3> |
h3. Bootstrap virsraksts |
<h4></h4> |
h4. Bootstrap virsraksts |
<h5></h5> |
h5. Bootstrap virsraksts |
<h6></h6> |
h6. Bootstrap virsraksts |
Saraksti
Visiem sarakstiem <ul>
— , <ol>
, un <dl>
— ir margin-top
noņemti un ir margin-bottom: 1rem
. Ligzdotajos sarakstos nav margin-bottom
. Esam arī atiestatījuši padding-left
ieslēgšanu <ul>
un <ol>
elementus.
- Visiem sarakstiem ir noņemta augšējā piemale
- Un to apakšējā robeža normalizējās
- Ligzdotajiem sarakstiem nav apakšējās malas
- Tādā veidā tiem ir vienmērīgāks izskats
- Īpaši tad, ja tam seko vairāk saraksta vienumu
- Arī kreisais polsterējums ir atiestatīts
- Šeit ir sakārtots saraksts
- Ar dažiem saraksta elementiem
- Tam ir tāds pats kopējais izskats
- Tāpat kā iepriekšējais nesakārtotais saraksts
Lai nodrošinātu vienkāršāku stilu, skaidru hierarhiju un labāku atstarpi, aprakstu saraksti ir atjaunināti margin
. <dd>
s atiestatīt un margin-left
pievienot . s ir treknrakstā .0
margin-bottom: .5rem
<dt>
- Aprakstu saraksti
- Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
- Jēdziens
- Termina definīcija.
- Otra definīcija šim pašam terminam.
- Vēl viens termins
- Šī cita termina definīcija.
Iekļauts kods
Aptiniet iekļautos koda fragmentus ar <code>
. Noteikti izvairieties no HTML leņķiekavām.
<section>
jāiesaiņo kā iekļauts.
For example, <code><section></code> should be wrapped as inline.
Kodu bloki
Izmantojiet <pre>
s vairākām koda rindām. Vēlreiz, lai nodrošinātu pareizu renderēšanu, kodā noteikti neizmantojiet leņķa iekavas. Elements <pre>
tiek atiestatīts, lai to noņemtu margin-top
un tam izmantotu rem
vienības 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>
Mainīgie lielumi
Lai norādītu mainīgos, izmantojiet <var>
tagu.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Lietotāja ievade
Izmantojiet, <kbd>
lai norādītu ievadi, kas parasti tiek ievadīta, izmantojot tastatūru.
Lai rediģētu iestatījumus, nospiediet 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>
Parauga izvade
Lai norādītu programmas izvades paraugu, izmantojiet <samp>
tagu.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabulas
Tabulas ir nedaudz pielāgotas stilam <caption>
s, sakļautas apmales un nodrošināta konsekvence text-align
visā. Papildu izmaiņas apmalēm, polsterējumam un citam saturam ir iekļautas .table
klasē .
Tabulas virsraksts | Tabulas virsraksts | Tabulas virsraksts | Tabulas virsraksts |
---|---|---|---|
Tabulas šūna | Tabulas šūna | Tabulas šūna | Tabulas šūna |
Tabulas šūna | Tabulas šūna | Tabulas šūna | Tabulas šūna |
Tabulas šūna | Tabulas šūna | Tabulas šūna | Tabulas šūna |
Veidlapas
Dažādi formas elementi ir pārstartēti vienkāršākiem bāzes stiliem. Šeit ir dažas no visievērojamākajām izmaiņām:
<fieldset>
s nav apmaļu, polsterējuma vai piemales, tāpēc tos var viegli izmantot kā atsevišķu ievadu vai ievades grupu iesaiņojumus.<legend>
s, tāpat kā lauku kopas, arī ir pārveidotas, lai tās tiktu parādītas kā sava veida virsraksti.<label>
s ir iestatīti uz,display: inline-block
lai ļautumargin
to lietot.<input>
s,<select>
s,<textarea>
s un<button>
s galvenokārt risina Normalize, bet Reboot noņem tosmargin
un nosakaline-height: inherit
arī .<textarea>
s ir modificēti, lai to izmērus varētu mainīt tikai vertikāli, jo horizontālā izmēra maiņa bieži vien “salauž” lapas izkārtojumu.<button>
s un<input>
pogu elementiem ircursor: pointer
, kad:not(:disabled)
.
Šīs un citas izmaiņas ir parādītas tālāk.
Datuma un krāsu ievades atbalsts
Ņemiet vērā, ka datuma ievadi pilnībā neatbalsta visas pārlūkprogrammas, proti, Safari.
Norādes uz pogām
Reboot ietver uzlabojumu, role="button"
lai mainītu noklusējuma kursoru uz pointer
. Pievienojiet šo atribūtu elementiem, lai palīdzētu norādīt, ka elementi ir interaktīvi. Šī loma nav nepieciešama <button>
elementiem, kas paši cursor
mainās.
<span role="button" tabindex="0">Non-button element button</span>
Dažādi elementi
Adrese
Elements <address>
tiek atjaunināts, lai atiestatītu pārlūkprogrammas noklusējuma iestatījumus font-style
no italic
uz normal
. line-height
tagad ir arī mantots un margin-bottom: 1rem
ir pievienots. <address>
s ir paredzēti tuvākā senča (vai visa darba kopuma) kontaktinformācijas uzrādīšanai. Saglabājiet formatējumu, rindiņas beidzot ar <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Pilns vārds
[email protected]
Blockquote
Blockquotes noklusējuma iestatījums margin
ir 1em 40px
, tāpēc mēs to atiestatām, lai 0 0 1rem
iegūtu vairāk atbilstības citiem elementiem.
Labi zināms citāts, kas ietverts blockquote elementā.
Kāds slavens avota nosaukumā
Iekļautie elementi
Elementam <abbr>
tiek piešķirts pamata stils, lai tas izceltos starp rindkopas tekstu.
Kopsavilkums
Kopsavilkuma noklusējuma cursor
vērtība ir text
, tāpēc mēs to atiestatām uz, pointer
lai norādītu, ka elementu var mijiedarboties, noklikšķinot uz tā.
Dažas detaļas
Vairāk informācijas par detaļām.
Vēl sīkāka informācija
Šeit ir vēl sīkāka informācija par detaļām.
HTML5 [hidden]
atribūts
HTML5 pievieno jaunu globālo atribūtu ar nosaukumu[hidden]
display: none
, kas pēc noklusējuma tiek veidots kā stils . Aizņemoties ideju no PureCSS , mēs uzlabojam šo noklusējuma iestatījumu, [hidden] { display: none !important; }
palīdzot novērst tās display
nejaušu ignorēšanu.
<input type="text" hidden>
jQuery nesaderība
[hidden]
nav saderīgs ar jQuery $(...).hide()
un $(...).show()
metodēm. Tāpēc mēs pašlaik īpaši neatbalstām [hidden]
citus elementu pārvaldības paņēmienus display
.
Lai vienkārši pārslēgtu elementa redzamību, kas nozīmē, ka display
tas netiek mainīts un elements joprojām var ietekmēt dokumenta plūsmu, izmantojiet .invisible
klasi .