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

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

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

Жишээ

Bootstrap-ийн сүлжээ систем нь агуулгыг байрлуулах, зэрэгцүүлэхийн тулд хэд хэдэн контейнер, мөр, баганыг ашигладаг. Энэ нь flexbox -оор бүтээгдсэн бөгөөд бүрэн хариу үйлдэл үзүүлдэг. Сүлжээний систем хэрхэн нийлдэг тухай жишээ болон дэлгэрэнгүй тайлбарыг доор харуулав.

Flexbox-т шинээр орсон уу эсвэл мэдэхгүй байна уу? Энэхүү CSS Tricks flexbox гарын авлагаас суурь, нэр томьёо, заавар, кодын хэсгүүдийг уншина уу.

Багана

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Дээрх жишээ нь бидний урьдчилан тодорхойлсон сүлжээний ангиудыг ашиглан бүх төхөөрөмж болон харах хэсэгт ижил өргөнтэй гурван багана үүсгэдэг. Эдгээр баганууд нь хуудасны голд эцэг эхтэй .containerбайна.

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

Үүнийг задлах юм бол сүлжээний систем хэрхэн нэгддэг:

Манай сүлжээ нь хариу үйлдэл үзүүлэх зургаан цэгийг дэмждэг . Хугарлын цэгүүд нь медиа асуулгад суурилдаг бөгөөд min-widthэнэ нь тухайн таслах цэг болон түүнээс дээш байгаа бүх зүйлд нөлөөлдөг (жишээ нь: , , , , болон -д .col-sm-4хамаарна ). Энэ нь та таслах цэг тус бүрээр контейнер болон баганын хэмжээ, үйлдлийг хянах боломжтой гэсэн үг юм.smmdlgxlxxl
Контейныг голлон байрлуулж, контентоо хэвтээ байдлаар байрлуулна. Бүх харагдац болон төхөөрөмжүүдэд мэдрэгчтэй .containerпикселийн өргөн, эсвэл шингэн болон пикселийн өргөнийг хослуулахад хариу үйлдэл үзүүлэх сав (жишээ нь, ) ашиглах боломжтой..container-fluidwidth: 100%.container-md
Мөр нь баганын боодол юм. Багана бүр нь paddingтэдгээрийн хоорондох зайг хянах зориулалттай хэвтээ (суваг гэж нэрлэдэг) байдаг. Дараа paddingнь таны баганууд дахь агуулгыг зүүн талдаа нүдээр зэрэгцүүлэхийн тулд сөрөг зайтай мөрүүдэд үүнийг эсэргүүцнэ. Мөрүүд нь баганын хэмжээсийг жигд хэрэглэхийн тулд өөрчлөгч ангиудыг дэмжинэ , агуулгынхаа зайг өөрчлөхийн тулд сувгийн ангиллыг жигдрүүлнэ.
Баганууд нь гайхалтай уян хатан байдаг. Нэг мөрөнд 12 загвар багана байдаг бөгөөд энэ нь танд ямар ч тооны багануудыг хамарсан өөр өөр элементүүдийн хослолыг үүсгэх боломжийг олгоно. Баганын ангиуд нь дамжих загвар баганын тоог заадаг (жишээ нь, col-4дөрөв хүртэлх). widths-ийг хувиар тогтоосон тул та үргэлж ижил хэмжээтэй байх болно.
Суваг нь бас хариу үйлдэл үзүүлэх чадвартай бөгөөд өөрчлөх боломжтой. Сувагны ангиуд нь манай захын зай болон дүүргэх зайтай ижил хэмжээтэй, бүх таслах цэгүүдэд байдаг. .gx-*Хэвтээ сувгийг ангитай, босоо суваг шуудууг -тэй .gy-*, эсвэл бүх суваг шуудууг ангитай өөрчил .g-*. .g-0мөн суваг зайлуулах боломжтой.
Sass хувьсагч, газрын зураг, холимог нь сүлжээг тэжээдэг. Хэрэв та Bootstrap-д урьдчилан тодорхойлсон grid ангиудыг ашиглахыг хүсэхгүй байгаа бол манай сүлжээний эх сурвалж Sass -ийг ашиглан илүү семантик тэмдэглэгээг ашиглан өөрийн гараар үүсгэж болно. Мөн бид танд илүү уян хатан болгох үүднээс эдгээр Sass хувьсагчдыг ашиглахын тулд CSS-ийн захиалгат шинж чанаруудыг багтаасан болно.

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

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

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

Хэт жижиг (xs)
Жижиг (см)
Дунд (md)
Том (lg)
Хэт том (xl)
Хэт том (xxl)

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

	xs <576px	см ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Контейнер`max-width`	Байхгүй (автомат)	540px	720px	960px	1140px	1320px
Ангийн угтвар	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# багана	12
Сувагны өргөн	1.5 рем (зүүн ба баруун талд .75 рем)
Захиалгат суваг	Тиймээ
Суурин	Тиймээ
Баганын захиалга	Тиймээ

Багануудыг автоматаар байрлуулах

гэх мэт тодорхой дугаарлагдсан ангигүйгээр баганын хэмжээг хялбар болгохын тулд таслах цэгийн тусгай баганын ангиудыг ашиглаарай .col-sm-6.

Тэнцүү өргөн

Жишээ нь, эндээс эхлэн төхөөрөмж болон харах хэсэг болгонд хамаарах хоёр сүлжээний схем xsбайна xxl. Шаардлагатай таслах цэг бүрт хэдэн ч нэгж бага анги нэмэх ба багана бүр ижил өргөнтэй байх болно.

2-оос 1

2-оос 2

3-ын 1

3-ын 2

3-ын 3

html

<div class="container text-center">
  <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>

Нэг баганын өргөнийг тохируулах

Flexbox сүлжээ багануудыг автоматаар байрлуулснаар та нэг баганын өргөнийг тохируулж, ах дүү багануудын хэмжээг автоматаар өөрчлөх боломжтой гэсэн үг юм. Та урьдчилан тодорхойлсон сүлжээний ангиуд (доор үзүүлсэн шиг), сүлжээний холимог эсвэл шугамын өргөнийг ашиглаж болно. Төв баганын өргөнөөс үл хамааран бусад баганын хэмжээг өөрчлөх болно гэдгийг анхаарна уу.

3-ын 1

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

3-ын 3

3-ын 1

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

3-ын 3

html

<div class="container text-center">
  <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

html

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

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

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

колон

кол-8

кол-4

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <!-- 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-*Таны контент болон байршлыг хамгийн сайн харуулах баганын тоог хурдан тохируулахын тулд хариу үйлдэл үзүүлэх ангиудыг ашиглана уу. Энгийн .col-*ангиуд нь тус тусын баганад (жишээ нь, .col-md-4) хамаарах бол мөрийн баганын ангиудыг эцэг эх .rowдээр товчлол болгон тохируулсан. Үүний тусламжтайгаар .row-cols-autoбагануудыг байгалийн өргөнөөр нь өгч болно.

Эдгээр эгнээний баганын ангиудыг ашиглан үндсэн сүлжээний бүдүүвчийг хурдан үүсгэх эсвэл картынхаа байршлыг хянах боломжтой.

Багана

html

<div class="container text-center">
  <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>

Багана

html

<div class="container text-center">
  <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>

Багана

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Багана

html

<div class="container text-center">
  <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>

Багана

html

<div class="container text-center">
  <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>

Багана

html

<div class="container text-center">
  <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 хольцыг ашиглаж болно, 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);
  }
}

Үүрлэх

Өөрийн агуулгыг өгөгдмөл сүлжээнд оруулахын тулд одоо байгаа баганад шинэ .rowба багц багана нэмнэ үү. Суурилуулсан мөрүүд нь 12 ба түүнээс цөөн тоог нэмэх баганын багцыг агуулсан байх ёстой (боломжтой бүх 12 баганыг ашиглах шаардлагагүй)..col-sm-*.col-sm-*

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

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

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

html

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

Сасс

Bootstrap-ийн эх сурвалж Sass файлуудыг ашиглах үед та Sass хувьсагч болон холимогийг ашиглан захиалгат, семантик, хариу үйлдэл үзүүлэх хуудасны байршлыг үүсгэх боломжтой. Манай урьдчилан тодорхойлсон сүлжээний ангиуд нь эдгээр ижил хувьсагч болон холимгуудыг ашиглан хурдан хариу үйлдэл үзүүлэхэд зориулагдсан ашиглахад бэлэн ангиудыг бүрэн хангадаг.

Хувьсагч

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

Холимог

Холимогуудыг сүлжээний хувьсагчтай хамт тус тусад нь сүлжээ баганын семантик 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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);
  }
}

Үндсэн агуулга

Хоёрдогч агуулга

html

<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-row-columns-ийн баганын хамгийн их тоог тохируулахад ашигладаг бөгөөд .row-cols-*энэ хязгаараас хэтэрсэн тоог үл тоомсорлодог.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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, эсвэл биш) тохируулахаа мартуузай %.