Ցանցային համակարգ
Օգտագործեք մեր հզոր շարժական առաջին flexbox ցանցը՝ բոլոր ձևերի և չափերի դասավորություններ ստեղծելու համար՝ շնորհիվ տասներկու սյունակ համակարգի, վեց լռելյայն արձագանքող մակարդակների, Sass փոփոխականների և խառնուրդների և տասնյակ նախապես սահմանված դասերի:
Օրինակ
Bootstrap-ի ցանցային համակարգը օգտագործում է մի շարք բեռնարկղեր, տողեր և սյունակներ՝ բովանդակությունը դասավորելու և հավասարեցնելու համար: Այն կառուցված է flexbox- ով և լիովին արձագանքող է: Ստորև բերված է օրինակ և խորը բացատրություն, թե ինչպես է ցանցային համակարգը միավորվում:
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Վերոնշյալ օրինակը ստեղծում է երեք հավասար լայնությամբ սյունակներ բոլոր սարքերում և դիտակետերում՝ օգտագործելով մեր նախապես սահմանված ցանցային դասերը: Այդ սյունակները կենտրոնացած են էջի վրա, որտեղ մայրն է .container
:
Ինչպես է դա աշխատում
Կոտրելով այն, ահա, թե ինչպես է ցանցային համակարգը միավորվում.
-
Մեր ցանցն աջակցում է վեց արձագանքող բեկման կետեր : Ընդմիջման կետերը հիմնված են
min-width
լրատվամիջոցների հարցումների վրա, ինչը նշանակում է, ��ր դրանք ազդում են այդ ընդմիջման կետի և դրանից բարձր բոլորի վրա (օրինակ՝.col-sm-4
վերաբերում էsm
,md
,lg
,xl
և ինxxl
): Սա նշանակում է, որ դուք կարող եք վերահսկել կոնտեյների և սյունակի չափերը և վարքագիծը յուրաքանչյուր ընդմիջման կետով: -
Կոնտեյներները կենտրոնանում և հորիզոնական հարթեցնում են ձեր բովանդակությունը: Օգտագործեք
.container
արձագանքող պիքսել լայնության, բոլոր տեսադաշտերի և սարքերի համար, կամ արձագանքող կոնտեյների համար (օրինակ՝.container-fluid
) հեղուկի և պիքսելների լայնությունների համակցության համար:width: 100%
.container-md
-
Տողերը սյուների փաթաթիչներ են: Յուրաքանչյուր սյուն ունի հորիզոնական
padding
(կոչվում է ջրհոր)՝ նրանց միջև տարածությունը վերահսկելու համար: Այնուհետևpadding
դա հակադրվում է բացասական լուսանցքներով տողերի վրա՝ ապահովելու համար, որ ձեր սյունակների բովանդակությունը տեսողականորեն հավասարեցված է ձախ կողմում: Տողերը նաև աջակցում են մոդիֆիկատորների դասերին՝ միատեսակ կիրառելու սյունակների չափսերը և ջրահեռացման դասերը ՝ ձեր բովանդակության տարածությունը փոխելու համար: -
Սյունակները աներևակայելի ճկուն են: Յուրաքանչյուր տողում կա 12 կաղապարի սյունակ, որը թույլ է տալիս ստեղծել տարրերի տարբեր համակցություններ, որոնք ընդգրկում են ցանկացած թվով սյունակներ: Սյունակների դասերը ցույց են տալիս կաղապարի սյունակների քանակը, որոնք պետք է ընդարձակվեն (օրինակ՝
col-4
չորսը):width
s-ները սահմանված են տոկոսներով, այնպես որ դուք միշտ ունեք նույն հարաբերական չափերը: -
Հեղեղատարները նույնպես արձագանքող են և հարմարեցված: Հեղեղաջրերի դասերը հասանելի են բոլոր ընդմիջման կետերում, բոլոր նույն չափերով, ինչ մեր լուսանցքը և միջադիրների տարածությունը : Հորիզոնական ջրհեղեղները փոխեք
.gx-*
դասերով, ուղղահայաց հեղեղատարները.gy-*
կամ դասերով բոլոր ջրահեռացումները.g-*
:.g-0
հասանելի է նաև ջրհեղեղները հեռացնելու համար: -
Sass փոփոխականները, քարտեզները և միքսները սնուցում են ցանցը: Եթե դուք չեք ցանկանում օգտագործել Bootstrap-ում նախապես սահմանված ցանցի դասերը, կարող եք օգտագործել մեր ցանցի Sass աղբյուրը , որպեսզի ստեղծեք ձեր սեփականը ավելի իմաստային նշումներով: Մենք նաև ներառում ենք CSS-ի որոշ մաքսային հատկություններ՝ այս Sass փոփոխականները սպառելու համար՝ ձեզ համար ավելի մեծ ճկունության համար:
Ուշադիր եղեք flexbox- ի հետ կապված սահմանափակումների և սխալների մասին , ինչպես օրինակ HTML որոշ տարրեր որպես ճկուն կոնտեյներներ օգտագործելու անկարողությունը :
Ցանցային ընտրանքներ
Bootstrap-ի ցանցային համակարգը կարող է հարմարվել բոլոր վեց լռելյայն բեկման կետերին և ձեր հարմարեցված բեկման կետերին: Վեց լռելյայն ցանցային մակարդակները հետևյալն են.
- Շատ փոքր (xs)
- Փոքր (սմ)
- Միջին (մդ)
- Մեծ (lg)
- Շատ մեծ (xl)
- Լրացուցիչ չափազանց մեծ (xxl)
Ինչպես նշվեց վերևում, այս ընդմիջման կետերից յուրաքանչյուրն ունի իր սեփական կոնտեյները, դասի եզակի նախածանցը և մոդիֆիկատորները: Ահա, թե ինչպես է ցանցը փոխվում այս բեկման կետերում.
xs <576px |
սմ ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Կոնտեյներmax-width |
Ոչ մեկը (ավտոմատ) | 540px | 720px | 960px | 1140px | 1320px |
Դասի նախածանց | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# սյունակներ | 12 | |||||
Հեղեղաջրերի լայնությունը | 1,5 ռեմ (.75 ռեմ ձախ և աջ) | |||||
Պատվերով հեղեղատարներ | Այո՛ | |||||
Բնադրելի | Այո՛ | |||||
Սյունակների պատվիրում | Այո՛ |
Ավտոմատ դասավորության սյունակներ
Օգտագործեք ընդմիջման կետին հատուկ սյունակների դասեր սյունակների չափսերը հեշտացնելու համար՝ առանց բացահայտ համարակալված դասի, ինչպիսին է .col-sm-6
.
Հավասար լայնությամբ
Օրինակ, ահա երկու ցանցային դասավորություններ, որոնք կիրառվում են յուրաքանչյուր սարքի և տեսադաշտի համար՝ սկսած xs
մինչև xxl
. Ավելացրե՛ք ցանկացած քանակի միավոր առանց դասերի յուրաքանչյուր բեկման կետի համար, որն անհրաժեշտ է, և յուրաքանչյուր սյունակ կունենա նույն լայնությունը:
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Մեկ սյունակի լայնության սահմանում
Flexbox ցանցի սյունակների ավտոմատ դասավորությունը նաև նշանակում է, որ դուք կարող եք սահմանել մեկ սյունակի լայնությունը և թույլ տալ, որ եղբայրական սյունակներն ավտոմատ կերպով չափափոխեն դրա շուրջը: Դուք կարող եք օգտագործել նախապես սահմանված ցանցի դասեր (ինչպես ցույց է տրված ստորև), ցանցի խառնուրդներ կամ ներդիր լայնություններ: Նկատի ունեցեք, որ մյուս սյունակների չափերը կփոխվեն՝ անկախ կենտրոնական սյունակի լայնությունից:
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Փոփոխական լայնության բովանդակություն
Օգտագործեք col-{breakpoint}-auto
դասեր՝ սյունակները չափելու համար՝ հիմնվելով դրանց բովանդակության բնական լայնության վրա:
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Պատասխանատու դասեր
Bootstrap-ի ցանցը ներառում է նախապես սահմանված դասերի վեց մակարդակ՝ բարդ արձագանքող դասավորություններ կառուցելու համար: Անհատականացրեք ձեր սյունակների չափերը լրացուցիչ փոքր, փոքր, միջին, մեծ կամ չափազանց մեծ սարքերի վրա, ինչպես որ հարմար եք գտնում:
Բոլոր ընդմիջման կետերը
Ցանցերի համար, որոնք նույնն են՝ ամենափոքր սարքերից մինչև ամենամեծը, օգտագործեք .col
և .col-*
դասերը: Նշեք համարակալված դաս, երբ ձեզ անհրաժեշտ է հատուկ չափի սյունակ; հակառակ դեպքում, ազատ զգալ հավատարիմ մնալ .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Հորիզոնական դրված
Օգտագործելով դասերի մեկ խումբ .col-sm-*
՝ դուք կարող եք ստեղծել հիմնական ցանցային համակարգ, որը սկսում է կուտակված և դառնում հորիզոնական փոքր ընդմիջման կետում ( sm
):
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Խառնել և համապատասխանեցնել
Չե՞ք ուզում, որ ձեր սյունակները պարզապես կուտակվեն ցանցի որոշ շերտերում: Անհրաժեշտության դեպքում յուրաքանչյուր մակարդակի համար օգտագործեք տարբեր դասերի համադրություն: Տես ստորև բերված օրինակը՝ ավելի լավ պատկերացնելու համար, թե ինչպես է այդ ամենը աշխատում:
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Տողերի սյունակներ
Օգտագործեք արձագանքող .row-cols-*
դասերը՝ արագորեն սահմանելու ձեր բովանդակությունը և դասավորությունը լավագույնս ներկայացնող սյունակների քանակը: Մինչդեռ սովորական .col-*
դասերը կիրառվում են առանձին սյունակների վրա (օրինակ՝ .col-md-4
), տողերի սյունակների դասերը դրված են ծնողի վրա՝ .row
որպես պարունակվող սյունակների լռելյայն: .row-cols-auto
Դուք կարող եք սյուներին տալ իրենց բնական լայնությունը :
Օգտագործեք այս տողերի սյունակների դասերը՝ արագ ստեղծելու հիմնական ցանցային դասավորությունները կամ վերահսկելու ձեր քարտի դասավորությունները և անտեսելու համար, երբ անհրաժեշտ է սյունակի մակարդակում:
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
Կարող եք նաև օգտագործել ուղեկցող Sass mixin-ը row-cols()
.
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Բնադրում
Ձեր բովանդակությունը լռելյայն ցանցի հետ տեղադրելու համար ավելացրեք նոր .row
և մի շարք .col-sm-*
սյունակներ գոյություն ունեցող .col-sm-*
սյունակում: Ներդրված տողերը պետք է ներառեն մի շարք սյունակներ, որոնք ավելանում են մինչև 12 կամ ավելի քիչ (պարտադիր չէ, որ օգտագործեք բոլոր 12 հասանելի սյունակները):
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Սաս
Bootstrap-ի սկզբնաղբյուր Sass ֆայլերն օգտագործելիս դուք հնարավորություն ունեք օգտագործելու Sass փոփոխականներ և միքսներ՝ հատուկ, իմաստային և արձագանքող էջի դասավորություններ ստեղծելու համար: Մեր նախապես սահմանված ցանցային դասերը օգտագործում են այս նույն փոփոխականները և միքսները՝ արագ արձագանքող դասավորությունների համար պատրաստի օգտագործման դասերի մի ամբողջ փաթեթ ապահովելու համար:
Փոփոխականներ
Փոփոխականները և քարտեզները որոշում են սյուների քանակը, ջրհորի լայնությունը և մեդիա հարցման կետը, որտեղից սկսելու են լողացող սյունակները: Մենք դրանք օգտագործում ենք վերևում փաստաթղթավորված նախապես սահմանված ցանցային դասերը, ինչպես նաև ստորև թվարկված հատուկ միքսների համար ստեղծելու համար:
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Միքսիններ
Միքսներն օգտագործվում են ցանցի փոփոխականների հետ համատեղ՝ առանձին ցանցի սյունակների համար իմաստային CSS ստեղծելու համար:
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Օգտագործման օրինակ
Դուք կարող եք փոփոխել փոփոխականները ձեր սեփական արժեքներով, կամ պարզապես օգտագործել միքսներն իրենց լռելյայն արժեքներով: Ահա լռելյայն կարգավորումների օգտագործման օրինակ՝ երկու սյունակի դասավորություն ստեղծելու համար՝ միջև բացը:
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Ցանցի հարմարեցում
Օգտագործելով մեր ներկառուցված grid Sass փոփոխականները և քարտեզները, հնարավոր է ամբողջությամբ հարմարեցնել նախապես սահմանված ցանցի դասերը: Փոխեք շերտերի քանակը, մեդիա հարցման չափերը և բեռնարկղերի լայնությունը, այնուհետև նորից կազմեք:
Սյուներ և ջրհեղեղներ
Ցանցային սյունակների թիվը կարող է փոփոխվել Sass փոփոխականների միջոցով: $grid-columns
օգտագործվում է յուրաքանչյուր առանձին սյունակի լայնությունները (տոկոսներով) գեներացնելու համար, մինչդեռ $grid-gutter-width
սահմանում է սյունակի ջրհորների լայնությունը:
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Ցանցային շերտեր
Շարժվելով հենց սյունակներից այն կողմ՝ կարող եք նաև հարմարեցնել ցանցի մակարդակների քանակը: Եթե ցանկանում եք ընդամենը չորս ցանցային մակարդակ, ապա կթարմացնեք $grid-breakpoints
և $container-max-widths
-ը հետևյալ կերպ.
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sass փոփոխականներում կամ քարտեզներում որևէ փոփոխություն կատարելիս պետք է պահպանեք ձեր փոփոխությունները և նորից կազմեք: Դրանով կստեղծվի նախապես սահմանված ցանցի դասերի միանգամայն նոր շարք սյունակների լայնության, շրջադարձերի և պատվերի համար: Արձագանքող տեսանելիության կոմունալ ծառայությունները նույնպես կթարմացվեն՝ հարմարեցված ընդմիջման կետերն օգտագործելու համար: Համոզվեք, որ տեղադրել եք ցանցի արժեքները px
(ոչ rem
, em
, կամ %
):