Reboot
Reboot, berhevokek guheztinên CSS-ê yên taybetî yên di pelek yekane de, Bootstrap-ê dest pê dike da ku bingehek xweşik, domdar û hêsan peyda bike ku li ser were avakirin.
Nêzîkbûhatinî
Reboot li ser Normalîzekirinê ava dibe, ku gelek hêmanên HTML-ê bi şêwazên hinekî ramanbar peyda dike ku tenê hilbijêrên hêmanan bikar tînin. Şêweya pêvek tenê bi dersan re tê kirin. Mînakî, em hin <table>
şêwazan ji bo bingehek hêsan ji nû ve dest pê dikin û paşê .table
, .table-bordered
, û bêtir peyda dikin.
Li vir rêwerz û sedemên me hene ku ji bo hilbijartina tiştê ku di Reboot-ê de derbas bikin:
- Hin nirxên xwerû yên gerokê nûve bikin da ku
rem
s-yê li şûnaem
s-ê ji bo veqetandina pêkhateyên berbelavkirî bikar bînin. - Xwe dûr bixin
margin-top
. Mercên vertîkal dikarin hilweşin, encamên nediyar derxînin. Lêbelê ya girîngtir, rêgezek yekanemargin
modelek derûnî ya hêsan e. - Ji bo pîvandina hêsantir di nav mezinahiyên cîhazê de, divê hêmanên blokê s-
rem
yê ji bomargin
s-yê bikar bînin. - Daxuyaniyên
font
taybetmendiyên -girêdayî herî kêm bihêlin,inherit
gava ku gengaz be bikar bînin.
Guherbarên CSS
Di v5.1.1 de hate zêdekirin
Bi v5.1.1-ê re, me sên xwe yên pêwîst li ser hemî pakêtên xwe yên CSS standardîze kir ( @import
di nav bootstrap.css
de bêtir guhêrbarên CSS-ê ku bi demê re hatine zêdekirin bibînin.bootstrap-reboot.css
bootstrap-grid.css
_root.scss
:root
Pêşniyarên rûpelê
Hêman <html>
û <body>
hêman têne nûve kirin da ku pêşnumayên li seranserê rûpelê çêtir peyda bikin. Bi taybetî bêtir:
- Di
box-sizing
gerdûnî de li ser her hêmanek tête danîn-di nav de*::before
û*::after
, ji boborder-box
. Ev piştrast dike ku firehiya diyarkirî ya hêmanê ji ber peldank an sînor qet derbas nabe.- No bingehek
font-size
li ser<html>
, lê16px
tê texmîn kirin (geroka xwerû).font-size: 1rem
ji<body>
bo pîvandina tîpa bersivdar a hêsan bi navgîniya pirsnameyên medyayê ve tê sepandin dema ku rêz li tercîhên bikarhêner digire û nêzîkatiyek gihîştîtir peyda dike. Ev xwerû ya gerokê dikare bi guheztina guhêrbar were paşguh kirin$font-size-root
.
- No bingehek
- Di
<body>
heman demê de cîhanek gerdûnîfont-family
,font-weight
,line-height
ûcolor
. Ev paşê ji hêla hin hêmanên formê ve tê mîras kirin da ku pêşî li nakokiyên tîpan bigire. - Ji bo ewlehiyê,
<body>
xwedan navnîşek diyarkirî yebackground-color
, ku ji#fff
.
Pişka tîpên xwemalî
Bootstrap ji bo veguheztina nivîsê ya herî baş li ser her amûr û OS-ê "staka tîpên xwemalî" an "pergala tîpên pergalê" bikar tîne. Van tîpên pergalê bi taybetî bi cîhazên îroyîn di hişê xwe de hatine sêwirandin, bi renderkirina çêtir li ser ekranan, piştgiriya tîpên guhêrbar, û hêj bêtir. Di vê gotara Kovara Smashing de li ser stûnên tîpên xwemalî bêtir bixwînin .
$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;
Bala xwe bidinê ku ji ber ku stûna tîpan tîpên emoji dihewîne, gelek karakterên unicode yên hevpar/dingbat dê wekî wêneyên pirreng werin pêşkêş kirin. Dê xuyangê wan cûda be, li gorî şêwaza ku di fontê emoji ya xwemalî ya gerok/platformê de tê bikar anîn, û ew ê ji tu color
şêwazên CSS-ê bandor nebin.
Ev li seranserê Bootstrap-ê li seranserê gerdûnî û bixweber mîras font-family
tê sepandin . <body>
Ji bo veguherîna gerdûnî , Bootstrap- ê font-family
nûve bikin û ji nû ve berhev bikin.$font-family-base
Guherbarên CSS
Her ku Bootstrap 5 mezinbûna xwe berdewam dike, dê bêtir û bêtir şêwaz bi guhêrbarên CSS- ê ve werin çêkirin wekî amûrek ku bêtir xwerûkirina rast-demê peyda bike bêyî ku hewce bike ku her gav Sass ji nû ve berhev bike. Nêzîkatiya me ev e ku em guhêrbarên Sass-a çavkaniya xwe bigirin û wan veguherînin guhêrbarên CSS. Bi vî rengî, her çend hûn guhêrbarên CSS-ê bikar neynin jî, hûn hîn jî hemî hêza Sass-ê heye. Ev hê jî di pêşveçûnê de ye û dê dem bigire ku bi tevahî were bicîh kirin.
Mînakî, van guherbarên CSS-ê ji bo şêwazên :root
hevpar bihesibînin:<body>
@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};
Di pratîkê de, ew guhêrbar wê hingê di Reboot-ê de weha têne sepandin:
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
}
Ya ku destûrê dide we ku hûn lê hez dikin xwerûkirina rast-demê bikin:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Sernav û paragraf
Hemî hêmanên sernavê - mînak, - û ji bo <h1>
rakirina <p>
wan têne nûve margin-top
kirin. Sernav margin-bottom: .5rem
û paragraf margin-bottom: 1rem
ji bo veqetandina hêsan lê zêde kirine.
Sernivîs | Mînak |
---|---|
<h1></h1> |
h1. Sernavê Bootstrap |
<h2></h2> |
h2. Sernavê Bootstrap |
<h3></h3> |
h3. Sernavê Bootstrap |
<h4></h4> |
h4. Sernavê Bootstrap |
<h5></h5> |
h5. Sernavê Bootstrap |
<h6></h6> |
h6. Sernavê Bootstrap |
Lists
Hemî navnîşan- <ul>
, <ol>
, û <dl>
- wan margin-top
jêbirin û a margin-bottom: 1rem
. Lîsteyên nested tune margin-bottom
. Me li padding-left
ser <ul>
û <ol>
hêmanan jî sifir kir.
- Hemî navnîşan marjîna wan ya jorîn jêbirin
- Û margina wan ya jêrîn normal bû
- Lîsteyên hêlînkirî ti marjîna jêrîn tune
- Bi vî rengî ew xuyangek hêniktir in
- Bi taybetî dema ku li dû hêmanên navnîşê yên bêtir têne şopandin
- Pelê çepê jî ji nû ve hatî vegerandin
- Li vir navnîşek rêzkirî ye
- Bi çend hêmanên lîsteyê
- Ew heman xuyangê giştî heye
- Wekî navnîşa nerêkûpêk a berê
Ji bo şêwazek hêsan, hiyerarşiya zelal, û cîhê çêtir, navnîşên ravekirinê margin
s nûve kirine. <dd>
s reset margin-left
bike 0
û lê zêde bike margin-bottom: .5rem
. <dt>
s têne stûr kirin.
- Navnîşan lîsteyên
- Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
- Îfade
- Pênaseya termê.
- Ji bo heman peyvê pênaseyek duyemîn.
- Termek din
- Pênaseya vê termê din.
Koda hundurîn
Parçeyên kodê yên hundurîn bi <code>
. Bawer bikin ku hûn ji bendên goşeya HTML-ê birevin.
<section>
divê wekî hundur were pêçan.
For example, <code><section></code> should be wrapped as inline.
Blokên kodê
Ji <pre>
bo gelek rêzikên kodê s bikar bînin. Carek din, pê ewle bin ku hûn ji bo veguheztina rast di kodê de ji berikên goşeyê birevin. Hêman <pre>
ji nû ve tê rakirin da ku wê jê bibe margin-top
û ji rem
bo wê yekîneyan bikar bîne 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>
Variables
Ji bo nîşankirina guherbaran <var>
tagê bikar bînin.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Têketina bikarhêner
Ji <kbd>
bo nîşankirina têketina ku bi gelemperî bi klavyeyê ve tê navnîş kirin bikar bînin.
Ji bo guherandina mîhengan, pêl bikin 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>
Hilberîna nimûne
Ji bo nîşankirina encamek nimûneyê ji bernameyekê <samp>
tagê bikar bînin.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tables
Tablo li gorî şêwaza s-yê hinekî têne guheztin , sînoran hilweşînin, û li seranserê <caption>
domdar peyda dikin. text-align
Guhertinên pêvek ên ji bo sînor, peldank, û hêj bêtir bi polê .table
re têne.
Sernavê sifrê | Sernavê sifrê | Sernavê sifrê | Sernavê sifrê |
---|---|---|---|
Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê |
Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê |
Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê |
Forms
Ji bo şêwazên bingehîn ên hêsan hêmanên cûrbecûr ji nû ve hatine destpêkirin. Li vir hinek guhertinên herî berbiçav hene:
<fieldset>
Sînor, peldank, an marjîna wan tune ji ber vê yekê ew dikarin bi hêsanî ji bo têketinên kesane an komên têketinê wekî pêçan werin bikar anîn.<legend>
s, mîna berhevokên zeviyan, di heman demê de ji nû ve hatine şêwazkirin da ku wekî sernavek cûrbecûr werin xuyang kirin.<label>
s têne destnîşan kirindisplay: inline-block
ku destûr bidinmargin
ku bêne sepandin.<input>
s,<select>
s,<textarea>
s, û<button>
s bi piranî ji hêla Normalize ve têne navnîş kirin, lê Reboot wan jî radikemargin
û destnîşan dikeline-height: inherit
.<textarea>
s têne guheztin da ku tenê bi rengek vertîkal werin veguheztin ji ber ku veguheztina horizontî pirê caran xêzkirina rûpelê "diqetîne".<button>
s û<input>
hêmanên bişkojka heyecursor: pointer
dema:not(:disabled)
.
Ev guhertin, û bêtir, li jêr têne destnîşan kirin.
Piştgiriya têketina tarîx û reng
Bînin bîra xwe ku têketinên tarîxê ji hêla hemî gerokan ve, ango Safari, bi tevahî nayên piştgirî kirin.
Nîşaneyên li ser bişkokan
Reboot pêşkeftinek ji role="button"
bo guheztina rêzika xwerû li pointer
. Vê taybetmendiyê li hêmanan zêde bikin da ku bibin alîkar ku hêmanên înteraktîf in. Ev rol ji bo hêmanên ku guhartina <button>
xwe bi xwe digirin ne hewce ye.cursor
<span role="button" tabindex="0">Non-button element button</span>
hêmanên cuda
Navnîşan
Hêman <address>
tê nûvekirin da ku geroka xwerû font-style
ji italic
bo vegere normal
. line-height
jî niha mîras e, û margin-bottom: 1rem
hatiye zêdekirin. <address>
s ji bo pêşkêşkirina agahdariya pêwendiyê ji bo bav û kalê herî nêzîk (an tevahiya laşê xebatê) ne. Bi qedandina rêzan bi <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Navê
Tev [email protected]
Blockquote
Veguhastina margin
li ser blokan ev e 1em 40px
, ji ber vê yekê em wê ji 0 0 1rem
bo tiştek bi hêmanên din re hevahengtir ji nû ve dikin.
Gotinek naskirî, ku di hêmanek blokê de heye.
Kesek di Sernavê Çavkaniyê de navdar e
hêmanên Inline
Hêman <abbr>
şêweya bingehîn distîne da ku ew di nav nivîsa paragrafê de derkeve holê.
Berhevkirinî
Pêşniyara cursor
kurteyê ev e text
, ji ber vê yekê em wê ji nû pointer
ve vedigirin da ku ragihînin ku hêman dikare bi tikandina li ser wê re têkilî daynin.
Hin hûrgulî
Agahiyên bêtir li ser hûrguliyan.
Hîn bêtir hûrgulî
Li vir hûrguliyên bêtir li ser hûrguliyan hene.
[hidden]
taybetmendiya HTML5
HTML5 taybetmendiyek gerdûnî ya nû ya bi navê[hidden]
, ku ji hêla xwerû ve hatî şêwaz kirin lê zêde dike display: none
. Ji PureCSS ramanek deyn dikin , em li ser vê pêşnumayê çêtir dikin ku [hidden] { display: none !important; }
ji bo pêşîgirtina wê ya bêserûber were paşguh kirin alîkar bikin display
.
<input type="text" hidden>
jQuery nelihevhatî
[hidden]
bi jQuery $(...).hide()
û $(...).show()
rêbazên ne lihevhatî ye. Ji ber vê yekê, em niha bi taybetî [hidden]
teknîkên din ên ji bo birêvebirina display
hêmanan napejirînin.
Ji bo ku tenê xuyabûna hêmanek biguhezîne, tê vê wateyê ku display
ew nayê guheztin û hêman hîn jî dikare bandorê li herikîna belgeyê bike, li şûna wê .invisible
polê bikar bînin.