Go dira sefala

Bootstrap e agilwe godimo ga keriti ya dikholomo tše 12 yeo e arabelago. Re bile re akaretša dipeakanyo tša bophara bjo bo sa fetogego le bja go seela bjo bo theilwego godimo ga tshepedišo yeo.

E nyaka HTML5 doctype

Bootstrap e dira tšhomišo ya dielemente tša HTML le dithoto tša CSS tšeo di nyakago tšhomišo ya doctype ya HTML5. Kgonthiša gore o e akaretša mathomong a letlakala le lengwe le le lengwe la Bootstrapped mo protšekeng ya gago.

<!MOHUTA WA TLHAKO html>
<html lang = "en" > 
  ...
</html>

Typography le dikgokagano

Ka gare ga faele ya scaffolding.less , re beakanya pontšho ya motheo ya lefase ka bophara, go thaepa, le mekgwa ya kgokagano. Ka go lebanya, re:

Tlosa margin ka 'mele
Beha background-color: white;kabody
Šomiša @baseFontFamily, @baseFontSize, le @baseLineHeightdika bjalo ka motheo wa rena wa go thaepa
Beakanya mmala wa kgokagano ya lefase ka bophara ka @linkColorgomme o diriše methalo ya kgokagano fela go:hover

Seta botjha ka Normalize

Go tloga go Bootstrap 2, go beakanya gape ga setšo ga CSS go hlagoletše go dira tšhomišo ya dielemente go tšwa go Normalize.css , e lego projeke ya Nicolas Gallagher yeo gape e fago maatla go HTML5 Boilerplate .

Seta se sefsa se sa dutše se ka hwetšwa go reset.less , eupša ka dielemente tše dintši tšeo di tlošitšwego bakeng sa go ba boripana le go nepagala.

12.

Tshepedišo ya keriti ya go se fetoge yeo e filwego bjalo ka karolo ya Bootstrap ke keriti ya 940px-ya bophara, ya dikholomo tše 12 .

E bile e na le diphetogo tše nne tše di arabelago bakeng sa didirišwa tše di fapa-fapanego le diphetho: mogala, seswantšho sa letlapa, ponagalo ya naga ya tafola le di-desktop tše dinyenyane, le di-desktop tše dikgolo tša skrine se sephara.

<div sehlopha = "moleng" > 
  <div sehlopha = "span4" > ... </div> 
  <div sehlopha = "span8" > ... </div> 
</div> e

Bjalo ka ge go bontšhitšwe mo, peakanyo ya motheo e ka hlolwa ka "dikholomo" tše pedi, ye nngwe le ye nngwe e akaretša palo ya dikholomo tše 12 tša motheo tšeo re di hlalošitšego bjalo ka karolo ya tshepedišo ya rena ya keriti.

Go lefela dikholomo

4 offset 4.

3 offset 3.

8 offset 4.

<div sehlopha = "moleng" > 
  <div sehlopha = "span4" > ... </div> 
  <div sehlopha = "span4 offset4" > ... </div> 
</div> e

Dikholomo tša go bea dihlaga

Ka tshepedišo ya keriti ya go se fetoge (yeo e sego ya seela) ka go Bootstrap, go bea dihlaga go bonolo. Go tsenya diteng tša gago, e no oketša ye mpsha .rowle sete ya .span*dikholomo ka gare ga .span*kholomo ye e lego gona.

Mohlala

Methaladi ye e tsentšwego ka gare e swanetše go akaretša sete ya dikholomo tšeo di tlaleletšago go palo ya dikholomo tša motswadi wa yona. Go fa mohlala, .span3dikholomo tše pedi tše di tsentšwego ka gare ga sehlaga di swanetše go bewa ka gare ga .span6.

Maemo a 1 a kholomo

Maemo a 2

<div sehlopha = "moleng" > 
  <div sehlopha = "span12" > 
    Maemo a 1 a kholomo
    <div sehlopha = "moleng" > 
      <div sehlopha = "span6" > Maemo a 2 </div> 
      <div sehlopha = "span6" > Maemo a 2 </div> 
    </div> e
  </div> e
</div> e

Dikholomo tša seela

12.

Diphesente, e sego dipiksele

Tshepedišo ya keriti ya seela e šomiša diphesente bakeng sa bophara bja dikholomo go e na le dipiksele tše di sa fetogego. E bile e na le diphetogo tše di swanago tša go arabela le tshepedišo ya rena ya keriti ye e sa fetogego, go netefatša dikarolo tše di swanetšego tša diphetho tša skrine sa senotlelo le didirišwa.

Methaladi ya seela

Dira gore mothalo le ge e le ofe seela seela feela ka go fetogela .rowgo .row-fluid. Dikholomo di dula di swana tlwaa, di dira gore e be super thwii go flip magareng ga dipeakanyo tše di sa fetogego le tša seela.

Go swaya

<div sehlopha = "mola-seela" > 
  <div sehlopha = "span4" > ... </div> 
  <div sehlopha = "span8" > ... </div> 
</div> e

Go bea dihlaga tša seela

Go beakanya dihlaga ka digridi tša seela go fapane gannyane: palo ya dikholomo tše di tsentšwego ka gare ga dihlaga ga e hloke go swana le motswadi. Go e na le moo, dikholomo tša gago di bewa gape maemong a mangwe le a mangwe ka gobane mothalo wo mongwe le wo mongwe o tšea 100% ya kholomo ya motswadi.

Seela sa 12.

Seela sa 6.

<div sehlopha = "mola-seela" > 
  <div sehlopha = "span12" > 
    Maemo a 1 a kholomo
    <div sehlopha = "mola-seela" > 
      <div sehlopha = "span6" > Maemo a 2 </div> 
      <div sehlopha = "span6" > Maemo a 2 </div> 
    </div> e
  </div> e
</div> e

E feto-fetogago	Boleng bja go se fetoge	Tlhalošo
`@gridColumns`	12.	Palo ya dikholomo
`@gridColumnWidth`	60px e le	Bophara bja kholomo ye nngwe le ye nngwe
`@gridGutterWidth`	20px e le	Sebaka se sebe magareng ga dikholomo
`@siteWidth`	Computed palo yohle ya dikholomo tsohle le gutters	E bala palo ya dikholomo le di-gutter go beakanya bophara bja `.container-fixed()`mixin

Diphetogo ka LESS

E agilwe ka gare ga Bootstrap ke diphetogo tše mmalwa tša go tlwaetša tshepedišo ya keriti ya 940px ya go se fetoge, yeo e ngwadilwego ka mo godimo. Diphetogo ka moka tša keriti di bolokilwe ka gare ga diphetogo.less.

Tsela ya go ikgethela

Go fetoša keriti go ra go fetoša @grid*diphetogo tše tharo le go kgoboketša gape Bootstrap. Fetoša diphetogo tša keriti ka go diphetogo.less gomme o šomiše ye nngwe ya ditsela tše nne tše di ngwadilwego go kgoboketša gape . Ge o oketša dikholomo tše dingwe, kgonthiša gore o oketša CSS ya tšeo di lego ka gare ga grid.less.

Go dula o arabela

Tlwaetšo ya keriti e šoma fela maemong a go se fetoge, keriti ya 940px. Go hlokomela dikarolo tše di arabelago tša Bootstrap, o tla swanelwa ke go tlwaetša digridi ka go responsive.less.

Peakanyo ye e sa fetogego

Peakanyo ya go se fetoge le ye bonolo ya 940px-ka bophara, yeo e tsepamego bakeng sa mo e ka bago weposaete efe goba efe goba letlakala leo le filwego ke e tee <div class="container">.

<mmele>
  <div sehlopha = "setshelo" > 
    ...
  </div> e
</mmele>

Peakanyo ya seela

<div class="container-fluid">e fa sebopego sa letlakala se se fetofetogago, bophara bja min- le max, le bara ya ka thoko ya letsogo le letshadi. E kgolo bakeng sa ditiriso tse dingwe le docs.

<div sehlopha = "setshelo-seela" > 
  <div sehlopha = "mola-seela" > 
    <div sehlopha = "span2" > 
      <!--Diteng tša bara ya ka thoko-->
    </div> e
    <div sehlopha = "span10" > 
      <!--Diteng tša mmele-->
    </div> e
  </div> e
</div> e

Didirišwa tše di arabelago

Seo ba se dirago

Dipotšišo tša boraditaba di dumelela CSS ya tlwaelo yeo e theilwego godimo ga maemo a mmalwa—ditekanyo, bophara, mohuta wa pontšho, bjalobjalo—eupša gantši e lebiša tlhokomelo go dikologa min-widthle max-width.

Fetoša bophara bja kholomo ka gare ga keriti ya rena
Stack elements go e na le go phaphamala kae le kae moo go nyakegago
Fetoša bogolo bja dihlogo le sengwalwa gore di be tša maleba kudu go didirišwa

Diriša dipotšišo tša boraditaba ka maikarabelo le fela bjalo ka mathomo go batheeletši ba gago ba sellathekeng. Bakeng sa diprotšeke tše kgolo, dira nagana ka metheo ya khoutu ye e ineetšego e sego magato a dipotšišo tša boraditaba.

Didirišwa tše di thekgwago

Bootstrap e thekga dipotšišo tše mmalwa tša methopo ya ditaba ka faeleng e tee go thuša go dira gore diprotšeke tša gago di swanelege kudu go didirišwa tše di fapanego le diphetho tša skrine. Se se akareditšwego ke se:

Leibole	Bophara ba peakanyo	Bophara ba kholomo	Bophara ba gutter
Di-smartphone	480px le ka tlase	Dikholomo tša seela, ga go na bophara bjo bo sa fetogego
Di-smartphone go ya go matlapa	767px le ka tlase	Dikholomo tša seela, ga go na bophara bjo bo sa fetogego
Matlapa a setšoantšo	768px le go feta	42px e le	20px e le
Hlokomologa	980px le go ya godimo	60px e le	20px e le
Pontšo e kgolo	1200px le go ya godimo	70px e le	30px e le

E hloka meta tag

Go netefatša gore didirišwa di bontšha matlakala ao a arabelago gabotse, akaretša leswao la meta la lefelo la go lebelela.

<meta lebitso = "viewport" dikahare = "bophara = sesebediswa-bophara, pele-sekaleng = 1.0" >

Go šomiša dipotšišo tša boraditaba

Bootstrap ga e akaretše ka go iketla dipotšišo tše tša methopo ya ditaba, eupša go di kwešiša le go di tlaleletša go bonolo kudu gomme go nyaka peakanyo e nyenyane. O na le dikgetho tše mmalwa tša go akaretša dikarolo tše di arabelago tša Bootstrap:

Diriša phetolelo ye e arabelago ye e kgobokeditšwego, bootstrap-responsive.css
Oketša @import "responsive.less" gomme o kgoboketše Bootstrap gape
Fetoša le go kgoboketša gape responsive.less bjalo ka faele ye e arogilego

Ke ka baka la’ng o sa fo e akaretša? Go bolelwa therešo, ga se dilo ka moka tšeo di swanetšego go arabela. Go e na le go kgothaletša bahlami go tloša tšobotsi ye, re nagana gore go kaone go e kgontšha.

  // Difouno tša landscape le fase
  @media ( max - bophara : 480px ) { ... } .     
 
  // Landscape fono ho potreite letlapa
  @media ( max - bophara : 768px ) { ... } .     
 
  // Portrait letlapa ho landscape le komporong
  @media ( min - bophara : 768px ) le ( max - bophara : 980px ) { ... }        
 
  // Desktop e kgolo
  @media ( min - bophara : 1200px ) { .. } .

Diklase tša utility tše di arabelago

Ke eng

Bakeng sa tlhabollo ya ka pela yeo e nago le bogwera bja sellathekeng, diriša diklase tše tša motheo tša mohola bakeng sa go bontšha le go uta dikagare ka sedirišwa.

O swanetše go diriša neng

Diriša motheong o lekanyeditšwego gomme o efoge go hlama diphetolelo tše di fapanego ka mo go feletšego tša lefelo le tee. Go e na le moo, di diriše go tlaleletša thero ya sedirišwa se sengwe le se sengwe.

Go fa mohlala, o ka bontšha <select>elemente ya nav go dipeakanyo tša sellathekeng, eupša e sego go matlapa goba di-desktop.

Diklase tša thekgo

Bontšhitšwe mo ke tafola ya diklase tšeo re di thekgago le mafelelo a tšona go peakanyo ya potšišo ya methopo ya ditaba ye e filwego (yeo e swailwego ka sedirišwa). Di ka hwetšwa go responsive.less.

Phapoši	Difouno480px le ka tlase	Matlapa767px le ka tlase	Di-desktop768px le go feta
`.visible-phone`	Go bonagala	Fihlilwe	Fihlilwe
`.visible-tablet`	Fihlilwe	Go bonagala	Fihlilwe
`.visible-desktop`	Fihlilwe	Fihlilwe	Go bonagala
`.hidden-phone`	Fihlilwe	Go bonagala	Go bonagala
`.hidden-tablet`	Go bonagala	Fihlilwe	Go bonagala
`.hidden-desktop`	Go bonagala	Go bonagala	Fihlilwe

Taba ya teko

Fetoša bogolo bja sephephediši sa gago goba o laetše go didirišwa tše di fapanego go leka di-clase tše di lego ka mo godimo.

E bonagala go...

Mogala✔ Mogala
Letlapa✔ Letlapa
Desktop ya go šoma✔ Desktop ya go šoma

E utilwe godimo ga...

Mogala✔ Mogala
Letlapa✔ Letlapa
Desktop ya go šoma✔ Desktop ya go šoma