Scaffolding · Afɔkpa ƒe ʋuƒo le Ewegbe me

Ebia HTML5 doctype

Bootstrap wɔa HTML ƒe akpa aɖewo kple CSS ƒe nɔnɔme siwo hiã be woazã HTML5 doctype la ŋudɔ. Dee wò dɔwo katã ƒe gɔmedzedze.

<!NUŊLƆÐI ƑE ƑOMEVI html>
<html lang = "ebe" > 
  ...
</html> ƒe nyawo

Agbalẽtata kple kadodowo

Bootstrap ɖoa xexeame katã ƒe ɖeɖefia veviwo, nuŋɔŋlɔ, kple kadodo ƒe atsyãwo. Etɔxɛe la, mí:

Ðee ɖa marginle ŋutilãa dzi
Ðo background-color: white;ɖe...body
Zã @baseFontFamily, @baseFontSize, kple @baseLineHeightnɔnɔmewo abe míaƒe agbalẽtata ƒe gɔmeɖoanyi ene
Ðo xexeame katã ƒe kadodo ƒe amadede to @linkColoreye nàwɔ kadodo ƒe tete ɖe edzi ko dzi:hover

Woate ŋu akpɔ atsyã siawo le scaffolding.less .

Gbugbɔ ɖoe to Normalize dzi

Le Bootstrap 2 me la, woɖe asi le reset block xoxoa ŋu tsɔ do alɔ Normalize.css , dɔ si Nicolas Gallagher kple Jonathan Neal wɔ si hã naa ŋusẽ HTML5 Boilerplate . Togbɔ be míezãa Normalize ƒe akpa gãtɔ le míaƒe reset.less me hã la, míeɖe nu aɖewo ɖa koŋ na Bootstrap.

Live grid ƒe kpɔɖeŋu

Bootstrap grid system si woɖo ɖi la zãa sɔti 12 , si wɔnɛ be 940px keke nugoe si me ŋuɖoɖo ƒe nɔnɔmewo mele o . Ne wotsɔ CSS faɛl si ɖoa nya ŋu kpe ɖe eŋu la, grid la trɔna be wòakeke 724px kple 1170px le wò nukpɔkpɔ ƒe mɔnu nu. Le 767px ƒe nukpɔkpɔwo te la, sɔtiawo zua tsi eye woƒoa ƒu ɖe tsitrenu.

1. 1.

9. 9

Gbãtɔ ƒe grid HTML

Ne èdi sɔti eve ƒe ɖoɖo bɔbɔe la, wɔ a eye nàtsɔ sɔti .rowxexlẽme si sɔ akpe ɖe eŋu . .span*Esi wònye be esia nye sɔti 12 ƒe fli ta la, wo dometɔ ɖesiaɖe .span*keke ta ɖo sɔti 12 mawo ƒe xexlẽme aɖe dzi, eye ele be woatsɔ sɔti 12 akpe ɖe fli ɖesiaɖe ŋu ɣesiaɣi (alo sɔti ƒe xexlẽme le dzila la me).

<div klass = "fli" > 
  <div ƒe hatsotso = "span4" > ... </div> 
  <div ƒe hatsotso = "span8" > ... </div> 
</div> ƒe nyawo

Ne míetsɔ kpɔɖeŋu sia na la, míekpɔ .span4kple .span8, si wɔe be sɔtiwo katã ƒe xexlẽme nye 12 kple fli blibo.

Sɔtiwo ƒe vovototodedeameme

Ʋu sɔtiwo yi ɖusime to .offset*klasswo zazã me. Klas ɖesiaɖe dzia sɔti aɖe ƒe miame ƒe akpa si le miame la ɖe edzi sɔti blibo ɖeka. Le kpɔɖeŋu me, .offset4eʋuna .span4ɖe sɔti ene dzi.

3 ƒe vovototodedeameme 2

3 ƒe vovototodedeameme 1

3 ƒe vovototodedeameme 2

6 ƒe vovototodedeameme 3

<div klass = "fli" > 
  <div ƒe hatsotso = "span4" > ... </div> 
  <div klass = "span3 ƒe vovototo2" > ... </div> 
</div> ƒe nyawo

Atɔwɔwɔ ƒe sɔtiwo

Be nàtsɔ grid si woɖo ɖi la awɔ atɔ ɖe wò nyatakakawo ŋu la, tsɔ sɔti yeye .rowkple ƒuƒoƒo kpe ɖe .span*sɔti si li xoxo .span*ŋu. Ele be sɔti siwo wotsɔ ƒo ƒu ɖe edzilawo ƒe sɔtiwo ƒe xexlẽme nanɔ fli siwo wotsɔ ƒo ƒui me.

Dzidzenu 1 ƒe sɔti

Dzidzenu 2 lia

<div klass = "fli" > 
  <div ƒe hatsotso = "span9" > 
    Dzidzenu 1 ƒe sɔti
    <div klass = "fli" > 
      <div klass = "span6" > Dzidzenu 2 </div> 
      <div klass = "span3" > Dzidzenu 2 </div> 
    </div> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

Live fluid grid ƒe kpɔɖeŋu

Fluid grid ɖoɖoa zãa alafa memamãwo ɖe pikselwo teƒe na sɔtiwo ƒe kekeme. Eƒe ŋuɖoɖo ŋutetewo sɔ kple míaƒe fixed grid ɖoɖoa, si kpɔa egbɔ be agbɔsɔsɔme si sɔ na key screen resolutions kple mɔ̃wo.

1. 1.

12. 12

Gɔmedzenuwo ƒe tsi ƒe grid HTML

Wɔ fli ɖesiaɖe "tsi" to tɔtrɔ .rowɖe .row-fluid. Sɔtiawo ƒe hatsotsoawo nɔa nenema tututu, si wɔnɛ be wònɔa bɔbɔe be woatrɔ asi le grid siwo woɖo ɖe teƒe ɖeka kple esiwo me tsi le dome.

<div klass = "fli-tsi" > 
  <div ƒe hatsotso = "span4" > ... </div> 
  <div ƒe hatsotso = "span8" > ... </div> 
</div> ƒe nyawo

Lãmetsiwo ƒe ʋuʋu

Ewɔa dɔ le mɔ ma ke nu abe fixed grid system offsetting ene: tsɔ kpe .offset*ɖe sɔti ɖesiaɖe ŋu be wòaɖe sɔti gbogbo mawo ɖa.

4 ƒe vovototodedeameme 4

3 ƒe vovototodedeameme 3

6 ƒe vovototodedeameme 6

<div klass = "fli-tsi" > 
  <div ƒe hatsotso = "span4" > ... </div> 
  <div klass = "span4 ƒe vovototo2" > ... </div> 
</div> ƒe nyawo

Lãmetsiwo ƒe atɔwɔwɔ

Fluid grids zãa atɔwɔwɔ le mɔ vovovowo nu: ele be sɔtiwo ƒe nested level ɖesiaɖe natsɔ sɔti 12 akpe ɖe eŋu. Esia le alea elabena tsi ƒe grid la zãa alafa memamãwo, ke menye pikselwo o, hena kekemewo ɖoɖo.

Lãmetsi 12

Lãmetsi 6

<div klass = "fli-tsi" > 
  <div ƒe hatsotso = "span12" > 
    Lãmetsi 12
    <div klass = "fli-tsi" > 
      <div ƒe hatsotso = "span6" > 
        Lãmetsi 6
        <div klass = "fli-tsi" > 
          <div klass = "span6" > Lãmetsi 6 </div> 
          <div klass = "span6" > Lãmetsi 6 </div> 
        </div> ƒe nyawo
      </div> ƒe nyawo
      <div klass = "span6" > Lãmetsi 6 </div> 
    </div> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

Woɖo ɖoɖo si wowɔ ɖe ɖoɖo nu

Enaa ɖoɖo si bɔ ɖe kekeme si woɖo ɖi (kple esi woate ŋu awɔ le wo ɖokui si) si me <div class="container">wobia ko le.

<ŋutilã>
  <div klass = "nugoe" > 
    ...
  </div> ƒe nyawo
</body>

Lãmetsiwo ƒe ɖoɖowɔwɔ

Wɔ axa si me tsi le, si me sɔti eve le kple <div class="container-fluid">—enyo ŋutɔ na dɔwɔɖoɖowo kple nuŋlɔɖiwo.

<div class = "nugoe-tsi" > 
  <div klass = "fli-tsi" > 
    <div ƒe hatsotso = "span2" > 
      <!--Axadzinuŋɔŋlɔwo-->
    </div> ƒe nyawo
    <div ƒe hatsotso = "span10" > 
      <!--Ŋutilã me nyawo-->
    </div> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

Nusiwo wotsɔna ɖoa nya ŋu ƒe dɔwɔwɔ

Ʋu CSS si ɖoa nya ŋu le wò dɔa me to meta tag nyuitɔ kple atsyãgbalẽ bubu <head>dede wò nuŋlɔɖia me. Ne èƒo Bootstrap nu ƒu tso Customize ƒe axaa dzi la, meta tag la koe wòle be nàde eme.

<meta ŋkɔ = "nukpɔƒe" emenyawo = "kekeme=mɔ̃-kekeme, gɔmedzedze-dzidzenu=1.0" >  
<link href = "nunɔamesiwo/css/bootstrap-ŋuɖoɖo.css" rel = "atsyãgbalẽ" >

Tawo yi dzi!Bootstrap metsɔa ŋuɖoɖo ƒe nɔnɔmewo dea eme le gɔmedzedzea me le ɣeyiɣi sia me o elabena menye nusianue wòle be wòawɔ dɔ o. Le esi teƒe be míade dzi ƒo na dɔwɔlawo be woaɖe nɔnɔme sia ɖa la, míebua eŋu be anyo wu be míana wòawɔ dɔ ne ehiã.

Ku ɖe Bootstrap si ɖoa nya ŋu la ŋu

Media biabia ɖe mɔ na CSS tɔxɛ si wotu ɖe nɔnɔme geɖe dzi—dzidzemewo, kekemewo, ɖeɖefia ƒomevi, kple bubuawo—gake zi geɖe la, woƒe susu nɔa nu ŋu ƒo xlã min-widthkple max-width.

Trɔ asi le sɔti ƒe kekeme ŋu le míaƒe grid la me
Ƒo nuawo ɖe wo nɔewo dzi le esi teƒe be nànɔ tsia dzi le afisiafi si wòhiã le
Trɔ tanyawo kple nuŋɔŋlɔwo ƒe lolome be woasɔ na mɔ̃wo wu

Zã nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo le agbanɔamedzi me eye wòanye gɔmedzedze na wò asitelefon dzi nyaselawo ko. Le dɔ gãwo gome la, wɔ bu kɔda gɔmeɖoanyi siwo woɖo ɖi ŋu ke menye nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo ƒe ƒuƒoƒowo o.

Mɔ̃ siwo wodoa alɔe

Bootstrap doa alɔ media biabia ʋee aɖewo le faɛl ɖeka me be wòakpe ɖe ŋuwò nàna wò dɔwo nasɔ nyuie wu le mɔ̃ vovovowo kple screen ƒe nɔnɔmewo dzi. Nusiwo le emee nye esi:

Nuŋutigbalẽ	Ðoɖowɔɖi ƒe kekeme	Sɔti ƒe kekeme	Gutter ƒe kekeme
Nukpɔkpɔ gã aɖe	1200px kple edzivɔ	70px ƒe didime	30px ƒe didime
Gᴐmedzeƒe	980px kple edzivɔ	60px ƒe didime	20px ƒe didime
Nɔnɔmetatawo ƒe kpe gbadzɛwo	768px kple esiwo wu nenema	42px ƒe didime	20px ƒe didime
Telefonwo yi tablɛtwo dzi	767px kple esiwo le ete	Sɔti siwo me tsi le, kekeme siwo woɖo ɖi mele wo ŋu o
Telefonwo	480px kple esiwo le ete	Sɔti siwo me tsi le, kekeme siwo woɖo ɖi mele wo ŋu o

/* Dɔwɔkplɔ̃ gã aɖe */
@media ( min - kekeme : 1200px ) { ... }.     
 
/* Nɔnɔmetata tablɛt yi anyigba ƒe nɔnɔme kple kplɔ̃dzivɔ dzi */
@media ( min - kekeme : 768px ) kple ( max - kekeme : 979px ) { ... }.        
 
/* Anyigba ƒe nɔnɔme telefon na nɔnɔmetata tablɛt */
@media ( max - kekeme : 767px ) { ... }.     
 
/* Anyigba ƒe nɔnɔme telefonwo kple anyime */
@media ( max - kekeme : 480px ) { ... }.

Utility ƒe klass siwo ɖoa nya ŋu

Be nàwɔ asitelefon ƒe ŋgɔyiyi kabakaba wu la, zã dɔwɔnu ƒe hatsotso siawo hena nyatakakawo ɖeɖefia kple wo ɣla ɖe mɔ̃wo nu. Klass siwo li kple woƒe ŋusẽkpɔɖeamedzi ɖe media biabia ƒe ɖoɖo aɖe si wona dzi (si wotsɔ mɔ̃ de dzesii) ƒe kplɔ̃ le ete. Woate ŋu akpɔ wo le responsive.less.

Nusrɔ̃ƒe	Telefonwo767px kple esiwo le ete	Atikekuiwo979px va ɖo 768px	Dɔwɔkplɔ̃wo dziGᴐmedzeƒe
`.visible-phone`	Woate ŋu akpɔe	Si le ɣaɣlame	Si le ɣaɣlame
`.visible-tablet`	Si le ɣaɣlame	Woate ŋu akpɔe	Si le ɣaɣlame
`.visible-desktop`	Si le ɣaɣlame	Si le ɣaɣlame	Woate ŋu akpɔe
`.hidden-phone`	Si le ɣaɣlame	Woate ŋu akpɔe	Woate ŋu akpɔe
`.hidden-tablet`	Woate ŋu akpɔe	Si le ɣaɣlame	Woate ŋu akpɔe
`.hidden-desktop`	Woate ŋu akpɔe	Woate ŋu akpɔe	Si le ɣaɣlame

Ɣekaɣie woazãe

Zãe le seɖoƒe aɖe nu eye nàƒo asa na nyatakakadzraɖoƒe ɖeka ƒe tɔtrɔ siwo to vovo kura wɔwɔ. Ke boŋ zã wo nàtsɔ akpe ɖe mɔ̃ ɖesiaɖe ƒe nuƒoƒo ŋu. Mele be woazã dɔwɔnu siwo ɖoa nya ŋu kple kplɔ̃wo o, eye le esia ta womedoa alɔ wo o.

Responsive utilities dodokpɔ nya

Trɔ wò browser ƒe lolome alo nàdae ɖe mɔ̃ vovovowo dzi be nàdo klass siwo le etame la kpɔ.

Woate ŋu akpɔe le...

Dzesi damawo fia be klass le dzedzem le wò nukpɔkpɔƒe si nèle fifia me.

Kaƒomɔ✔ Telefon dzi
Tablet ƒe ƒuƒoƒo✔ Tablɛt
Dɔwɔkplɔ̃dzivɔ✔ Dɔwɔkplɔ̃dzivɔ

Woɣlae ɖe...

Le afisia la, dzesi damawo fia be klass la ɣla ɖe wò nukpɔkpɔƒe si nèle fifia me.

Kaƒomɔ✔ Telefon dzi
Tablet ƒe ƒuƒoƒo✔ Tablɛt
Dɔwɔkplɔ̃dzivɔ✔ Dɔwɔkplɔ̃dzivɔ

Scaffolding ƒe ƒuƒoƒo

Xexeame katã ƒe ɖoɖowo