Rov pib dua
Reboot, ib qho kev sau ntawm cov ntsiab lus tshwj xeeb CSS hloov pauv hauv ib cov ntaub ntawv, kickstart Bootstrap los muab qhov zoo nkauj, zoo ib yam, thiab cov hauv paus ntsiab lus yooj yim los tsim.
Mus kom ze
Reboot ua raws li Normalize, muab ntau lub ntsiab lus HTML nrog qee qhov kev xav zoo uas siv cov khoom xaiv nkaus xwb. Ntxiv styling tsuas yog ua nrog cov chav kawm. Piv txwv li, peb reboot ib co <table>
qauv rau ib tug yooj yim lub hauv paus thiab tom qab ntawd muab .table
, .table-bordered
, thiab ntau dua.
Nov yog peb cov lus qhia thiab cov laj thawj ntawm kev xaiv dab tsi los hla hauv Reboot:
- Hloov kho qee qhov browser default values siv
rem
s es tsis txhobem
s rau scalable tivthaiv sib nrug. - Zam
margin-top
. Vertical margins tuaj yeem tawg, ua rau cov txiaj ntsig tsis tau xav txog. Qhov tseem ceeb tshaj, txawm li cas los xij, ib qho kev taw qhia ntawmmargin
yog tus qauv kev puas siab ntsws yooj yim. - Txhawm rau kom yooj yim scaling hla qhov ntau thiab tsawg, thaiv cov ntsiab lus yuav tsum siv
rem
s raumargin
s. - Khaws cov lus tshaj tawm ntawm
font
cov khoom ntsig txog yam tsawg kawg nkaus, sivinherit
thaum twg los tau.
CSS variables
Ntxiv hauv v5.1.1
Nrog v5.1.1, peb standardized peb xav tau @import
s nyob rau hauv tag nrho peb CSS bundles (xws li bootstrap.css
, bootstrap-reboot.css
, thiab bootstrap-grid.css
suav nrog _root.scss
. Qhov no ntxiv :root
qib CSS variables rau tag nrho cov bundles, tsis hais ntau npaum li cas ntawm lawv tau siv nyob rau hauv lub nras. Thaum kawg Bootstrap 5 yuav txuas ntxiv mus. saib ntau CSS variables ntxiv rau lub sij hawm.
Nplooj ntawv defaults
Cov <html>
thiab <body>
cov ntsiab lus tau hloov kho kom muab cov nplooj ntawv zoo dua qub. Tshwj xeeb tshaj yog:
- Lub
box-sizing
ntiaj teb no tau teeb tsa rau txhua lub ntsiab lus - suav nrog*::before
thiab*::after
, rauborder-box
. Qhov no ua kom ntseeg tau tias qhov kev tshaj tawm dav ntawm lub ntsiab lus tsis tau tshaj vim padding lossis ciam teb.- Tsis muaj lub hauv paus
font-size
tau tshaj tawm rau ntawm<html>
, tab sis16px
yog assumed (qhov browser default).font-size: 1rem
yog siv rau ntawm qhov<body>
yooj yim teb hom-scaling ntawm cov lus nug xov xwm thaum saib xyuas cov neeg siv nyiam thiab ua kom muaj kev nkag tau yooj yim dua. Qhov browser neej ntawd tuaj yeem hla dhau los ntawm kev hloov kho qhov$font-size-root
sib txawv.
- Tsis muaj lub hauv paus
- Lub
<body>
kuj teev ib lub ntiaj teb nofont-family
,font-weight
,line-height
, thiabcolor
. Qhov no tau txais txiaj ntsig tom qab los ntawm qee cov ntsiab lus los tiv thaiv font inconsistencies. - Rau kev nyab xeeb, tus
<body>
tau tshaj tawmbackground-color
, defaulting rau#fff
.
Native font pawg
Bootstrap siv ib qho "neeg haiv neeg font pawg" lossis "system font stack" rau cov ntawv nyeem zoo tshaj plaws ntawm txhua lub cuab yeej thiab OS. Cov kab ke fonts no tau tsim tshwj xeeb nrog cov khoom siv niaj hnub no hauv siab, nrog kev ua kom zoo dua ntawm cov ntxaij vab tshaus, kev txhawb nqa font sib txawv, thiab ntau dua. Nyeem ntxiv txog cov kab ntawv ib txwm nyob hauv kab lus 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;
Nco ntsoov tias vim tias pawg font suav nrog emoji fonts, ntau lub cim / dingbat unicode cim yuav raug muab ua ntau xim duab. Lawv cov tsos yuav txawv, nyob ntawm seb tus qauv siv nyob rau hauv browser / platform cov haiv neeg emoji font, thiab lawv yuav tsis cuam tshuam los ntawm CSS color
style.
Qhov no font-family
yog siv rau qhov <body>
thiab tau txais txiaj ntsig thoob ntiaj teb thoob plaws hauv Bootstrap. Txhawm rau hloov lub ntiaj teb font-family
, hloov kho $font-family-base
thiab rov ua dua Bootstrap.
CSS variables
Raws li Bootstrap 5 tseem paub tab, ntau thiab ntau tus qauv yuav tsim nrog CSS variables raws li ib tug txhais tau tias los muab ntau real-time customization yam tsis tas yuav tsum tau ib txwm recompile Sass. Peb txoj hauv kev yog coj peb qhov kev hloov pauv Sass thiab hloov pauv mus rau CSS hloov pauv. Txoj kev ntawd, txawm tias koj tsis siv CSS hloov pauv, koj tseem muaj tag nrho lub zog ntawm Sass. Qhov no tseem tab tom ua tiav thiab yuav siv sijhawm los ua kom tiav.
Piv txwv li, xav txog cov :root
CSS variables rau cov <body>
qauv:
@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};
Hauv kev xyaum, cov kev hloov pauv no tau siv rau hauv Reboot zoo li:
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
}
Uas tso cai rau koj los ua kev hloov kho lub sijhawm tiag tiag li koj nyiam:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Kab lus thiab kab lus
Tag nrho cov ntsiab lus - piv txwv li, <h1>
- thiab <p>
rov pib dua kom muaj lawv margin-top
tshem tawm. Cov ncauj lus tau margin-bottom: .5rem
ntxiv thiab kab lus margin-bottom: 1rem
kom yooj yim sib nrug.
Lub taub hau | Piv txwv |
---|---|
<h1></h1> |
h 1. Bootstrap taub hau |
<h2></h2> |
h 2. Bootstrap taub hau |
<h3></h3> |
h 3. Bootstrap taub hau |
<h4></h4> |
h 4. Bootstrap taub hau |
<h5></h5> |
h 5. Bootstrap taub hau |
<h6></h6> |
h 6. Bootstrap taub hau |
Cov npe
Tag nrho cov npe - <ul>
, <ol>
, thiab <dl>
- muaj lawv margin-top
tshem tawm thiab a margin-bottom: 1rem
. Nested lists tsis muaj margin-bottom
. Peb kuj tau rov pib dua padding-left
thiab <ul>
cov <ol>
ntsiab lus.
- Tag nrho cov npe muaj lawv cov npoo saum toj kawg nkaus tshem tawm
- Thiab lawv cov paj hauv qab normalized
- Nested npe tsis muaj cov paj hauv qab
- Ua li no lawv muaj qhov zoo nkauj dua
- Tshwj xeeb yog thaum ua raws los ntawm ntau cov npe khoom
- Cov padding sab laug kuj tau pib dua
- Nov yog daim ntawv xaj
- Nrog ob peb daim ntawv teev npe
- Nws muaj qhov zoo ib yam
- Raws li daim ntawv teev npe tsis tau xaj yav dhau los
Rau qhov yooj yim styling, meej hierarchy, thiab qhov sib nrug zoo dua, cov npe piav qhia tau hloov kho margin
s. <dd>
s rov pib dua margin-left
thiab 0
ntxiv margin-bottom: .5rem
. <dt>
s ua bold .
- Cov npe piav qhia
- Daim ntawv teev lus piav qhia zoo meej rau kev txhais cov ntsiab lus.
- Lub sij hawm
- Definition rau lub sij hawm.
- Qhov thib ob txhais rau tib lub sij hawm.
- Lwm lub sij hawm
- Txhais rau lwm lo lus no.
Inline code
Qhwv inline snippet ntawm code nrog <code>
. Nco ntsoov khiav HTML lub kaum sab xis.
<section>
yuav tsum tau qhwv li inline.
For example, <code><section></code> should be wrapped as inline.
Code blocks
Siv <pre>
s rau ntau kab ntawm cov cai. Ib zaug ntxiv, nco ntsoov kom khiav tawm txhua lub kaum sab xis hauv cov cai rau kev ua kom raug. Lub <pre>
caij yog rov pib dua kom tshem tawm nws margin-top
thiab siv rem
units rau nws 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>
Hloov pauv
Txhawm rau qhia qhov hloov pauv siv lub <var>
cim.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Cov neeg siv tswv yim
Siv qhov <kbd>
taw qhia cov tswv yim uas feem ntau nkag los ntawm cov keyboard.
Txhawm rau kho qhov chaw, nias 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>
Qauv tso zis
Txhawm rau qhia cov qauv tso tawm los ntawm qhov program siv lub <samp>
cim npe.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Rooj
Cov ntxhuav tau hloov kho me ntsis rau style <caption>
s, tsoo ciam teb, thiab ua kom zoo ib yam text-align
thoob plaws. Ntxiv kev hloov pauv rau ciam teb, padding, thiab ntau ntxiv tuaj nrog rau .table
chav kawm .
Cov kab lus | Cov kab lus | Cov kab lus | Cov kab lus |
---|---|---|---|
Rooj cell | Rooj cell | Rooj cell | Rooj cell |
Rooj cell | Rooj cell | Rooj cell | Rooj cell |
Rooj cell | Rooj cell | Rooj cell | Rooj cell |
Cov ntawv
Ntau daim ntawv cov ntsiab lus tau rov pib dua rau cov qauv yooj yim. Nov yog qee qhov kev hloov pauv tseem ceeb tshaj plaws:
<fieldset>
s tsis muaj ciam teb, padding, lossis margin yog li lawv tuaj yeem siv tau yooj yim los ua wrappers rau ib tus neeg nkag lossis pab pawg ntawm cov khoom nkag.<legend>
s, zoo li fieldsets, kuj tau hloov kho kom pom raws li cov npe ntawm hom.<label>
s tau teem komdisplay: inline-block
tso caimargin
rau siv.<input>
s,<select>
s,<textarea>
s, thiab<button>
s feem ntau hais los ntawm Normalize, tab sis Reboot tshem tawm lawvmargin
thiab teeb tsaline-height: inherit
, ib yam nkaus.<textarea>
s yog hloov kho kom tsuas yog resizable vertically raws li kab rov tav resizing feem ntau "so" nplooj layout.<button>
s thiab<input>
khawm ntsiab muajcursor: pointer
thaum:not(:disabled)
.
Cov kev hloov pauv no, thiab ntau ntxiv, tau pom hauv qab no.
Hnub & xim kev txhawb nqa
Nco ntsoov hnub inputs tsis txaus siab los ntawm tag nrho cov browsers, uas yog Safari.
Pointers ntawm cov nyees khawm
Reboot suav nrog kev txhim kho rau role="button"
hloov tus cursor default rau pointer
. Ntxiv cov cwj pwm no rau cov ntsiab lus los pab qhia cov ntsiab lus sib tham sib. Lub luag haujlwm no tsis tsim nyog rau <button>
cov ntsiab lus, uas tau txais lawv tus kheej cursor
hloov.
<span role="button" tabindex="0">Non-button element button</span>
Lwm yam
Chaw nyob
Lub <address>
caij yog hloov kho kom rov pib dua qhov browser default font-style
los ntawm italic
mus rau normal
. line-height
tseem tam sim no tau txais txiaj ntsig, thiab margin-bottom: 1rem
tau ntxiv lawm. <address>
s yog los nthuav qhia cov ntaub ntawv tiv tauj rau cov poj koob yawm txwv ze tshaj plaws (lossis tag nrho lub cev ua haujlwm). Khaws formatting los xaus kab nrog <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Lub Npe Lub Npe
[email protected]
Blockquote
Lub neej ntawd margin
ntawm blockquotes yog 1em 40px
, yog li peb rov pib dua qhov ntawd 0 0 1rem
rau ib yam dab tsi zoo sib xws nrog lwm cov ntsiab lus.
Ib qho zoo-paub quotes, muaj nyob rau hauv ib lub ntsiab lus blockquote.
Ib tug neeg nto moo nyob rau hauv Lub Npe Lub Npe
Cov ntsiab lus hauv kab
Lub <abbr>
caij tau txais cov qauv yooj yim los ua kom nws sawv hauv cov kab lus.
Cov ntsiab lus
Lub neej ntawd cursor
ntawm cov ntsiab lus yog text
, yog li peb rov pib dua qhov ntawd pointer
kom qhia tias lub caij tuaj yeem cuam tshuam nrog los ntawm txhaj rau nws.
Qee cov ntsiab lus
Xav paub ntau ntxiv txog cov ntsiab lus.
Txawm paub ntau ntxiv
Ntawm no yog cov ntsiab lus ntau ntxiv txog cov ntsiab lus.
HTML5 [hidden]
attribute
HTML5 ntxiv tus cwj pwm tshiab thoob ntiaj teb muaj npe[hidden]
, uas yog styled raws li display: none
lub neej ntawd. Qiv ib lub tswv yim los ntawm PureCSS , peb txhim kho raws li lub neej ntawd los ntawm kev ua [hidden] { display: none !important; }
los pab tiv thaiv nws display
los ntawm kev ua yuam kev overridden.
<input type="text" hidden>
jQuery incompatibility
[hidden]
yog tsis sib xws nrog jQuery's $(...).hide()
thiab $(...).show()
txoj kev. Yog li ntawd, peb tsis tam sim no tshwj xeeb tshaj yog pom zoo [hidden]
rau lwm cov tswv yim los tswj cov display
ntsiab lus.
Txhawm rau tsuas yog toggle qhov pom ntawm lub ntsiab lus, lub ntsiab lus nws display
tsis hloov kho thiab lub ntsiab tseem tuaj yeem cuam tshuam rau qhov ntws ntawm cov ntaub ntawv, siv chav .invisible
kawm hloov.