Sistimi ea grid ea kamehla e fanoeng e le karolo ea Bootstrap ke 940px-wide, 12-column grid .

E boetse e na le mefuta e mene e arabelang bakeng sa lisebelisoa le liqeto tse fapaneng: mohala, setšoantšo sa letlapa, sebopeho sa tafole le li-desktops tse nyane, le li-desktops tse kholo tse sephara.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

Joalokaha ho bontšitsoe mona, moralo oa motheo o ka etsoa ka "likholomo" tse peli, e 'ngoe le e' ngoe e nka likarolo tse 12 tsa motheo tseo re li hlalositseng e le karolo ea tsamaiso ea rona ea marang-rang.

Ka sistimi e tsitsitseng (e seng mokelikeli) ho Bootstrap, ho haha ​​sehlaha ho bonolo. Ho hlophisa litaba tsa hau, kenya feela likholomo tse ncha .rowka .span*har'a .span*kholomo e teng.

Mohlala

<div class = "row" > 
  <div class = "span12" > 
    Boemo ba 1 ba kholomo
    <div class = "row" > 
      <div class = "span6" > Mohato 2 </div> 
      <div class = "span6" > Mohato 2 </div> 
    </ div>
  </ div>
</ div>

Liphetoho ka LESS

E hahiloe ka har'a Bootstrap ho na le mefuta e 'maloa e fapaneng bakeng sa ho iketsetsa sistimi ea grid ea 940px, e ngotsoeng ka holimo. Liphetoho tsohle bakeng sa marang-rang li bolokiloe ka mefuta-futa.e fokolang.

Mokhoa oa ho itlhophisa

Ho fetola grid ho bolela ho fetola @grid*mefuta e meraro le ho khutlisetsa Bootstrap. Fetola li-grid tse feto-fetohang ka mefuta-futa.e fokolang 'me u sebelise e' ngoe ea litsela tse 'nè tse ngotsoeng ho bokella hape . Haeba u eketsa litšiea tse ling, etsa bonnete ba hore u kenya CSS bakeng sa ba leng grid.less.

Ho dula o arabela

Ho ikamahanya ha grid ho sebetsa feela maemong a kamehla, grid ea 940px. Ho boloka likarolo tse arabelang tsa Bootstrap, o tla tlameha hape ho hlophisa li-grid ka mokhoa o arabelang.less.

Sebopeho se tsitsitseng

Sebopeho sa kamehla le se bonolo sa 940px-wide, se bohareng bakeng sa sebaka sa marang-rang sefe kapa sefe kapa leqephe le fanoeng ke <div class="container">.

<'mele>
  <div class = "setshelo" > 
    ...
  </ div>
</ mmele>

Sebopeho sa mokelikeli

<div class="container-fluid">e fana ka sebopeho sa leqephe se feto-fetohang, bophara ba min- le max-widths, le karolo e ka letsohong le letšehali. E ntle bakeng sa lisebelisoa le litokomane.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Likahare tsa Sidebar-->
    </ div>
    <div class = "span10" > 
      <!--Dikahare tsa mmele-->
    </ div>
  </ div>
</ div>

Lisebelisoa tse tšehetsoeng

Bootstrap e ts'ehetsa lipotso tse 'maloa tsa media ho thusa ho etsa hore merero ea hau e be e loketseng lisebelisoa tse fapaneng le liqeto tsa skrineng. Mona ke tse kenyellelitsoeng:

Seo ba se etsang

Lipotso tsa mecha ea litaba li lumella CSS e tloaelehileng ho latela maemo a 'maloa-karolelano, bophara, mofuta oa pontšo, joalo-joalo-empa hangata e lebisa tlhokomelo ho pota-pota min-widthle max-width.

• Fetola bophara ba kholomo ho grid ea rona
• Likarolo tsa lintho tse bokellaneng ho e-na le ho phaphamala hohle moo ho hlokahalang
• Fetola boholo ba lihlooho le mongolo hore o tšoanele lisebelisoa

Bootstrap ha e kenyelle lipotso tsena tsa media ka bo eona, empa ho li utloisisa le ho li eketsa ho bonolo haholo mme ho hloka ho seta ho fokolang. U na le likhetho tse 'maloa tsa ho kenyelletsa likarolo tse arabelang tsa Bootstrap:

1. Sebelisa mofuta o hlophisitsoeng oa karabelo, bootstrap-responsive.css
2. Kenya @import "responsive.less" 'me u khutlisetse Bootstrap
3. Fetola le ho bokella e arabelang.ka tlase joalo ka karohano

Ke hobane'ng ha u sa e kenyelle feela? Ha e le hantle, ha se ntho e 'ngoe le e' ngoe e lokelang ho etsoa. Sebakeng sa ho khothaletsa baetsi ho tlosa tšobotsi ena, re bona ho le molemo ho e nolofalletsa.

  // Mehala ya naha le tlase
  @media ( max - wide : 480px ) { ... }     
 
  // Mohala oa naha ho letlapa la setšoantšo
  @media ( max - wide : 768px ) { ... }     
 
  // Letlapa la litšoantšo ho sebopeho sa naha le komporo
  @media ( min - width : 768px ) le ( max - width : 940px ) { ... }        
 
  // desktop e kholo
  @media ( min - width : 1200px ) { .. }