Վերագործարկեք
Reboot-ը, մեկ ֆայլում հատուկ տարրերի CSS-ի փոփոխությունների հավաքածու, մեկնարկում է Bootstrap-ը` ապահովելու էլեգանտ, հետևողական և պարզ հիմք, որի վրա հիմնվելու է:
Մոտեցում
Reboot-ը հիմնված է Normalize-ի վրա՝ տրամադրելով HTML-ի շատ տարրերի որոշակի կարծիքի ոճեր՝ օգտագործելով միայն տարրերի ընտրիչները: Լրացուցիչ ոճավորումը կատարվում է միայն դասերի հետ։ Օրինակ, մենք վերագործարկում ենք որոշ <table>
ոճեր ավելի պարզ ելակետի համար և ավելի ուշ տրամադրում ենք .table
, .table-bordered
, և ավելին:
Ահա մեր ուղեցույցները և պատճառները՝ ընտրելու, թե ինչն է անտեսել Reboot-ում.
- Թարմացրեք դիտարկիչի որոշ կանխադրված արժեքներ՝
rem
s-ի փոխարենem
s-ի փոխարեն՝ մասշտաբային բաղադրիչների տարածության համար: - Խուսափեք
margin-top
. Ուղղահայաց լուսանցքները կարող են փլուզվել՝ տալով անսպասելի արդյունքներ: Սակայն ավելի կարևոր է, որ մեկ ուղղությունըmargin
ավելի պարզ մտավոր մոդել է: - Սարքի չափսերի վրա ավելի հեշտ չափելու համար բլոկի տարրերը պետք է օգտագործեն
rem
s-ըmargin
s-ի համար: - Պահպանեք
font
առնչվող հատկությունների հայտարարագրերը նվազագույնի`inherit
հնարավորության դեպքում օգտագործելով:
CSS փոփոխականներ
Ավելացված է v5.1.1-ում
v5.1.1-ի միջոցով մենք ստանդարտացրել ենք մեր պահանջվող @import
s-երը մեր բոլոր CSS փաթեթներում (ներառյալ bootstrap.css
, bootstrap-reboot.css
, և bootstrap-grid.css
ներառելու _root.scss
համար: Սա ավելացնում է :root
մակարդակի CSS փոփոխականներ բոլոր փաթեթներում, անկախ նրանից, թե դրանցից քանիսն են օգտագործվում այդ փաթեթում: Ի վերջո, Bootstrap 5-ը կշարունակի տեսնել ավելի շատ CSS փոփոխականներ, որոնք ավելացվել են ժամանակի ընթացքում:
Էջի լռելյայն
և տարրերը թարմացվում են էջի համար ավելի լավ կանխադրումներ ապահովելու համար <html>
: <body>
Ավելի կոնկրետ՝
- Համաշխարհային կարգով
box-sizing
սահմանված է յուրաքանչյուր տարրի վրա, ներառյալ*::before
և*::after
, մինչևborder-box
. Սա ապահովում է, որ տարրի հայտարարված լայնությունը երբեք չի գերազանցվի լցոնման կամ եզրագծի պատճառով:- Ոչ մի հիմք
font-size
չի հայտարարված<html>
, բայց16px
ենթադրվում է (զննարկիչի լռելյայն):font-size: 1rem
կիրառվում է<body>
մեդիա հարցումների միջոցով հեշտ արձագանքող տիպերի մասշտաբի վրա՝ հարգելով օգտատերերի նախասիրությունները և ապահովելով ավելի մատչելի մոտեցում: Այս դիտարկիչի լռելյայն կարող է վերացվել՝ փոփոխելով$font-size-root
փոփոխականը:
- Ոչ մի հիմք
- Նաև
<body>
սահմանում է գլոբալfont-family
,font-weight
,line-height
ևcolor
. Սա ավելի ուշ ժառանգվում է ձևի որոշ տարրերով՝ տառատեսակների անհամապատասխանությունները կանխելու համար: - Անվտանգության համար
<body>
ունի հայտարարվածbackground-color
, լռելյայն#fff
.
Մայրենի տառատեսակների կույտ
Bootstrap-ն օգտագործում է «հայրենի տառատեսակների կույտ» կամ «համակարգային տառատեսակների կույտ»՝ յուրաքանչյուր սարքի և ՕՀ-ում տեքստի օպտիմալ մատուցման համար: Համակարգի այս տառատեսակները նախագծվել են հատուկ՝ հաշվի առնելով այսօրվա սարքերը՝ էկրանների վրա կատարելագործված արտապատկերմամբ, փոփոխական տառատեսակների աջակցությամբ և այլն: Կարդացեք ավելին հայրենի տառատեսակների կույտերի մասին 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;
Նկատի ունեցեք, որ քանի որ տառատեսակների կույտը ներառում է էմոջի տառատեսակներ, շատ սովորական սիմվոլներ/դինգբատ յունիկոդ նիշեր կարտացոլվեն որպես բազմագույն ժայռապատկերներ: Նրանց տեսքը կտարբերվի՝ կախված զննարկիչի/պլատֆորմի բնիկ էմոջի տառատեսակում օգտագործվող ոճից, և դրանք չեն ազդի որևէ CSS color
ոճի վրա:
Սա font-family
կիրառվում է <body>
և ինքնաբերաբար ժառանգվում է ամբողջ աշխարհում Bootstrap-ում: Գլոբալը փոխելու համար font-family
թարմացրեք $font-family-base
և վերակոմպիլացրեք Bootstrap-ը:
CSS փոփոխականներ
Քանի որ Bootstrap 5-ը շարունակում է հասունանալ, ավելի ու ավելի շատ ոճեր կստեղծվեն CSS փոփոխականներով ՝ որպես իրական ժամանակում ավելի շատ հարմարեցում ապահովելու միջոց՝ առանց Sass-ը միշտ վերակազմավորելու անհրաժեշտության: Մեր մոտեցումն է վերցնել մեր աղբյուր Sass փոփոխականները և դրանք վերափոխել CSS փոփոխականների: Այդ կերպ, նույնիսկ եթե դուք չեք օգտագործում CSS փոփոխականներ, դուք դեռ ունեք Sass-ի ողջ հզորությունը: Սա դեռ ընթացքի մեջ է և ժամանակ կպահանջվի ամբողջական իրականացման համար:
Օրինակ, դիտարկեք այս :root
CSS փոփոխականները ընդհանուր <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};
Գործնականում այդ փոփոխականները կիրառվում են Reboot-ում այսպես.
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
}
Որը թույլ է տալիս իրական ժամանակում հարմարեցումներ կատարել, ինչպես ցանկանում եք.
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Վերնագրեր և պարբերություններ
Վերնագրի բոլոր տարրերը, օրինակ, <h1>
— և վերակայվում <p>
են, որպեսզի margin-top
հեռացվեն: Ավելացվել են վերնագրեր margin-bottom: .5rem
և պարբերություններ margin-bottom: 1rem
՝ հեշտ տարածության համար:
Վերնագիր | Օրինակ |
---|---|
<h1></h1> |
հ1. Bootstrap վերնագիր |
<h2></h2> |
h2. Bootstrap վերնագիր |
<h3></h3> |
h3. Bootstrap վերնագիր |
<h4></h4> |
h4. Bootstrap վերնագիր |
<h5></h5> |
h5. Bootstrap վերնագիր |
<h6></h6> |
h6. Bootstrap վերնագիր |
Ցուցակներ
Բոլոր ցուցակները— <ul>
, <ol>
, և — <dl>
հանվել են margin-top
և ա margin-bottom: 1rem
. Ներդրված ցուցակները չունեն margin-bottom
: Մենք նաև վերակայել ենք միացումը padding-left
և <ul>
տարրերը <ol>
:
- Բոլոր ցուցակների վերին լուսանցքը հանվել է
- Եվ դրանց ստորին լուսանցքը նորմալացվեց
- Ներդրված ցուցակները ներքևի լուսանցք չունեն
- Այս կերպ նրանք ավելի հարթ տեսք ունեն
- Հատկապես, երբ հաջորդում են ցուցակի ավելի շատ տարրեր
- Ձախ լցոնումը նույնպես զրոյացվել է
- Ահա պատվիրված ցուցակը
- Ցուցակի մի քանի կետերով
- Այն ունի նույն ընդհանուր տեսքը
- Ինչպես նախորդ չպատվիրված ցուցակը
Ավելի պարզ ոճավորման, հստակ հիերարխիայի և ավելի լավ տարածության համար նկարագրության ցուցակները թարմացրել են margin
s. <dd>
s վերակայել margin-left
և 0
ավելացնել margin-bottom: .5rem
: <dt>
s են համարձակ .
- Նկարագրության ցուցակներ
- Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
- Ժամկետ
- Տերմինի սահմանում.
- Նույն տերմինի երկրորդ սահմանումը.
- Մեկ այլ տերմին
- Այս այլ տերմինի սահմանում:
Ներքին կոդ
Փաթեթավորեք կոդի ներդիր հատվածները <code>
. Համոզվեք, որ խուսափեք HTML անկյունային փակագծերից:
<section>
պետք է փաթաթված լինի որպես ներդիր:
For example, <code><section></code> should be wrapped as inline.
Կոդի բլոկներ
Օգտագործեք <pre>
s կոդի բազմաթիվ տողերի համար: Եվս մեկ անգամ, համոզվեք, որ ճիշտ արտապատկերման համար կոդի ցանկացած անկյունային փակագծերից խուսափելու համար: Տարրը <pre>
վերակայվում է՝ հեռացնելու և դրա համար միավորներ margin-top
օգտագործելու համար :rem
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>
Փոփոխականներ
Փոփոխականներ նշելու համար օգտագործեք <var>
պիտակը:
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Օգտագործողի մուտքագրում
Օգտագործեք <kbd>
ստեղնաշարի միջոցով մուտքագրվող մուտքը նշելու համար:
Պարամետրերը խմբագրելու համար սեղմեք 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>
Նմուշի ելք
Ծրագրից նմուշի արդյունքը նշելու համար օգտագործեք <samp>
պիտակը:
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Սեղաններ
Սեղանները փոքր-ինչ հարմարեցված են ոճի <caption>
s-ին, փլուզվող եզրագծերին և ապահովելու հետևողականությունը text-align
ամբողջում: Լրացուցիչ փոփոխություններ եզրագծերի, ներդիրների և այլնի համար գալիս են դասի .table
հետ :
Աղյուսակի վերնագիր | Աղյուսակի վերնագիր | Աղյուսակի վերնագիր | Աղյուսակի վերնագիր |
---|---|---|---|
Սեղանի բջիջ | Սեղանի բջիջ | Սեղանի բջիջ | Սեղանի բջիջ |
Սեղանի բջիջ | Սեղանի բջիջ | Սեղանի բջիջ | Սեղանի բջիջ |
Սեղանի բջիջ | Սեղանի բջիջ | Սեղանի բջիջ | Սեղանի բջիջ |
Ձևաթղթեր
Տարբեր ձևի տարրեր վերագործարկվել են ավելի պարզ հիմնական ոճերի համար: Ահա ամենաուշագրավ փոփոխություններից մի քանիսը.
<fieldset>
ները չունեն եզրագծեր, լիցք կամ լուսանցք, այնպես որ դրանք կարող են հեշտությամբ օգտագործվել որպես առանձին մուտքերի կամ մուտքերի խմբերի փաթաթիչներ:<legend>
s-ը, ինչպես դաշտերի հավաքածուները, նույնպես վերափոխվել են՝ ցուցադրվելու որպես տեսակի վերնագիր:<label>
s-ը սահմանվել էdisplay: inline-block
, որպեսզի թույլատրվիmargin
կիրառել:<input>
s,<select>
s,<textarea>
s և<button>
s-երը հիմնականում հասցեագրված են Normalize-ի կողմից, սակայն Reboot-ը նույնպես հեռացնում է դրանքmargin
և սահմանումline-height: inherit
:<textarea>
s-ը փոփոխվում է, որպեսզի չափափոխվի միայն ուղղահայաց, քանի որ հորիզոնական չափափոխումը հաճախ «խախտում է» էջի դասավորությունը:<button>
s և<input>
կոճակի տարրերը ունենcursor: pointer
երբ:not(:disabled)
.
Այս փոփոխությունները և ավելին ներկայացված են ստորև:
Ամսաթվի և գույնի մուտքագրման աջակցություն
Նկատի ունեցեք, որ ամսաթվի մուտքագրումն ամբողջությամբ չի աջակցվում բոլոր բրաուզերների կողմից, մասնավորապես՝ Safari-ի կողմից:
Ցուցիչներ կոճակների վրա
Reboot-ը ներառում է role="button"
լռելյայն կուրսորը փոխելու բարելավում pointer
: Ավելացրեք այս հատկանիշը տարրերին, որպեսզի օգնեք նշել, որ տարրերը ինտերակտիվ են: Այս դերը անհրաժեշտ չէ <button>
տարրերի համար, որոնք ստանում են իրենց սեփական cursor
փոփոխությունը:
<span role="button" tabindex="0">Non-button element button</span>
Տարբեր տարրեր
Հասցե
Տարրը <address>
թարմացվում է զննարկիչի լռելյայն վերակայելու font-style
համար italic
: նույնպես այժմ ժառանգված է, և ավելացվել է։ s-ը մոտակա նախնիների (կամ աշխատանքի մի ամբողջ մասի) կոնտակտային տվյալներ ներկայացնելու համար է: Պահպանել ֆորմատավորումը՝ տողերը վերջացնելով .normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Ամբողջական անուն
first.last@example.com
Արգելափակման մեջբերում
Բլոկ չակերտների լռելյայն margin
է 1em 40px
, ուստի մենք այն վերակայում ենք 0 0 1rem
այլ տարրերի հետ ավելի համապատասխան բանի համար:
Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:
Աղբյուրի վերնագրում հայտնի մեկը
Ներքին տարրեր
Տարրը <abbr>
ստանում է հիմնական ոճավորում, որպեսզի այն առանձնանա պարբերության տեքստի մեջ:
Ամփոփում
Ամփոփման համար լռելյայն cursor
է text
, ուստի մենք այն վերակայում ենք pointer
՝ փոխանցելու համար, որ տարրի հետ կարելի է փոխազդել՝ սեղմելով դրա վրա:
Որոշ մանրամասներ
Մանրամասների մասին լրացուցիչ տեղեկություններ:
Նույնիսկ ավելի մանրամասն
Ահա ավելի շատ մանրամասներ մանրամասների մասին:
HTML5 [hidden]
հատկանիշ
HTML5-ն ավելացնում է նոր գլոբալ հատկանիշ՝ անունով[hidden]
, որը ոճավորված է որպես display: none
լռելյայն: Գաղափար վերցնելով PureCSS- ից ՝ մենք բարելավում ենք այս լռելյայնությունը [hidden] { display: none !important; }
՝ օգնելով կանխել դրա display
պատահական անտեսումը:
<input type="text" hidden>
jQuery անհամատեղելիություն
[hidden]
համատեղելի չէ jQuery-ի $(...).hide()
և $(...).show()
մեթոդների հետ: Հետևաբար, մենք ներկայումս հատկապես չենք հավանություն տալիս տարրերի [hidden]
կառավարման այլ մեթոդներին :display
Պարզապես տարրի տեսանելիությունը փոխելու համար, այսինքն display
՝ այն փոփոխված չէ, և տարրը դեռ կարող է ազդել փաստաթղթի հոսքի վրա, փոխարենը.invisible
օգտագործեք դասը :