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

Арван хоёр баганын систем, өгөгдмөл хариу үйлдэл үзүүлэх таван шатлал, 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-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>

Тэнцүү өргөнтэй олон шугам

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

Safari flexbox алдаа байсан бөгөөд энэ нь тодорхой flex-basisэсвэл border. Хуучин хөтчийн хувилбаруудыг шийдвэрлэх арга замууд байдаг боловч хэрэв таны зорилтот хөтөч алдаатай хувилбарт хамаарахгүй бол тэдгээр нь шаардлагагүй болно.

колон

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

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

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

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

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

колон

кол-8

кол-4

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

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

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

Суваг

Сувагуудыг таслах цэгийн тусгай дэвсгэр болон сөрөг ахиуц хэрэглээний ангиудын тусламжтайгаар тохируулж болно. Өгөгдсөн эгнээний сувгийг өөрчлөхийн тулд сөрөг маржин хэрэглүүрийг s .rowдээр, тохирох дүүргэгч хэрэгслийг хослуулна уу .col. Дахин тохирох padding хэрэгслийг ашиглан хүсээгүй халилтаас зайлсхийхийн тулд .containerэсвэл .container-fluidэцэг эхийг тохируулах шаардлагатай байж магадгүй.

lgBootstrap сүлжээг том ( ) ба түүнээс дээш цэгт тохируулах жишээ энд байна. Бид .colдэвсгэрийг -ээр нэмэгдүүлж, эцэг эх дээр нь үүнийг .px-lg-5эсэргүүцэж , дараа нь боодлыг -аар тохируулсан ..mx-lg-n5.row.container.px-lg-5

Тусгай баганын дүүргэлт

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Мөр багана

.row-cols-*Таны контент болон байршлыг хамгийн сайн харуулах баганын тоог хурдан тохируулахын тулд хариу үйлдэл үзүүлэх ангиудыг ашиглана уу. Энгийн .col-*ангиуд нь тус тусын баганад (жишээ нь, .col-md-4) хамаарах бол мөрийн баганын ангиудыг эцэг эх .rowдээр товчлол болгон тохируулсан.

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

Багана

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

Багана

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

Багана

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

Багана

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

Багана

<div class="container">
  <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);
  }
}

Тохируулга

Багануудыг босоо болон хэвтээ байдлаар зэрэгцүүлэхийн тулд flexbox alignment хэрэгслийг ашиглана уу. Internet Explorer 10-11 нь уян хатан контейнер доор үзүүлсэн шиг flex зүйлүүдийг босоо байдлаар байрлуулахыг дэмждэггүй . min-height Дэлгэрэнгүй мэдээллийг Flexbugs # 3-аас үзнэ үү.

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

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

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

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.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="container">
  <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>
</div>

Багана тасарсан

Flexbox дахь багануудыг шинэ мөрөнд эвдэхийн тулд жижиг хакердах шаардлагатай: шинэ мөрөнд баганаа боохыг width: 100%хүссэн газартаа элемент нэмнэ үү. Энэ нь ихэвчлэн олон секундын тусламжтайгаар хийгддэг .rowболовч хэрэгжүүлэх арга бүр үүнийг тооцоолж чаддаггүй.

.col-6 .col-sm-3

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

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

.col-6 .col-sm-4

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

Дахин эрэмбэлж байна

Ангиудыг захиалах

Агуулгынхаа харааны дарааллыг.order- хянахын тулд ангиудыг ашиглаарай . Эдгээр ангиуд нь хариу үйлдэл үзүүлдэг тул та таслах цэгээр (жишээ нь, ) тохируулах боломжтой. Бүх таван сүлжээний түвшний дэмжлэгийг багтаасан болно .order.order-1.order-md-2112

Эхлээд DOM-д захиалга хийгдээгүй

DOM-ийн хоёрдугаарт, илүү том захиалгатай

DOM-ийн гуравдугаарт, 1-ийн дараалалтай

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Мөн ( )-ийг тус тус хэрэглэснээр элементийн хэлбэрийг өөрчилдөг responsive .order-firstболон ангиуд байдаг. Шаардлагатай бол эдгээр ангиудыг дугаарлагдсан ангиудтай хольж болно ..order-lastorderorder: -1order: 13order: $columns + 1.order-*

DOM-д хамгийн түрүүнд захиалсан

DOM-ийн хоёрдугаарт, эрэмбэлэгдээгүй

DOM-д гуравт, хамгийн түрүүнд захиалсан

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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="container">
  <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>

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

.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="container">
  <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>
</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="container">
  <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>
</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="container">
  <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>
</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 {
  @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);
  }
}

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

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

<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, эсвэл биш) тохируулахаа мартуузай %.