Վերագործարկեք

Reboot-ը, մեկ ֆայլում տարրական հատուկ CSS-ի փոփոխությունների հավաքածու, մեկնարկում է Bootstrap-ը, որպեսզի ապահովի էլեգանտ, հետևողական և պարզ հիմք՝ հիմնվելու համար:

Մոտեցում

Reboot-ը հիմնված է Normalize-ի վրա՝ տրամադրելով HTML-ի շատ տարրերի որոշակի կարծիքի ոճեր՝ օգտագործելով միայն տարրերի ընտրիչները: Լրացուցիչ ոճավորումը կատարվում է միայն դասերի հետ։ Օրինակ, մենք վերագործարկում ենք որոշ <table>ոճեր ավելի պարզ ելակետի համար և ավելի ուշ տրամադրում ենք .table, .table-bordered, և ավելին:

Ահա մեր ուղեցույցները և պատճառները՝ ընտրելու, թե ինչն է անտեսել Reboot-ում.

Թարմացրեք դիտարկիչի որոշ կանխադրված արժեքներ՝ rems-ի փոխարեն ems-ի փոխարեն՝ մասշտաբային բաղադրիչների տարածության համար:
Խուսափեք margin-top. Ուղղահայաց լուսանցքները կարող են փլուզվել՝ տալով անսպասելի արդյունքներ: Սակայն ավելի կարևոր է, որ մեկ ուղղությունը marginավելի պարզ մտավոր մոդել է:
Սարքի չափսերի վրա ավելի հեշտ չափելու համար բլոկի տարրերը պետք է օգտագործեն rems-ը margins-ի համար:
Պահպանեք fontառնչվող հատկությունների հայտարարագրերը նվազագույնի` inheritհնարավորության դեպքում օգտագործելով:

Էջի լռելյայն

և տարրերը թարմացվում են էջի համար ավելի լավ կանխադրումներ ապահովելու համար <html>: <body>Ավելի կոնկրետ՝

Համաշխարհային կարգով box-sizingսահմանված է յուրաքանչյուր տարրի վրա, ներառյալ *::beforeև *::after, մինչև border-box. Սա ապահովում է, որ տարրի հայտարարված լայնությունը երբեք չի գերազանցվի լցոնման կամ եզրագծի պատճառով:
Ոչ մի հիմք font-sizeչի հայտարարված <html>, բայց 16pxենթադրվում է (զննարկիչի լռելյայն): font-size: 1remկիրառվում է <body>մեդիա հարցումների միջոցով հեշտ արձագանքող տիպերի մասշտաբի վրա՝ հարգելով օգտատերերի նախասիրությունները և ապահովելով ավելի մատչելի մոտեցում:
Նաև <body>սահմանում է գլոբալ font-family, line-heightև text-align. Սա ավելի ուշ ժառանգվում է ձևի որոշ տարրերով՝ տառատեսակների անհամապատասխանությունները կանխելու համար:
Անվտանգության համար <body>ունի հայտարարված background-color, լռելյայն #fff.

Մայրենի տառատեսակների կույտ

Լռելյայն վեբ տառատեսակները (Helvetica Neue, Helvetica և Arial) հեռացվել են Bootstrap 4-ում և փոխարինվել «հայրենի տառատեսակով»՝ յուրաքանչյուր սարքի և ՕՀ-ի վրա տեքստի օպտիմալ մատուցման համար: Կարդացեք ավելին հայրենի տառատեսակների կույտերի մասին Smashing Magazine- ի այս հոդվածում :

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

Նկատի ունեցեք, որ քանի որ տառատեսակների կույտը ներառում է էմոջի տառատեսակներ, շատ սովորական սիմվոլ/դինգբատ Unicode նիշերը կարտացոլվեն որպես բազմագույն ժայռապատկերներ: Նրանց տեսքը կտարբերվի՝ կախված զննարկիչի/պլատֆորմի բնիկ էմոջի տառատեսակում օգտագործվող ոճից, և դրանք չեն ազդի որևէ CSS colorոճի վրա:

Սա font-familyկիրառվում է <body>և ինքնաբերաբար ժառանգվում է գլոբալ Bootstrap-ում: Գլոբալը փոխելու համար font-familyթարմացրեք $font-family-baseև վերակոմպիլացրեք Bootstrap-ը:

Վերնագրեր և պարբերություններ

Վերնագրի բոլոր տարրերը, օրինակ, <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:

Բոլոր ցուցակների վերին լուսանցքը հանվել է
Եվ դրանց ստորին լուսանցքը նորմալացվեց
Ներդրված ցուցակները ներքևի լուսանցք չունեն
- Այս կերպ նրանք ավելի հարթ տեսք ունեն
- Հատկապես, երբ հաջորդում են ցուցակի ավելի շատ տարրեր
Ձախ լցոնումը նույնպես զրոյացվել է

Ահա պատվիրված ցուցակը
Ցուցակի մի քանի կետերով
Այն ունի նույն ընդհանուր տեսքը
Ինչպես նախորդ չպատվիրված ցուցակը

Ավելի պարզ ոճավորման, հստակ հիերարխիայի և ավելի լավ տարածության համար նկարագրության ցուցակները թարմացրել են margins. <dd>s վերակայել margin-leftև 0ավելացնել margin-bottom: .5rem: <dt>s են համարձակ .

Նկարագրության ցուցակներ: Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Ժամկետ: Տերմինի սահմանում.; Նույն տերմինի երկրորդ սահմանումը.
Մեկ այլ տերմին: Այս այլ տերմինի սահմանում:

Նախապես ձևավորված տեքստ

Տարրը <pre>վերակայվում է՝ հեռացնելու և դրա համար միավորներ margin-topօգտագործելու համար :remmargin-bottom

.example-element {
  լուսանցք-ներքև՝ 1րմ;
}

Սեղաններ

Սեղանները փոքր-ինչ հարմարեցված են ոճի <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).

Այս փոփոխությունները և ավելին ներկայացված են ստորև:

Ցուցիչներ կոճակների վրա

Reboot-ը ներառում է role="button"լռելյայն կուրսորը փոխելու բարելավում pointer: Ավելացրեք այս հատկանիշը տարրերին, որպեսզի օգնեք նշել, որ տարրերը ինտերակտիվ են: Այս դերը անհրաժեշտ չէ <button>տարրերի համար, որոնք ստանում են իրենց սեփական cursorփոփոխությունը:

Ոչ կոճակային տարրի կոճակ

<span role="button" tabindex="0">Non-button element button</span>

Տարբեր տարրեր

Հասցե

Տարրը <address>թարմացվում է զննարկիչի լռելյայն վերակայելու font-styleհամար italic: նույնպես այժմ ժառանգված է, և ավելացվել է։ s-ը մոտակա նախնիների (կամ աշխատանքի մի ամբողջ մասի) կոնտակտային տվյալներ ներկայացնելու համար է: Պահպանել ֆորմատավորումը՝ տողերը վերջացնելով .normalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Ամբողջական անուն
[email protected]

Արգելափակման մեջբերում

Բլոկ չակերտների լռելյայն marginէ 1em 40px, ուստի մենք այն վերակայում ենք 0 0 1remայլ տարրերի հետ ավելի համապատասխան բանի համար:

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

Աղբյուրի վերնագրում հայտնի մեկը

Ներքին տարրեր

Տարրը <abbr>ստանում է հիմնական ոճավորում, որպեսզի այն առանձնանա պարբերության տեքստի մեջ:

Nulla attr vitae elit libero, a pharetra augue:

Ամփոփում

Ամփոփման համար լռելյայն cursorէ text, ուստի մենք այն վերակայում ենք pointer՝ փոխանցելու համար, որ տարրի հետ կարելի է փոխազդել՝ սեղմելով դրա վրա:

Որոշ մանրամասներ

Մանրամասների մասին լրացուցիչ տեղեկություններ:

Նույնիսկ ավելի մանրամասն

Ահա ավելի շատ մանրամասներ մանրամասների մասին:

HTML5 `[hidden]`հատկանիշ

HTML5-ն ավելացնում է նոր գլոբալ հատկանիշ՝ անունով[hidden] , որը ոճավորված է որպես display: noneլռելյայն: Գաղափար վերցնելով PureCSS- ից ՝ մենք բարելավում ենք այս լռելյայնությունը [hidden] { display: none !important; }՝ օգնելով կանխել դրա displayպատահական անտեսումը: Թեև [hidden]IE10-ի կողմից չի աջակցվում, մեր CSS-ի բացահայտ հայտարարությունը լուծում է այդ խնդիրը:

<input type="text" hidden>

jQuery անհամատեղելիություն

[hidden]համատեղելի չէ jQuery-ի $(...).hide()և $(...).show()մեթոդների հետ: Հետևաբար, մենք ներկայումս հատկապես չենք հավանություն տալիս տարրերի [hidden]կառավարման այլ մեթոդներին :display

Պարզապես մի տարրի տեսանելիությունը փոխելու համար, ինչը նշանակում է, որ displayայն փոփոխված չէ, և տարրը դեռ կարող է ազդել փաստաթղթի հոսքի վրա, փոխարենը.invisible օգտագործեք դասը :