Sefala · Twitter Bootstrap ka polelo ya Sepedi

E nyaka HTML5 doctype

Bootstrap e dira tšhomišo ya dielemente tše itšego tša HTML le dithoto tša CSS tšeo di nyakago tšhomišo ya doctype ya HTML5. E akaretše mathomong a diprotšeke tša gago ka moka.

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

Typography le dikgokagano

Bootstrap e beakanya pontšho ya motheo ya lefase ka bophara, thaepo, le mekgwa ya kgokagano. Ka go lebanya, re:

Tlosa marginka mmele
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

Mekgwa ye e ka hwetšwa ka gare ga scaffolding.less .

Seta botjha ka Normalize

Ka Bootstrap 2, boloko ya kgale ya go seta gape e lahlilwe go thekga Normalize.css , e lego projeke ya Nicolas Gallagher yeo gape e fago maatla go HTML5 Boilerplate . Le ge re diriša bontši bja Normalize ka gare ga rena reset.less , re tlošitše dielemente tše dingwe ka go lebanya bakeng sa Bootstrap.

Mohlala wa keriti o phelang

The default Bootstrap grid system utilizes 12 columns , etsa bakeng sa 940px setshelo sephara ntle le litšobotsi arabela kgontshitsweng. Ka faele ya CSS ye e arabelago ye e okeditšwego, keriti e tlwaela go ba 724px le 1170px ka bophara go ya ka lefelo la gago la go lebelela. Ka fase ga dipono tša go lebelela tša 767px, dikholomo di fetoga seela gomme di kgoboketša thwii.

5. 5.

HTML ya keriti ya motheo

Bakeng sa peakanyo ye bonolo ya dikholomo te pedi, hlama a .rowgomme o tlaleletše palo ya maleba ya .span*dikholomo. Ka ge ye e le keriti ya dikholomo tše 12, ye nngwe le ye nngwe .span*e akaretša palo ya dikholomo tšeo tše 12, gomme e swanetše go oketša ka mehla go fihla go 12 bakeng sa mothalo wo mongwe le wo mongwe (goba palo ya dikholomo ka go motswadi).

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

Ge re filwe mohlala wo, re na .span4le le .span8, go dira gore go be le dikholomo tše 12 tša palomoka le mothalo wo o feletšego.

Go lefela dikholomo

Suthiša dikholomo go ya go la nngele o šomiša .offset*diklase. Sehlopha se sengwe le se sengwe se oketša mošito wa nngele wa kholomo ka kholomo ka moka. Go fa mohlala, e .offset4sepela .span4godimo ga dikholomo tše nne.

3 offset 2.

3 offset 1.

3 offset 2.

6 offset 3.

<div sehlopha = "moleng" > 
  <div sehlopha = "span4" > ... </div> 
  <div sehlopha = "span3 offset2" > ... </div> 
</div> e

Dikholomo tša go bea dihlaga

Go tsenya diteng tša gago ka keriti ya go se fetoge, oketša ye mpsha .rowle sete ya .span*dikholomo ka gare ga .span*kholomo ye e lego gona. 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.

Mohlala

.span4Mo dikholomo tše pedi tše di tsentšwego di beilwe ka gare ga .span8.

Maemo a 1 a kholomo

Maemo a 2

<div sehlopha = "moleng" > 
  <div sehlopha = "span9" > 
    Kholomo ya Maemo a 1
    <div sehlopha = "moleng" > 
      <div sehlopha = "span6" > Maemo a 2 </div> 
      <div sehlopha = "span3" > Maemo a 2 </div> 
    </div> e
  </div> e
</div> e

Mohlala wa keriti ya seela se phelang

Tshepedišo ya keriti ya seela e šomiša diphesente go e na le dipiksele bakeng sa bophara bja dikholomo. E na le bokgoni bjo bo swanago bja go arabela bjalo ka 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.

12.

Basic mokelikeli keriti HTML

Dira mothalo ofe goba ofe "seela" ka go fetogela .rowgo .row-fluid. Diklase tša dikholomo di dula di swana tlwaa, e dira gore go be bonolo go phetla magareng ga digridi tše di sa fetogego le tše di seela.

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

Go lefela ga seela

E šoma ka tsela ye e swanago le ya go lefela tshepedišo ya keriti ye e sa fetogego: oketša .offset*go kholomo efe goba efe go lefela ka dikholomo tše ntši tšeo.

4 offset 4.

3 offset 3.

6 offset 6.

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

Go bea dihlaga tša seela

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

Seela sa 12.

Seela 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

Peakanyo ye e sa fetogego

E fana ka peakanyo ye e tlwaelegilego ya bophara bjo bo sa fetogego (le bjo bo arabelago ka boikgethelo) ka go <div class="container">nyakega fela.

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

Peakanyo ya seela

Hlama letlakala la seela, la dikholomo tše pedi ka <div class="container-fluid">—e kgolo bakeng sa dikgopelo le ditokomane.

<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

Go kgontšha dikarolo tše di arabelago

Bulela CSS ye e arabelago mo protšekeng ya gago ka go akaretša leswao la meta la maleba le letlakala la setaele la tlaleletšo ka gare ga <head>la tokumente ya gago. Ge e le gore o kgobokeditše Bootstrap go tšwa letlakaleng la Tlwaetša, o swanetše go akaretša fela leswao la meta.

<meta lebitso = "viewport" dikahare = "bophara = sesebediswa-bophara, pele-sekaleng = 1.0" >  
<link href = "matlotlo / css / bootstrap-karabelo.css" rel = "letlakala la setaele" >

Dihlogo godimo! Bootstrap ga e akaretše dikarolo tše di arabelago ka go ikemela ka nako ye ka ge e 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 e nagana gabotse go e kgontšha ge go nyakega.

Mabapi le Bootstrap e arabelang

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
Difouno	480px le ka tlase	Dikholomo tša seela, ga go na bophara bjo bo sa fetogego
Difouno 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

/* Difouno tša landscape le fase */
@media ( max - bophara : 480px ) { ... } .     
 
/* Landscape fono ho potreite letlapa */
@media ( max - bophara : 767px ) { ... } .     
 
/* Letlapa la setšoantšo ho landscape le komporong */
@media ( min - bophara : 768px ) le ( max - bophara : 979px ) { ... }        
 
/* Desktop e kgolo */
@media ( min - bophara : 1200px ) { ... } .

Diklase tša utility tše di arabelago

Bakeng sa tlhabollo ya ka pela yeo e nago le bogwera bja sellathekeng, diriša diklase tše tša mohola bakeng sa go bontšha le go uta dikagare ka sedirišwa. Ka fase ke tafola ya diklase tše di lego gona le mafelelo a tšona go peakanyo ya potšišo ya boraditaba ye e filwego (yeo e swailwego ka sedirišwa). Di ka hwetšwa go responsive.less.

Phapoši	Difouno767px le ka tlase	Matlapa979px go ya go 768px	Di-desktopHlokomologa
`.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

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.

Karabelo utilities teko nyeoe

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

E bonagala go...

Maswao a go hlahloba a matala a laetša gore sehlopha se a bonagala ka go lefelo la gago la bjale la go lebelela.

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

E utilwe godimo ga...

Mo, maswao a go hlahloba a matala a laetša gore sehlopha se utilwe ka go lefelo la gago la bjale la go lebelela.

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

Go dira sefala

Dipeakanyo tša lefase ka bophara