I-reboot
I-reboot, isang koleksyon ng mga pagbabago sa CSS na partikular sa elemento sa iisang file, simulan ang Bootstrap upang magbigay ng elegante, pare-pareho, at simpleng baseline na bubuuin.
Lapitan
Ang pag-reboot ay bubuo sa Normalize, na nagbibigay ng maraming elemento ng HTML na may medyo opinyong mga istilo gamit lamang ang mga tagapili ng elemento. Ang karagdagang pag-istilo ay ginagawa lamang sa mga klase. Halimbawa, nagre-reboot kami ng ilang <table>
istilo para sa isang mas simpleng baseline at sa paglaon ay nagbibigay kami ng .table
, .table-bordered
, at higit pa.
Narito ang aming mga alituntunin at dahilan sa pagpili kung ano ang i-override sa Reboot:
- I-update ang ilang default na value ng browser para gamitin ang
rem
s sa halip naem
s para sa scalable na spacing ng bahagi. - Iwasan ang
margin-top
. Maaaring bumagsak ang mga vertical na margin, na nagbubunga ng mga hindi inaasahang resulta. Higit sa lahat, ang isang direksyon ngmargin
ay isang mas simpleng modelo ng pag-iisip. - Para sa mas madaling pag-scale sa mga laki ng device, ang mga elemento ng block ay dapat gumamit
rem
ng s para samargin
s. - Panatilihing pinakamababa ang mga deklarasyon ng mga
font
katangiang nauugnay sa paggamit,inherit
hangga't maaari.
Mga variable ng CSS
Idinagdag sa v5.1.1
Sa v5.1.1, na-standardize namin ang aming mga kinakailangang @import
s sa lahat ng aming mga bundle ng CSS (kabilang ang bootstrap.css
, bootstrap-reboot.css
, at bootstrap-grid.css
isama ang _root.scss
. Nagdaragdag :root
ito ng mga variable ng antas ng CSS sa lahat ng mga bundle, gaano man karami sa mga ito ang ginagamit sa bundle na iyon. Sa huli ang Bootstrap 5 ay magpapatuloy sa makakita ng higit pang mga variable ng CSS na idinagdag sa paglipas ng panahon.
Mga default ng page
Ang <html>
at <body>
mga elemento ay ina-update upang magbigay ng mas mahusay na mga default sa buong page. Mas partikular:
- Ang
box-sizing
ay pandaigdigang nakatakda sa bawat elemento—kabilang ang*::before
at*::after
, hanggangborder-box
. Tinitiyak nito na ang ipinahayag na lapad ng elemento ay hindi kailanman lalampas dahil sa padding o hangganan.- Walang base
font-size
na idineklara sa<html>
, ngunit16px
ipinapalagay (ang default ng browser).font-size: 1rem
ay inilapat sa<body>
para sa madaling tumutugon na uri-scaling sa pamamagitan ng mga query sa media habang iginagalang ang mga kagustuhan ng user at tinitiyak ang isang mas madaling paraan. Maaaring ma-override ang default ng browser na ito sa pamamagitan ng pagbabago sa$font-size-root
variable.
- Walang base
- Nagtatakda din ang The
<body>
ng isang pandaigdigangfont-family
,font-weight
,line-height
, atcolor
. Ito ay minana sa ibang pagkakataon ng ilang mga elemento ng form upang maiwasan ang mga hindi pagkakapare-pareho ng font. - Para sa kaligtasan, ang
<body>
ay may ipinahayagbackground-color
na , defaulting sa#fff
.
Native na font stack
Gumagamit ang Bootstrap ng "native font stack" o "system font stack" para sa pinakamabuting pag-render ng text sa bawat device at OS. Ang mga font ng system na ito ay partikular na idinisenyo na isinasaalang-alang ang mga device ngayon, na may pinahusay na pag-render sa mga screen, suporta sa variable na font, at higit pa. Magbasa pa tungkol sa mga native na stack ng font sa artikulong ito sa 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;
Tandaan na dahil ang stack ng font ay may kasamang mga emoji font, maraming karaniwang simbolo/dingbat na unicode na character ang ire-render bilang maraming kulay na pictograph. Mag-iiba-iba ang kanilang hitsura, depende sa istilong ginamit sa katutubong emoji font ng browser/platform, at hindi sila maaapektuhan ng anumang mga color
istilo ng CSS.
font-family
Inilapat ito sa at <body>
awtomatikong minana sa buong Bootstrap. Upang ilipat ang global font-family
, i-update $font-family-base
at i-compile muli ang Bootstrap.
Mga variable ng CSS
Sa patuloy na pag-mature ng Bootstrap 5, parami nang parami ang mga istilong bubuuin gamit ang mga variable ng CSS bilang isang paraan upang makapagbigay ng mas maraming real-time na pag-customize nang hindi kinakailangang palaging i-compile ang Sass. Ang aming diskarte ay kunin ang aming source na Sass variable at ibahin ang mga ito sa CSS variable. Sa ganoong paraan, kahit na hindi ka gumagamit ng mga variable ng CSS, nasa iyo pa rin ang lahat ng kapangyarihan ng Sass. Kasalukuyan pa itong isinasagawa at magtatagal upang ganap na maipatupad.
Halimbawa, isaalang-alang ang mga :root
variable ng CSS na ito para sa mga karaniwang <body>
istilo:
@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};
Sa pagsasagawa, ang mga variable na iyon ay inilapat sa Reboot tulad nito:
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
}
Na nagbibigay-daan sa iyong gumawa ng mga real-time na pag-customize gayunpaman gusto mo:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Mga pamagat at talata
Lahat ng elemento ng heading—hal., <h1>
—at <p>
na-reset upang margin-top
maalis ang mga ito. Ang mga heading ay margin-bottom: .5rem
idinagdag at mga talata margin-bottom: 1rem
para sa madaling espasyo.
Heading | Halimbawa |
---|---|
<h1></h1> |
h1. Bootstrap na heading |
<h2></h2> |
h2. Bootstrap na heading |
<h3></h3> |
h3. Bootstrap na heading |
<h4></h4> |
h4. Bootstrap na heading |
<h5></h5> |
h5. Bootstrap na heading |
<h6></h6> |
h6. Bootstrap na heading |
Mga listahan
Lahat ng listahan— <ul>
, <ol>
, at <dl>
—ay margin-top
inalis ang mga ito at isang margin-bottom: 1rem
. Ang mga nested list ay walang margin-bottom
. Na-reset din namin ang padding-left
on <ul>
at mga <ol>
elemento.
- Ang lahat ng listahan ay inalis ang kanilang pinakamataas na margin
- At ang kanilang ibabang margin ay na-normalize
- Ang mga nested na listahan ay walang ilalim na margin
- Sa ganitong paraan mayroon silang mas pantay na hitsura
- Lalo na kapag sinusundan ng higit pang mga item sa listahan
- Na-reset din ang kaliwang padding
- Narito ang isang nakaayos na listahan
- Na may ilang mga item sa listahan
- Ito ay may parehong pangkalahatang hitsura
- Tulad ng nakaraang unordered list
Para sa mas simpleng pag-istilo, malinaw na hierarchy, at mas magandang espasyo, ang mga listahan ng paglalarawan ay nag-update ng mga margin
s. <dd>
s i-reset margin-left
sa 0
at idagdag margin-bottom: .5rem
. <dt>
s ay naka- bold .
- Mga listahan ng paglalarawan
- Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.
- Termino
- Kahulugan para sa termino.
- Ang pangalawang kahulugan para sa parehong termino.
- Isa pang termino
- Kahulugan para sa ibang terminong ito.
Inline na code
I-wrap ang mga inline na snippet ng code gamit ang <code>
. Siguraduhing makatakas sa mga HTML angle bracket.
<section>
dapat na balot bilang inline.
For example, <code><section></code> should be wrapped as inline.
Mga bloke ng code
Gumamit <pre>
ng s para sa maraming linya ng code. Muli, tiyaking takasan ang anumang mga anggulong bracket sa code para sa wastong pag-render. Ni-reset ang <pre>
elemento upang alisin ito margin-top
at gamitin rem
ang mga unit para sa 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>
Mga variable
Para sa pagtukoy ng mga variable gamitin ang <var>
tag.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
input ng user
Gamitin ang <kbd>
upang isaad ang input na karaniwang ipinapasok sa pamamagitan ng keyboard.
Upang i-edit ang mga setting, pindutin ang 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>
Sample na output
Para sa pagpahiwatig ng sample na output mula sa isang program gamitin ang <samp>
tag.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Mga mesa
Ang mga talahanayan ay bahagyang inaayos sa mga istilo <caption>
, gumuho ng mga hangganan, at tinitiyak na pare -pareho sa text-align
kabuuan. Ang mga karagdagang pagbabago para sa mga hangganan, padding, at higit pa ay kasama ng .table
klase .
Pamagat ng talahanayan | Pamagat ng talahanayan | Pamagat ng talahanayan | Pamagat ng talahanayan |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Mga porma
Na-reboot ang iba't ibang elemento ng form para sa mas simpleng mga base style. Narito ang ilan sa mga pinakakilalang pagbabago:
<fieldset>
s ay walang mga hangganan, padding, o margin upang madali silang magamit bilang mga wrapper para sa mga indibidwal na input o grupo ng mga input.<legend>
s, tulad ng mga fieldset, ay na-restyle din upang maipakita bilang isang heading ng mga uri.<label>
s ay nakatakda sadisplay: inline-block
upang payaganmargin
na mailapat.<input>
Ang s,<select>
s,<textarea>
s, at<button>
s ay kadalasang tinutugunan ng Normalize, ngunit ang Reboot ay nag-aalis din ng kanilangmargin
at setline-height: inherit
.<textarea>
Ang mga s ay binago upang mapalitan lamang nang patayo dahil ang pahalang na pagbabago ng laki ay madalas na "sinisira" ang layout ng pahina.<button>
s at<input>
mga elemento ng button ay maycursor: pointer
kapag:not(:disabled)
.
Ang mga pagbabagong ito, at higit pa, ay ipinapakita sa ibaba.
Suporta sa input ng petsa at kulay
Tandaan na ang mga input ng petsa ay hindi ganap na sinusuportahan ng lahat ng mga browser, katulad ng Safari.
Mga pointer sa mga pindutan
Ang pag-reboot ay may kasamang pagpapahusay para role="button"
baguhin ang default na cursor sa pointer
. Idagdag ang attribute na ito sa mga elemento upang makatulong na ipahiwatig na ang mga elemento ay interactive. Ang tungkuling ito ay hindi kailangan para sa <button>
mga elemento, na nakakakuha ng sarili nilang cursor
pagbabago.
<span role="button" tabindex="0">Non-button element button</span>
Iba't ibang elemento
Address
Ina-update ang <address>
elemento upang i-reset ang default ng browser font-style
mula italic
sa normal
. line-height
ay minana na rin ngayon, at margin-bottom: 1rem
naidagdag na. <address>
s ay para sa pagpapakita ng impormasyon sa pakikipag-ugnayan para sa pinakamalapit na ninuno (o isang buong katawan ng trabaho). Panatilihin ang pag-format sa pamamagitan ng pagtatapos ng mga linya na may <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Buong Pangalan
[email protected]
Blockquote
Ang default margin
sa blockquotes ay 1em 40px
, kaya ni-reset namin iyon para 0 0 1rem
sa isang bagay na mas pare-pareho sa iba pang mga elemento.
Isang kilalang quote, na nasa isang blockquote na elemento.
Isang taong sikat sa Pamagat ng Pinagmulan
Mga inline na elemento
Ang <abbr>
elemento ay tumatanggap ng pangunahing pag-istilo upang gawin itong kakaiba sa mga teksto ng talata.
Buod
Ang default cursor
sa buod ay text
, kaya ni-reset namin iyon pointer
upang maiparating na ang elemento ay maaaring makipag-ugnayan sa pamamagitan ng pag-click dito.
Ilang detalye
Higit pang impormasyon tungkol sa mga detalye.
Higit pang mga detalye
Narito ang higit pang mga detalye tungkol sa mga detalye.
HTML5 [hidden]
attribute
Nagdaragdag ang HTML5 ng bagong global attribute na pinangalanang[hidden]
, na naka-istilo bilang display: none
default. Nanghihiram ng ideya mula sa PureCSS , pinagbubuti namin ang default na ito sa pamamagitan ng paggawa [hidden] { display: none !important; }
upang makatulong na maiwasan ang display
aksidenteng pag-override nito.
<input type="text" hidden>
hindi pagkakatugma ng jQuery
[hidden]
ay hindi tugma sa jQuery's $(...).hide()
at mga $(...).show()
pamamaraan. Samakatuwid, hindi kami kasalukuyang nag-eendorso lalo na [hidden]
sa iba pang mga diskarte para sa pamamahala display
ng mga elemento.
Upang i-toggle lang ang visibility ng isang elemento, ibig sabihin display
ay hindi ito binago at ang elemento ay maaari pa ring makaapekto sa daloy ng dokumento, gamitin ang .invisible
klase sa halip.