Pūnaehana mānoanoa

Laʻana

Hoʻohana ka ʻōnaehana mākia ʻo Bootstrap i kahi pūʻulu o nā ipu, nā lālani, a me nā kolamu e hoʻonohonoho a hoʻopololei i ka ʻike. Ua kūkulu ʻia me ka flexbox a pane piha. Aia ma lalo kahi laʻana a me kahi wehewehe hohonu no ka hui ʻana o ka ʻōnaehana grid.

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

Hoʻokumu ka laʻana i luna i ʻekolu kolamu like-ākea ma nā ʻaoʻao āpau a me nā viewports me ka hoʻohana ʻana i kā mākou papa grid i koho mua ʻia. Aia kēlā mau kolamu ma ka ʻaoʻao me ka makua .container.

Pehea e hana ai

I ka wehe ʻana i lalo, eia ke ʻano o ka hui ʻana o ka ʻōnaehana grid:

• Kākoʻo kā mākou mānoanoa i ʻeono wahi haʻihaʻi pane . Hoʻokumu ʻia nā breakpoints ma min-widthnā nīnau media, ʻo ia hoʻi, pili lākou i kēlā haʻihaʻi a me nā mea a pau ma luna o ia (e laʻa, .col-sm-4pili iā sm, md, lg, xl, a me xxl). ʻO ia ke ʻano hiki iā ʻoe ke hoʻomalu i ka nui o ka pahu a me ke kolamu a me ka hana e kēlā me kēia breakpoint.

• E hoʻokomo i loko o nā pahu a hoʻopaʻa i kāu ʻike. E hoʻohana .containerno ka laula pika pane, .container-fluidno width: 100%nā puka ʻike a me nā hāmeʻa a pau, a i ʻole kahi pahu pane (e laʻa, .container-md) no ka hui pū ʻana o ka wai a me nā laula pika.

• ʻO nā lālani nā mea ʻōwili no nā kolamu. He paepae ko kēlā me kēia kolamu padding(i kapa ʻia he auwai) no ka mālama ʻana i ka hakahaka ma waena o lākou. Hoʻopaʻa ʻia kēia paddingma nā lālani me nā ʻaoʻao maikaʻi ʻole e hōʻoia i ka ʻike ʻia o ka ʻike o kāu kolamu ma ka ʻaoʻao hema. Kākoʻo pū ʻia nā lālani i nā papa hoʻololi e hoʻopili like i ka nui o ke kolamu a me nā papa auwai e hoʻololi i ke kaawale o kāu ʻike.

• Hiki ke maʻalahi nā kolamu. Aia he 12 kolamu mamana i loaʻa i kēlā me kēia lālani, e ʻae iā ʻoe e hana i nā hui like ʻole o nā mea e pili ana i nā helu o nā kolamu. Hōʻike nā papa kolamu i ka helu o nā kolamu maʻamau e kau ai (e laʻa, col-4nā ʻehā). widthUa hoʻonoho ʻia nā s i nā pākēneka no laila e loaʻa iā ʻoe ka nui pili like.

• Hiki ke hoʻopili ʻia nā auwai. Loaʻa nā papa aʻa ma nā wahi haʻihaʻi āpau, me nā nui like me kā mākou palena a me ka spacing padding . E hoʻololi i nā ʻauwai ākea me .gx-*nā papa, nā ʻauwai kūpaʻa me .gy-*, a i ʻole nā ​​auwai āpau me .g-*nā papa. .g-0loaʻa nō hoʻi e wehe i nā auwai.

• Hiki i nā ʻano hoʻololi Sass, nā palapala ʻāina, a me nā hui ʻana ke hoʻoikaika i ka pā. Inā ʻaʻole ʻoe makemake e hoʻohana i nā papa papa kuhikuhi i koho mua ʻia ma Bootstrap, hiki iā ʻoe ke hoʻohana i kā mākou kumu puna ʻo Sass e hana i kāu iho me ka hōʻailona semantic hou aʻe. Hoʻokomo pū mākou i kekahi mau waiwai maʻamau CSS e hoʻopau i kēia mau ʻano Sass no ka ʻoi aku ka maʻalahi o kāu.

E makaʻala i nā palena a me nā ʻino e pili ana i ka flexbox , e like me ka hiki ʻole ke hoʻohana i kekahi mau mea HTML ma ke ʻano he pahu flex .

Nā koho koho

Hiki i ka ʻōnaehana mākia o Bootstrap ke hoʻololi i nā wahi haʻihaʻi ʻeono a pau, a me nā wahi haʻihaʻi āu e hana ai. ʻO nā pae mānoanoa ʻeono penei:

• Liʻiliʻi liʻiliʻi (xs)
• liʻiliʻi (sm)
• Kauwaena (md)
• Nui (lg)
• Nui loa (xl)
• Nui keu (xxl)

E like me ka mea i hōʻike ʻia ma luna, loaʻa i kēlā me kēia o kēia mau breakpoints ko lākou pahu ponoʻī, prefix papa kūʻokoʻa, a me nā mea hoʻololi. Eia ke ʻano o ka hoʻololi ʻana o ka mākia ma kēia mau wahi haʻihaʻi:

Nā kolamu hoʻonohonoho ʻakomi

E hoʻohana i nā papa kolamu breakpoint-specific no ka maʻalahi o ka nui kolamu me ka ʻole o ka papa helu kikoʻī e like me .col-sm-6.

Kaulike-ākea

Eia kekahi laʻana, eia nā papa kuhikuhi ʻelua e pili ana i kēlā me kēia hāmeʻa a me ka viewport, mai xska xxl. E hoʻohui i kekahi helu o nā papa ʻāpana liʻiliʻi no kēlā me kēia haʻihaʻi āu e pono ai a ʻo kēlā me kēia kolamu e like ka laulā.

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

Hoʻonohonoho i hoʻokahi laulā kolamu

'O ka ho'onohonoho 'akomi no nā kolamu flexbox grid 'o ia ho'i, hiki iā 'oe ke ho'onohonoho i ka laula o ho'okahi kolamu a ho'ololi 'akomi i nā kolamu kaikua'ana a puni. Hiki iā ʻoe ke hoʻohana i nā papa mākia i koho mua ʻia (e like me ka mea i hōʻike ʻia ma lalo nei), nā hui pūlima, a i ʻole nā ​​lau ākea. E hoʻomaopopo e hoʻololi ʻia nā kolamu ʻē aʻe me ka ʻole o ka laulā o ke kolamu waena.

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

Maʻiʻo laula ʻokoʻa

E hoʻohana col-{breakpoint}-autoi nā papa e hoʻonui i nā kolamu ma muli o ka laulā maoli o kā lākou ʻike.

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

Nā papa pane

Aia i loko o ka mākia ʻo Bootstrap nā papa ʻeono o nā papa i koho mua ʻia no ke kūkulu ʻana i nā hoʻolālā pane paʻakikī. Hoʻopilikino i ka nui o kāu mau kolamu ma nā mea liʻiliʻi liʻiliʻi, liʻiliʻi, waena, nui, a i ʻole nā ​​mea nui ʻē aʻe e like me kou manaʻo he kūpono.

ʻO nā wahi haʻi a pau

No nā mākia like ʻole mai ka mea liʻiliʻi a hiki i ka mea nui, e hoʻohana i ka .cola me .col-*nā papa. E wehewehe i kahi papa helu inā makemake ʻoe i kahi kolamu nui; a i ʻole, e ʻoluʻolu e pili i .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>

Hoʻopaʻa ʻia i ka paepae

Me ka hoʻohana ʻana i hoʻokahi pūʻulu o .col-sm-*nā papa, hiki iā ʻoe ke hana i kahi ʻōnaehana mākia maʻamau e hoʻomaka i ka hoʻopaʻa ʻia a lilo i paepae ma ka wahi haʻi liʻiliʻi ( 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>

Hoʻohui a hoʻohālikelike

ʻAʻole makemake ʻoe e hoʻopaʻa wale i kāu mau kolamu i kekahi mau pae mānoanoa? E hoʻohana i ka hui ʻana o nā papa like ʻole no kēlā me kēia pae e like me ka mea e pono ai. E ʻike i ka laʻana ma lalo no ka manaʻo maikaʻi aʻe o ka hana ʻana.

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

Nā kolamu lālani

E hoʻohana i nā .row-cols-*papa pane e hoʻonohonoho koke i ka helu o nā kolamu e hāʻawi maikaʻi i kāu ʻike a me ka hoʻolālā. ʻOiai .col-*pili nā papa maʻamau i nā kolamu pākahi (e laʻa, .col-md-4), ua hoʻonoho ʻia nā papa kolamu lālani ma ka makua .rowma ke ʻano he ala pōkole. Hiki .row-cols-autoiā ʻoe ke hāʻawi i nā kolamu i ko lākou laulā maoli.

E hoʻohana i kēia mau papa kolamu lālani no ka hana wikiwiki ʻana i nā hoʻolālā maʻamau maʻamau a i ʻole e kāohi i kāu hoʻonohonoho kāleka.

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

Hiki iā ʻoe ke hoʻohana i ka hui Sass hui pū ʻia 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);
  }
}

Nesting

No ka hoʻopili ʻana i kāu ʻike me ka mākia paʻamau, e hoʻohui i kahi kolamu hou .rowa me .col-sm-*nā kolamu i loko o kahi .col-sm-*kolamu e kū nei. Pono nā lālani i hoʻopaʻa ʻia he pūʻulu kolamu e hoʻonui i ka 12 a ʻoi aʻe paha (ʻaʻole pono ʻoe e hoʻohana i nā kolamu he 12 i loaʻa).

<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

Ke hoʻohana nei i nā faila Sass kumu o Bootstrap, loaʻa iā ʻoe ke koho o ka hoʻohana ʻana i nā ʻano Sass a me nā mixins e hana i nā ʻaoʻao maʻamau, semantic, a me ka pane pane. Ke hoʻohana nei kā mākou papa papa kuhikuhi i kēia mau ʻano like ʻole a me nā mixins e hāʻawi i kahi papa holoʻokoʻa o nā papa mākaukau no ka hoʻolālā pane wikiwiki.

Nā mea hoʻololi

Ho'oholo nā mea ho'ololi a me nā palapala 'āina i ka heluna o nā kolamu, ka laula o ka 'auwaha, a me ka wahi nīnau media kahi e ho'omaka ai nā kolamu lana. Hoʻohana mākou i kēia no ka hoʻopuka ʻana i nā papa papa kuhikuhi i hoʻopaʻa ʻia ma luna, a me nā mixins maʻamau i helu ʻia ma lalo nei.

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

Mea huikau

Hoʻohana pū ʻia nā mixins me nā mea hoʻololi grid e hoʻohua i ka CSS semantic no nā kolamu pahu pākahi.

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

Laʻana hoʻohana

Hiki iā ʻoe ke hoʻololi i nā mea hoʻololi i kāu mau waiwai maʻamau, a i ʻole e hoʻohana wale i nā mixins me kā lākou mau waiwai paʻamau. Eia kekahi laʻana o ka hoʻohana ʻana i nā hoʻonohonoho paʻamau no ka hana ʻana i kahi hoʻolālā ʻelua kolamu me kahi kaawale ma waena.

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

Hoʻopilikino i ka mānoanoa

Me ka hoʻohana ʻana i kā mākou mākia i kūkulu ʻia i nā ʻano Sass a me nā palapala ʻāina, hiki ke hoʻopilikino piha i nā papa grid i koho mua ʻia. E hoʻololi i ka helu o nā pae, ka nui o ka nīnau noiʻi media, a me ka laula ipu—a laila e hoʻohui hou.

Nā kolamu a me nā auwai

Hiki ke hoʻololi ʻia ka heluna o nā kolamu ma o nā ʻano hoʻololi Sass. $grid-columnshoʻohana ʻia e hana i nā laula (ma ka pākēneka) o kēlā me kēia kolamu me ka $grid-gutter-widthhoʻonohonoho ʻana i ka laula no nā auwai kolamu. $grid-row-columnshoʻohana ʻia e hoʻonoho i ka helu kiʻekiʻe o nā kolamu o .row-cols-*, ʻaʻole mālama ʻia kekahi helu ma luna o kēia palena.

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

Nā pae mānoanoa

Ke neʻe nei ma waho o nā kolamu ponoʻī, hiki iā ʻoe ke hoʻopilikino i ka helu o nā pae mānoanoa. Inā makemake ʻoe i ʻehā mau pae mānoanoa, e hoʻonui ʻoe i ka $grid-breakpointsa $container-max-widthsi kekahi mea e like me kēia:

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

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

Ke hoʻololi nei i nā ʻano hoʻololi Sass a i ʻole palapala ʻāina, pono ʻoe e mālama i kāu mau hoʻololi a hoʻohui hou. Ma ka hana ʻana pēlā e hoʻopuka ai i kahi pūʻulu hou o nā papa mākia i koho mua ʻia no ka laulā kolamu, offset, a me ke kauoha. E hoʻonui hou ʻia nā pono hana ʻike pane no ka hoʻohana ʻana i nā wahi haʻi maʻamau. E hōʻoia i ka hoʻonohonoho ʻana i nā waiwai mākia i px(ʻaʻole rem, em, a i ʻole %).