Մոտեցում

Իմացեք առաջնորդող սկզբունքների, ռազմավարությունների և տեխնիկայի մասին, որոնք օգտագործվում են Bootstrap-ի ստեղծման և պահպանման համար, որպեսզի կարողանաք ավելի հեշտությամբ հարմարեցնել և ընդլայնել այն ինքներդ:

Թեև մեկնարկային էջերը ներկայացնում են ներածական շրջագայություն նախագծի և այն առաջարկելու վերաբերյալ, այս փաստաթուղթը կենտրոնանում է այն բանի վրա, թե ինչու ենք մենք անում այն, ինչ անում ենք Bootstrap-ում: Այն բացատրում է մեր փիլիսոփայությունը՝ կառուցել համացանցում, որպեսզի ուրիշները կարողանան սովորել մեզնից, նպաստել մեզ և օգնել մեզ կատարելագործվել:

Տեսնու՞մ եք մի բան, որը ճիշտ չի հնչում, կամ գուցե կարելի՞ է ավելի լավ անել: Բացեք թողարկում , մենք կցանկանայինք քննարկել այն ձեզ հետ:

Ամփոփում

Սրանցից յուրաքանչյուրի մեջ մենք ավելի շատ կանդրադառնանք ամբողջ ընթացքում, բայց բարձր մակարդակով, ահա թե ինչն է առաջնորդում մեր մոտեցումը:

• Բաղադրիչները պետք է լինեն արձագանքող և առաջին հերթին շարժական
• Բաղադրիչները պետք է կառուցվեն բազային դասով և ընդլայնվեն մոդիֆիկատորների դասերի միջոցով
• Բաղադրիչ պետությունները պետք է ենթարկվեն ընդհանուր z-ինդեքսի սանդղակին
• Հնարավորության դեպքում նախընտրեք HTML և CSS իրականացումը JavaScript-ից
• Հնարավորության դեպքում օգտագործեք կոմունալ ծրագրերը հատուկ ոճերի փոխարեն
• Հնարավորության դեպքում խուսափեք խիստ HTML պահանջների կատարումից (երեխաների ընտրիչներ)

Պատասխանատու

Bootstrap-ի արձագանքող ոճերը կառուցված են արձագանքող լինելու համար, մի մոտեցում, որը հաճախ կոչվում է բջջային հեռախոս : Մենք օգտագործում ենք այս տերմինը մեր փաստաթղթերում և հիմնականում համաձայն ենք դրա հետ, բայց երբեմն այն կարող է չափազանց լայն լինել: Թեև Bootstrap-ում ոչ բոլոր բաղադրիչները պետք է ամբողջությամբ պատասխանատու լինեն, այս պատասխանատու մոտեցումը վերաբերում է CSS-ի վերափոխումները նվազեցնելուն՝ ձեզ դրդելով ավելացնել ոճեր, քանի որ տեսադաշտը մեծանում է:

Bootstrap-ում սա ամենից պարզ կտեսնեք մեր լրատվամիջոցների հարցումներում: Շատ դեպքերում մենք օգտագործում ենք min-widthհարցումներ, որոնք սկսում են կիրառվել որոշակի ընդմիջման կետում և շարունակվում են ավելի բարձր բեկման կետերում: Օրինակ, a- .d-noneն կիրառվում է min-width: 0մինչև անսահմանություն: Մյուս կողմից, a- .d-md-noneն կիրառվում է միջին բեկման կետից և ավելի բարձր:

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

Դասեր

Բացի մեր Reboot-ից՝ բրաուզերի նորմալացման ոճաթերթից, մեր բոլոր ոճերը նպատակ ունեն օգտագործել դասերը որպես ընտրիչներ: Սա նշանակում է, որ զերծ մնաք տիպի ընտրիչներից (օրինակ, input[type="text"]) և կողմնակի ծնողական դասերից (օրինակ՝ .parent .child), որոնք ոճերը չափազանց առանձնահատուկ են դարձնում՝ հեշտությամբ անտեսելու համար:

Որպես այդպիսին, բաղադրիչները պետք է կառուցվեն բազային դասով, որը պարունակում է ընդհանուր գույք-արժեք զույգեր, որոնք չպետք է անտեսվեն: Օրինակ, .btnև .btn-primary. Մենք օգտագործում .btnենք բոլոր սովորական ոճերի համար, ինչպիսիք են display, padding, և border-width. Այնուհետև մենք օգտագործում ենք փոփոխիչներ, ինչպիսիք .btn-primaryեն գույնը, ֆոնի գույնը, եզրագծի գույնը և այլն:

Փոփոխիչների դասերը պետք է օգտագործվեն միայն այն դեպքում, երբ կան բազմաթիվ հատկություններ կամ արժեքներ, որոնք պետք է փոխվեն մի քանի տարբերակներում: Փոփոխիչները միշտ չէ, որ անհրաժեշտ են, այնպես որ համոզվեք, որ դուք իրականում պահպանում եք կոդերի տողերը և կանխում դրանց ստեղծման ժամանակ անհարկի խախտումները: Փոփոխիչների լավ օրինակներ են մեր թեմայի գունային դասերը և չափի տարբերակները:

z-ինդեքսի սանդղակներ

Bootstrap-ում կա երկու z-indexսանդղակ՝ տարրեր բաղադրիչի մեջ և ծածկույթի բաղադրիչներ:

Բաղադրիչ տարրեր

• Bootstrap-ի որոշ բաղադրիչներ կառուցված են համընկնող տարրերով՝ կանխելու կրկնակի սահմանները՝ առանց borderսեփականությունը փոփոխելու: Օրինակ՝ կոճակների խմբերը, մուտքագրման խմբերը և էջավորումը:
• Այս բաղադրիչները կիսում են միջոցով ստանդարտ z-indexսանդղակը :03
• 0լռելյայն է (նախնական), 1is :hover, 2is :active/ .active, and 3is :focus:
• Այս մոտեցումը համապատասխանում է օգտատերերի առաջնահերթության մեր ակնկալիքներին: Եթե ​​տարրը կենտրոնացած է, այն տեսադաշտում և օգտագործողի ուշադրությանն է: Ակտիվ տարրերը երկրորդ ամենաբարձրն են, քանի որ դրանք ցույց են տալիս վիճակը: Հովերը երրորդ ամենաբարձրն է, քանի որ այն ցույց է տալիս օգտատիրոջ մտադրությունը, բայց գրեթե ամեն ինչ կարելի է սավառնել:

Ծածկույթի բաղադրիչներ

Bootstrap-ը ներառում է մի քանի բաղադրիչ, որոնք գործում են որպես ինչ-որ տեսակի ծածկույթ: Սա ներառում է, ըստ ամենաբարձր կարգի z-index, բացվող ցանկերը, ֆիքսված և կպչուն նավագոտիները, մոդալները, գործիքների հուշումները և բացվող պատուհանները: Այս բաղադրիչներն ունեն իրենց z-indexսանդղակը, որը սկսվում է 1000. Այս մեկնարկային համարը ընտրվել է կամայականորեն և ծառայում է որպես փոքր բուֆեր մեր ոճերի և ձեր նախագծի հատուկ ոճերի միջև:

Յուրաքանչյուր ծածկույթի բաղադրիչ z-indexփոքր-ինչ մեծացնում է իր արժեքը այնպես, որ UI-ի ընդհանուր սկզբունքները թույլ են տալիս օգտատիրոջ վրա կենտրոնացած կամ սավառնող տարրերը միշտ մնալ տեսադաշտում: Օրինակ, մոդալը փաստաթղթերի արգելափակումն է (օրինակ, դուք չեք կարող որևէ այլ գործողություն կատարել, բացի մոդալի գործողության համար), այնպես որ մենք այն դնում ենք մեր նավագոտի վերևում:

Իմացեք ավելին այս մասին մեր z-indexդասավորության էջում :

HTML և CSS JS-ի վրա

Հնարավորության դեպքում մենք նախընտրում ենք գրել HTML և CSS JavaScript-ի փոխարեն: Ընդհանուր առմամբ, HTML-ը և CSS-ն ավելի արդյունավետ և հասանելի են տարբեր փորձառությունների մակարդակի ավելի շատ մարդկանց համար: HTML-ը և CSS-ը նաև ավելի արագ են ձեր բրաուզերում, քան JavaScript-ը, և ձեր զննարկիչը, ընդհանուր առմամբ, ապահովում է ձեզ համար մեծ գործառույթներ:

Այս սկզբունքը մեր առաջին կարգի JavaScript API-ն է՝ օգտագործելով dataատրիբուտներ: Ձեզ հարկավոր չէ գրել գրեթե որևէ JavaScript՝ մեր JavaScript հավելվածներն օգտագործելու համար. փոխարենը գրեք HTML: Այս մասին ավելին կարդացեք մեր JavaScript-ի ակնարկ էջում :

Վերջապես, մեր ոճերը հիմնված են ընդհանուր վեբ տարրերի հիմնական վարքագծի վրա: Հնարավորության դեպքում մենք նախընտրում ենք օգտագործել այն, ինչ տրամադրում է զննարկիչը: Օրինակ, դուք կարող եք .btnդաս տեղադրել գրեթե ցանկացած տարրի վրա, բայց տարրերի մեծ մասը չի ապահովում որևէ իմաստային արժեք կամ դիտարկիչի գործառույթ: Այսպիսով, փոխարենը մենք օգտագործում ենք <button>s և <a>s:

Նույնը վերաբերում է ավելի բարդ բաղադրիչներին: Թեև մենք կարող էինք գրել ձևի վավերացման մեր սեփական հավելումը, որպեսզի դասեր ավելացնենք մայր տարրին՝ հիմնված մուտքագրման վիճակի վրա, դրանով իսկ թույլ տալով մեզ ոճավորել տեքստը, ասենք կարմիր, մենք նախընտրում ենք օգտագործել :valid/ :invalidկեղծ տարրերը, որոնք մեզ տրամադրում է յուրաքանչյուր դիտարկիչ:

Կոմունալ ծառայություններ

Կոմունալ դասերը, որոնք նախկինում օգնականներ էին Bootstrap 3-ում, հզոր դաշնակից են CSS-ի այտուցվածության և էջի վատ աշխատանքի դեմ պայքարում: Օգտակար դասը սովորաբար մեկ, անփոփոխ գույքի արժեքի զուգավորում է, որն արտահայտվում է որպես դաս (օրինակ՝ .d-blockներկայացնում է display: block;): Նրանց առաջնային գրավչությունը HTML-ը գրելիս օգտագործման արագությունն է և սահմանափակելով հատուկ CSS-ի քանակը, որը դուք պետք է գրեք:

Հատկապես հարմարեցված CSS-ի հետ կապված, կոմունալ ծառայությունները կարող են օգնել պայքարել ֆայլի չափի մեծացման դեմ՝ նվազեցնելով ձեր ամենատարածված գույքի արժեքի զույգերը առանձին դասերի: Սա կարող է կտրուկ ազդեցություն ունենալ ձեր նախագծերի մասշտաբով:

Ճկուն HTML

Չնայած միշտ չէ, որ հնարավոր է, մենք ձգտում ենք խուսափել բաղադրիչների համար մեր HTML պահանջներում չափազանց դոգմատիկ լինելուց: Այսպիսով, մենք կենտրոնանում ենք մեր CSS ընտրիչների առանձին դասերի վրա և փորձում ենք խուսափել անմիջական երեխաների ընտրողներից ( >): Սա ձեզ ավելի շատ ճկունություն է տալիս ձեր իրականացման հարցում և օգնում է մեր CSS-ն ավելի պարզ և ավելի քիչ կոնկրետ պահել:

Կոդի կոնվենցիաներ

Կոդի ուղեցույցը (Bootstrap-ի համաստեղծողից՝ @mdo) փաստում է, թե ինչպես ենք մենք գրում մեր HTML-ը և CSS-ը Bootstrap-ում: Այն սահմանում է ուղեցույցներ ընդհանուր ձևաչափման, ողջախոհության լռելյայնությունների, գույքի և հատկանիշների պատվերների և այլնի համար:

Մենք օգտագործում ենք Stylelint- ը այս ստանդարտները և ավելին մեր Sass/CSS-ում կիրառելու համար: Մեր հարմարեցված Styelint կազմաձևը բաց կոդով է և հասանելի է ուրիշների օգտագործման և ընդլայնման համար:

Մենք օգտագործում ենք vnu-jar ՝ ստանդարտ և իմաստային HTML-ը կիրառելու, ինչպես նաև սովորական սխալներ հայտնաբերելու համար: