ʻO ka ʻōnaehana mākia paʻamau i hāʻawi ʻia ma ke ʻano he ʻāpana o Bootstrap he 940px-ākea, 12-kolani mākia .

Loaʻa iā ia nā ʻano like ʻole ʻehā no nā mea like ʻole a me nā ʻōlelo hoʻoholo: kelepona, kiʻi papa papa, ʻāina papaʻaina a me nā pākaukau liʻiliʻi, a me nā pākaukau ākea nui.

<div class = "lālani" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

E like me ka mea i hōʻike ʻia ma ʻaneʻi, hiki ke hana ʻia kahi hoʻolālā kumu me ʻelua "koi," i kēlā me kēia me kahi helu o nā kolamu kumu he 12 a mākou i wehewehe ai ma ke ʻano he ʻāpana o kā mākou pūnaewele puni honua.

Me ka ʻōnaehana static (non-fluid) ma Bootstrap, maʻalahi ka nesting. No ka hoʻopaʻa ʻana i kāu ʻike, hoʻohui wale i kahi kolamu hou .rowa hoʻonohonoho i .span*loko o kahi .span*kolamu e kū nei.

Laʻana

<div class = "lālani" > 
  <div class = "span12" > 
    Papa 1 o ke kolamu
    <div class = "lālani" > 
      <div class = "span6" > Papa 2 </div> 
      <div class = "span6" > Papa 2 </div> 
    </div>
  </div>
</div>

Nā hoʻololi i LESS

Hoʻokomo ʻia i loko o Bootstrap he liʻiliʻi o nā mea hoʻololi no ka hana ʻana i ka ʻōnaehana 940px paʻamau, i kākau ʻia ma luna. Mālama ʻia nā mea hoʻololi a pau no ka mānoanoa ma nā variables.less.

Pehea e hoʻopilikino ai

ʻO ka hoʻololi ʻana i ka mānoanoa ʻo ia ka hoʻololi ʻana i nā ʻano ʻekolu @grid*a me ka hoʻopili hou ʻana iā Bootstrap. E hoʻololi i nā mea hoʻololi pūnaewele ma variables.less a hoʻohana i kekahi o nā ala ʻehā i palapala ʻia no ka hoʻopili hou ʻana . Inā hoʻohui ʻoe i nā kolamu hou aʻe, e ʻoluʻolu e hoʻohui i ka CSS no ka poʻe ma grid.less.

Noho pane

ʻO ka hana maʻamau o ka mākia wale nō e hana ma ka pae paʻamau, ka mākia 940px. No ka mālama ʻana i nā ʻano pane o Bootstrap, pono ʻoe e hoʻopilikino i nā grids ma responsive.less.

Hoʻolālā paʻa

ʻO ka paʻamau a maʻalahi 940px-ākea, hoʻonohonoho kikowaena no kahi pūnaewele a i ʻole ʻaoʻao i hāʻawi ʻia e kahi <div class="container">.

<kino>
  <div class = "container" > 
    ...
  </div>
</kino>

Hoʻolālā wai

<div class="container-fluid">hāʻawi i ka hoʻolālā ʻaoʻao maʻalahi, min- a me max-ākea, a me kahi ʻaoʻao ʻaoʻao hema. He mea maikaʻi no nā polokalamu a me nā palapala.

<div class = "container-fluid" > 
  <div class = "laina-wai" > 
    <div class = "span2" > 
      <!--Maʻiʻo ʻaoʻao-->
    </div>
    <div class = "span10" > 
      <!--Maʻiʻo kino-->
    </div>
  </div>
</div>

Nā mea i kākoʻo ʻia

Kākoʻo ʻo Bootstrap i kahi liʻiliʻi o nā nīnau media e kōkua i kāu mau papahana i kūpono i nā mea like ʻole a me nā hoʻonā pale. Eia ka mea i komo:

He aha kā lākou hana

ʻAe nā nīnau Media no CSS maʻamau e pili ana i nā kūlana he nui—ratio, laula, ʻano hōʻikeʻike, a me nā mea ʻē aʻe—akā maʻa mau ka nānā ʻana a min-widthpuni max-width.

• E hoʻololi i ka laulā o ke kolamu ma kā mākou mānoanoa
• E hoʻopaʻa i nā mea ʻeleʻele ma kahi o ka lana ʻana ma kahi e pono ai
• Hoʻololi hou i nā poʻomanaʻo a me nā kikokikona i kūpono i nā mea hana

ʻAʻole hoʻokomo ʻokoʻa ʻo Bootstrap i kēia mau nīnau media, akā maʻalahi loa ka hoʻomaopopo ʻana a me ka hoʻohui ʻana iā lākou a pono ka hoʻonohonoho liʻiliʻi. Loaʻa iā ʻoe kekahi mau koho no ka hoʻopili ʻana i nā hiʻohiʻona pane o Bootstrap:

1. E hoʻohana i ka mana pane i hui ʻia, bootstrap-responsive.css
2. Hoʻohui @import "responsive.less" a hoʻohui hou iā Bootstrap
3. Hoʻololi a hoʻohui hou i responsive.less ma ke ʻano he kaʻawale

No ke aha e hoʻokomo ʻole ai? ʻO ka ʻoiaʻiʻo, ʻaʻole pono nā mea a pau e pane. Ma kahi o ka paipai ʻana i nā mea hoʻomohala e wehe i kēia hiʻohiʻona, manaʻo mākou he mea maikaʻi loa ia e hiki ai.

  // Nā kelepona ʻāina a i lalo
  @media ( max - laula : 480px ) { ... }     
 
  // Kelepona ʻāina i ka papa kiʻi kiʻi
  @media ( ka nui - laula : 768px ) { ... }     
 
  // Kiʻi papa i ka ʻāina a me ka pākaukau
  @media ( min - laula : 768px ) a me ( max - laula : 940px ) { ... }        
 
  // Papapihi nui
  @media ( min - laula : 1200px ) { .. }