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.

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.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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 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.

Litšiea tsa offsetting

4 tlhophiso 4

3 ho tloha 3

8 ho tloha 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</ 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

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

Litšiea tsa metsi

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>

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

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

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
`@siteWidth`	Kakaretso e bakiloeng ea litšiea tsohle le li-gutters	E bala palo ea litšiea le li-gutter ho beha bophara ba `.container-fixed()`motsoako

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

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

Sebelisa mofuta o hlophisitsoeng oa karabelo, bootstrap-responsive.css
Kenya @import "responsive.less" 'me u khutlisetse Bootstrap
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 ) { ... }     
 
  // 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 : 980px ) { ... }        
 
  // desktop e kholo
  @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	E patiloe	E patiloe
`.visible-tablet`	E patiloe	Tse bonahalang	E patiloe
`.visible-desktop`	E patiloe	E patiloe	Tse bonahalang
`.hidden-phone`	E patiloe	Tse bonahalang	Tse bonahalang
`.hidden-tablet`	Tse bonahalang	E patiloe	Tse bonahalang
`.hidden-desktop`	Tse bonahalang	Tse bonahalang	E patiloe

Nyeoe ea teko

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

E bonahala ho...

Mohala✔ Fono
Letlapa✔ Letlapa
Desktop✔ Desktop

E patiloe ho...

Mohala✔ Fono
Letlapa✔ Letlapa
Desktop✔ Desktop