Herlaai
Reboot, 'n versameling element-spesifieke CSS-veranderinge in 'n enkele lêer, begin Bootstrap om 'n elegante, konsekwente en eenvoudige basislyn te verskaf om op voort te bou.
Benadering
Herlaai bou voort op Normaliseer, en verskaf baie HTML-elemente met ietwat eiesinnige style deur slegs elementkiesers te gebruik. Bykomende stilering word slegs met klasse gedoen. Byvoorbeeld, ons herlaai sommige <table>
style vir 'n eenvoudiger basislyn en verskaf later .table
, .table-bordered
, en meer.
Hier is ons riglyne en redes om te kies wat om te ignoreer in Reboot:
- Dateer sommige blaaier verstekwaardes op om
rem
s in plaas vanem
s te gebruik vir skaalbare komponentspasiëring. - Vermy
margin-top
. Vertikale marges kan ineenstort, wat onverwagte resultate oplewer. Nog belangriker, 'n enkele rigting vanmargin
is 'n eenvoudiger geestelike model. - Vir makliker skaal oor toestelgroottes, moet blokelemente
rem
s virmargin
s gebruik. - Hou verklarings van
font
-verwante eiendomme tot 'n minimum, gebruikinherit
waar moontlik.
CSS veranderlikes
Bygevoeg in v5.1.1
Met v5.1.1 het ons ons vereiste @import
s oor al ons CSS-bundels gestandaardiseer (insluitend bootstrap.css
, bootstrap-reboot.css
, en bootstrap-grid.css
om in te sluit _root.scss
. Dit voeg :root
vlak CSS-veranderlikes by alle bondels, ongeag hoeveel van hulle in daardie bondel gebruik word. Uiteindelik sal Bootstrap 5 voortgaan om sien meer CSS veranderlikes bygevoeg met verloop van tyd.
Bladsy verstek
Die <html>
en <body>
elemente word opgedateer om beter bladsywye verstekke te verskaf. Meer spesifiek:
- Die
box-sizing
is wêreldwyd ingestel op elke element—insluitend*::before
en*::after
, totborder-box
. Dit verseker dat die verklaarde breedte van element nooit oorskry word as gevolg van opvulling of rand nie.- Geen basis
font-size
word op die verklaar<html>
nie, maar16px
word aanvaar (die blaaier verstek).font-size: 1rem
word toegepas op die<body>
vir maklike responsiewe tipe-skaling via medianavrae, terwyl gebruikersvoorkeure gerespekteer word en 'n meer toeganklike benadering verseker. Hierdie blaaier verstek kan oorheers word deur die$font-size-root
veranderlike te wysig.
- Geen basis
- Die
<body>
stel ook 'n globalefont-family
,font-weight
,line-height
, encolor
. Dit word later deur sommige vormelemente geërf om lettertipe-inkonsekwenthede te voorkom. - Vir veiligheid het die
<body>
'n verklaardebackground-color
, verstek na#fff
.
Inheemse fontstapel
Bootstrap gebruik 'n "inheemse fontstapel" of "stelselfontstapel" vir optimale teksweergawe op elke toestel en bedryfstelsel. Hierdie stelsellettertipes is spesifiek ontwerp met vandag se toestelle in gedagte, met verbeterde weergawe op skerms, veranderlike lettertipe-ondersteuning, en meer. Lees meer oor inheemse lettertipestapels in hierdie Smashing Magazine - artikel .
$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;
Let daarop dat omdat die fontstapel emoji-lettertipes insluit, baie algemene simbool/dingbat unicode-karakters as veelkleurige piktogramme weergegee sal word. Hul voorkoms sal verskil, afhangende van die styl wat in die blaaier/platform se inheemse emoji-lettertipe gebruik word, en hulle sal nie deur enige CSS- color
style geraak word nie.
Dit font-family
word toegepas op die <body>
en word outomaties wêreldwyd deur Bootstrap geërf. Om die globale font-family
, op te dateer $font-family-base
en weer saam te stel Bootstrap.
CSS veranderlikes
Soos Bootstrap 5 aanhou volwasse word, sal meer en meer style gebou word met CSS-veranderlikes as 'n manier om meer intydse aanpassing te verskaf sonder dat dit altyd nodig is om Sass te hersaamstel. Ons benadering is om ons bron Sass veranderlikes te neem en dit in CSS veranderlikes te transformeer. Op hierdie manier, selfs as jy nie CSS-veranderlikes gebruik nie, het jy steeds al die krag van Sass. Dit is nog aan die gang en sal tyd neem om ten volle te implementeer.
Oorweeg byvoorbeeld hierdie :root
CSS-veranderlikes vir algemene <body>
style:
@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};
In die praktyk word daardie veranderlikes dan in Reboot soos volg toegepas:
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
}
Wat jou toelaat om intydse aanpassings te maak soos jy wil:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Opskrifte en paragrawe
Alle opskrifelemente—bv.— <h1>
en <p>
word teruggestel om hulle te margin-top
verwyder. Opskrifte is margin-bottom: .5rem
bygevoeg en paragrawe margin-bottom: 1rem
vir maklike spasiëring.
Opskrif | Voorbeeld |
---|---|
<h1></h1> |
h1. Bootstrap opskrif |
<h2></h2> |
h2. Bootstrap opskrif |
<h3></h3> |
h3. Bootstrap opskrif |
<h4></h4> |
h4. Bootstrap opskrif |
<h5></h5> |
h5. Bootstrap opskrif |
<h6></h6> |
h6. Bootstrap opskrif |
Lyste
Alle lyste— <ul>
, <ol>
, en <dl>
— margin-top
word verwyder en 'n margin-bottom: 1rem
. Geneste lyste het geen margin-bottom
. Ons het ook die padding-left
aan <ul>
en <ol>
elemente teruggestel.
- Alle lyste se boonste kantlyn is verwyder
- En hul onderste marge het genormaliseer
- Geneste lyste het geen onderkant kantlyn nie
- Op hierdie manier het hulle 'n meer egalige voorkoms
- Veral wanneer gevolg deur meer lysitems
- Die linker vulling is ook teruggestel
- Hier is 'n geordende lys
- Met 'n paar lysitems
- Dit het dieselfde algehele voorkoms
- Soos die vorige ongeordende lys
Vir eenvoudiger stilering, duidelike hiërargie en beter spasiëring, het beskrywingslyste bygewerk margin
. <dd>
s terugstel margin-left
na 0
en voeg by margin-bottom: .5rem
. <dt>
s is vetgedruk .
- Beskrywing lyste
- 'n Beskrywingslys is perfek om terme te definieer.
- Termyn
- Definisie vir die term.
- 'n Tweede definisie vir dieselfde term.
- Nog 'n term
- Definisie vir hierdie ander term.
Inlyn kode
Wikkel inlyn-brokkies kode met <code>
. Maak seker dat jy HTML-hoekhakies ontsnap.
<section>
as inlyn toegedraai word.
For example, <code><section></code> should be wrapped as inline.
Kode blokke
Gebruik <pre>
s vir veelvuldige reëls kode. Weereens, maak seker dat jy enige hoekhakies in die kode ontsnap vir behoorlike weergawe. Die <pre>
element word teruggestel om sy eenhede te verwyder margin-top
en te gebruik rem
vir sy 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>
Veranderlikes
Gebruik die <var>
merker om veranderlikes aan te dui.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Gebruikersinvoer
Gebruik die <kbd>
om invoer aan te dui wat tipies via sleutelbord ingevoer word.
Om instellings te wysig, druk 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>
Voorbeeld uitset
<samp>
Gebruik die merker om voorbeelduitvoer van 'n program aan te dui .
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabelle
Tabelle is effens aangepas by styl <caption>
s, vou grense in, en verseker deurgaans konsekwent text-align
. Bykomende veranderinge vir grense, opvulling en meer kom saam met die .table
klas .
Tabel opskrif | Tabel opskrif | Tabel opskrif | Tabel opskrif |
---|---|---|---|
Tafelsel | Tafelsel | Tafelsel | Tafelsel |
Tafelsel | Tafelsel | Tafelsel | Tafelsel |
Tafelsel | Tafelsel | Tafelsel | Tafelsel |
Vorms
Verskeie vormelemente is herlaai vir eenvoudiger basisstyle. Hier is 'n paar van die mees noemenswaardige veranderinge:
<fieldset>
s het geen grense, opvulling of marge nie, sodat hulle maklik as omhulsels vir individuele insette of groepe insette gebruik kan word.<legend>
s, soos veldstelle, is ook herstileer om as 'n soort opskrif vertoon te word.<label>
s is ingestel op om toe tedisplay: inline-block
laatmargin
om toegepas te word.<input>
s,<select>
s,<textarea>
s en<button>
s word meestal aangespreek deur Normalize, maar Reboot verwyder ook hullemargin
en stelleline-height: inherit
.<textarea>
s word gewysig om slegs vertikaal te verander, aangesien horisontale grootteverandering dikwels bladsyuitleg "breek".<button>
s en<input>
knoppie elemente hetcursor: pointer
wanneer:not(:disabled)
.
Hierdie veranderinge, en meer, word hieronder gedemonstreer.
Ondersteuning vir datum- en kleurinvoer
Hou in gedagte dat datuminvoere nie ten volle deur alle blaaiers ondersteun word nie, naamlik Safari.
Aanwysers op knoppies
Herlaai sluit 'n verbetering in role="button"
om die verstekwyser na te verander pointer
. Voeg hierdie kenmerk by elemente om te help om aan te dui dat elemente interaktief is. Hierdie rol is nie nodig vir <button>
elemente wat hul eie cursor
verandering kry nie.
<span role="button" tabindex="0">Non-button element button</span>
Diverse elemente
Adres
Die <address>
element word opgedateer om die blaaier se verstek font-style
van italic
na terug te stel normal
. line-height
is ook nou geërf, en margin-bottom: 1rem
is bygevoeg. <address>
s is vir die aanbieding van kontakinligting vir die naaste voorouer (of 'n hele liggaam van werk). Behou formatering deur reëls met <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Volle naam
[email protected]
Blokaanhaling
Die verstek margin
op blokaanhalingstekens is 1em 40px
, so ons stel dit terug na 0 0 1rem
vir iets wat meer ooreenstem met ander elemente.
'n Bekende aanhaling, vervat in 'n blokaanhalingselement.
Iemand bekend in Brontitel
Inlyn elemente
Die <abbr>
element ontvang basiese stilering om dit tussen paragraafteks te laat uitstaan.
Opsomming
Die verstek cursor
op opsomming is text
, so ons stel dit terug na om aan pointer
te dui dat daar met die element interaksie kan word deur daarop te klik.
Sommige besonderhede
Meer inligting oor die besonderhede.
Selfs meer besonderhede
Hier is selfs meer besonderhede oor die besonderhede.
HTML5 [hidden]
kenmerk
HTML5 voeg ' n nuwe globale kenmerk by genaamd[hidden]
, wat as display: none
by verstek gestileer is. Deur 'n idee van PureCSS te leen , verbeter ons hierdie verstek deur te maak [hidden] { display: none !important; }
om te help voorkom dat dit display
per ongeluk oorskryf word.
<input type="text" hidden>
jQuery onversoenbaarheid
[hidden]
is nie versoenbaar met jQuery's $(...).hide()
en $(...).show()
metodes nie. Daarom onderskryf ons tans nie veral [hidden]
ander tegnieke vir die bestuur display
van die elemente nie.
Om bloot die sigbaarheid van 'n element te wissel, wat beteken dat display
dit nie gewysig is nie en die element steeds die vloei van die dokument kan beïnvloed, gebruik eerder die .invisible
klas .