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

Օգտագործեք մեր հզոր բջջային առաջին 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 համակարգի ասպեկտները աշխատում հարմար սեղան ունեցող բազմաթիվ սարքերում:

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

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

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

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

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

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

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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>

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

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

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

Պատասխանատու դասեր

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

Բոլոր ընդմիջման կետերը

Ցանցերի համար, որոնք նույնն են՝ ամենափոքր սարքերից մինչև ամենամեծը, օգտագործեք .colև .col-*դասերը: Նշեք համարակալված դաս, երբ ձեզ անհրաժեշտ է հատուկ չափի սյունակ; հակառակ դեպքում, ազատ զգալ հավատարիմ մնալ .col.

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

Հորիզոնական դրված

Օգտագործելով դասերի մեկ խումբ .col-sm-*՝ դուք կարող եք ստեղծել հիմնական ցանցային համակարգ, որը սկսում է կուտակված, նախքան հորիզոնական դառնալը փոքր ընդմիջման կետում ( sm):

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

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

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

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

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

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

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

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

Օֆսեթ դասեր

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

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

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

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

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

Բնադրում

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

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

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 {
  width: 800px;
  @include make-container();
}

.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թույլ է տալիս բեկման կետին հատուկ լայնություններ, որոնք հավասարապես բաժանված են padding-leftև padding-rightսյունակների ջրահեռացման համար:

$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, կամ %):