Ընդհանուր ակնարկ
Բաղադրիչներ և տարբերակներ՝ ձեր «Bootstrap» նախագիծը տեղադրելու համար, ներառյալ բեռնարկղերի փաթեթավորումը, հզոր ցանցային համակարգ, ճկուն մեդիա օբյեկտ և արձագանքող օգտակար դասեր:
Տարաներ
Կոնտեյներները Bootstrap-ում դասավորության ամենահիմնական տարրն են և պահանջվում են մեր լռելյայն ցանցային համակարգը օգտագործելիս : Բեռնարկղերը օգտագործվում են պարունակությունը պարունակելու, պահելու և (երբեմն) կենտրոնացնելու համար: Թեև բեռնարկղերը կարող են լինել բնադրված, դասավորությունների մեծ մասը չի պահանջում ներդիր կոնտեյներ:
Bootstrap-ը գալիս է երեք տարբեր տարաներով.
.container
, որը սահմանում է amax-width
յուրաքանչյուր արձագանքող բեկման կետում.container-fluid
, որը գտնվումwidth: 100%
է բոլոր ընդմիջման կետերում.container-{breakpoint}
, որըwidth: 100%
մինչև նշված ընդմիջման կետը
Ստորև բերված աղյուսակը ցույց է տալիս, թե ինչպես է յուրաքանչյուր բեռնարկղը max-width
համեմատվում բնօրինակի հետ .container
և .container-fluid
յուրաքանչյուր բեկման կետում:
Տեսեք դրանք գործողության մեջ և համեմատեք դրանք մեր Grid օրինակում :
Շատ փոքր <576px |
Փոքր ≥576px |
Միջին ≥768px |
Մեծ ≥992px |
Չափազանց մեծ ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Բոլորը մեկում
Մեր լռելյայն .container
դասը արձագանքող, ֆիքսված լայնությամբ կոնտեյներ է, ինչը նշանակում է, որ դրա max-width
փոփոխությունները յուրաքանչյուր ընդմիջման կետում:
Հեղուկ
Օգտագործեք .container-fluid
ամբողջ լայնությամբ կոնտեյների համար՝ ընդգրկելով տեսադաշտի ամբողջ լայնությունը:
Պատասխանատու
Պատասխանատու բեռնարկղերը նոր են Bootstrap v4.4-ում: Նրանք թույլ են տալիս նշել դաս, որը 100% լայնություն ունի մինչև նշված բեկման կետին հասնելը, որից հետո մենք կիրառում ենք max-width
s ավելի բարձր բեկման կետերից յուրաքանչյուրի համար: Օրինակ, .container-sm
100% լայնություն է՝ սկսելու համար մինչև sm
բեկման կետին հասնելը, որտեղ այն կմեծանա md
, lg
և xl
.
Պատասխանատու ընդմիջման կետեր
Քանի որ Bootstrap-ը մշակվել է առաջին հերթին բջջային լինելու համար, մենք օգտագործում ենք մի քանի մեդիա հարցումներ ՝ մեր դասավորությունների և ինտերֆեյսների համար խելամիտ բեկման կետեր ստեղծելու համար: Այս ընդմիջման կետերը հիմնականում հիմնված են տեսադաշտի նվազագույն լայնությունների վրա և թույլ են տալիս մեծացնել տարրերը, երբ տեսադաշտը փոխվում է:
Bootstrap-ը հիմնականում օգտագործում է հետևյալ մեդիա հարցումների միջակայքերը կամ ընդմիջման կետերը մեր աղբյուրի Sass ֆայլերում մեր դասավորության, ցանցային համակարգի և բաղադրիչների համար:
Քանի որ մենք գրում ենք մեր աղբյուրի CSS-ը Sass-ում, մեր բոլոր մեդիա հարցումները հասանելի են Sass խառնուրդների միջոցով.
Մենք երբեմն օգտագործում ենք լրատվամիջոցների հարցումներ, որոնք գնում են այլ ուղղությամբ (տվյալ էկրանի չափը կամ ավելի փոքր ).
Նկատի ունեցեք, որ քանի որ բրաուզերները ներկայումս չեն աջակցում տիրույթի համատեքստի հարցումները , մենք աշխատում ենք կոտորակային լայնություններով սահմանափակումների min-
և max-
նախածանցների և տեսադաշտերի շուրջ (որոնք կարող են առաջանալ որոշակի պայմաններում, օրինակ, բարձր dpi սարքերում)՝ օգտագործելով այս համեմատությունների համար ավելի բարձր ճշգրտությամբ արժեքներ: .
Կրկին, այս լրատվամիջոցների հարցումները հասանելի են նաև Sass mixins-ի միջոցով.
Կան նաև մեդիա հարցումներ և միքսներ՝ էկրանի չափսերի մեկ հատված թիրախավորելու համար՝ օգտագործելով բեկման կետերի նվազագույն և առավելագույն լայնությունները:
Այս մեդիա հարցումները հասանելի են նաև Sass mixins-ի միջոցով.
Նմանապես, լրատվամիջոցների հարցումները կարող են ընդգրկել մի քանի բեկման կետերի լայնություններ.
Նույն էկրանի չափի տիրույթը թիրախավորելու Sass խառնուրդը կլինի.
Z-ինդեքս
Bootstrap-ի մի քանի բաղադրիչներ օգտագործում z-index
են CSS հատկությունը, որն օգնում է վերահսկել դասավորությունը՝ ապահովելով երրորդ առանցք՝ բովանդակությունը դասավորելու համար: Մենք օգտագործում ենք լռելյայն z-ինդեքսի սանդղակը Bootstrap-ում, որը նախագծված է պատշաճ կերպով շերտավորելու նավիգացիան, գործիքների հուշումներն ու պոպովերները, մոդալները և այլն:
Այս ավելի բարձր արժեքները սկսվում են կամայական թվից, բավականաչափ բարձր և կոնկրետ, որպեսզի իդեալականորեն խուսափեն կոնֆլիկտներից: Մեզ անհրաժեշտ է դրանց ստանդարտ հավաքածու մեր շերտավորված բաղադրիչների համար՝ գործիքների հուշումներ, փոփփերներ, նավագոտիներ, բացվող ցանկեր, մոդալներ, որպեսզի մենք կարողանանք ողջամտորեն հետևողական լինել վարքագծերում: Ոչ մի պատճառ չկա, որ մենք չենք կարող օգտագործել 100
+ կամ 500
+:
Մենք չենք խրախուսում այս անհատական արժեքների հարմարեցումը. եթե փոխեք մեկը, հավանաբար պետք է փոխեք բոլորը:
Բաղադրիչների մեջ համընկնող եզրագծերը կարգավորելու համար (օրինակ՝ կոճակներ և մուտքագրումներ մուտքային խմբերում), մենք օգտագործում ենք , -ի ցածր միանիշ z-index
արժեքներ 1
, 2
իսկ 3
լռելյայն, սավառնող և ակտիվ վիճակների համար: Սավառնել/ֆոկուս/ակտիվ ժամանակ մենք ավելի բարձր արժեք ունեցող որոշակի տարր ենք առաջին պլան մղում՝ z-index
ցույց տալու իրենց սահմանները եղբայրական տարրերի վրա: