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

Mela e hlophiloeng e tlameha ho kenyelletsa sehlopha sa likholomo tse kopanyang palo ea likholomo tsa motsoali oa eona. Ka mohlala, .span3litšiea tse peli tse behiloeng li lokela ho behoa ka har'a .span6.

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

Liphesente, eseng lipikselse

Sistimi ea grid ea mokelikeli e sebelisa lipersente bakeng sa bophara ba likholomo ho fapana le lipikselse tse tsitsitseng. E boetse e na le mefuta e fapaneng e arabelang joalo ka sistimi ea rona e tsitsitseng ea grid, e netefatsang likarolo tse nepahetseng bakeng sa liqeto tsa bohlokoa tsa skrineng le lisebelisoa.

Mela e nang le metsi

Etsa mokelikeli ofe kapa ofe ka ho fetola .rowho .row-fluid. Litšiea li lula li tšoana hantle, e leng ho etsang hore ho be bonolo haholo ho pota-pota pakeng tsa libopeho tse tsitsitseng le tse nang le metsi.

Markup

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

Ho haha ​​sehlaha ka li-grids tsa mokelikeli ho batla ho fapane: palo ea litšiea ha e hloke ho ts'oana le motsoali. Sebakeng seo, litšiea tsa hau li setiloe bocha boemong bo bong le bo bong hobane mola o mong le o mong o nka 100% ea kholomo ea motsoali.

<div class = "row-fluid" > 
  <div class = "span12" > 
    Boemo ba 1 ba kholomo
    <div class = "row-fluid" > 
      <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 mengata e fapaneng bakeng sa ho etsa sistimi ea grid ea 940px, e ngotsoeng ka holimo. Mefuta eohle ea marang-rang e bolokoa ka mefuta-futa.nya.

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 ho feto-fetoha.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, u 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">.

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

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 faeleng e le' ngoe ho thusa ho etsa hore merero ea hau e be e loketseng lisebelisoa tse fapaneng le liqeto tsa skrineng. Mona ke tse kenyellelitsoeng:

E hloka meta tag

Ho etsa bonnete ba hore lisebelisoa li bonts'a maqephe a arabelang hantle, kenyelletsa le "viewport meta tag".

<meta name = "viewport" content = "width=sesebediswa-bophara, sekala sa ho qala=1.0" >  

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.ntle le joalo ka faele e arohaneng

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 ) { ... }     
 
  // Fono ea sebopeho sa 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 : 980px ) { ... }        
 
  // desktop e kholo
  @media ( min - width : 1200px ) { .. }