CSS сүлжээ

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

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

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

• CSS Grid-д хамрагдах боломжтой. Тохируулах замаар анхдагч сүлжээний системийг идэвхгүй болгож, тохиргоогоор $enable-grid-classes: falseCSS сүлжээг идэвхжүүлнэ $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. Харах цонхны хэмжээгээр байршлыг өөрчлөхийн тулд хариу үйлдэл үзүүлэх ангиудыг нэмнэ үү .

<div class="grid">
  <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>

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

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

<div class="grid">
  <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>

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

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

Боодол

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

<div class="grid">
  <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буруу утга учир эхлэх ангиуд эхэлнэ .

<div class="grid">
  <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) сүлжээний зүйл бүрийг автоматаар нэг багана болгон хэмжээтэй болгоно.

<div class="grid">
  <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>

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

<div class="grid">
  <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 (бидний анхдагч) болгож шинэчилсэн.
• Гурав дахь автомат баганад үүрлэсэн контент байхгүй.

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

<div class="grid" 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 хувьсагчаар баганын тоо, мөрийн тоо, хоосон зайны өргөнийг тохируулна уу.

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

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

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

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

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

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

<div class="grid" 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>

<div class="grid" 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>

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

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

<div class="grid" 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өөрчлөх боломжтой гэдгийг анхаарна уу.

<div class="grid" 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 хувьсагчаар ашиглаж болно.

<div class="grid" 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) хэмжээс болгож болно.

<div class="grid" 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>