Source

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

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Սա 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:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ամբողջական մոլեստի լորեմ և մասսա
Հեշտացում պրետիում նիսլ ալիքում
Նալլա volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Էնեան նստել ամետ էրատ նունց
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ամբողջական մոլեստի լորեմ և մասսա
Հեշտացում պրետիում նիսլ ալիքում
Նալլա volutpat aliquam velit
Faucibus porta lacus fringilla vel
Էնեան նստել ամետ էրատ նունց
Eget porttitor lorem

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

Նկարագրության ցուցակներ: Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Էվիզմոդ: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Տարրը <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-ը փոփոխվում է, որպեսզի չափափոխվի միայն ուղղահայաց, քանի որ հորիզոնական չափափոխումը հաճախ «խախտում է» էջի դասավորությունը:

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

Օրինակ լեգենդ

Օրինակ մուտքագրում

Օրինակ ընտրեք

Նշեք այս վանդակը

Տարբերակ առաջին սա և այն է Երկրորդ տարբերակն այլ բան է, որը նույնպես չափազանց երկար է ցուցադրելու այս շքեղ ձևերի վերահսկման փաթաթումը: Երրորդ տարբերակն անջատված է

Տեքստային տարածքի օրինակ

Օրինակ ամսաթիվ

Օրինակ ժամանակ

Օրինակ ելք 100

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

Հասցե

Տարրը <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այլ տարրերի հետ ավելի համապատասխան բանի համար:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

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

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

Տարրը <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 օգտագործեք դասը :