Eto akoj

Apeere

Eto akoj Bootstrap nlo oniruuru awọn apoti, awọn ori ila, ati awọn ọwọn lati ṣeto ati mö akoonu. O ti kọ pẹlu flexbox ati pe o jẹ idahun ni kikun. Ni isalẹ jẹ apẹẹrẹ ati alaye ti o jinlẹ fun bii eto grid ṣe wa papọ.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Apẹẹrẹ ti o wa loke ṣẹda awọn ọwọn iwọn dogba mẹta ni gbogbo awọn ẹrọ ati awọn ibudo wiwo ni lilo awọn kilasi akoj ti a ti yan tẹlẹ. Awọn ọwọn yẹn wa ni aarin si oju-iwe pẹlu obi .container.

Bawo ni o ṣe n ṣiṣẹ

Bipaya rẹ, eyi ni bii eto grid ṣe wa papọ:

• Akoj wa ṣe atilẹyin awọn aaye fifọ idahun mẹfa . Awọn aaye isinmi da lori min-widthawọn ibeere media, afipamo pe wọn ni ipa lori aaye fifọ ati gbogbo awọn ti o wa loke rẹ (fun apẹẹrẹ, .col-sm-4kan si sm, md, lg, xl, ati xxl). Eyi tumọ si pe o le ṣakoso apoti ati iwọn ọwọn ati ihuwasi nipasẹ aaye fifọ kọọkan.

• Awọn apoti aarin ati petele paadi akoonu rẹ. Lo .containerfun iwọn piksẹli idahun, .container-fluidfun width: 100%gbogbo awọn ibudo wiwo ati awọn ẹrọ, tabi apoti idahun (fun apẹẹrẹ, .container-md) fun apapọ ito ati awọn iwọn piksẹli.

• Awọn ori ila ni o wa wrappers fun awọn ọwọn. Ọwọn kọọkan ni petele padding(ti a npe ni gutter) fun iṣakoso aaye laarin wọn. Eyi paddingni a tako lori awọn ori ila pẹlu awọn ala odi lati rii daju pe akoonu ti o wa ninu awọn ọwọn rẹ wa ni ibamu pẹlu oju ni apa osi. Awọn ori ila tun ṣe atilẹyin awọn kilasi iyipada lati lo iwọn ọwọn ni iṣọkan ati awọn kilasi gota lati yi aye ti akoonu rẹ pada.

• Awọn ọwọn jẹ ti iyalẹnu rọ. Awọn ọwọn awoṣe 12 wa fun ọna kan, gbigba ọ laaye lati ṣẹda awọn akojọpọ oriṣiriṣi ti awọn eroja ti o gun nọmba eyikeyi ti awọn ọwọn. Awọn kilasi ọwọn tọkasi nọmba awọn ọwọn awoṣe lati gùn (fun apẹẹrẹ, col-4awọn ipari mẹrin). widths ti ṣeto ni awọn ipin ki o nigbagbogbo ni iwọn ojulumo kanna.

• Awọn gutters tun ṣe idahun ati isọdi. Awọn kilasi gutter wa kọja gbogbo awọn aaye fifọ, pẹlu gbogbo awọn iwọn kanna bi ala wa ati aye padding . Yipada awọn gogo petele pẹlu .gx-*awọn kilasi, awọn gọta inaro pẹlu .gy-*, tabi gbogbo awọn gọta pẹlu .g-*awọn kilasi. .g-0jẹ tun wa lati yọ awọn gutters.

• Awọn oniyipada Sass, awọn maapu, ati awọn alapọpọ ṣe agbara akoj. Ti o ko ba fẹ lo awọn kilasi akoj ti a ti sọ tẹlẹ ni Bootstrap, o le lo orisun grid wa Sass lati ṣẹda tirẹ pẹlu isamisi atunmọ diẹ sii. A tun pẹlu diẹ ninu awọn ohun-ini aṣa CSS lati jẹ awọn oniyipada Sass wọnyi fun irọrun nla paapaa fun ọ.

Jẹ mọ ti awọn idiwọn ati idun ni ayika flexbox , bi awọn ailagbara lati lo diẹ ninu awọn HTML eroja bi Flex awọn apoti .

Awọn aṣayan akoj

Eto akoj Bootstrap le ṣe deede ni gbogbo awọn aaye fifọ aiyipada mẹfa, ati eyikeyi awọn aaye fifọ ti o ṣe akanṣe. Awọn ipele akoj aiyipada mẹfa jẹ atẹle yii:

• Afikun kekere (xs)
• Kekere (sm)
• Alabọde (md)
• Tobi (lg)
• O tobi ju (xl)
• Afikun nla (xxl)

Gẹgẹbi a ti ṣe akiyesi loke, ọkọọkan awọn aaye fifọ wọnyi ni apoti tirẹ, asọtẹlẹ kilasi alailẹgbẹ, ati awọn iyipada. Eyi ni bii akoj ṣe yipada kọja awọn aaye fifọ wọnyi:

Awọn ọwọn iṣeto-laifọwọyi

Lo awọn kilasi ọwọn-fifọ-pato fun iwọn awọn ọwọn ti o rọrun laisi kilasi nọmba ti o fojuhan bii .col-sm-6.

Iwọn-dogba

Fun apẹẹrẹ, nibi ni awọn ipilẹ akoj meji ti o kan gbogbo ẹrọ ati ibudo wiwo, lati xssi xxl. Ṣafikun nọmba eyikeyi ti awọn kilasi-kere-kere fun aaye fifọ kọọkan ti o nilo ati gbogbo iwe yoo jẹ iwọn kanna.

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

Ṣiṣeto iwọn ọwọn kan

Ipilẹ-laifọwọyi fun awọn ọwọn akoj flexbox tun tumọ si pe o le ṣeto iwọn ti iwe kan ki o jẹ ki awọn ọwọn arakunrin ṣe atunṣe laifọwọyi ni ayika rẹ. O le lo awọn kilasi akoj ti a ti sọ tẹlẹ (gẹgẹbi o ṣe han ni isalẹ), awọn alapọpọ akoj, tabi awọn iwọn ila. Ṣe akiyesi pe awọn ọwọn miiran yoo tun iwọn laibikita iwọn ti iwe aarin.

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

Ayipada akoonu iwọn

Lo col-{breakpoint}-autoawọn kilasi si iwọn awọn ọwọn ti o da lori iwọn adayeba ti akoonu wọn.

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

Awọn kilasi idahun

Akoj Bootstrap pẹlu awọn ipele mẹfa ti awọn kilasi asọtẹlẹ fun kikọ awọn ipilẹ idahun idiju. Ṣe akanṣe iwọn awọn ọwọn rẹ lori afikun kekere, kekere, alabọde, nla, tabi awọn ẹrọ nla ni afikun sibẹsibẹ o rii pe o yẹ.

Gbogbo breakpoints

Fun awọn grids ti o jẹ kanna lati awọn ẹrọ ti o kere julọ si ti o tobi julọ, lo awọn .colati .col-*awọn kilasi. Pato kilasi ti o ni nọmba nigbati o nilo iwe ti o ni iwọn pataki; bibẹkọ ti, lero free lati Stick si .col.

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

Tolera si petele

Lilo awọn .col-sm-*kilasi kan ṣoṣo, o le ṣẹda eto akoj ipilẹ kan ti o bẹrẹ ni akopọ ati di petele ni aaye fifọ kekere ( 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>

Illa ati baramu

Ṣe o ko fẹ ki awọn ọwọn rẹ ni akopọ ni diẹ ninu awọn ipele akoj? Lo apapo awọn kilasi oriṣiriṣi fun ipele kọọkan bi o ṣe nilo. Wo apẹẹrẹ ni isalẹ fun imọran ti o dara julọ ti bii gbogbo rẹ ṣe n ṣiṣẹ.

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

Awọn ọwọn ila

Lo awọn kilasi idahun .row-cols-*lati ṣeto nọmba awọn ọwọn ti o dara julọ fun akoonu ati ifilelẹ rẹ. Lakoko ti awọn kilasi deede .col-*lo si awọn ọwọn kọọkan (fun apẹẹrẹ, .col-md-4), awọn kilasi awọn ọwọn ila ti ṣeto lori obi .rowbi aiyipada fun awọn ọwọn ti o wa ninu. Pẹlu .row-cols-autoo le fun awọn ọwọn wọn adayeba iwọn.

Lo awọn kilasi awọn ọwọn ila wọnyi lati yara ṣẹda awọn ipilẹ akoj ipilẹ tabi lati ṣakoso awọn ipalemo kaadi rẹ ki o bori nigbati o nilo ni ipele iwe.

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

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

O tun le lo Sass mixin ti o tẹle, 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);
  }
}

Itẹle

Lati ṣe itẹ-ẹiyẹ akoonu rẹ pẹlu akoj aiyipada, ṣafikun tuntun .rowati ṣeto awọn .col-sm-*ọwọn laarin iwe to wa tẹlẹ .col-sm-*. Awọn ori ila ti o wa ni itẹ-ẹiyẹ yẹ ki o ni akojọpọ awọn ọwọn ti o fi kun si 12 tabi diẹ (ko nilo pe ki o lo gbogbo awọn ọwọn 12 ti o wa).

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

Sass

Nigbati o ba nlo awọn faili Sass orisun Bootstrap, o ni aṣayan ti lilo awọn oniyipada Sass ati awọn alapọpọ lati ṣẹda aṣa, atunmọ, ati awọn ipilẹ oju-iwe idahun. Awọn kilasi akoj ti a ti yan tẹlẹ lo awọn oniyipada kanna ati awọn alapọpọ lati pese odidi suite ti awọn kilasi imurasilẹ-lati-lo fun awọn ipalemo idahun ni iyara.

Awọn oniyipada

Awọn oniyipada ati awọn maapu pinnu nọmba awọn ọwọn, iwọn gọta, ati aaye ibeere media nibiti lati bẹrẹ awọn ọwọn lilefoofo. A lo iwọnyi lati ṣe ipilẹṣẹ awọn kilasi akoj ti a ti sọ tẹlẹ ti o ni akọsilẹ loke, ati fun awọn alapọpọ aṣa ti a ṣe akojọ si isalẹ.

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

$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
);

Mixins

Awọn Mixins ni a lo ni apapo pẹlu awọn oniyipada akoj lati ṣe ipilẹṣẹ CSS atunmọ fun awọn ọwọn akoj kọọkan.

// 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);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Lilo apẹẹrẹ

O le ṣe atunṣe awọn oniyipada si awọn iye aṣa tirẹ, tabi lo awọn alapọpọ pẹlu awọn iye aiyipada wọn. Eyi ni apẹẹrẹ ti lilo awọn eto aiyipada lati ṣẹda ifilelẹ iwe-meji pẹlu aafo laarin.

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

Ṣiṣe akanṣe akoj

Lilo awọn oniyipada Sass akoj ti a ṣe sinu ati awọn maapu, o ṣee ṣe lati ṣe akanṣe awọn kilasi akoj ti a ti yan tẹlẹ. Yi nọmba awọn ipele pada, awọn iwọn ibeere media, ati awọn ibú apoti—lẹhinna ṣajọpọ.

Awọn ọwọn ati awọn gutters

Nọmba awọn ọwọn akoj le ṣe atunṣe nipasẹ awọn oniyipada Sass. $grid-columnsti wa ni lo lati se ina awọn widths (ni ogorun) ti kọọkan kọọkan iwe nigba ti $grid-gutter-widthṣeto awọn iwọn fun awọn ọwọn gọta.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Awọn ipele akoj

Lilọ kọja awọn ọwọn funrararẹ, o tun le ṣe akanṣe nọmba awọn ipele akoj. Ti o ba fẹ awọn ipele grid mẹrin nikan, iwọ yoo mu imudojuiwọn naa $grid-breakpointsati $container-max-widthssi nkan bii eyi:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Nigbati o ba n ṣe awọn ayipada eyikeyi si awọn oniyipada Sass tabi awọn maapu, iwọ yoo nilo lati ṣafipamọ awọn ayipada rẹ ki o tun ṣajọ. Ṣiṣe bẹ yoo ṣe agbejade akojọpọ iyasọtọ tuntun ti awọn kilasi akoj ti a ti sọ tẹlẹ fun awọn iwọn ọwọn, awọn aiṣedeede, ati pipaṣẹ. Awọn ohun elo hihan idahun yoo tun ṣe imudojuiwọn lati lo awọn aaye fifọ aṣa. Rii daju pe o ṣeto awọn iye akoj sinu px(kii ṣe rem, em, tabi %).