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.

1. 1.

12.

Tshepedišo ya keriti ya go se fetoge yeo e filwego ka go Bootstrap e šomiša dikholomo tše 12 tšeo di tšweletšago ka bophara bja 724px, 940px (ya go se fetoge ntle le CSS ye e arabelago ye e akaretšwago), le 1170px. Ka fase ga dipono tša go lebelela tša 767px, dikholomo di fetoga seela gomme di kgoboketša thwii.

<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 bea diteng tša gago, o 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 = "span6" > 
    Kholomo ya Maemo a 1
    <div sehlopha = "moleng" > 
      <div sehlopha = "span3" > Maemo a 2 </div> 
      <div sehlopha = "span3" > Maemo a 2 </div> 
    </div> e
  </div> e
</div> e

Dikholomo tša seela

1. 1.

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

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 ya go arabela yeo 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 : 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

What are they

For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class	Phones 480px and below	Tablets 767px and below	Desktops 768px and above
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

Test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

Phone✔ Mogala
Tablet✔ Letlapa
Desktop✔ 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