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-ը փոփոխվում է, որպեսզի չափափոխվի միայն ուղղահայաց, քանի որ հորիզոնական չափափոխումը հաճախ «խախտում է» էջի դասավորությունը:
<button>s և <input>կոճակի տարրերը ունեն cursor: pointerերբ :not(:disabled).

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

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

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

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

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

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

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

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

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

Օրինակ ելք 100

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

Հասցե

The <address> element is updated to reset the browser default font-style from italic to normal. line-height is also now inherited, and margin-bottom: 1rem has been added. <address>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <br>.

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

Full Name
[email protected]

Blockquote

The default margin on blockquotes is 1em 40px, so we reset that to 0 0 1rem for something more consistent with other elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Inline elements

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

Nulla attr vitae elit libero, a pharetra augue.

Summary

The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` attribute

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.