Siostam clèithe

eisimpleir

Bidh siostam clèithe Bootstrap a’ cleachdadh sreath de shoithichean, sreathan, agus cholbhan gus susbaint a dhealbhadh agus a cho-thaobhadh. Tha e air a thogail le flexbox agus tha e làn fhreagarrach. Gu h-ìosal tha eisimpleir agus mìneachadh domhainn air mar a tha an siostam clèithe a’ tighinn còmhla.

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

Tha an eisimpleir gu h-àrd a’ cruthachadh trì colbhan de leud co-ionann thar gach inneal agus port-seallaidh a’ cleachdadh ar clasaichean clèithe ro-mhìnichte. Tha na colbhan sin stèidhichte air an duilleag leis a’ phàrant .container.

Mar a tha e ag obair

Le bhith ga bhriseadh sìos, seo mar a tha an siostam clèithe a’ tighinn còmhla:

• Tha an cliath againn a’ toirt taic do shia puingean brisidh freagairteach . Tha puingean brisidh stèidhichte air min-widthceistean bho na meadhanan, a’ ciallachadh gu bheil iad a’ toirt buaidh air a’ phuing-bhriseadh sin agus a h-uile duine os a chionn (me, .col-sm-4a’ buntainn ri sm, md, , lg, xl, agus xxl). Tha seo a’ ciallachadh gun urrainn dhut smachd a chumail air meud agus giùlan shoithichean is colbhan a rèir gach briseadh.

• Bidh soithichean sa mheadhan agus cuir do shusbaint gu còmhnard. Cleachd .containerairson leud piogsail freagairteach, .container-fluidairson width: 100%thairis air a h-uile port-seallaidh agus inneal, no inneal freagairteach (me, .container-md) airson measgachadh de leudan siùbhlach is piogsail.

• Tha sreathan nan còmhdach airson colbhan. Tha còmhnard aig gach colbh padding(ris an canar gutter) airson smachd a chumail air an àite eatarra. Tha seo paddingan uairsin air a chuir an aghaidh air na sreathan le oirean àicheil gus dèanamh cinnteach gu bheil an susbaint anns na colbhan agad air a cho-thaobhadh gu fradharcach sìos an taobh chlì. Bidh Rows cuideachd a’ toirt taic do chlasaichean mion-atharrachaidh gus meud colbhan agus clasaichean cutairean a chuir an sàs gu co-ionnan gus farsaingeachd an t-susbaint agad atharrachadh.

• Tha colbhan gu math sùbailte. Tha 12 colbhan teamplaid rim faighinn airson gach sreath, a’ toirt cothrom dhut measgachadh eadar-dhealaichte de eileamaidean a chruthachadh a tha a’ cuairteachadh àireamh sam bith de cholbhan. Bidh clasaichean colbh a’ comharrachadh an àireamh de cholbhan teamplaid a tha a’ dol thairis (me, col-4a’ dol thairis air ceithir). widths air an suidheachadh ann an ceudadan gus am bi an aon mheudachd càirdeach agad an-còmhnaidh.

• Tha cutairean cuideachd freagairteach agus gnàthaichte. Tha clasaichean cutairean rim faighinn thairis air a h-uile àite brisidh, leis na h-aon mheudan ris an iomall againn agus farsaingeachd pleadhaig . Atharraich cutairean còmhnard le .gx-*clasaichean, cutairean dìreach le .gy-*, no cutairean gu lèir le .g-*clasaichean. .g-0ri fhaighinn cuideachd gus cutairean a thoirt air falbh.

• Bidh caochladairean Sass, mapaichean, agus measgachadh a’ toirt cumhachd don ghriod. Mura h-eil thu airson na clasaichean clèithe ro-mhìnichte ann am Bootstrap a chleachdadh, faodaidh tu stòr a’ ghriod againn Sass a chleachdadh gus do chuid fhèin a chruthachadh le barrachd comharrachadh semantach. Bidh sinn cuideachd a’ toirt a-steach cuid de fheartan àbhaisteach CSS gus na caochladairean Sass sin ithe airson eadhon barrachd sùbailteachd dhut.

Bi mothachail air na cuingeadan agus na mialan timcheall air flexbox , mar an neo- chomas cuid de eileamaidean HTML a chleachdadh mar shoithichean sùbailte .

Roghainnean clèithe

Faodaidh siostam clèithe Bootstrap atharrachadh thairis air na sia puingean-briseadh bunaiteach, agus puingean brisidh sam bith a ghnàthaicheas tu. Tha na sia ìrean clèithe bunaiteach mar a leanas:

• Beag a bharrachd (xs)
• Beag (sm)
• Meadhanach (md)
• Mòr (lg)
• Mòr a bharrachd (xl)
• Mòr a bharrachd (xxl)

Mar a chaidh a ràdh gu h-àrd, tha an soitheach fhèin aig gach fear de na puingean brisidh sin, ro-leasachan clas sònraichte, agus mion-atharraichean. Seo mar a bhios a’ ghriod ag atharrachadh thairis air na puingean brisidh sin:

Colbhan cruth fèin-ghluasadach

Cleachd clasaichean colbh a tha sònraichte do phuing-bhriseadh airson meud colbh furasta às aonais clas le àireamhan soilleir mar .col-sm-6.

Co-ionann-leud

Mar eisimpleir, seo dà chruth clèithe a tha a’ buntainn ri gach inneal agus port-seallaidh, bho xsgu xxl. Cuir àireamh sam bith de chlasaichean gun aonad ris airson gach puing-briseadh a dh’ fheumas tu agus bidh gach colbh den aon leud.

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

A 'suidheachadh aon leud colbh

Tha cruth fèin-ghluasadach airson colbhan clèithe flexbox cuideachd a’ ciallachadh gun urrainn dhut leud aon cholbh a shuidheachadh agus na colbhan peathraichean ath-mheudachadh timcheall air gu fèin-ghluasadach. Faodaidh tu clasaichean clèithe ro-mhìnichte a chleachdadh (mar a chithear gu h-ìosal), measgachadh clèithe, no leud in-loidhne. Thoir an aire gum bi na colbhan eile ag ath-mheudachadh ge bith dè cho farsaing sa tha colbh an ionaid.

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

Susbaint leud caochlaideach

Cleachd col-{breakpoint}-autoclasaichean gus colbhan a mheudachadh a rèir leud nàdarra an t-susbaint aca.

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

Clasaichean freagairteach

Tha cliath Bootstrap a’ toirt a-steach sia sreathan de chlasaichean ro-mhìnichte airson dealbhadh iom-fhillte freagairteach a thogail. Gnàthaich meud do cholbhan air innealan beaga, beaga, meadhanach, mòr no mòr a bharrachd ge bith dè a chì thu iomchaidh.

A h-uile briseadh

Airson grids a tha mar an ceudna bhon fheadhainn as lugha de dh'innealan chun an fheadhainn as motha, cleachd na clasaichean .colagus na .col-*clasaichean. Sònraich clas le àireamh nuair a bhios feum agad air colbh de mheud sònraichte; air dhòigh eile, na bi leisg cumail ris .col.

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

Air a chruachadh gu còmhnard

A’ cleachdadh aon sheata de .col-sm-*chlasaichean, faodaidh tu siostam clèithe bunaiteach a chruthachadh a thòisicheas air a chruachadh agus a thig gu còmhnard aig a’ phuing-bhriseadh beag ( sm).

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

Measgaich agus maids

Nach eil thu airson gum bi na colbhan agad dìreach a’ cruachadh ann an cuid de shreathan clèithe? Cleachd measgachadh de chlasaichean eadar-dhealaichte airson gach ìre mar a dh’ fheumar. Faic an eisimpleir gu h-ìosal airson beachd nas fheàrr air mar a tha e uile ag obair.

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

Colbhan sreath

Cleachd na .row-cols-*clasaichean freagairteach gus an àireamh de cholbhan a shuidheachadh gu sgiobalta as fheàrr a bheir seachad do shusbaint agus do chruth. Ged a tha clasaichean àbhaisteach .col-*a’ buntainn ris na colbhan fa leth (me, .col-md-4), tha na clasaichean colbhan sreath air an suidheachadh air a’ phàrant .rowmar ath-ghoirid. Còmhla .row-cols-autoriut faodaidh tu an leud nàdarra a thoirt dha na colbhan.

Cleachd na clasaichean colbhan sreath seo gus dealbhadh clèithe bunaiteach a chruthachadh gu sgiobalta no gus smachd a chumail air cruth a’ chairt agad.

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

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

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

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

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

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

Faodaidh tu cuideachd am measgachadh Sass a tha na chois a chleachdadh, 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);
  }
}

A' neadachadh

Gus do shusbaint a neadachadh leis a’ ghriod àbhaisteach, cuir colbhan ùra .rowagus seata de .col-sm-*cholbhan taobh a-staigh .col-sm-*colbh a tha ann mu thràth. Bu chòir seata de cholbhan a bhith ann an sreathan neadachaidh a chuireas suas ri 12 no nas lugha (chan fheum thu na 12 colbhan a tha rim faighinn a chleachdadh).

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

Sass

Nuair a bhios tu a’ cleachdadh faidhlichean Sass stòr Bootstrap, tha roghainn agad caochladairean agus measgachadh Sass a chleachdadh gus dealbhadh duilleag àbhaisteach, semantach agus freagairteach a chruthachadh. Bidh na clasaichean clèithe ro-mhìnichte againn a’ cleachdadh na h-aon chaochladairean agus mheasgachaidhean gus sreath iomlan de chlasaichean deiseil a thoirt seachad airson dealbhadh freagairteach luath.

Caochlaidhean

Bidh caochladairean agus mapaichean a’ dearbhadh an àireamh de cholbhan, leud an gutter, agus puing ceist nam meadhanan far an tòisichear air colbhan air bhog. Bidh sinn gan cleachdadh gus na clasaichean clèithe ro-mhìnichte a chaidh a chlàradh gu h-àrd a ghineadh, a bharrachd air na measgachaidhean àbhaisteach a tha air an liostadh gu h-ìosal.

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

Measgachadh

Bithear a’ cleachdadh mheasgachaidhean ann an co-bhonn ris na caochladairean clèithe gus CSS semantach a ghineadh airson colbhan clèithe fa leth.

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

Eisimpleir de chleachdadh

Faodaidh tu na caochladairean atharrachadh gu na luachan àbhaisteach agad fhèin, no dìreach na mixins a chleachdadh leis na luachan bunaiteach aca. Seo eisimpleir de bhith a’ cleachdadh nan roghainnean bunaiteach gus cruth dà-cholbh a chruthachadh le beàrn eadar.

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

A 'gnàthachadh a' chliath

A’ cleachdadh ar caochladairean agus mapaichean griod Sass, tha e comasach na clasaichean clèithe ro-mhìnichte a ghnàthachadh gu tur. Atharraich an àireamh de shreathan, meud ceist nam meadhanan, agus leud an t-soithich - an uairsin ath-chruinnich.

Colbhan agus cutairean

Faodar an àireamh de cholbhan clèithe atharrachadh tro chaochladairean Sass. $grid-columnsair a chleachdadh gus leud (sa cheud) de gach colbh fa leth a ghineadh fhad ‘s a tha e $grid-gutter-widtha’ suidheachadh leud nan cutairean colbh. $grid-row-columnsair a chleachdadh gus an àireamh as motha de cholbhan de a shuidheachadh .row-cols-*, cha tèid àireamh sam bith thairis air a’ chrìoch seo a leigeil seachad.

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

Sreathan clèithe

A’ gluasad nas fhaide na na colbhan fhèin, faodaidh tu cuideachd an àireamh de shreathan clèithe a ghnàthachadh. Nam biodh tu ag iarraidh dìreach ceithir ìrean clèithe, dh’ ùraicheadh ​​tu an $grid-breakpointsagus $container-max-widthsgu rudeigin mar seo:

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

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

Nuair a nì thu atharrachadh sam bith air caochladairean no mapaichean Sass, feumaidh tu na h-atharrachaidhean agad a shàbhaladh agus ath-chruinneachadh. Le bhith a’ dèanamh sin bheir sinn a-mach seata ùr de chlasaichean clèithe ro-mhìnichte airson leud colbhan, cuir dheth, agus òrdachadh. Thèid goireasan faicsinneachd fhreagarrach ùrachadh cuideachd gus na puingean brisidh àbhaisteach a chleachdadh. Dèan cinnteach gun cuir thu luachan clèithe ann an px(chan e rem, em, no %).