Bootstrap

Sekafola

Bootstrap e hahiloe holim'a marang-rang a 12-kholomo e arabelang, meralo le likaroloana.

Litlhophiso tsa lefats'e

E hloka HTML5 doctype

Bootstrap e sebelisa likarolo tse itseng tsa HTML le thepa ea CSS e hlokang ts'ebeliso ea HTML5 doctype. E kenyelletse qalong ea merero eohle ea hau.

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

Typography le lihokela

Bootstrap e beha ponts'o ea mantlha ea lefats'e, typography, le mekhoa ea lihokelo. Ka ho khetheha, re:

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

Mekhoa ena e ka fumanoa ka hare ho scaffolding.less .

Seta bocha ka Normalize

Ka Bootstrap 2, boloko ba khale ba ho seta botjha bo lahlilwe molemong wa Normalize.css , projeke ea Nicolas Gallagher le Jonathan Neal eo hape e matlafatsang HTML5 Boilerplate . Leha re sebelisa boholo ba Normalize ka hare ho reset.less , re tlositse likarolo tse ling ka ho khetheha bakeng sa Bootstrap.

Sistimi ea grid ea kamehla

Mohlala oa grid e phelang

Sistimi ea grid ea Bootstrap ea kamehla e sebelisa likholomo tse 12 , e etsa setshelo se sephara sa 940px ntle le likarolo tse arabelang . Ha faele ea CSS e arabelang e eketsoa, ​​grid e fetoha 724px le 1170px ka bophara ho latela sebaka sa hau sa pono. Ka tlas'a 767px li-viewports, litšiea li fetoha metsi 'me li tsitsa ho ea holimo.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML ea mantlha ea grid

Bakeng sa moralo o bonolo oa likholomo tse peli, theha a .row'me u kenye palo e nepahetseng ea .span*likholomo. Kaha ena ke marang-rang a 12-kholomo, e 'ngoe le e' ngoe .span*e na le palo ea likholomo tseo tse 12, 'me e lokela ho lula e kopanya 12 bakeng sa mola o mong le o mong (kapa palo ea likholomo ho motsoali).

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

Ha re fuoa mohlala ona, re na .span4le .span8, re etsa likholomo tse 12 kaofela le mola o felletseng.

Litšiea tsa offsetting

Tsamaisa likholomo ka ho le letona u sebelisa .offset*lihlopha. Sehlopha se seng le se seng se eketsa karolo e ka ho le letšehali ea kholomo ka kholomo eohle. Ka mohlala, .offset4e tsamaea .span4ka holim'a likholomo tse 'nè.

4
3 ho tloha 2
3 ho tloha 1
3 ho tloha 2
6 tlhophiso 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </ div>

Litšiea tsa Nesting

Ho beha litaba tsa hau ka gridi ea kamehla, eketsa likholomo tse ncha .rowka .span*har'a .span*kholomo e teng. Mela e hlophiloeng e tlameha ho kenyelletsa sehlopha sa likholomo tse kopanyang palo ea likholomo tsa motsoali oa eona.

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

Sistimi ea grid ea metsi

Mohlala oa grid ea mokelikeli o phelang

Sistimi ea grid ea mokelikeli e sebelisa liperesente ho fapana le lipikselse bakeng sa bophara ba likholomo. E na le matla a ho arabela a ts'oanang le sistimi ea rona ea grid e tsitsitseng, e netefatsa likarolo tse nepahetseng bakeng sa liqeto tsa bohlokoa tsa skrineng le lisebelisoa.

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

Mokelikeli oa motheo oa HTML

Etsa mola ofe kapa ofe "mokelikeli" ka ho fetola .rowho .row-fluid. Lihlopha tsa li-column li lula li tšoana hantle, li etsa hore ho be bonolo ho pota-pota pakeng tsa marang-rang a tsitsitseng le a metsi.

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

Ho fokotsa metsi

E sebetsa ka tsela e ts'oanang le e tsitsitseng ea grid system offsetting: eketsa kholomong .offset*efe kapa efe ho fokotsa likholomo tse ngata.

4
4 tlhophiso 4
3 ho tloha 3
3 ho tloha 3
6 ho tloha 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </ div>

Sehlaha sa metsi

Li-grid tsa metsi li sebelisa sehlaha ka tsela e fapaneng: boemo bo bong le bo bong ba litšiea bo lokela ho eketsa litšiea tse 12. Lebaka ke hobane grid ea mokelikeli e sebelisa liphesente, eseng lipikselse, bakeng sa ho beha bophara.

Mokelikeli 12
Mokelikeli 6
Mokelikeli 6
Mokelikeli 6
Mokelikeli 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Mokelikeli 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Mokelikeli 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Mokelikeli 6 </div> 
  9.           <div class = "span6" > Mokelikeli 6 </div> 
  10.         </ div>
  11.       </ div>
  12.       <div class = "span6" > Mokelikeli 6 </div> 
  13.     </ div>
  14.   </ div>
  15. </ div>

Libopeho

Sebopeho se tsitsitseng

E fana ka sebopeho se tloaelehileng sa bophara bo tsitsitseng (le se arabelang ka boikhethelo) se <div class="container">hlokahalang feela.

  1. <'mele>
  2.   <div class = "setshelo" > 
  3.     ...
  4.   </ div>
  5. </ mmele>

Sebopeho sa mokelikeli

Theha leqephe le nang le mokelikeli, le nang le <div class="container-fluid">likholomo tse peli ka -e ntle bakeng sa lits'ebetso 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>

Moqapi o arabelang

E nolofalletsa likarolo tse arabelang

Bulela CSS e arabelang morerong oa hau ka ho kenyelletsa meta tag e nepahetseng le leqephe le eketsehileng la litaele ka har'a <head>tokomane ea hau. Haeba u hlophisitse Bootstrap ho tsoa leqepheng la Customize, u hloka feela ho kenyelletsa meta tag.

  1. <meta name = "viewport" content = "width=sesebediswa-bophara, sekala sa ho qala=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Hlokomela!Bootstrap ha e kenyelle likarolo tse arabelang ka mokhoa o ikhethileng ka nako ena kaha ha se ntho e 'ngoe le e' ngoe e hlokang ho arabela. Sebakeng sa ho khothaletsa bahlahisi ho tlosa tšobotsi ena, re bona ho le molemo ho e nolofalletsa ha ho hlokahala.

Mabapi le Bootstrap e arabelang

Lisebelisoa tse arabelang

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
Pontšo e kholo 1200px ho ea holimo 70px 30px
Ea kamehla 980px ho ea holimo 60px 20px
Matlapa a setšoantšo 768px le holimo 42px 20px
Mehala ho matlapa 767px le ka tlase Litšiea tsa metsi, ha ho bophara bo tsitsitseng
Mehala 480px le ka tlase Litšiea tsa metsi, ha ho bophara bo tsitsitseng 
  1. /* desktop e kholo */
  2. @media ( min - width : 1200px ) { ... }     
  3.  
  4. /* Letlapa la litšoantšo ho sebopeho sa naha le komporo */
  5. @media ( min - width : 768px ) le ( max - width : 979px ) { ... }        
  6.  
  7. /* Fono ea sebopeho sa naha ho ea ho letlapa la litšoantšo */
  8. @media ( max - wide : 767px ) { ... }     
  9.  
  10. /* Mehala ea naha le tlase */
  11. @media ( max - wide : 480px ) { ... }

Lihlopha tsa lisebelisoa tse arabelang

Bakeng sa nts'etsopele e potlakileng ea ho sebelisa mehala, sebelisa litlelase tsena tsa lisebelisoa ho bonts'a le ho pata litaba ka sesebelisoa. Ka tlase ke tafole ea lihlopha tse fumanehang le phello ea tsona ho sebopeho sa potso ea media (e ngotsoeng ke sesebelisoa). Li ka fumanoa ho responsive.less.

Sehlopha Mehala767px le ka tlase Matlapa979px ho isa ho 768px Lisebelisoa tsa desktopEa kamehla
.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

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. Lisebelisoa tse arabelang ha lia lokela ho sebelisoa le litafole, 'me ka hona ha li tšehetsoe.

Teko ea tlhahlobo ea lisebelisoa tse arabelang

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