Сүлжээний систем

Арван хоёр баганын систем, өгөгдмөл хариу үйлдэл үзүүлэх таван шатлал, Sass хувьсагч болон холимог болон олон арван урьдчилан тодорхойлсон ангиудын ачаар бүх хэлбэр, хэмжээтэй бүдүүвчийг бүтээхийн тулд манай хүчирхэг гар утасны анхны flexbox сүлжээг ашиглана уу.

Хэрхэн ажилладаг

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-smwill-ийн дөрвөн тохиолдол нь жижиг завсарлага ба түүнээс дээш цэгээс автоматаар 25% өргөн байна. Илүү олон жишээг автоматаар байрлуулах багана хэсгээс үзнэ үү .
Баганын ангиуд нь мөр бүрт боломжит 12 баганаас ашиглахыг хүсэж буй баганын тоог заана. Тиймээс, хэрэв та ижил өргөнтэй гурван багана авахыг хүсвэл -г ашиглаж болно .col-4.
Багана widths-ийг хувиар тогтоосон тул үндсэн элементтэйгээ харьцуулахад үргэлж шингэн, хэмжээтэй байдаг.
paddingБаганууд нь бие даасан баганын хооронд суваг үүсгэхийн тулд хэвтээ байрлалтай байдаг, гэхдээ та marginмөр болон paddingбагана .no-guttersдээрх мөрүүдийг устгаж болно .row.
Сүлжээг хариу үйлдэл үзүүлэхийн тулд бүх таслах цэгүүд (илүү жижиг), жижиг, дунд, том, хэт том гэсэн таван сүлжээ таслах цэг байдаг .
Сүлжээний таслах цэгүүд нь хамгийн бага өргөнтэй медиа асуулгад суурилдаг бөгөөд энэ нь тухайн нэг таслах цэг болон түүнээс дээш байгаа бүх зүйлд хамаарна (жишээ нь, .col-sm-4жижиг, дунд, том, хэт том төхөөрөмжүүдэд хамаарах боловч эхний xsтаслах цэг биш).
Та илүү семантик тэмдэглэгээ хийхийн тулд урьдчилан тодорхойлсон сүлжээний ангиудыг ( гэх мэт .col-4) эсвэл Sass хольцыг ашиглаж болно.

Зарим HTML элементүүдийг уян хатан контейнер болгон ашиглах боломжгүй гэх мэт flexbox - ийн хязгаарлалт, алдаануудыг мэдэж аваарай .

Сүлжээний сонголтууд

Bootstrap нь ихэнх хэмжээг тодорхойлохдоо ems эсвэл s-г ашигладаг бол s нь сүлжээний таслах цэг болон савны өргөнд ашиглагддаг. Учир нь харах талбарын өргөн нь пикселээр илэрхийлэгдэх бөгөөд үсгийн хэмжээнээс хамаарч өөрчлөгддөггүй .rempx

Bootstrap сүлжээний систем нь олон төхөөрөмж дээр хэрхэн ажилладагийг хялбар хүснэгтээр хараарай.

	Хэт жижиг <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. Шаардлагатай таслах цэг бүрт хэдэн ч нэгж бага анги нэмэх ба багана бүр ижил өргөнтэй байх болно.

2-оос 1

2-оос 2

3-ын 1

3-ын 2

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>

Тэнцүү өргөнтэй баганыг олон мөрөнд хувааж болох боловч 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 сүлжээ багануудыг автоматаар байрлуулснаар та нэг баганын өргөнийг тохируулж, ах дүү багануудын хэмжээг автоматаар өөрчлөх боломжтой гэсэн үг юм. Та урьдчилан тодорхойлсон сүлжээний ангиуд (доор үзүүлсэн шиг), сүлжээний холимог эсвэл шугамын өргөнийг ашиглаж болно. Төв баганын өргөнөөс үл хамааран бусад баганын хэмжээг өөрчлөх болно гэдгийг анхаарна уу.

3-ын 1

3-аас 2 (илүү өргөн)

3-ын 3

3-ын 1

3-аас 2 (илүү өргөн)

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багануудыг агуулгынх нь байгалийн өргөнд тулгуурлан хэмжээлээрэй.

3-ын 1

Хувьсах өргөнтэй агуулга

3-ын 3

3-ын 1

Хувьсах өргөнтэй агуулга

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>

Тэнцүү өргөнтэй олон эгнээ

.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-ийн сүлжээнд нарийн төвөгтэй responsive зохион байгуулалтыг бий болгох урьдчилан тодорхойлсон таван түвшний анги багтдаг. Хэт жижиг, жижиг, дунд, том, эсвэл хэт том төхөөрөмжүүд дээр багануудынхаа хэмжээг өөрт тохирсон байдлаар тохируулаарай.

Бүх таслах цэгүүд

Хамгийн жижиг төхөөрөмжөөс хамгийн том хүртэл ижил сүлжээний хувьд .colболон .col-*ангиллыг ашиглана уу. Онцгой хэмжээтэй багана хэрэгтэй үед дугаарласан анги зааж өгөх; Хэрэв тийм биш бол, -г бүү зөвшөөр .col.

колон

кол-8

кол-4

<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) дээр хэвтээ болдог үндсэн сүлжээний системийг үүсгэж болно.

col-sm-8

col-sm-4

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

Хольж, тааруулна

Таны баганууд зүгээр л зарим сүлжээний давхаргад овоолсон байхыг хүсэхгүй байна уу? Шаардлагатай бол шат бүрт өөр өөр ангиудын хослолыг ашиглана уу. Энэ бүхэн хэрхэн ажилладаг талаар илүү сайн санаа авахын тулд доорх жишээг үзнэ үү.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- 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 alignment хэрэгслийг ашиглана уу.

Босоо зэрэгцүүлэх

Гурван баганын нэг

<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-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<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-оос дээш багана байрлуулсан бол нэмэлт баганын бүлэг бүр нэг нэгж болж шинэ мөрөнд орооно.

.col-9

.col-4
9 + 4 = 13 > 12 тул 4 баганын өргөнтэй энэ div нь шинэ мөрөнд нэг залгаа нэгж хэлбэрээр ороогдоно.

.col-6
Дараагийн баганууд шинэ мөрийн дагуу үргэлжилнэ.

<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%хүссэн газартаа элемент нэмнэ үү. Энэ нь ихэвчлэн олон секундын тусламжтайгаар хийгддэг .rowболовч хэрэгжүүлэх арга бүр үүнийг тооцоолж чаддаггүй.

.col-6 .col-sm-3

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

Та энэ завсарлагыг манай мэдрэгчтэй дэлгэцийн хэрэгслүүдээр тодорхой таслах цэгүүдэд хэрэглэж болно .

.col-6 .col-sm-4

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

Мөн ( )-г тус тус хэрэглэснээр элементийн хэлбэрийг өөрчилдөг responsive .order-firstболон .order-lastангиуд байдаг . Шаардлагатай бол эдгээр ангиудыг дугаарлагдсан ангиудтай хольж болно .orderorder: -1order: 13order: $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-үзүүлэх сүлжээний ангиуд болон манай margin utilities . Сүлжээний ангиудын хэмжээ нь баганатай таарч байхын зэрэгцээ офсетийн өргөн нь хувьсах боломжтой хурдан зохион байгуулалтад захын зай илүү ашигтай байдаг.

Офсет ангиуд

Ангиудыг ашиглан багануудыг баруун тийш зөөнө үү .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="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>

Хариуцах цэгүүд дээр баганыг цэвэрлэхээс гадна офсетийг дахин тохируулах шаардлагатай байж магадгүй. Сүлжээний жишээн дээрх үйлдлийг харна уу .

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

Margin хэрэгслүүд

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="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ба багц багана нэмнэ үү. Суурилуулсан мөрүүд нь 12 ба түүнээс цөөн тоог нэмэх баганын багцыг агуулсан байх ёстой (боломжтой бүх 12 баганыг ашиглах шаардлагагүй)..col-sm-*.col-sm-*

Түвшин 1: .col-sm-9

Түвшин 2: .col-8 .col-sm-6

Түвшин 2: .col-4 .col-sm-6

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

Сасс холимог

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>

Сүлжээг тохируулах

Бидний суулгасан сүлжээний Sass хувьсагч болон газрын зургийг ашиглан урьдчилан тодорхойлсон сүлжээний ангиудыг бүрэн өөрчлөх боломжтой. Давхаргын тоо, медиа асуулгын хэмжээ, савны өргөнийг өөрчилсний дараа дахин эмхэтгэ.

Багана ба суваг

Сүлжээний баганын тоог Sass хувьсагчаар өөрчилж болно. $grid-columnsнь багана тус бүрийн өргөнийг (хувиар) үүсгэхийн зэрэгцээ $grid-gutter-widthбаганын сувгийн өргөнийг тохируулахад ашиглагддаг.

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

Сүлжээний давхарга

Багануудыг өөрсдөөсөө цааш хөдөлж, та сүлжээний түвшний тоог тохируулах боломжтой. Хэрэв та ердөө дөрвөн шатлалтай байхыг хүсвэл " $grid-breakpointsand "-г дараах байдлаар шинэчлэх болно $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, эсвэл биш) тохируулахаа мартуузай %.