Bootstrap

Sekafola

Bootstrap e hahiloe holim'a marang-rang a 12-kholomo e arabelang. Hape re kenyelelitse meralo e tsitsitseng le bophara ba metsi ho latela sistimi eo.

Mekhoa ea lefats'e ea ho seta bocha CSS, typography, le lihokelo

E hloka HTML5 doctype

Bootstrap e sebelisa likarolo tsa HTML le thepa ea CSS e hlokang ts'ebeliso ea HTML5 doctype. Etsa bonnete ba hore o e kenyelletsa qalong ea leqephe le leng le le leng la Bootstrapped morerong oa hau.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Typography le lihokela

Ka har'a faele ea scaffolding.less , re theha ponts'o ea lefats'e, typography, le mekhoa ea likhokahanyo. Ka ho khetheha, re:

  • Tlosa moeli 'meleng
  • Beha background-color: white;holim'abody
  • Sebelisa @baseFontFamily, @baseFontSize, le @baseLineHeightlitšoaneleho e le motheo oa typography ea rona
  • Beha 'mala oa lihokelo tsa lefats'e ka @linkColorho sebelisa mehala ea likhokahano feela ho eona:hover

Seta bocha ka Normalize

Ho tloha ka Bootstrap 2, ho seta bocha CSS ho fetohile ho sebelisa likarolo ho tsoa ho Normalize.css , morero oa Nicolas Gallagher o matlafatsang HTML5 Boilerplate .

Reset e ncha e ntse e ka fumaneha ho reset.less , empa ka likarolo tse ngata tse tlositsoeng bakeng sa bokhutšoanyane le ho nepahala.

Sistimi ea kamehla ea grid ke litšiea tse 12 tse nang le twist e arabelang

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Sistimi ea grid ea kamehla e fanoeng Bootstrap e sebelisa likholomo tse 12 tse fanang ka bophara ba 724px, 940px (kamehla ntle le ho kenyeletsoa CSS e arabelang), le 1170px. Ka tlas'a 767px li-viewports, litšiea li fetoha metsi 'me li tsitsa ho ea holimo.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </ div>

Joalo ka ha ho bonts'itsoe mona, moralo oa mantlha o ka etsoa ka "likholomo" tse peli, e 'ngoe le e 'ngoe e nka palo ea litšiea tse 12 tseo re li hlalositseng e le karolo ea sistimi ea rona.


Litšiea tsa offsetting

4
4 tlhophiso 4
3 ho tloha 3
3 ho tloha 3
8 ho ​​tloha 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </ div>

Litšiea tsa Nesting

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.

Boemo ba 1 ba kholomo
Mohato oa 2
Mohato oa 2 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     Karolo ea 1
  4.     <div class = "row" > 
  5.       <div class = "span3" > Mohato 2 </div> 
  6.       <div class = "span3" > Mohato 2 </div> 
  7.     </ div>
  8.   </ div>
  9. </ div>

Sistimi ea marang-rang e 12 e arabelang, e thehiloeng liphesenteng

Litšiea tsa metsi

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </ div>

Sehlaha sa metsi

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.

Mokelikeli 12
Mokelikeli 6
Mokelikeli 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Boemo ba 1 ba kholomo
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Mohato 2 </div> 
  6.       <div class = "span6" > Mohato 2 </div> 
  7.     </ div>
  8.   </ div>
  9. </ div>

Customize Grid

E fetohang Boleng ba kamehla Tlhaloso
@gridColumns 12 Palo ea litšiea
@gridColumnWidth 60px Bophara ba kholomo ka 'ngoe
@gridGutterWidth 20px Sebaka se fosahetseng pakeng tsa litšiea

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.

Li- Layouts Lithempleite tsa mantlha tsa ho theha maqephe a tepo

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

  1. <'mele>
  2.   <div class = "setshelo" > 
  3.     ...
  4.   </ div>
  5. </ 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.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Likahare tsa Sidebar-->
  5.     </ div>
  6.     <div class = "span10" > 
  7.       <!--Dikahare tsa mmele-->
  8.     </ div>
  9.   </ div>
  10. </ div>

Moralo o arabelang Lipotso tsa Media bakeng sa lisebelisoa tse fapaneng le liqeto

Lisebelisoa tse arabelang

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

Sebelisa lipotso tsa media ka mokhoa o nang le boikarabelo ebile e le qalo feela ho bamameli ba hau ba mehala. Bakeng sa merero e meholoanyane, nahana ka li-code tse inehetseng eseng likarolo tsa lipotso tsa media.

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:

Label Bophara ba sebopeho Bophara ba kholomo Bophara ba sekoti
Li-smartphone 480px le ka tlase Litšiea tsa metsi, ha ho bophara bo tsitsitseng
Li-smartphone ho matlapa 767px le ka tlase Litšiea tsa metsi, ha ho bophara bo tsitsitseng
Matlapa a setšoantšo 768px le holimo 42px 20px
Ea kamehla 980px ho ea holimo 60px 20px
Pontšo e kholo 1200px ho ea holimo 70px 30px

E hloka meta tag

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

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

Ho sebelisa lipotso tsa media

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.

  1.   /* Mehala ea naha le tlase */
  2.   @media ( max - wide : 480px ) { ... }     
  3.  
  4.   /* Fono ea sebopeho sa naha ho ea ho letlapa la litšoantšo */
  5.   @media ( max - wide : 767px ) { ... }     
  6.  
  7.   /* Letlapa la litšoantšo ho sebopeho sa naha le komporo */
  8.   @media ( min - width : 768px ) le ( max - width : 979px ) { ... }        
  9.  
  10.   /* desktop e kholo */
  11.   @media ( min - width : 1200px ) { ... }

Lihlopha tsa lisebelisoa tse arabelang

Ke eng

Bakeng sa nts'etsopele e potlakileng ea ho sebelisa mehala, sebelisa litlelase tsena tsa mantlha tsa lisebelisoa ho bonts'a le ho pata litaba ka sesebelisoa.

Nako ea ho sebelisoa

Sebelisa ka mokhoa o fokolang 'me u qobe ho theha mefuta e fapaneng ka ho felletseng ea sebaka se le seng. Ho e-na le hoo, li sebelise ho tlatselletsa tlhahiso ea sesebelisoa ka seng.

Mohlala, o kanna oa bonts'a <select>element bakeng sa nav lits'ebetsong tsa mehala, empa eseng matlapeng kapa li-desktops.

Lihlopha tsa tšehetso

Mona ho bonts'itsoe lethathamo la lihlopha tseo re li tšehetsang le phello ea tsona ho sebopeho sa potso ea media (e ngotsoeng ka sesebelisoa). Li ka fumanoa ho responsive.less.

Sehlopha Mehala480px le ka tlase Matlapa767px le ka tlase Lisebelisoa tsa desktop768px le holimo
.visible-phone Tse bonahalang
.visible-tablet Tse bonahalang
.visible-desktop Tse bonahalang
.hidden-phone Tse bonahalang Tse bonahalang
.hidden-tablet Tse bonahalang Tse bonahalang
.hidden-desktop Tse bonahalang Tse bonahalang

Nyeoe ea teko

Fetola boholo ba sebatli sa hau kapa kenya lisebelisoa tse fapaneng ho leka lihlopha tse kaholimo.

E bonahala ho...

Matšoao a matala a bontša hore sehlopha sea bonahala sebakeng sa hau sa pono sa hajoale.

  • Mohala✔ Fono
  • Letlapa✔ Letlapa
  • Desktop✔ Desktop

E patiloe ho...

Mona, matšoao a matala a bonts'a hore sehlopha se patiloe sebakeng sa hau sa pono sa hajoale.

  • Mohala✔ Fono
  • Letlapa✔ Letlapa
  • Desktop✔ Desktop