Source

Pūnaehana mānoanoa

E hoʻohana i kā mākou pahu flexbox mobile-first ikaika e kūkulu i nā hoʻolālā o nā ʻano a me nā nui āpau e mahalo i kahi ʻōnaehana kolamu ʻumikūmālua, ʻelima mau pae pane pane paʻamau, Sass variables and mixins, a me ka nui o nā papa i koho mua ʻia.

Pehea e hana ai

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 nānā hohonu i ke ʻano o ka hui ʻana o ka pā.

He mea hou a ʻike ʻole paha me ka flexbox? E heluhelu i kēia CSS Tricks flexbox alakaʻi no ka hope, terminology, alakaʻi, a me nā snippet code.

ʻO kekahi o nā kolamu ʻekolu

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Hoʻokumu ka laʻana i luna i ʻekolu kolamu like-ākea ma nā mea liʻiliʻi, waena, nui, a ʻoi aku ka nui me ka hoʻohana ʻana i kā mākou papa kuhikuhi mua. Aia kēlā mau kolamu ma ka ʻaoʻao me ka makua .container.

ʻO ka wehe ʻana i lalo, eia ke ʻano o ka hana ʻana:

Hāʻawi nā pahu i kahi ala e hoʻokaʻawale a hoʻopaʻa i nā ʻike o kāu pūnaewele. E hoʻohana .containerno ka laula pika pane a .container-fluidi ʻole width: 100%ma nā ʻaoʻao āpau a me ka nui o nā hāmeʻa.
ʻ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ā palena ʻino. Ma kēia ala, ʻike maka ʻia nā ʻike a pau o kāu mau kolamu ma ka ʻaoʻao hema.
Ma kahi hoʻolālā mānoanoa, pono e waiho ʻia ka ʻike ma loko o nā kolamu a ʻo nā kolamu wale nō paha nā keiki o nā lālani.
Mahalo iā flexbox, e hoʻonohonoho ʻokoʻa nā kolamu me ka ʻole o kahi kikoʻī widthe like me nā kolamu ākea like. No ka laʻana, ʻehā mau manawa o .col-smkēlā me kēia me 25% ākea mai ka wahi haʻi liʻiliʻi a piʻi. E ʻike i ka ʻāpana kolamu hoʻonohonoho ʻokoʻa no nā laʻana hou aku.
Hōʻike nā papa kolamu i ka helu o nā kolamu āu e makemake ai e hoʻohana mai ka 12 hiki i kēlā me kēia lālani. No laila, inā makemake ʻoe i ʻekolu kolamu like-ākea ma waena, hiki iā ʻoe ke hoʻohana .col-4.
Hoʻonohonoho widthʻia nā kolamu i nā pākēneka, no laila e maʻa mau lākou a me ka nui e pili ana i ko lākou ʻano makua.
Loaʻa i nā kolamu ka pae ākea paddinge hana i nā auwai ma waena o kēlā me kēia kolamu, akā naʻe, hiki iā ʻoe ke wehe i ka marginlaina mai nā lālani a paddingmai nā kolamu me .no-gutterska .row.
No ka pane ʻana i ka mānoanoa, ʻelima mau wahi haʻihaʻi, hoʻokahi no kēlā me kēia haʻihaʻi pane : nā haʻi āpau (ʻoi aku ka liʻiliʻi), liʻiliʻi, waena, nui, a ʻoi aku ka nui.
Hoʻokumu ʻia nā wahi haʻihaʻi ma luna o nā nīnau media laula liʻiliʻi, ʻo ia hoʻi , pili lākou i kēlā wahi haʻihaʻi a me nā mea a pau ma luna o ia (e laʻa, .col-sm-4pili i nā mea liʻiliʻi, waena, nui, a me nā mea nui ʻē aʻe, ʻaʻole naʻe ka xshaki mua).
Hiki iā ʻoe ke hoʻohana i nā papa mākia i koho mua ʻia (e like me .col-4) a i ʻole nā hui Sass no ka hōʻailona semantic hou aʻe.

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

ʻOiai e hoʻohana ana ʻo Bootstrap i nā ems a i ʻole rems no ka wehewehe ʻana i ka nui o ka nui, pxhoʻohana ʻia ʻo s no nā wahi haki a me nā laula ipu. ʻO kēia no ka mea aia ka laulā viewport i nā pika a ʻaʻole loli me ka nui font .

E ʻike pehea e hana ai nā hiʻohiʻona o ka ʻōnaehana mākia Bootstrap ma nā ʻaoʻao he nui me kahi papaʻaina.

	ʻOi aku ka liʻiliʻi <576px	≥576px liʻiliʻi	≥768 px	Nui ≥992px	Nui nui ≥1200px
Ka laula o ka ipu nui	ʻAʻohe (aunoa)	540px	720px	960px	1140px
Prefix papa	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# o nā kolamu	12
Laulā ʻauwai	30px (15px ma kēlā me kēia ʻaoʻao o kahi kolamu)
Nestable	ʻAe
Kakau ʻana o ke kolamu	ʻAe

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

1 o 2

2 o 2

1 o 3

2 o 3

3 o 3

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

laina nui like-ākea

E hana i nā kolamu like-ākea e hoʻopaʻa i nā laina he nui ma ka hoʻokomo ʻana i .w-100kahi āu e makemake ai e haki nā kolamu i kahi laina hou. E hoʻololi i nā haʻina ma ka hui .w-100ʻana me kekahi mau pono hōʻike pane .

Aia ka Safari flexbox bug i pale i kēia hana me ka ʻole o kahi kikoʻī a i flex-basisʻole border. Loaʻa nā hoʻoponopono no nā mana polokalamu kele kahiko, akā ʻaʻole pono ia inā ʻaʻole e hāʻule kāu mau polokalamu kele i nā mana kaʻa.

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</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.

1 o 3

2 o 3 (ākea)

3 o 3

1 o 3

2 o 3 (ākea)

3 o 3

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

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.

1 o 3

Maʻiʻo laula ʻokoʻa

3 o 3

1 o 3

Maʻiʻo laula ʻokoʻa

3 o 3

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

Nā papa pane

Aia i loko o ka mākia ʻo Bootstrap nā ʻelima papa 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.

col

kola-8

kola-4

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

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

col-sm-8

col-sm-4

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

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.

.col-md-8

.col-6 .col-md-4

.col-6

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

ʻAuwai

Hiki ke hoʻoponopono maikaʻi ʻia nā ʻauwai e nā padding kikoʻī-breakpoint a me nā papa hana pono ʻole. No ka hoʻololi ʻana i nā ʻauwai ma kahi lālani i hāʻawi ʻia, e hoʻopaʻa i kahi pono palena ʻole ma ka .rowʻaoʻao a me nā pono hoʻopili padding ma ka .cols. Pono .containerpaha .container-fluide hoʻoponopono ʻia ka makua a i ʻole ka makua no ka pale ʻana i ke kahe ʻana i makemake ʻole ʻia, me ka hoʻohana hou ʻana i ka pono padding like.

Eia kekahi laʻana o ka hoʻopilikino ʻana i ka mākia Bootstrap ma ka wahi haʻi nui ( lg) a ma luna. Ua hoʻonui mākou i ka .colpadding me .px-lg-5, counteracted me .mx-lg-n5ka makua .rowa laila hoʻoponopono i ka .containerʻōwili me .px-lg-5.

Padding kolamu maʻamau

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</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.

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.

kolamu

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

kolamu

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

kolamu

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

kolamu

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

kolamu

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

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

Hoʻopololei

E hoʻohana i nā pono hana hoʻopololei flexbox e hoʻopololei i nā kolamu ma ka ʻaoʻao a me ka pae. ʻAʻole kākoʻo ʻo Internet Explorer 10-11 i ka hoʻopololei kū ʻana o nā mea lohi inā loaʻa ka pahu lohi e like me ka mea min-heighti hōʻike ʻia ma lalo nei. E ʻike iā Flexbugs #3 no nā kikoʻī hou aku.

Hoʻopololei pololei

ʻO kekahi o nā kolamu ʻekolu

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

ʻO kekahi o nā kolamu ʻekolu

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Hoʻopololei hoʻopololei

Hoʻokahi o nā kolamu ʻelua

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ʻAʻohe auwai

Hiki ke hoʻoneʻe ʻia nā ʻauwaha ma waena o nā kolamu i kā mākou papa papa kuhikuhi mua me .no-gutters. Hoʻopau kēia i nā margins maikaʻi ʻole mai .rowa me ka paepae paddingmai nā kolamu keiki āpau.

Eia ke kumu kumu no ka hana ʻana i kēia mau ʻano. E hoʻomanaʻo, ua hoʻopili ʻia nā kolamu i nā kolamu keiki mua wale nō a ua hoʻopaʻa ʻia e ka mea koho . ʻOiai e hoʻopuka ana kēia i kahi mea koho kikoʻī, hiki ke hoʻololi hou ʻia ka padding kolamu me nā pono spacing .

Pono i kahi hoʻolālā lihi-i-kaʻe? Hoʻokuʻu i ka makua a i .containerʻole .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Ma ka hana, eia ke ano. E hoʻomaopopo hiki iā ʻoe ke hoʻomau i ka hoʻohana ʻana i kēia me nā papa papa kuhikuhi ʻē aʻe (me ka laulā kolamu, nā pae pane, nā hoʻonohonoho hou, a me nā mea hou aku).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ʻOpiʻi kolamu

Inā ʻoi aku ma mua o 12 kolamu i hoʻokomo ʻia i loko o ka lālani hoʻokahi, e hoʻopili ʻia kēlā me kēia hui o nā kolamu ʻē aʻe, ma ke ʻano he ʻāpana hoʻokahi, i kahi laina hou.

.col-9

.col-4
Mai ka 9 + 4 = 13 > 12, ua wili ʻia kēia div 4-kolani-ākea i kahi laina hou ma ke ʻano he ʻāpana pili.

.col-6
Hoʻomau nā kolamu ma ka laina hou.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Haʻi kolamu

ʻO ka uhaki ʻana i nā kolamu i kahi laina hou i ka flexbox pono i kahi hack liʻiliʻi: e hoʻohui i kahi mea me width: 100%nā wahi āu e makemake ai e hoʻopili i kāu mau kolamu i kahi laina hou. Hoʻokō maʻamau kēia me nā .rows he nui, akā ʻaʻole hiki i kēlā me kēia ʻano hoʻokō ke helu i kēia.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Hiki iā ʻoe ke hoʻohana i kēia hoʻomaha ma nā wahi haʻihaʻi kikoʻī me kā mākou mau pono hōʻike pane .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Hoʻonohonoho hou

Kauoha papa

E hoʻohana i nā.order- papa no ka mālama ʻana i ke ʻano o kāu ʻike. Hoʻopili kēia mau papa, no laila hiki iā ʻoe ke hoʻonohonoho i ka by breakpoint (eg, ). Hoʻokomo pū ʻia ke kākoʻo no nā pae mānoanoa ʻelima.order.order-1.order-md-2112

ʻO ka mua ma DOM, ʻaʻohe kauoha i kau ʻia

ʻO ka lua ma DOM, me kahi kauoha nui

ʻEkolu ma DOM, me ke kauoha o 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Aia kekahi mau papa pane .order-firsta me .order-lastnā papa e hoʻololi i ke ʻano ordero kahi mea ma ka hoʻopili ʻana order: -1a me order: 13( order: $columns + 1), kēlā me kēia. Hiki ke hui pū ʻia kēia mau .order-*papa me nā papa helu e like me ka mea e pono ai.

ʻO ka mua ma DOM, kauoha hope

ʻO ka lua ma DOM, ʻaʻole i hoʻonohonoho ʻia

ʻO ke kolu ma DOM, kauoha mua

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Hoʻopio i nā kolamu

Hiki iā ʻoe ke hoʻokaʻawale i nā kolamu mānoanoa ma nā ʻano ʻelua: kā mākou .offset-papa hana pane pane a me kā mākou mau pono hana margin . Hoʻohālikelike ʻia nā papa Grid e hoʻohālikelike i nā kolamu a ʻoi aku ka maikaʻi o nā palena no nā hoʻolālā wikiwiki kahi e loli ai ka laulā o ka offset.

Nā papa offset

E hoʻoneʻe i nā kolamu i ka ʻākau me ka hoʻohana ʻana i .offset-md-*nā papa. Hoʻonui kēia mau papa i ka palena hema o kahi kolamu ma *nā kolamu. No ka laʻana, .offset-md-4neʻe .col-md-4ma luna o ʻehā kolamu.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Ma waho aʻe o ka hoʻomaʻemaʻe kolamu ma nā wahi haʻi pane, pono paha ʻoe e hoʻonohonoho hou i nā offset. E ʻike i kēia ma ka hana ma ka laʻana grid .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Nā pono hana palena

Me ka neʻe ʻana i ka flexbox ma v4, hiki iā ʻoe ke hoʻohana i nā pono hana e like me .mr-autoka hoʻoneʻe ʻana i nā kolamu kaikuaʻana mai kekahi i kekahi.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

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

Papa 1: .col-sm-9

Papa 2: .col-8 .col-sm-6

Papa 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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 mixins

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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@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 {
  width: 800px;
  @include make-container();
}

.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);
  }
}

Mea nui

maʻiʻo lua

<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-columns: 12 !default;
$grid-gutter-width: 30px !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 %).