Bootstrap ye

Échafaudages

Bootstrap bɛ jɔ jaabi 12-kolon grids, layouts ani components kan.

Duniya bɛɛ ka sigidaw

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.

  1. <!DOCTYPE html> ye
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Typografi ani jɛgɛnsira

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ɛlanw
  • 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 min Kɛra Nicolas Gallagher ni Jonathan Neal fɛ min fana bɛ fanga Di HTML5 Boilerplate ma . 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.

Sistɛmu grid default ye

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, jatebɔlan bɛ ladamu ka kɛ 724px ani 1170px bonya ye ka kɛɲɛ n’i ka jatebɔyɔrɔ ye. 767px filɛlikɛyɔrɔw jukɔrɔ, kuluw bɛ kɛ ji ye ani u bɛ ɲɔgɔn dalajɛ jɔlen na.

1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
1 ye
2 ye
3 ye
4 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 u 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ɔ).

  1. <div kalasi = "lafiɲɛbɔ" > 
  2.   <div kalasi = "span4" > ... </div> 
  3.   <div kalasi = "span8" > ... </div> 
  4. </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 
  1. <div kalasi = "lafiɲɛbɔ" > 
  2.   <div kalasi = "span4" > ... </div> 
  3.   <div kalasi = "span3 bɛrɛbɛrɛ2" > ... </div> 
  4. </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.

Nivo 1 kulu
Nivo 2nan
Nivo 2nan 
  1. <div kalasi = "lafiɲɛbɔ" > 
  2.   <div kalasi = "span9" > 
  3.     Nivo 1 kulu
  4.     <div kalasi = "lafiɲɛbɔ" > 
  5.       <div kalasi = "span6" > Dakun 2nan </div> 
  6.       <div kalasi = "span3" > Dakun 2nan </div> 
  7.     </div> ye
  8.   </div> ye
  9. </div> ye

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

Ɲɛ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
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 ye
6 ye
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ɛ.

  1. <div kalasi = "lajɛ-ji" > 
  2.   <div kalasi = "span4" > ... </div> 
  3.   <div kalasi = "span8" > ... </div> 
  4. </div> ye

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

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

4 ye
4 bɛrɛbɛrɛ 4
3 bɛrɛbɛrɛ 3
3 bɛrɛbɛrɛ 3
6 offset 6 ye 
  1. <div kalasi = "lajɛ-ji" > 
  2.   <div kalasi = "span4" > ... </div> 
  3.   <div kalasi = "span4 bɛrɛbɛrɛ2" > ... </div> 
  4. </div> ye

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

Fluid grids bɛ baara kɛ ni nesting ye cogo wɛrɛ la: nested level kelen-kelen bɛɛ ka kan ka fara kulu 12 kan. O bɛ Kɛ k’a sababu Kɛ ji-jatebɔlan bɛ baara Kɛ ni kɛmɛsarada la, a tɛ Kɛ ni pixel (piksɛl) ye, walasa ka bonyaw sigi sen kan.

Jilama 12
Jilama 6
Jilama 6
Jilama 6
Jilama 6 
  1. <div kalasi = "lajɛ-ji" > 
  2.   <div kalasi = "span12" > 
  3.     Jilama 12
  4.     <div kalasi = "lajɛ-ji" > 
  5.       <div kalasi = "span6" > 
  6.         Jilama 6
  7.         <div kalasi = "lajɛ-ji" > 
  8.           <div kalasi = "span6" > jimafɛn 6 </div> 
  9.           <div kalasi = "span6" > jimafɛn 6 </div> 
  10.         </div> ye
  11.       </div> ye
  12.       <div kalasi = "span6" > jimafɛn 6 </div> 
  13.     </div> ye
  14.   </div> ye
  15. </div> ye

Layidu talenw

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.

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

  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

Dilancogo min bɛ jaabi di

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.

  1. <meta tɔgɔ = "lajɛyɔrɔ" kɔnɔkow = "bonya=minɛn-bonya, daminɛ-skala=1.0" >  
  2. <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

Minɛn minnu bɛ jaabi di

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 ka 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
Display belebeleba 1200px ani ka tɛmɛ o kan 70px ye 30px ye
Fɔlɔ 980px ani ka tɛmɛ o kan 60px ye 20px ye
Ja tablɛtiw 768px ani a sanfɛ 42px ye 20px ye
Telefɔniw ka taa tablɛtiw la 767px ani a duguma Kolonw jilamaw, u bonya jɔlen tɛ
Telefɔniw 480px ani a duguma Kolonw jilamaw, u bonya jɔlen tɛ 
  1. /* Bureau belebele */
  2. @media ( min - bonya : 1200px ) { ... } .     
  3.  
  4. /* Portrait tablɛti ka landscape ani bureau */
  5. @media ( min bonya : 768px ) ani ( bonyaba : 979px ) { ... } . _ _        
  6.  
  7. /* Landscape telefɔni ka portrait tablɛti */
  8. @media ( bonyaba : 767px ) { ... } . _     
  9.  
  10. /* Landscape telefɔniw ani duguma */
  11. @media ( bonyaba : 480px ) { ... } . _

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

A ka kan ka baara kɛ waati min na

Baara kɛ ni dan ye ani ka i yɛrɛ tanga site kelen in bɔcogo wɛrɛw ma pewu. O nɔ na, ​​baara kɛ n’u ye walasa ka minɛn kelen-kelen bɛɛ jiracogo dafa. Nafa minnu bɛ jaabi di, olu man kan ka baara kɛ ni tabali ye, wa o cogo la, u tɛ dɛmɛ.

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ɛ kalanw 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