Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
Check
in English

CSS сүлжээ

Жишээ болон кодын хэсгүүдийн тусламжтайгаар CSS Grid дээр бүтээгдсэн манай өөр байршлын системийг хэрхэн идэвхжүүлэх, ашиглах, өөрчлөх талаар суралцаарай.

Энэ хуудсан дээр

Bootstrap-ийн өгөгдмөл сүлжээний систем нь сая сая хүмүүсийн туршсан, туршсан CSS-ийн арав гаруй жилийн арга барилын оргил үе юм. Гэхдээ энэ нь шинэ CSS Grid гэх мэт хөтөч дээр бидний харж буй орчин үеийн CSS-ийн олон функц, техникгүйгээр бүтээгдсэн.

Анхаараарай, манай CSS Grid систем туршилтын бөгөөд v5.1.0-с эхлэн бүртгүүлнэ! Бид үүнийг танд үзүүлэхийн тулд баримт бичгийнхээ CSS-д оруулсан боловч анхдагчаар үүнийг идэвхгүй болгосон. Үүнийг төслүүддээ хэрхэн идэвхжүүлэх талаар мэдэхийн тулд үргэлжлүүлэн уншина уу.

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

Bootstrap 5-ын тусламжтайгаар бид CSS Grid дээр бүтээгдсэн, гэхдээ Bootstrap-ийн эргэлттэй тусдаа сүлжээний системийг идэвхжүүлэх сонголтыг нэмсэн. Та мэдрэмжтэй зохион байгуулалтыг бий болгохын тулд дур зоргоороо элсэх боломжтой, гэхдээ өөр арга барилтай хичээлүүдтэй хэвээр байна.

  • CSS Grid-д хамрагдах боломжтой. Тохируулах замаар анхдагч сүлжээний системийг идэвхгүй болгож $enable-grid-classes: false, CSS сүлжээг тохируулснаар идэвхжүүлнэ $enable-cssgrid: true. Дараа нь Sass-аа дахин эмхэтгэ.

  • .row-ийн тохиолдлуудыг -аар солино .grid. Анги нь таны HTML-ээр бүтээхийг .gridтохируулж display: grid, үүсгэдэг .grid-template

  • .col-*Ангиудыг ангиар солих .g-col-*. Учир нь манай CSS Grid баганууд нь -ийн grid-columnоронд өмчийг ашигладаг width.

  • Багана болон сувгийн хэмжээг CSS хувьсагчаар тохируулдаг. Эдгээрийг эцэг эх дээр тохируулж, дотор болон .gridзагварын хүснэгтэд хүссэнээрээ тохируулна уу .--bs-columns--bs-gap

Ирээдүйд Bootstrap нь gapflexbox-т зориулсан хөтчийн бүрэн дэмжлэгийг авсан тул хайбрид шийдэл рүү шилжих бололтой.

Гол ялгаа

Анхдагч сүлжээний системтэй харьцуулахад:

  • Flex хэрэгслүүд нь CSS Grid баганад ижил байдлаар нөлөөлдөггүй.

  • Цоорхой нь суваг шуудууг орлоно. Энэ gapөмч нь paddingманай үндсэн сүлжээний системээс хэвтээ байрлалыг орлуулж, margin.

  • Иймээс .rows-ээс ялгаатай нь s .gridнь сөрөг захгүй бөгөөд сүлжээний сувгийг өөрчлөхөд маржин хэрэгслүүдийг ашиглах боломжгүй. Сүлжээний цоорхойг анхдагчаар хэвтээ ба босоо байдлаар ашигладаг. Дэлгэрэнгүй мэдээллийг тохируулах хэсгээс үзнэ үү.

  • Inline болон захиалгат хэв маягийг өөрчлөгч ангиудын орлуулалт гэж үзэх ёстой (жишээ нь, style="--bs-columns: 3;"vs class="row-cols-3").

  • Nesting нь үүнтэй адил ажилладаг боловч танаас үүрлэсэн тохиолдлуудад баганын тоогоо шинэчлэхийг шаардаж магадгүй .grid. Дэлгэрэнгүйг үүрлэх хэсгээс үзнэ үү.

Жишээ

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

Ангиудыг ашиглан бүх харах хэсэг болон төхөөрөмжүүд дээр ижил өргөнтэй гурван багана үүсгэж болно .g-col-4. Харах цонхны хэмжээгээр байршлыг өөрчлөхийн тулд хариу үйлдэл үзүүлэх ангиудыг нэмнэ үү .

.g-col-4
.g-col-4
.g-col-4
html 
<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Хариуцлагатай

Харах цонхнуудын байршлыг тохируулахын тулд хариу үйлдэл үзүүлэх ангиудыг ашигла. Энд бид хамгийн нарийхан харагдах цонхон дээр хоёр баганаар эхэлж, дараа нь дунд болон түүнээс дээш харагдац дээр гурван багана болж өсдөг.

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
html 
<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

Үүнийг бүх харах цонхон дээрх хоёр баганын зохион байгуулалттай харьцуул.

.g-col-6
.g-col-6
html 
<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Боодол

Хэвтээ зай байхгүй үед сүлжээний зүйлүүд автоматаар дараагийн мөрөнд ордог. gapЭнэ нь сүлжээний элементүүдийн хоорондох хэвтээ ба босоо зайд хамаарна гэдгийг анхаарна уу .

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Эхлэх

Эхлэх анги нь манай үндсэн сүлжээний офсет ангиудыг орлуулах зорилготой боловч тэдгээр нь бүхэлдээ ижил биш юм. CSS Grid нь хөтчүүдэд "энэ баганаас эхлэх" болон "энэ баганаар дуусгах" гэсэн хэв маягаар сүлжээний загвар үүсгэдэг. Эдгээр шинж чанарууд нь grid-column-startба grid-column-end. Эхлэх анги нь өмнөх хичээлийн товчлол юм. Тэдгээрийг баганын ангиудтай хослуулж, хүссэн хэмжээгээрээ багананыхаа хэмжээг тохируулна уу. 1Эдгээр шинж чанаруудын хувьд 0буруу утга учир эхлэх ангиуд эхэлнэ .

.g-col-3 .g-start-2
.g-col-4 .g-start-6
html 
<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

Автомат баганууд

Сүлжээний зүйлүүдэд анги байхгүй үед (a-ийн шууд хүүхдүүд .grid) сүлжээний зүйл бүр автоматаар нэг багана болгон хэмжээтэй болно.

1
1
1
1
1
1
1
1
1
1
1
1
html 
<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Энэ зан үйлийг сүлжээ баганын ангиудтай хольж болно.

.g-col-6
1
1
1
1
1
1
html 
<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Үүрлэх

Манай үндсэн сүлжээний системтэй адил манай CSS Grid нь .grids-г хялбархан үүрлэх боломжийг олгодог. Гэсэн хэдий ч, анхдагчаас ялгаатай нь энэ сүлжээ нь мөр, багана, цоорхой дахь өөрчлөлтийг өвлөн авдаг. Дараах жишээг авч үзье.

  • Бид локал CSS хувьсагчтай баганын анхдагч тоог хүчингүй болгодог: --bs-columns: 3.
  • Эхний автомат баганад баганын тоо удамшсан бөгөөд багана тус бүр нь боломжтой өргөний гуравны нэг юм.
  • Хоёрдахь автомат баганад бид баганын тоог .grid12 (бидний анхдагч) болгож шинэчилсэн.
  • Гурав дахь автомат баганад үүрлэсэн контент байхгүй.

Практикт энэ нь манай үндсэн сүлжээний системтэй харьцуулахад илүү төвөгтэй, захиалгат зохион байгуулалт хийх боломжийг олгодог.

Эхний автомат багана
Автомат багана
Автомат багана
Хоёр дахь автомат багана
12-ын 6
12-ын 4
12-ын 2
Гурав дахь автомат багана
html 
<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

Тохируулах

Орон нутгийн CSS хувьсагчаар баганын тоо, мөрийн тоо, хоосон зайны өргөнийг тохируулна уу.

Хувьсагч Буцах үнэ цэнэ Тодорхойлолт
--bs-rows 1 Таны сүлжээний загвар дахь мөрүүдийн тоо
--bs-columns 12 Таны сүлжээний загвар дахь баганын тоо
--bs-gap 1.5rem Баганын хоорондох зайны хэмжээ (босоо ба хэвтээ)

Эдгээр CSS хувьсагчдад анхдагч утга байхгүй; оронд нь тэд локал жишээ өгөх хүртэл ашиглагдах нөөц утгыг хэрэглэнэ . Жишээлбэл, бид var(--bs-rows, 1)CSS Grid мөрүүддээ ашигладаг бөгөөд үүнийг --bs-rowsхараахан хаана ч тохируулаагүй байгаа тул үл тоомсорлодог. Нэгэнт тохиолдвол тухайн .gridжишээ нь нөөц утгын оронд энэ утгыг ашиглана 1.

Сүлжээний анги байхгүй

Шууд хүүхдийн элементүүд нь сүлжээний элементүүд тул анги .gridнэмэхгүйгээр хэмжээг нь гаргах болно ..g-col

Автомат багана
Автомат багана
Автомат багана
html 
<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Багана ба цоорхой

Баганын тоо болон зайг тохируулна уу.

.g-col-2
.g-col-2
html 
<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>
.g-col-6
.g-col-4
html 
<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Мөр нэмж байна

Илүү олон мөр нэмж, баганын байршлыг өөрчлөх:

Автомат багана
Автомат багана
Автомат багана
html 
<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

Цоорхой

Зөвхөн өөрчлөх замаар босоо цоорхойг өөрчлөх row-gap. Бид s дээр ашигладаг gapболовч .gridшаардлагатай row-gapбол column-gapөөрчлөх боломжтой гэдгийг анхаарна уу.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Үүний улмаас та өөр өөр босоо болон хэвтээ gaps байж болох бөгөөд тэдгээр нь нэг утгыг (бүх тал) эсвэл хос утгыг (босоо ба хэвтээ) авч болно. Үүнийг шугамын хэв маягаар gapэсвэл манай --bs-gapCSS хувьсагчаар ашиглаж болно.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Сасс

CSS сүлжээний нэг хязгаарлалт нь манай үндсэн ангиудыг хоёр Sass хувьсагчаар үүсгэсэн хэвээр байгаа явдал $grid-columnsюм $grid-gutter-width. Энэ нь бидний эмхэтгэсэн CSS-д бий болсон ангиудын тоог үр дүнтэйгээр урьдчилан тодорхойлдог. Энд танд хоёр сонголт байна:

  • Эдгээр өгөгдмөл Sass хувьсагчдыг өөрчилж, CSS-ээ дахин эмхэтгэ.
  • Өгөгдсөн ангиудыг нэмэгдүүлэхийн тулд шугаман эсвэл захиалгат хэв маягийг ашиглана уу.

Жишээлбэл, та баганын тоог нэмэгдүүлж, цоорхойны хэмжээг өөрчилж, дараа нь "багана" доторлогооны хэв маяг болон урьдчилан тодорхойлсон CSS Grid баганын ангиудын холимогоор (жишээ нь, .g-col-4) хэмжээсийг хийж болно.

14 багана
.g-col-4
html 
<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>