Pūnaha mātiti

Tauira

Ka whakamahia e te punaha matiti a Bootstrap he raupapa ipu, rarangi, me nga pou hei tahora me te whakatiaro i nga ihirangi. He mea hanga ki te flexbox me te tino aro. Kei raro nei he tauira me te whakamaarama hohonu mo te whakakotahitanga o te punaha tukutuku.

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

Ko te tauira i runga ake nei ka hanga e toru nga pou rite-whanui puta noa i nga taputapu katoa me nga tauranga tirohanga ma te whakamahi i o maatau karaehe matiti kua tautuhia. Ko aua pou kei waenganui i te wharangi me te matua .container.

Pehea te mahi

Ka pakaru, koinei te whakakotahitanga o te punaha tukutuku:

• Ka tautokohia e ta maatau matiti nga waahi pakaru e ono . Ko nga waahi pakaru kei runga i min-widthnga patai pāpāho, ko te tikanga ka pa ki taua waahi pakaru me nga mea katoa kei runga ake (hei tauira, .col-sm-4e pa ana ki sm, md, lg, xl, me xxl). Ko te tikanga ka taea e koe te whakahaere i te rahinga o te ipu me te poupou me te whanonga ma ia waahi wehenga.

• Whakawaea nga ipu me te whakakii whakapae i o ihirangi. Whakamahia .containermo te whanui pika aro, .container-fluidmo width: 100%nga tauranga tirohanga me nga taputapu katoa, he ipu urupare ranei (hei tauira, .container-md) mo te huinga o te wai me te whanui pika.

• He takai nga rarangi mo nga pou. Kei ia pou he whakapae padding(e kiia ana he awaawa) hei whakahaere i te mokowhiti i waenganui. Ka paddingwhakaekea tenei i runga i nga rarangi me nga tawhē kino hei whakarite kia titiro titiro nga ihirangi o o pou ki te taha maui. Ka tautoko hoki nga rarangi i nga karaehe whakarereke kia rite te whakamahi i te rahi o nga pou me nga karaehe awaawa hei whakarereke i te mokowhiti o to ihirangi.

• He tino ngawari nga pou. He 12 nga pou tauira e waatea ana mo ia rarangi, ka taea e koe te hanga huinga rereke o nga huānga e hora ana i te maha o nga pou. Ko nga karaehe o te pou e tohu ana i te maha o nga pou tauira hei whanganga (hei tauira, te col-4whaa). widths kua whakaritea i roto i te ōrau kia rite tonu to rahinga whanaunga.

• He urupare, he whakarite hoki nga awaawa. Kei te watea nga karaehe wairere puta noa i nga waahi pakaru katoa, he rite nga rahi ki o taatau taha me te mokowhiti papa . Hurihia nga awaawa whakapae me .gx-*nga karaehe, nga awaawa poutū ki te .gy-*, nga awaawa katoa me .g-*nga karaehe. .g-0kei te waatea hoki hei tango i nga awaawa.

• Ko nga taurangi Sass, nga mapi, me nga whakaranu e whakakaha ana i te matiti. Ki te kore koe e hiahia ki te whakamahi i nga karaehe matiti kua tautuhia-mua i Bootstrap, ka taea e koe te whakamahi i te puna o ta maatau matiti Sass ki te hanga i a koe ake me etahi atu tohu tohu. Ka whakaurua ano e matou etahi ahuatanga ritenga CSS hei kai i enei taurangi Sass kia pai ake ai te ngawari ki a koe.

Kia mohio koe ki nga herenga me nga pepeke huri noa i te flexbox , penei i te kore e kaha ki te whakamahi i etahi huānga HTML hei ipu ngawari .

Kōwhiringa mātiti

Ka taea e te punaha matiti a Bootstrap te urutau puta noa i nga waahi pakaru taunoa katoa e ono, me nga waahi pakaru ka whakaritea e koe. Ko nga taumata matiti taunoa e ono e whai ake nei:

• He iti rawa (xs)
• Iti (sm)
• Waenga (md)
• Nui (lg)
• Nui atu (xl)
• He nui rawa atu (xxl)

Ka rite ki te korero i runga ake nei, kei a ia o enei waahi pakaru tana ake ipu, tohu tohu karaehe ahurei, me nga whakarereke. Anei te huringa o te matiti puta noa i enei waahi wehenga:

Nga pou tahora-aunoa

Whakamahia nga karaehe pou-waahi-motuhake kia ngawari te rahi o nga pou me te kore he karaehe tau tino rite ki te .col-sm-6.

Ōrite-whānui

Hei tauira, e rua nga whakatakotoranga matiti e pa ana ki ia taputapu me te tauranga tirohanga, mai i xste xxl. Tāpirihia he maha o nga karaehe-iti ake mo ia wehenga e hiahia ana koe ka rite te whanui o ia pou.

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

Te whakatakoto i te whanui o te pou kotahi

Ko te whakatakotoranga-aunoa mo nga pou matiti flexbox ko te tikanga ka taea e koe te tautuhi i te whanui o te pou kotahi me te whakarereke aunoa i nga pou teina huri noa. Ka taea e koe te whakamahi i nga karaehe matiti kua tautuhia-a-mua (penei i te whakaaturanga i raro nei), nga whakauru matiti, nga whanui rarangi-roto ranei. Kia mahara ka huri te rahi o etahi atu pou ahakoa te whanui o te pouwaenga.

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

Ihirangi whanui taurangi

Whakamahia col-{breakpoint}-autonga karaehe ki te rahi o nga pou i runga i te whanui taiao o o raatau ihirangi.

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

Nga karaehe whakautu

Kei roto i te matiti a Bootstrap nga taumata e ono o nga karaehe kua tautuhia i mua mo te hanga i nga whakatakotoranga urupare uaua. Whakaritehia te rahi o ou pou ki runga i nga taputapu iti, iti, reo, rahi, rahi atu ranei ahakoa e pai ana koe.

Nga waahi pakaru katoa

Mo nga matiti e rite ana mai i te iti rawa o nga taputapu ki te rahi, whakamahia te .colme .col-*nga akomanga. Tauwhāitihia he karaehe kua tau ina hiahia koe i tetahi pou tino rahi; te kore, ite noa ki te piri ki .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>

Tāpae ki te whakapae

Ma te whakamahi i te huinga .col-sm-*karaehe kotahi, ka taea e koe te hanga i tetahi punaha matiti taketake ka tiimata ka tiimata ka noho whakapae ki te waahi pakaru iti ( 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>

Whakaranuhia me te whakarite

Kare koe e hiahia kia tapae noa o pou ki etahi rarangi matiti? Whakamahia he huinga o nga karaehe rereke mo ia taumata ina hiahiatia. Tirohia te tauira i raro nei mo te whakaaro pai ake mo te mahi katoa.

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

Ngā tīwae haupae

Whakamahia nga .row-cols-*karaehe urupare ki te whakarite tere i te maha o nga pou e pai ake ai to korero me to tahora. Ahakoa .col-*e pa ana nga karaehe noa ki nga pou takitahi (hei tauira, .col-md-4), ka whakatauhia nga akomanga rarangi haupae ki te matua .rowhei taunoa mo nga pou kei roto. Ka .row-cols-autotaea e koe te hoatu i nga pou i to raatau whanui.

Whakamahia enei karaehe rarangi rarangi ki te hanga tere i nga tahora matiti taketake, ki te whakahaere ranei i o tahora kaari me te whakakore i te wa e hiahiatia ana i te taumata pou.

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

Ka taea hoki e koe te whakamahi i te Sass mixin, 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);
  }
}

Kohanga

Hei whakakohanga i to ihirangi ki te matiti taunoa, taapirihia he huinga pou hou .rowme te huinga o .col-sm-*nga pou ki roto i te tīwae tīariari .col-sm-*. Ko nga rarangi kohanga me whakauru he huinga pou ka taapiri ake ki te 12, iti ake ranei (kaore e hiahiatia kia whakamahi koe i nga pou 12 e waatea ana).

<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

I te wa e whakamahi ana i nga konae Sass puna a Bootstrap, kei a koe te kowhiringa ki te whakamahi i nga taurangi Sass me nga whakaranu hei hanga i nga whakatakotoranga wharangi ritenga, tikanga, me te aro. Ka whakamahia e a maatau karaehe matiti kua tautuhia ake enei taurangi me nga whakaranu hei whakarato i te huinga katoa o nga karaehe rite-ki-te whakamahi mo nga whakatakotoranga tere tere.

Taurangi

Ko nga taurangi me nga mapi ka whakatau i te maha o nga pou, te whanui o te awaawa, me te waahi uiui pāpāho hei timata i nga pou tere. Ka whakamahia e matou enei ki te whakaputa i nga karaehe matiti kua tautuhia i runga ake nei, tae atu ki nga ranunga ritenga kua whakarārangihia i raro nei.

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

Whakaranu

Ka whakamahia nga Mixins i te taha o nga taurangi matiti hei whakaputa i te CSS tohu mo nga pou matiti takitahi.

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

Te whakamahi tauira

Ka taea e koe te whakarereke i nga taurangi ki o ake uara ritenga, ka whakamahi noa ranei i nga ranunga me o raatau uara taunoa. Anei he tauira mo te whakamahi i nga tautuhinga taunoa ki te hanga tahora pou-rua me te mokowhiti i waenga.

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

Te whakarite i te matiti

Ma te whakamahi i a maatau taurangi Sass me nga mapi i hangaia, ka taea te whakarite katoa i nga karaehe matiti kua tautuhia. Hurihia te maha o nga taumata, nga inenga patai pāpāho, me nga whanui ipu—ka whakahiato ano.

Nga pou me nga awaawa

Ko te maha o nga pou matiti ka taea te whakarereke ma nga taurangi Sass. $grid-columnska whakamahia ki te whakaputa i nga whanui (i roto i te ōrau) o ia tīwae takitahi i te wā $grid-gutter-widthe whakatakoto ana i te whānui mō ngā awaawa o te tīwae.

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

Ngā taumata mātiti

Ko te neke ki tua atu o nga pou, ka taea hoki e koe te whakarite i te maha o nga taumata matiti. Mena kei te pirangi koe kia wha noa nga taumata matiti, ka whakahou koe i te $grid-breakpointsme $container-max-widthstetahi mea penei:

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

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

Ina huri koe ki nga taurangi Sass, mapi ranei, me tiaki e koe o huringa me te whakahiato ano. Ma te mahi pera ka puta he huinga hou o nga karaehe matiti kua tautuhia i mua mo te whanui o nga pou, nga taapiri, me te ota. Ka whakahouhia ano nga taputapu tirohanga urupare ki te whakamahi i nga waahanga pakaru ritenga. Me whakarite ki te tautuhi i nga uara matiti ki roto px(kaore rem, em, ranei %).