Վերագործարկեք
Reboot-ը, մեկ ֆայլում տարրական հատուկ CSS-ի փոփոխությունների հավաքածու, մեկնարկում է Bootstrap-ը, որպեսզի ապահովի էլեգանտ, հետևողական և պարզ հիմք՝ հիմնվելու համար:
Մոտեցում
Reboot-ը հիմնված է Normalize-ի վրա՝ տրամադրելով HTML-ի շատ տարրերի որոշակի կարծիքի ոճեր՝ օգտագործելով միայն տարրերի ընտրիչները: Լրացուցիչ ոճավորումը կատարվում է միայն դասերի հետ։ Օրինակ, մենք վերագործարկում ենք որոշ <table>
ոճեր ավելի պարզ ելակետի համար և ավելի ուշ տրամադրում ենք .table
, .table-bordered
, և ավելին:
Ահա մեր ուղեցույցները և պատճառները՝ ընտրելու, թե ինչն է անտեսել Reboot-ում.
- Թարմացրեք դիտարկիչի որոշ կանխադրված արժեքներ՝
rem
s-ի փոխարենem
s-ի փոխարեն՝ մասշտաբային բաղադրիչների տարածության համար: - Խուսափեք
margin-top
. Ուղղահայաց լուսանցքները կարող են փլուզվել՝ տալով անսպասելի արդյունքներ: Սակայն ավելի կարևոր է, որ մեկ ուղղությունըmargin
ավելի պարզ մտավոր մոդել է: - Սարքի չափսերի վրա ավելի հեշտ չափելու համար բլոկի տարրերը պետք է օգտագործեն
rem
s-ըmargin
s-ի համար: - Պահպանեք
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
:
- Բոլոր ցուցակների վերին լուսանցքը հանվել է
- Եվ դրանց ստորին լուսանցքը նորմալացվեց
- Ներդրված ցուցակները ներքևի լուսանցք չունեն
- Այս կերպ նրանք ավելի հարթ տեսք ունեն
- Հատկապես, երբ հաջորդում են ցուցակի ավելի շատ տարրեր
- Ձախ լցոնումը նույնպես զրոյացվել է
- Ահա պատվիրված ցուցակը
- Ցուցակի մի քանի կետերով
- Այն ունի նույն ընդհանուր տեսքը
- Ինչպես նախորդ չպատվիրված ցուցակը
Ավելի պարզ ոճավորման, հստակ հիերարխիայի և ավելի լավ տարածության համար նկարագրության ցուցակները թարմացրել են margin
s. <dd>
s վերակայել margin-left
և 0
ավելացնել margin-bottom: .5rem
: <dt>
s են համարձակ .
- Նկարագրության ցուցակներ
- Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
- Ժամկետ
- Տերմինի սահմանում.
- Նույն տերմինի երկրորդ սահմանումը.
- Մեկ այլ տերմին
- Այս այլ տերմինի սահմանում:
Նախապես ձևավորված տեքստ
Տարրը <pre>
վերակայվում է՝ հեռացնելու և դրա համար միավորներ margin-top
օգտագործելու համար :rem
margin-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-ը մոտակա նախնիների (կամ աշխատանքի մի ամբողջ մասի) կոնտակտային տվյալներ ներկայացնելու համար է: Պահպանել ֆորմատավորումը՝ տողերը վերջացնելով .normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Ամբողջական անուն
[email protected]
Արգելափակման մեջբերում
Բլոկ չակերտների լռելյայն margin
է 1em 40px
, ուստի մենք այն վերակայում ենք 0 0 1rem
այլ տարրերի հետ ավելի համապատասխան բանի համար:
Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:
Ներքին տարրեր
Տարրը <abbr>
ստանում է հիմնական ոճավորում, որպեսզի այն առանձնանա պարբերության տեքստի մեջ:
Ամփոփում
Ամփոփման համար լռելյայն 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
օգտագործեք դասը :