É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ɔ.

  1. <!DOCTYPE html> ye
  2. <html lang = "en" >
  3. ...
  4. </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
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
4 ye
4 ye
4 ye
4 ye
8 ye
6. 6
6. 6
12 ye

Grid system default min bɛ di Bootstrap kɔnɔ, o bɛ baara kɛ ni kulu 12 ye minnu bɛ jira ni u bonya ye 724px, 940px (default ni CSS jaabilen tɛ a la), ani 1170px. 767px filɛliyɔrɔw jukɔrɔ, kuluw bɛ kɛ ji ye ani u bɛ ɲɔgɔn dalajɛ jɔlen na.

  1. <div kalasi = "lafiɲɛbɔ" >
  2. <div kalasi = "span4" > ... </div>
  3. <div kalasi = "span8" > ... </div>
  4. </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
3 bɛrɛbɛrɛ 3
8 offset 4 ye
  1. <div kalasi = "lafiɲɛbɔ" >
  2. <div kalasi = "span4" > ... </div>
  3. <div kalasi = "span4 bɛrɛbɛrɛ4" > ... </div>
  4. </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
Nivo 2nan
  1. <div kalasi = "lafiɲɛbɔ" >
  2. <div kalasi = "span6" >
  3. Nivo 1 kulu
  4. <div kalasi = "lafiɲɛbɔ" >
  5. <div kalasi = "span3" > Dakun 2nan </div>
  6. <div kalasi = "span3" > Dakun 2nan </div>
  7. </div> ye
  8. </div> ye
  9. </div> ye

Fluidw kolomayɔrɔw

1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
4 ye
4 ye
4 ye
4 ye
8 ye
6. 6
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

  1. <div kalasi = "lajɛ-ji" >
  2. <div kalasi = "span4" > ... </div>
  3. <div kalasi = "span8" > ... </div>
  4. </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
Jilama 6
  1. <div kalasi = "lajɛ-ji" >
  2. <div kalasi = "span12" >
  3. Nivo 1 ka kulu
  4. <div kalasi = "lajɛ-ji" >
  5. <div kalasi = "span6" > Dakun 2nan </div>
  6. <div kalasi = "span6" > Dakun 2nan </div>
  7. </div> ye
  8. </div> ye
  9. </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">.

  1. <farikolo>
  2. <div kalasi = "minɛn" >
  3. ...
  4. </div> ye
  5. </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.

  1. <div kalasi = "minɛn-ji" >
  2. <div kalasi = "lajɛ-ji" >
  3. <div kalasi = "span2" >
  4. <!--Kɛrɛfɛla kɔnɔkow-->
  5. </div> ye
  6. <div kalasi = "span10" >
  7. <!--Farakolo kɔnɔkow-->
  8. </div> ye
  9. </div> ye
  10. </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:

Tà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.

  1. <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ɔ:

  1. Baara kɛ ni jaabiw labɛncogo ye, n’o ye bootstrap-responsive.css ye
  2. Aw bɛ @import "responsive.less" fara a kan ani ka Bootstrap labɛn kokura
  3. 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ɛ.

  1. /* Landscape telefɔniw ani duguma */
  2. @media ( bonyaba : 480px ) { ... } . _
  3.  
  4. /* Landscape telefɔni ka portrait tablɛti */
  5. @media ( bonyaba : 767px ) { ... } . _
  6.  
  7. /* Portrait tablɛti ka landscape ani bureau */
  8. @media ( min bonya : 768px ) ani ( bonyaba : 979px ) { ... } . _ _
  9.  
  10. /* Bureau belebele */
  11. @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
.visible-tablet A bɛ ye
.visible-desktop A bɛ ye
.hidden-phone A bɛ ye A bɛ ye
.hidden-tablet A bɛ ye A bɛ ye
.hidden-desktop A bɛ ye A bɛ ye

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