Échafaudages

Bootstrap bɛ jɔ jatebɔlan 12 kan min bɛ jaabi di. An ye labɛncogo jɔlenw ni jilamaw fana Dòn a la minnu sinsinnen bɛ o cogoya kan.

A bɛ HTML5 doctype de wajibiya

Bootstrap bɛ baara Kɛ ni HTML fɛnw ni CSS nafaw ye minnu bɛ HTML5 doctype baara de wajibiya. Aw ye aw jija k’a don Bootstrapped ɲɛ kelen-kelen bɛɛ daminɛ na aw ka porozɛ kɔnɔ.

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

Typografi ani ladɛrɛsiw

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

Aw bɛ margin bɔ farikolo la
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

Segin ka kɛ Normalize fɛ

Kabini Bootstrap 2 la, CSS laadalata labɛnni jiginna ka baara kɛ ni fɛnw ye minnu bɛ bɔ Normalize.css , o ye porozɛ ye Nicolas Gallagher fɛ min fana bɛ fanga di HTML5 Boilerplate ma .

Segin kura bɛ se ka sɔrɔ hali bi reset.less kɔnɔ , nka ni fɛn caman bɔra a la walasa ka surunya ani ka tiɲɛ.

1 ye

4 ye

8 ye

6. 6

12 ye

Grid system default min dira Bootstrap kɔnɔ, o ye grid ye min bonya ye 940px ye, a bɛ 12-column grid .

A fana bɛ ni jaabi-yɔrɔ naani ye minɛn suguya caman na ani jatebɔcogo: telefɔni, tablɛti ja, tablɛti cogoya ani tabali misɛnninw, ani tabali belebelebaw.

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

I n'a fɔ a jiralen bɛ cogo min na yan, layidu jɔnjɔn dɔ bɛ Se ka Dabɔ ni "kolon" fla ye, u kelen-kelen bɛɛ bɛ dakun jusigilan 12 hakɛ dɔ Dabɔ an ye minnu ɲɛfɔ i n'a fɔ an ka jatebɔ-sigida dɔ.

Kolonw (offset) kɛli

4 ye

4 bɛrɛbɛrɛ 4

3 bɛrɛbɛrɛ 3

8 offset 4 ye

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

Nesting kuluw

Ni static (non-fluid) grid system ye Bootstrap kɔnɔ, nesting ka nɔgɔn. Walasa k’i ka kɔnɔkow labɛn, i bɛ kulu kura .rowni kulu dɔ fara dɔrɔn .span*kulu dɔ kɔnɔ min bɛ yen .span*.

Misaliya

Nested rows ka kan ka kuluw kulu dɔ Sɔrɔ minnu bɛ Fàra ɲɔgɔn kan ka Kɛ a bangebaga kuluw hakɛ ye. Misali la, kulu fila minnu bɛ sigi ɲɔgɔn .span3kan, olu ka kan ka bila .span6.

Nivo 1 ka kulu

Nivo 2nan

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

Fluidw kolomayɔrɔw

1 ye

4 ye

8 ye

6. 6

12 ye

Kɛmɛsarada la, pixel (piksɛl) tɛ

Fluid grid system bɛ baara kɛ ni kɛmɛsarada ye kolonw bonya kama sanni ka kɛ pixel fixes ye. A fana bɛ ni jaabi caman ɲɔgɔnna ye i n’a fɔ an ka grid fixe system, o bɛ a to proportion bɛnnenw ka ɲɛsin key screen resolutions ni minɛnw ma.

Fluidw ka jiriw

Aw bɛ jirisun o jirisun kɛ ji ye dɔrɔn ni aw bɛ fɛn caman Changer .rowka kɛ .row-fluid. Kolonw bɛ to u cogo kelen na tigitigi, o b’a to a bɛ super straightforward kɛ ka flip kɛ fixe ni fluid layouts cɛ.

Markup (Marka) ye

<div kalasi = "lajɛ-ji" > 
  <div kalasi = "span4" > ... </div> 
  <div kalasi = "span8" > ... </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 ma. O nɔ na, i ka kuluw bɛ Lasegin nivo kelen-kelen bɛɛ 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

Yɛlɛma-yɛlɛma	Nafa min bɛ sɔrɔ a daminɛ na	Cogojirali
`@gridColumns`	12 ye	Kolonw hakɛ
`@gridColumnWidth`	60px ye	Kolon kelen-kelen bɛɛ bonya
`@gridGutterWidth`	20px ye	Yɔrɔ jugu bɛ kolonw ni ɲɔgɔn cɛ

Yɛlɛma minnu bɛ kɛ LESS kɔnɔ

Built into Bootstrap ye fɛn damadɔ ye minnu bɛ se ka 940px grid system default ladilan, minnu sɛbɛnnen don sanfɛ. Jateminεw bεε bε mara bεnkanw na.less.

Cogo min na a bɛ se ka kɛ ka kɛɲɛ ni mɔgɔw sago ye

Grid (jatebɔ) bεε bεε bε Yεlεma cogo min na, o kɔrɔ ye ka fɛn saba @grid*bεε bε Yεlεma ani ka Bootstrap labɛn kokura. fɛn caman Changer grid variables dans variables.less ani ka baara kɛ ni fɛɛrɛ naani dɔ ye minnu sɛbɛnnen don walasa ka ɲɔgɔn lajɛ kokura . N'i bɛ kulu wɛrɛw fara a kan, i jija ka CSS fara a kan minnu bɛ grid.less kɔnɔ.

Ka to jaabi la

Grid customization bɛ baara kɛ dɔrɔn nivo default la, n’o ye 940px grid ye. Walasa ka Bootstrap jaabi fanw mara, i bɛna gridw fana ladamu responsive.less kɔnɔ.

Layout fixe

A daminɛ na ani a nɔgɔn 940px-wide, centered layout for just about any site web or page provided by a single <div class="container">.

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

Fluidw labɛncogo

<div class="container-fluid">bɛ ɲɛw sigicogo sɛgɛsɛgɛlen di, min- ani max-widths, ani kininbolo fan dɔ. A ka ɲi kosɛbɛ apps ani docs ma.

<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

Minɛn minnu bɛ jaabi di

U bɛ min kɛ

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ɔni hakilitigiw	480px ani a duguma	Kolonw jilamaw, u bonya jɔlen tɛ
Telefɔni hakilitigiw 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

A bɛ meta tag de wajibiya

Walasa ka a jira ko minɛnw bɛ jaabi ɲɛw jira ka ɲɛ, i ka viewport meta tag don a la.

<meta tɔgɔ = "lajɛyɔrɔ" kɔnɔkow = "bonya=minɛn-bonya, daminɛ-skala=1.0" >

Baara kɛ ni kunnafonidilanw ɲininkaliw ye

Bootstrap tɛ nin kunnafonidilan ɲininkali ninnu don a yɛrɛma, nka u faamuyali n’u farali ka nɔgɔn kosɛbɛ wa a bɛ sigicogo fitinin de wajibiya. Sugandili damadɔ bɛ aw bolo ka Bootstrap jaabiw don a kɔnɔ:

Baara kɛ ni jaabiw labɛncogo ye, n’o ye bootstrap-responsive.css ye
Aw bɛ @import "responsive.less" fara a kan ani ka Bootstrap labɛn kokura
Ladilikan ani ka responsive.less labɛn kokura i n’a fɔ filen danfaralen

Mun na i tɛna a don a kɔnɔ dɔrɔn? Tiɲɛ fɔ, fɛn bɛɛ man kan ka kɛ mɔgɔ ye min bɛ se ka jaabi di. 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ɛ.

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

Nafama kalan minnu bɛ jaabi di

U ye mun ye

Walasa ka mobili-friendly yiriwali teliya, baara kɛ ni nin nafama-kalanso jɔnjɔnw ye walasa ka kunnafoniw jira ani k’u dogo minɛnw fɛ.

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.

Misali la, i bɛ se <select>ka nav yɔrɔ dɔ jira mobili layidu talenw kan, nka i tɛ se ka tablɛtiw walima tabali kan.

Dɛmɛn kalanw

A jiralen bɛ yan, an bɛ kalan minnu dɛmɛ ani u nɔfɛkow kunnafonidilan ɲininkali labɛncogo dilen dɔ kan (min tɔgɔ sɛbɛnnen don ni minɛn ye). U bɛ se ka sɔrɔ responsive.less.

Kilasi	Telefɔniw480px ani a duguma	Furakisɛw767px ani a duguma	Burukina Faso768px ani a sanfɛ
`.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

Kɔrɔbɔ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

Dugukolo kan cogoyaw CSS lasegincogo, sɛbɛnnikɛcogo ani ɲɔgɔndanw kama

A bɛ HTML5 doctype de wajibiya

Typografi ani ladɛrɛsiw

Segin ka kɛ Normalize fɛ

Default grid system 12 kuluw ni jaabiw tigɛli

Kolonw (offset) kɛli

Nesting kuluw

Misaliya

Fluid grid system 12 jaabi, kɛmɛsarada la kolomaw

Fluidw kolomayɔrɔw

Kɛmɛsarada la, pixel (piksɛl) tɛ

Fluidw ka jiriw

Markup (Marka) ye

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

Grid ka ladamuni

Yɛlɛma minnu bɛ kɛ LESS kɔnɔ

Cogo min na a bɛ se ka kɛ ka kɛɲɛ ni mɔgɔw sago ye

Ka to jaabi la

Layouts Basic templates ka webpages dilan

Layout fixe

Fluidw labɛncogo

Responsive design Media ɲininkaliw kɛ minɛn suguya caman na ani resolutions

U bɛ min kɛ

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

A bɛ meta tag de wajibiya

Baara kɛ ni kunnafonidilanw ɲininkaliw ye

Nafama kalan minnu bɛ jaabi di

U ye mun ye

A ka kan ka baara kɛ waati min na

Dɛmɛn kalanw

Kɔrɔbɔli kɛcogo

A bɛ ye kan...

A dogolen bɛ...