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

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

Ինչպես է դա աշխատում

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

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

Երեք սյունակներից մեկը

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

Կոտրելով այն, ահա թե ինչպես է այն աշխատում.

Կոնտեյներները հնարավորություն են տալիս կենտրոնացնել և հորիզոնական հարթեցնել ձեր կայքի բովանդակությունը: Օգտագործեք .containerարձագանքող պիքսելների լայնության .container-fluidհամար կամ width: 100%տեսադաշտի և սարքի բոլոր չափերի համար:
Տողերը սյուների փաթաթիչներ են: Յուրաքանչյուր սյուն ունի հորիզոնական padding(կոչվում է ջրհոր)՝ նրանց միջև տարածությունը վերահսկելու համար: Այնուհետև paddingդա հակադրվում է բացասական լուսանցքներով տողերի վրա: Այսպիսով, ձեր սյունակների ամբողջ բովանդակությունը տեսողականորեն հավասարեցվում է ձախ կողմում:
Ցանցային դասավորության մեջ բովանդակությունը պետք է տեղադրվի սյունակների մեջ, և միայն սյունակները կարող են լինել տողերի անմիջական զավակներ:
Flexbox-ի շնորհիվ ցանցային սյունակները՝ առանց նշվածի, widthավտոմատ կերպով կդասավորվեն որպես հավասար լայնության սյունակներ: Օրինակ, չորս օրինակ .col-smկամքի յուրաքանչյուրը ավտոմատ կերպով կունենա 25% լայնություն փոքր բեկման կետից և ավելի բարձր: Լրացուցիչ օրինակների համար տե՛ս ավտոմատ դասավորության սյունակների բաժինը:
Սյունակների դասերը ցույց են տալիս սյունակների քանակը, որոնք ցանկանում եք օգտագործել յուրաքանչյուր տողում հնարավոր 12-ից: Այսպիսով, եթե ցանկանում եք երեք հավասար լայնությամբ սյունակներ, կարող եք օգտագործել .col-4:
Սյունակները widthսահմանվում են տոկոսներով, ուստի դրանք միշտ հեղուկ են և չափվում են իրենց մայր տարրի համեմատ:
Սյունակներն ունեն հորիզոնական padding՝ առանձին սյունակների միջև ջրհեղեղներ ստեղծելու համար, այնուամենայնիվ, դուք կարող եք հեռացնել marginտողերից և paddingսյունակներից՝ .no-guttersօգտագործելով .row.
Ցանցը արձագանքող դարձնելու համար կա ցանցի հինգ ընդհատման կետ՝ մեկը յուրաքանչյուր արձագանքող բեկման կետի համար ՝ բոլոր ընդմիջման կետերը (չափազանց փոքր), փոքր, միջին, մեծ և չափազանց մեծ:
Ցանցի ընդմիջման կետերը հիմնված են նվազագույն լայնության մեդիայի հարցումների վրա, այսինքն՝ դրանք կիրառվում են այդ մեկ ընդմիջման կետի և դրանից վերև գտնվող բոլոր կետերի վրա (օրինակ՝ .col-sm-4կիրառվում է փոքր, միջին, մեծ և չափազանց մեծ սարքերի համար, բայց ոչ առաջին xsընդմիջման կետին):
Դուք կարող եք օգտագործել նախապես սահմանված ցանցային դասեր (ինչպես .col-4) կամ Sass խառնուրդներ ավելի շատ իմաստային նշագրման համար:

Ուշադիր եղեք flexbox- ի հետ կապված սահմանափակումների և սխալների մասին , ինչպես օրինակ HTML որոշ տարրեր որպես ճկուն կոնտեյներներ օգտագործելու անկարողությունը :

Ցանցային ընտրանքներ

Մինչ Bootstrap-ն օգտագործում emէ s կամ rems չափերի մեծամասնությունը որոշելու համար, pxs-ն օգտագործվում է ցանցի բեկման կետերի և բեռնարկղերի լայնությունների համար: Դա պայմանավորված է նրանով, որ տեսադաշտի լայնությունը պիքսելներով է և չի փոխվում տառաչափի հետ :

Տեսեք, թե ինչպես են Bootstrap grid համակարգի ասպեկտները աշխատում հարմար սեղան ունեցող բազմաթիվ սարքերում:

	Շատ փոքր <576px	Փոքր ≥576px	Միջին ≥768px	Մեծ ≥992px	Չափազանց մեծ ≥1200px
Տարայի առավելագույն լայնությունը	Ոչ մեկը (ավտոմատ)	540px	720px	960px	1140px
Դասի նախածանց	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# սյունակներ	12
Հեղեղաջրերի լայնությունը	30px (15px սյունակի յուրաքանչյուր կողմում)
Բնադրելի	Այո՛
Սյունակների պատվիրում	Այո՛

Ավտոմատ դասավորության սյունակներ

Օգտագործեք ընդմիջման կետին հատուկ սյունակների դասեր սյունակների չափսերը հեշտացնելու համար՝ առանց բացահայտ համարակալված դասի, ինչպիսին է .col-sm-6.

Հավասար լայնությամբ

Օրինակ, ահա երկու ցանցային դասավորություններ, որոնք կիրառվում են յուրաքանչյուր սարքի և տեսադաշտի համար՝ սկսած xsմինչև xl. Ավելացրե՛ք ցանկացած քանակի միավոր առանց դասերի յուրաքանչյուր բեկման կետի համար, որն անհրաժեշտ է, և յուրաքանչյուր սյունակ կունենա նույն լայնությունը:

1-ը 2-ից

2-ը 2-ից

1-ը 3-ից

2-ը 3-ից

3-ը 3-ից

<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>

Հավասար լայնությամբ բազմագիծ

Ստեղծեք հավասար լայնությամբ սյունակներ, որոնք ընդգրկում են մի քանի տող՝ տեղադրելով այն, .w-100որտեղ ցանկանում եք, որ սյունակները կոտրվեն նոր տողով: Դարձրեք ընդմիջումները պատասխանատու՝ խառնելով .w-100որոշ արձագանքող ցուցադրման կոմունալ ծառայությունների հետ :

Կար Safari flexbox-ի վրիպակ , որը թույլ չտվեց, որ սա աշխատի առանց բացահայտ flex-basisկամ border. Բրաուզերի ավելի հին տարբերակների համար կան լուծումներ, բայց դրանք չպետք է անհրաժեշտ լինեն, եթե ձեր թիրախային բրաուզերները չեն ընկնում խելագարված տարբերակների մեջ:

գնդ

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Մեկ սյունակի լայնության սահմանում

Flexbox ցանցի սյունակների ավտոմատ դասավորությունը նաև նշանակում է, որ դուք կարող եք սահմանել մեկ սյունակի լայնությունը և թույլ տալ, որ եղբայրական սյունակներն ավտոմատ կերպով չափափոխեն դրա շուրջը: Դուք կարող եք օգտագործել նախապես սահմանված ցանցի դասեր (ինչպես ցույց է տրված ստորև), ցանցի խառնուրդներ կամ ներդիր լայնություններ: Նկատի ունեցեք, որ մյուս սյունակների չափերը կփոխվեն՝ անկախ կենտրոնական սյունակի լայնությունից:

1-ը 3-ից

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

3-ը 3-ից

1-ը 3-ից

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

3-ը 3-ից

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

1-ը 3-ից

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

3-ը 3-ից

1-ը 3-ից

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

3-ը 3-ից

<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.

գնդ

col-8

col-4

<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):

col-sm-8

col-sm-4

col-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>

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

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

.col-md-8

.col-6 .col-md-4

.col-6

<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-ի վրա: Հնարավոր է, որ ծնողը .containerկամ .container-fluidծնողը նույնպես կարգավորվեն՝ անցանկալի արտահոսքից խուսափելու համար՝ կրկին օգտագործելով համապատասխան լցոնման ծրագիրը:

Ահա Bootstrap ցանցի հարմարեցման օրինակ մեծ ( lg) ընդմիջման կետում և ավելի բարձր: Մենք մեծացրել ենք .colլիցքը .px-lg-5, հակադարձել ենք .mx-lg-n5դրա մայրիկի վրա .rowև այնուհետև հարմարեցրել ենք .containerփաթաթումը .px-lg-5.

Պատվերով սյունակի լցոնում

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Տողերի սյունակներ

Օգտագործեք արձագանքող .row-cols-*դասերը՝ արագորեն սահմանելու ձեր բովանդակությունը և դասավորությունը լավագույնս ներկայացնող սյունակների քանակը: Մինչդեռ սովորական .col-*դասերը կիրառվում են առանձին սյունակների վրա (օրինակ՝ .col-md-4), տողերի սյունակների դասերը դրվում են ծնողի վրա՝ .rowորպես դյուրանցում:

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

Սյունակ

<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-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>

Կարող եք նաև օգտագործել ուղեկցող 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);
  }
}

Հավասարեցում

Օգտագործեք flexbox հավասարեցման կոմունալ ծառայություններ՝ սյունակները ուղղահայաց և հորիզոնական հավասարեցնելու համար: Internet Explorer 10-11-ը չի աջակցում ճկուն տարրերի ուղղահայաց հավասարեցմանը, երբ ճկուն կոնտեյները ունի, min-heightինչպես ցույց է տրված ստորև: Լրացուցիչ մանրամասների համար տե՛ս Flexbugs #3:

Ուղղահայաց հավասարեցում

Երեք սյունակներից մեկը

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Երեք սյունակներից մեկը

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Հորիզոնական հավասարեցում

Երկու սյունակներից մեկը

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Առանց ջրհորների

Մեր նախապես սահմանված ցանցային դասերի սյունակների միջև ջրհեղեղները կարող են հեռացվել .no-gutters. Սա հեռացնում է բացասական margins-ը .rowև հորիզոնականը paddingբոլոր անմիջական երեխաների սյունակներից:

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

Պե՞տք է եզրից ծայր դիզայն: Թողեք ծնողին .containerկամ .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Գործնականում ահա թե ինչպես է այն նայում. Նկատի ունեցեք, որ դուք կարող եք շարունակել օգտագործել սա բոլոր մյուս կանխորոշված ցանցային դասերի հետ (ներառյալ սյունակների լայնությունները, արձագանքող մակարդակները, վերադասավորումները և այլն):

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Սյունակի փաթաթում

Եթե մեկ տողում տեղադրված են ավելի քան 12 սյունակներ, ապա լրացուցիչ սյունակների յուրաքանչյուր խումբ, որպես մեկ միավոր, կփաթաթվի նոր տողի վրա:

.col-9

.col-4
Քանի որ 9 + 4 = 13 > 12, այս 4 սյունակ լայնությամբ բաժանումը փաթաթվում է նոր տողի վրա որպես մեկ հարակից միավոր:

.col-6
Հաջորդ սյունակները շարունակվում են նոր գծի երկայնքով:

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Սյունակի ընդմիջումներ

Flexbox-ում սյունակները նոր տող կտրելու համար պահանջվում է մի փոքր կոտրվածք. ավելացրեք տարր, width: 100%որտեղ ցանկանում եք փաթաթել ձեր սյունակները նոր տողում: Սովորաբար դա իրականացվում է բազմաթիվ .rows-ներով, բայց ոչ բոլոր իրականացման մեթոդը կարող է դա բացատրել:

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Դուք կարող եք նաև կիրառել այս ընդմիջումը որոշակի ընդմիջման կետերում մեր արձագանքող ցուցադրման կոմունալ ծրագրերի միջոցով :

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Վերադասավորում

Պատվիրեք դասեր

Օգտագործեք դասեր ՝ ձեր բովանդակության տեսողական կարգը.order- վերահսկելու համար : Այս դասերը արձագանքող են, այնպես որ կարող եք սահմանել ըստ ընդմիջման կետը (օրինակ՝ ): Ներառում է ցանցի բոլոր հինգ մակարդակների աջակցում:order.order-1.order-md-2112

Առաջինը DOM-ում, պատվեր չի կիրառվել

Երկրորդը DOM-ում, ավելի մեծ պատվերով

Երրորդը՝ DOM-ում՝ 1 պատվերով

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Կան նաև արձագանքող .order-firstև .order-lastդասեր, որոնք փոխում են orderտարրի արժեքը՝ համապատասխանաբար կիրառելով order: -1և order: 13( order: $columns + 1): Այս դասերը կարող են նաև միախառնվել համարակալված .order-*դասերի հետ՝ ըստ անհրաժեշտության:

Առաջինը DOM-ում, վերջին պատվիրված

Երկրորդը DOM-ում, չպատվիրված

Երրորդը DOM-ում, պատվիրված առաջինը

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Փոխհատուցման սյունակներ

.offset-Դուք կարող եք փոխհատուցել ցանցի սյունակները երկու եղանակով . Ցանցային դասերը չափվում են սյունակներին համապատասխանելու համար, մինչդեռ լուսանցքներն ավելի օգտակար են արագ դասավորությունների համար, որտեղ օֆսեթի լայնությունը փոփոխական է:

Օֆսեթ դասեր

Տեղափոխեք սյունակները դեպի աջ՝ օգտագործելով .offset-md-*դասերը: Այս դասերը մեծացնում են սյունակի ձախ լուսանցքն ըստ *սյունակների: Օրինակ՝ .offset-md-4շարժվում .col-md-4է չորս սյունակի վրայով:

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Ի հավելումն արձագանքող բեկման կետերում սյունակի մաքրմանը, ձեզ կարող է անհրաժեշտ լինել զրոյացնել օֆսեթները: Տեսեք սա ցանցի օրինակում գործողության մեջ :

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Մարգինային կոմունալ ծառայություններ

V4-ում flexbox-ին անցնելու դեպքում դուք կարող եք օգտագործել լուսանցքի կոմունալ ծառայություններ, ինչպիսիք .mr-autoեն՝ ստիպելով քույր-եղբոր սյունակները հեռացնել միմյանցից:

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Բնադրում

Ձեր բովանդակությունը լռելյայն ցանցի հետ տեղադրելու համար ավելացրեք նոր .rowև մի շարք .col-sm-*սյունակներ գոյություն ունեցող .col-sm-*սյունակում: Ներդրված տողերը պետք է ներառեն մի շարք սյունակներ, որոնք ավելանում են մինչև 12 կամ ավելի քիչ (պարտադիր չէ, որ օգտագործեք բոլոր 12 հասանելի սյունակները):

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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>

Sass mixins

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

Փոփոխականներ

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Միքսիններ

Միքսներն օգտագործվում են ցանցի փոփոխականների հետ համատեղ՝ առանձին ցանցի սյունակների համար իմաստային 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();
@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: 30px !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, կամ %):