Gabhadairean

Mar a tha iad ag obair

Is e soithichean an eileamaid cruth as bunaitiche ann am Bootstrap agus tha feum orra nuair a bhios tu a’ cleachdadh ar siostam clèithe bunaiteach . Bithear a’ cleachdadh soithichean gus an t-susbaint a th’ annta a chumail, a phasgadh, agus (uaireannan) a mheadhanachadh. Ged a dh’ fhaodar soithichean a neadachadh, chan fheum a’ mhòr-chuid de chruthan soitheach neadachaidh.

Tha trì soithichean eadar-dhealaichte aig Bootstrap:

• .container, a tha a’ suidheachadh max-widthpuing aig gach briseadh freagairteach
• .container-fluid, a tha width: 100%aig gach briseadh
• .container-{breakpoint}, is e sin width: 100%gus an ìre briseadh ainmichte

Tha an clàr gu h-ìosal a’ sealltainn mar a tha gach soitheach an max-widthcoimeas ris an fhear thùsail .containeragus .container-fluidthairis air gach briseadh.

Faic iad ann an gnìomh agus dèan coimeas eadar iad san eisimpleir Grid againn .

Container bunaiteach

Tha an clas bunaiteach againn .containerna inneal freagairteach, leud stèidhichte, a’ ciallachadh na h- max-widthatharrachaidhean aige aig gach briseadh.

<div class="container">
  <!-- Content here -->
</div>

Soithichean freagairteach

Leigidh soithichean freagairteach leat clas a shònrachadh a tha 100% de leud gus an ruigear am briseadh ainmichte, agus às deidh sin bidh sinn a’ cur a -steach max-widths airson gach fear de na puingean brisidh as àirde. Mar eisimpleir, .container-smtha e 100% de leud airson tòiseachadh gus an smruigear am briseadh, far an tèid e suas le md, lg, xl, agus xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Soithichean fluide

Cleachd .container-fluidairson soitheach làn leud, a ’spangachadh leud iomlan a’ phuirt-seallaidh.

<div class="container-fluid">
  ...
</div>

Sass

Mar a chithear gu h-àrd, bidh Bootstrap a’ gineadh sreath de chlasaichean soithichean ro-mhìnichte gus do chuideachadh le bhith a’ togail na dreachan a tha thu ag iarraidh. Faodaidh tu na clasaichean soithich ro-mhìnichte seo atharrachadh le bhith ag atharrachadh mapa Sass (a lorgar ann an _variables.scss) a bheir cumhachd dhaibh:

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

A bharrachd air a bhith a’ gnàthachadh an Sass, faodaidh tu cuideachd na soithichean agad fhèin a chruthachadh leis an Sass mixin againn.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Airson tuilleadh fiosrachaidh agus eisimpleirean air mar a dh’ atharraicheas tu ar mapaichean Sass agus caochladairean, thoir sùil air an roinn Sass de na sgrìobhainnean Clèithe .