Échafaudage · Twitter ka baarakɛminɛnw bamanankan na

A bɛ HTML5 doctype de wajibiya

Bootstrap bɛ baara Kɛ ni HTML fɛn dɔw ye ani CSS nafolo minnu bɛ HTML5 doctype baara de wajibiya. Aw k’a don aw ka porozew bɛɛ daminɛ na.

<!DOCTYPE html> ye
<html lang = "en" > 
  ...
</html>

Typografi ani ladɛrɛsiw

Bootstrap bɛ diɲɛ jiracogo jɔnjɔnw, sɛbɛnnikɛcogo ani ɲɔgɔndan kɛcogoyaw sigi sen kan. Kɛrɛnkɛrɛnnenya la, anw:

Aw marginbɛ a bɔ farikolo kan
Set background-color: white;kan ka ...body
Baara kɛ ni @baseFontFamily, @baseFontSize, ani @baseLineHeightfɛnw ye i n’a fɔ an ka sɛbɛnnikɛcogo basigilen
Set global link color via @linkColorani ka link underlines dɔrɔn de kɛ:hover

O cogoyaw bɛ se ka sɔrɔ scaffolding.less kɔnɔ .

Segin ka kɛ Normalize fɛ

Ni Bootstrap 2 ye, reset bloki kɔrɔ in Bɔra ka Kɛ Normalize.css nafa ye , o ye porozɛ ye Nicolas Gallagher fɛ min fana bɛ HTML5 Boilerplate fanga Di. Hali n’an bɛ Normalize caman Kɛ an ka reset.less kɔnɔ , an ye fɛn dɔw Bɔ kɛrɛnkɛrɛnnenya la Bootstrap kama.

Misali la grid ɲɛnama

Bootstrap grid system default bɛ baara kɛ ni kulu 12 ye , o bɛ kɛ sababu ye ka 940px bonya minɛn dɔ kɛ ni jaabiw kɛcogo ma daminɛ. Ni CSS filen jaabilen farala a kan, grid bɛ ladamu ka kɛ 724px ani 1170px bonya ye ka kɛɲɛ n’i ka filɛlikɛyɔrɔ ye. 767px filɛliyɔrɔw jukɔrɔ, kuluw bɛ kɛ ji ye ani u bɛ ɲɔgɔn dalajɛ jɔlen na.

1 ye

2 ye

3 ye

4 ye

5 ye

9 ye

HTML grid basigilen

Walasa ka kulu fila labɛncogo nɔgɔman sɔrɔ, aw bɛ a da ka kulu .rowhakɛ bɛnnen fara a kan .span*. Komin nin ye jatebɔlan 12 ye, u kelen-kelen bɛɛ .span*bɛ o kulu 12 hakɛ dɔ lamini, wa a ka kan ka fara ɲɔgɔn kan tuma bɛɛ fo ka se 12 ma jirisun kelen-kelen bɛɛ la (walima kulu hakɛ min bɛ bangebaga kɔnɔ).

<div kalasi = "lafiɲɛbɔ" > 
  <div kalasi = "span4" > ... </div> 
  <div kalasi = "span8" > ... </div> 
</div> ye

Ni an ye nin misali in Di, an bɛ .span4ni ani .span8, k’a Kɛ kulu 12 ye k’u bɛɛ lajɛlen Kɛ ani jyɛn dafalen.

Kolonw (offset) kɛli

Aw bɛ kuluw wuli ka taa kinin fɛ ni .offset*kalanw ye. Kalanso kelen-kelen bɛɛ bɛ dɔ fara kulu dɔ kininbolo fan kan ni kulu kuuru ye. Misali la, .offset4a bɛ taa .span4kulu naani kan.

4 ye

3 bɛrɛbɛrɛ 2

3 bɛrɛbɛrɛ 1

3 bɛrɛbɛrɛ 2

6 offset 3 ye

<div kalasi = "lafiɲɛbɔ" > 
  <div kalasi = "span4" > ... </div> 
  <div kalasi = "span3 bɛrɛbɛrɛ2" > ... </div> 
</div> ye

Nesting kuluw

Walasa k’i ka kɔnɔkow nest ni grid default ye, i ka kulu kura .rowni kulu dɔ fara kulu .span*dɔ kan min bɛ yen .span*. Nested rows ka kan ka kɛ ni kuluw kulu ye minnu bɛ fara a bangebaga kuluw hakɛ kan.

Misaliya

Yan , .span4kulu fila minnu bɛ sigi a kɔnɔ , olu bɛ bila a kɔnɔ .span8.

Nivo 1 ka kulu

Nivo 2nan

<div kalasi = "lafiɲɛbɔ" > 
  <div kalasi = "span9" > 
    Nivo 1 kulu
    <div kalasi = "lafiɲɛbɔ" > 
      <div kalasi = "span6" > Dakun 2nan </div> 
      <div kalasi = "span3" > Dakun 2nan </div> 
    </div> ye
  </div> ye
</div> ye

Ɲɛnamaya jilama grid misali

Fluid grid system bɛ baara kɛ ni kɛmɛsarada ye pixelw nɔ na kolonw bonya kama. A bɛ ni jaabi seko kelenw ye i n’a fɔ an ka grid fixe system, o bɛ a to a bɛ se ka kɛ cogo bɛnnen na ka ɲɛsin key screen resolutions ni minɛnw ma.

1 ye

4 ye

8 ye

6. 6

12 ye

Basi jilama grid HTML

Aw bɛ jirisun o jirisun kɛ "ji" ye ni aw bɛ fɛn caman Changer .rowka kɛ .row-fluid. Kolon kalanw bɛ to u cogo kelen na tigitigi, o b’a to a ka nɔgɔn ka wuli ka bɔ grid fixes ni fluides cɛ.

<div kalasi = "lajɛ-ji" > 
  <div kalasi = "span4" > ... </div> 
  <div kalasi = "span8" > ... </div> 
</div> ye

Fluid offsetting (jibɔlanw ka ɲɔgɔnfaamu).

A bɛ baara kɛ cogo kelen na ni grid fixe system offsetting ye: fara .offset*koloma o kulu kan walasa ka offset ni o kulu caman ye.

4 ye

4 bɛrɛbɛrɛ 4

3 bɛrɛbɛrɛ 3

6 offset 6 ye

<div kalasi = "lajɛ-ji" > 
  <div kalasi = "span4" > ... </div> 
  <div kalasi = "span4 bɛrɛbɛrɛ2" > ... </div> 
</div> ye

Fɛnɲɛnɛmafagalanw (fluid nesting).

Nesting ni fluid grids bɛ danfara dɔɔnin: nested columns hakɛ man kan ka bɛn bangebaga ka columns hakɛ ma. O nɔ na, kulu kelen-kelen bɛɛ minnu bɛ sigi sen kan, olu bɛ segin u cogo kɔrɔ la bawo jirisun kelen-kelen bɛɛ bɛ 100% ta bangebaga kulu la.

Jilama 12

Jilama 6

<div kalasi = "lajɛ-ji" > 
  <div kalasi = "span12" > 
    Nivo 1 ka kulu
    <div kalasi = "lajɛ-ji" > 
      <div kalasi = "span6" > Dakun 2nan </div> 
      <div kalasi = "span6" > Dakun 2nan </div> 
    </div> ye
  </div> ye
</div> ye

Layout fixe

A bɛ ɲɔgɔndan jɔlen-bonya (ani a bɛ se ka jaabi) labɛn ni <div class="container">wajibiyalen dɔrɔn de ye.

<farikolo>
  <div kalasi = "minɛn" > 
    ...
  </div> ye
</farikolo>

Fluidw labɛncogo

Aw bɛ ɲɛ dɔ dabɔ min bɛ kɛ ni kolosinsinnan fila ye ni <div class="container-fluid">—great for applications and docs.

<div kalasi = "minɛn-ji" > 
  <div kalasi = "lajɛ-ji" > 
    <div kalasi = "span2" > 
      <!--Kɛrɛfɛla kɔnɔkow-->
    </div> ye
    <div kalasi = "span10" > 
      <!--Farakolo kɔnɔkow-->
    </div> ye
  </div> ye
</div> ye

Ka jaabiw kɛcogo ɲɛ

CSS jaabilen da i ka poroze kɔnɔ ni meta tag ɲuman ni stylesheet wɛrɛw don <head>i ka sɛbɛn kɔnɔ. N'i ye Bootstrap labɛn ka Bɔ Customize ɲɛ kan, i ka kan ka meta tag dɔrɔn de Dòn a la.

<meta tɔgɔ = "lajɛyɔrɔ" kɔnɔkow = "bonya=minɛn-bonya, daminɛ-skala=1.0" >  
<link href = "nafolo/css/bootstrap-jaabi.css" rel = "cogo sɛbɛn" >

Kungolow bɛ wuli! Bootstrap tɛ jaabi-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen-falen. Sanni an ka dusu don baarakɛlaw kɔnɔ u ka nin fɛɛrɛ in bɔ yen, an b’a jate ko a ka fisa k’a daminɛ i n’a fɔ a mago bɛ cogo min na.

Jaabi Bootstrap ko la

Media ɲininkaliw bɛ sira Di CSS ladamulen ma ka da cogoya damadɔ kan—hakɛw, bonya, jiracogo suguya, a ɲɔgɔnnaw—nka a ka c’a la, u bɛ sinsin min-widthani max-width.

Kolon bonya ladilan an ka jatebɔlan kɔnɔ
Aw bɛ fɛnw fara ɲɔgɔn kan sanni aw ka panpan yɔrɔ o yɔrɔ a mago bɛ a la
Kumakunw ni sɛbɛnniw bonya caman sɛmɛntiya walasa u ka bɛn minɛnw ma

Baara kɛ ni kunnafonidilanw ɲininkaliw ye ni hakilitigiya ye ani dɔrɔn i n’a fɔ daminɛ i ka telefɔni selilɛri lamɛnbagaw fɛ. Porozɛbaw kama, aw bɛ jateminɛ kɛ kode basigilenw kɛrɛnkɛrɛnnenw na, aw kana jateminɛ kɛ kunnafonidilanw ɲininkaliw layɛrɛw la.

Minɛn minnu bɛ dɛmɛ sɔrɔ

Bootstrap bɛ kunnafonidi ɲininkali damadɔ dɛmɛ dosiye kelen kɔnɔ walasa k’aw dɛmɛ k’aw ka porozew kɛ ka bɛn minɛnw ni ɛkran ɲɛfɔli suguya wɛrɛw ma. Fɛn minnu bɛ a kɔnɔ, olu filɛ nin ye:

Tàamasiyɛn	Layout ka bonya	Kolon bonya	Gutter bonya
Telefɔniw	480px ani a duguma	Kolonw jilamaw, u bonya jɔlen tɛ
Telefɔniw ka taa tablɛtiw la	767px ani a duguma	Kolonw jilamaw, u bonya jɔlen tɛ
Ja tablɛtiw	768px ani a sanfɛ	42px ye	20px ye
Fɔlɔ	980px ani ka tɛmɛ o kan	60px ye	20px ye
Display belebeleba	1200px ani ka tɛmɛ o kan	70px ye	30px ye

/* Landscape telefɔniw ani duguma */
@media ( bonyaba : 480px ) { ... } . _     
 
/* Landscape telefɔni ka portrait tablɛti */
@media ( bonyaba : 767px ) { ... } . _     
 
/* Portrait tablɛti ka landscape ani bureau */
@media ( min bonya : 768px ) ani ( bonyaba : 979px ) { ... } . _ _        
 
/* Bureau belebele */
@media ( min - bonya : 1200px ) { ... } .

Nafama kalan minnu bɛ jaabi di

Walasa ka mobili-friendly yiriwali teliya, baara kɛ ni nin nafama-kalanso ninnu ye walasa ka kunnafoniw jira ani k’u dogo minɛnw fɛ. Kalanso minnu bɛ sɔrɔ ani u nɔfɛkow kunnafonidilan ɲininkali labɛncogo dilen dɔ kan (min tɔgɔ sɛbɛnnen don ni minɛn ye) tabali bɛ duguma. U bɛ se ka sɔrɔ responsive.less.

Kilasi	Telefɔniw767px ani a duguma	Furakisɛw979px ka se 768px ma	Burukina FasoFɔlɔ
`.visible-phone`	A bɛ ye	Dogolen	Dogolen
`.visible-tablet`	Dogolen	A bɛ ye	Dogolen
`.visible-desktop`	Dogolen	Dogolen	A bɛ ye
`.hidden-phone`	Dogolen	A bɛ ye	A bɛ ye
`.hidden-tablet`	A bɛ ye	Dogolen	A bɛ ye
`.hidden-desktop`	A bɛ ye	A bɛ ye	Dogolen

A ka kan ka baara kɛ waati min na

Baara kɛ ni dan ye ani i kana site kelen in bɔcogo wɛrɛw dilan pewu. O nɔ na, baara kɛ n’u ye walasa ka minɛn kelen-kelen bɛɛ jiracogo dafa.

Responsive utilités sɛgɛsɛgɛli kɛcogo

I ka navigatɛri bonya caman sɛmɛntiya walima ka a doni minɛn wɛrɛw kan walasa ka sanfɛkalansow kɔrɔbɔ.

A bɛ ye kan...

Jateminɛ kɛlenw b’a jira ko kalasi bɛ ye i ka sisan filɛlikɛyɔrɔ la.

Telefɔni✔ Telefɔni
Furakisɛ✔ Tablɛti
Burukina Faso✔ Baarakɛminɛnw

A dogolen bɛ...

Yan, taamasiyɛn jɛmanw b’a jira ko kalasi dogolen bɛ i ka sisan jatebɔyɔrɔ la.

Telefɔni✔ Telefɔni
Furakisɛ✔ Tablɛti
Burukina Faso✔ Baarakɛminɛnw

Échafaudages

Duniya bɛɛ ka sigidaw

A bɛ HTML5 doctype de wajibiya

Typografi ani ladɛrɛsiw

Segin ka kɛ Normalize fɛ

Sistɛmu grid default ye

Misali la grid ɲɛnama

HTML grid basigilen

Kolonw (offset) kɛli

Nesting kuluw

Misaliya

Sistɛmu ka grid fluide (jibɔlan grid system).

Ɲɛnamaya jilama grid misali

Basi jilama grid HTML

Fluid offsetting (jibɔlanw ka ɲɔgɔnfaamu).

Fɛnɲɛnɛmafagalanw (fluid nesting).

Layidu talenw

Layout fixe

Fluidw labɛncogo

Dilancogo min bɛ jaabi di

Ka jaabiw kɛcogo ɲɛ

Jaabi Bootstrap ko la

Minɛn minnu bɛ dɛmɛ sɔrɔ

Nafama kalan minnu bɛ jaabi di

A ka kan ka baara kɛ waati min na

Responsive utilités sɛgɛsɛgɛli kɛcogo

A bɛ ye kan...

A dogolen bɛ...