Ցանցային համակարգ

Օգտագործեք մեր հզոր շարժական առաջին flexbox ցանցը՝ բոլոր ձևերի և չափերի դասավորություններ ստեղծելու համար՝ շնորհիվ տասներկու սյունակ համակարգի, վեց լռելյայն արձագանքող մակարդակների, Sass փոփոխականների և խառնուրդների և տասնյակ նախապես սահմանված դասերի:

Այս էջում

Օրինակ

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

Նորությա՞մբ եք կամ անծանոթ եք flexbox-ին: Կարդացեք այս CSS Tricks flexbox ուղեցույցը ՝ նախապատմության, տերմինաբանության, ուղեցույցների և կոդի հատվածների համար:

Սյունակ

html

<div class="container text-center">
  <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չորսը): widths-ները սահմանված են տոկոսներով, այնպես որ դուք միշտ ունեք նույն հարաբերական չափերը:
Հեղեղատարները նույնպես արձագանքող են և հարմարեցված: Հեղեղաջրերի դասերը հասանելի են բոլոր ընդմիջման կետերում, բոլոր նույն չափերով, ինչ մեր լուսանցքը և միջադիրների տարածությունը : Հորիզոնական ջրհեղեղները փոխեք .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. Ավելացրե՛ք ցանկացած քանակի միավոր առանց դասերի յուրաքանչյուր բեկման կետի համար, որն անհրաժեշտ է, և յուրաքանչյուր սյունակ կունենա նույն լայնությունը:

1-ը 2-ից

2-ը 2-ից

1-ը 3-ից

2-ը 3-ից

3-ը 3-ից

html

<div class="container text-center">
  <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 ցանցի սյունակների ավտոմատ դասավորությունը նաև նշանակում է, որ դուք կարող եք սահմանել մեկ սյունակի լայնությունը և թույլ տալ, որ եղբայրական սյունակներն ավտոմատ կերպով չափափոխեն դրա շուրջը: Դուք կարող եք օգտագործել նախապես սահմանված ցանցի դասեր (ինչպես ցույց է տրված ստորև), ցանցի խառնուրդներ կամ ներդիր լայնություններ: Նկատի ունեցեք, որ մյուս սյունակների չափերը կփոխվեն՝ անկախ կենտրոնական սյունակի լայնությունից:

1-ը 3-ից

2-ը 3-ից (ավելի լայն)

3-ը 3-ից

1-ը 3-ից

2-ը 3-ից (ավելի լայն)

3-ը 3-ից

html

<div class="container text-center">
  <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դասեր՝ սյունակները չափելու համար՝ հիմնվելով դրանց բովանդակության բնական լայնության վրա:

1-ը 3-ից

Փոփոխական լայնության բովանդակություն

3-ը 3-ից

1-ը 3-ից

Փոփոխական լայնության բովանդակություն

3-ը 3-ից

html

<div class="container text-center">
  <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.

գնդ

col-8

col-4

html

<div class="container text-center">
  <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):

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <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>

Խառնել և համապատասխանեցնել

Չե՞ք ուզում, որ ձեր սյունակները պարզապես կուտակվեն ցանցի որոշ շերտերում: Անհրաժեշտության դեպքում յուրաքանչյուր մակարդակի համար օգտագործեք տարբեր դասերի համադրություն: Տես ստորև բերված օրինակը՝ ավելի լավ պատկերացնելու համար, թե ինչպես է այդ ամենը աշխատում:

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- 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Դուք կարող եք սյուներին տալ իրենց բնական լայնությունը :

Օգտագործեք այս տողերի սյունակների դասերը՝ արագ ստեղծելու հիմնական ցանցային դասավորությունները կամ վերահսկելու ձեր քարտի դասավորությունները:

Սյունակ

html

<div class="container text-center">
  <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>

Սյունակ

html

<div class="container text-center">
  <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>

Սյունակ

html

<div class="container text-center">
  <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>

Սյունակ

html

<div class="container text-center">
  <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>

Սյունակ

html

<div class="container text-center">
  <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>

Սյունակ

html

<div class="container text-center">
  <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>

Կարող եք նաև օգտագործել ուղեկցող 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 հասանելի սյունակները):

Մակարդակ 1: .col-sm-3

Մակարդակ 2՝ .col-8 .col-sm-6

Մակարդակ 2՝ .col-4 .col-sm-6

html

<div class="container text-center">
  <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-row-columns:  6;

$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);

// Offset with margins
@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);
  }
}

Հիմնական բովանդակություն

Երկրորդական բովանդակություն

html

<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-row-columnsօգտագործվում է սյունակների առավելագույն քանակը սահմանելու համար, .row-cols-*այս սահմանը գերազանցող ցանկացած թիվ անտեսվում է:

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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, կամ %):