Bootstrap ƒe ƒuƒoƒo

Scaffolding ƒe ƒuƒoƒo

Wotu bootstrap ɖe sɔti 12 ƒe grid si ɖoa nya ŋu dzi. Míetsɔ ɖoɖo siwo wotu ɖe ɖoɖo ma dzi siwo ƒe kekeme le ɖoɖo nu kple esiwo ƒe kekeme le tsia dzi hã de eme.

Xexeame katã ƒe atsyãwo na CSS gbugbɔgaɖoɖo, nuŋɔŋlɔ, kple kadodowo

Ebia HTML5 doctype

Bootstrap wɔa HTML ƒe akpawo kple CSS ƒe nɔnɔme siwo hiã be woazã HTML5 doctype la ŋudɔ. Kpɔ egbɔ be yetsɔe de Bootstrapped ƒe axa ɖesiaɖe ƒe gɔmedzedze le wò dɔa me.

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

Agbalẽtata kple kadodowo

Le scaffolding.less faɛl la me la, míeɖo xexeame katã ƒe ɖeɖefia veviwo, nuŋɔŋlɔ, kple kadodo ƒe atsyãwo. Etɔxɛe la, mí:

  • Ðe margin si le ŋutilãa dzi la ɖa
  • Ðo background-color: white;ɖe...body
  • Zã @baseFontFamily, @baseFontSize, kple @baseLineHeightnɔnɔmewo abe míaƒe nuŋɔŋlɔ ƒe gɔmeɖoanyi ene
  • Ðo xexeame katã ƒe kadodo ƒe amadede to @linkColoreye nàwɔ kadodo ƒe tete ɖe edzi ko dzi:hover

Gbugbɔ ɖoe to Normalize dzi

Tso Bootstrap 2 dzi la, CSS ƒe gbugbɔgaɖoɖo xoxoa trɔ zu nusiwo tso Normalize.css , dɔ si Nicolas Gallagher wɔ si hã naa ŋusẽ HTML5 Boilerplate la ŋudɔ .

Woateŋu akpɔ tɔtrɔ yeyea le reset.less me kokoko , gake woɖe nu geɖewo ɖa hena kpuie kple nyateƒetoto.

Default grid system 12 sɔtiwo kple ŋuɖoɖo ƒe twist

1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
4.
4.
4.
4.
8
6.
6.
12. 12

Grid ɖoɖo si woɖo ɖi si wona le Bootstrap me zãa sɔti 12 siwo ɖea egɔme le kekeme si nye 724px, 940px (si woɖo ɖi CSS si ɖoa nya ŋu mele eme o), kple 1170px. Le 767px ƒe nukpɔkpɔwo te la, sɔtiawo zua tsi eye woƒoa ƒu ɖe tsitrenu.

  1. <div klass = "fli" > 
  2.   <div ƒe hatsotso = "span4" > ... </div> 
  3.   <div ƒe hatsotso = "span8" > ... </div> 
  4. </div> ƒe nyawo

Abe alesi woɖee fia le afisia ene la, woateŋu awɔ ɖoɖo vevi aɖe kple "sɔti" eve, ɖesiaɖe akeke gɔmeɖoanyi sɔti 12 siwo míeɖe gɔme abe míaƒe grid ɖoɖoa ƒe akpa aɖe ene la ƒe xexlẽme aɖe dzi.


Sɔtiwo ƒe vovototodedeameme

4.
4 ƒe vovototodedeameme 4
3 ƒe vovototodedeameme 3
3 ƒe vovototodedeameme 3
8 ƒe vovototodedeameme 4 
  1. <div klass = "fli" > 
  2.   <div ƒe hatsotso = "span4" > ... </div> 
  3.   <div klass = "span4 ƒe vovototo4" > ... </div> 
  4. </div> ƒe nyawo

Atɔwɔwɔ ƒe sɔtiwo

Le static (non-fluid) grid system le Bootstrap me la, nesting le bɔbɔe. Be nàtsɔ wò nyatakakawo aɖo atɔ me la, ɖeko nàtsɔ sɔti yeye .rowkple ƒuƒoƒo aɖe akpe ɖe .span*sɔti si li xoxo .span*ŋu.

Kpɔɖeŋu

Ele be fli siwo wotsɔ ƒo ƒui la nanye sɔtiwo ƒe ƒuƒoƒo si ƒo ƒu ɖe sɔtiwo ƒe xexlẽme si le edzila ŋu. .span3Le kpɔɖeŋu me, ele be woatsɔ sɔti eve siwo wotsɔ ƒo ƒui la ade .span6.

Dzidzenu 1 lia le sɔti me
Dzidzenu 2 lia
Dzidzenu 2 lia 
  1. <div klass = "fli" > 
  2.   <div ƒe hatsotso = "span6" > 
  3.     Dzidzenu 1 ƒe sɔti
  4.     <div klass = "fli" > 
  5.       <div klass = "span3" > Dzidzenu 2 </div> 
  6.       <div klass = "span3" > Dzidzenu 2 </div> 
  7.     </div> ƒe nyawo
  8.   </div> ƒe nyawo
  9. </div> ƒe nyawo

Fluid grid system 12 siwo ɖoa nya ŋu, siwo wotu ɖe alafa memamã dzi sɔtiwo

Tsi ƒe sɔtiwo

1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
4.
4.
4.
4.
8
6.
6.
12. 12

Alafa memamãwo, ke menye pikselwo o

Fluid grid ɖoɖoa zãa alafa memamãwo na sɔtiwo ƒe kekeme ɖe piksel siwo woɖo ɖi teƒe. Eƒe ŋuɖoɖo ƒe tɔtrɔwo hã le esi abe míaƒe fixed grid system ene, si kpɔa egbɔ be agbɔsɔsɔme si sɔ na key screen resolutions kple mɔ̃wo.

Lãmetsiwo ƒe fliwo

Na fli ɖesiaɖe nanye tsi to tɔtrɔ .rowɖe .row-fluid. Sɔtiawo nɔa nenema tututu, si wɔnɛ be wònɔa bɔbɔe ŋutɔ be woatrɔ ɖe ɖoɖo siwo woɖo ɖe ɖoɖo nu kple esiwo me tsi le dome.

Dzesidede dzesiwo

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

Lãmetsiwo ƒe atɔwɔwɔ

Nesting kple fluid grids to vovo vie: mehiã be nested columns ƒe xexlẽme nasɔ kple dzila o. Ke boŋ, wogbugbɔ ɖoa ​​wò sɔtiwo ɖe ɖoɖo ɖesiaɖe dzi elabena fli ɖesiaɖe xɔa dzila ƒe sɔti la ƒe 100%.

Lãmetsi 12
Lãmetsi 6
Lãmetsi 6 
  1. <div klass = "fli-tsi" > 
  2.   <div ƒe hatsotso = "span12" > 
  3.     Dzidzenu 1 lia le sɔti me
  4.     <div klass = "fli-tsi" > 
  5.       <div klass = "span6" > Dzidzenu 2 </div> 
  6.       <div klass = "span6" > Dzidzenu 2 </div> 
  7.     </div> ƒe nyawo
  8.   </div> ƒe nyawo
  9. </div> ƒe nyawo

Grid ƒe tɔtrɔ ɖe nɔnɔmewo ŋu

Nusiwo trɔna Asixɔxɔ si woɖo ɖi Nuɖᴐɖᴐ
@gridColumns 12. 12 Sɔtiwo ƒe xexlẽme
@gridColumnWidth 60px ƒe didime Sɔti ɖesiaɖe ƒe kekeme
@gridGutterWidth 20px ƒe didime Teƒe manyomanyo le sɔtiwo dome

Nusiwo trɔna le LESS me

Wotu ɖe Bootstrap me nye tɔtrɔ ʋɛ aɖewo hena asitɔtrɔ le 940px grid ɖoɖo si woɖo ɖi ŋu, si woŋlɔ ɖe etame. Wodzraa tɔtrɔwo katã na grid la ɖo ɖe tɔtrɔwo me.less.

Ale si nàwɔ atrɔ asi le eŋu wòasɔ ɖe nɔnɔmea nu

Trɔtrɔ le grid la ŋu fia be woatrɔ tɔtrɔ etɔ̃awo @grid*eye woagbugbɔ aƒo Bootstrap nu ƒu. Trɔ grid ƒe tɔtrɔwo le variables.less me eye nàzã mɔ ene siwo woŋlɔ ɖi la dometɔ ɖeka atsɔ agbugbɔ aƒo ƒui . Ne èle sɔti bubuwo kpem ɖe eŋu la, kpɔ egbɔ be yetsɔ CSS kpe ɖe eŋu na amesiwo le grid.less me.

Amewo ƒe nyaŋuɖoɖo me nɔnɔ

Grid la ƒe tɔtrɔwɔwɔ wɔa dɔ le ɖoɖo si woɖo ɖi, 940px grid la ko dzi. Be nàlé Bootstrap ƒe akpa siwo ɖoa nya ŋu la me ɖe asi la, ahiã be nàtrɔ asi le gridsawo hã ŋu le responsive.less me.

Layouts Gɔmeɖosewo ƒe nɔnɔmetata siwo woatsɔ awɔ nyatakakadzraɖoƒe ƒe axawo

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

940px-kekeme, si le titina ƒe ɖoɖo si woɖo ɖi eye wòle bɔbɔe na nyatakakadzraɖoƒe alo axa ɖesiaɖe kloe si ame ɖeka na <div class="container">.

  1. <ŋutilã>
  2.   <div klass = "nugoe" > 
  3.     ...
  4.   </div> ƒe nyawo
  5. </body>

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

<div class="container-fluid">na axa ƒe ɖoɖo si te ŋu trɔna, min- kple max-kekeme, kple miame ƒe axadzinu. Enyo ŋutɔ na apps kple docs.

  1. <div class = "nugoe-tsi" > 
  2.   <div klass = "fli-tsi" > 
  3.     <div ƒe hatsotso = "span2" > 
  4.       <!--Axadzinuŋɔŋlɔwo-->
  5.     </div> ƒe nyawo
  6.     <div ƒe hatsotso = "span10" > 
  7.       <!--Ŋutilã me nyawo-->
  8.     </div> ƒe nyawo
  9.   </div> ƒe nyawo
  10. </div> ƒe nyawo

Responsive design Media biabia na mɔ̃ vovovowo kple tameɖoɖo kplikpaawo

Mɔ̃ siwo wɔa dɔ ɖe ame dzi

Nusi wowɔna

Media biabia ɖe mɔ ɖe CSS tɔxɛ ŋu 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
Smartphonewo ƒe asitelefonwo 480px kple esiwo le ete Sɔti siwo me tsi le, kekeme siwo woɖo ɖi mele wo ŋu o
Smartphonewo yi tablɛtwo dzi 767px kple esiwo le ete Sɔti siwo me tsi le, kekeme siwo woɖo ɖi mele wo ŋu o
Nɔnɔmetatawo ƒe kpe gbadzɛwo 768px kple esiwo wu nenema 42px ƒe didime 20px ƒe didime
Gᴐmedzeƒe 980px kple edzivɔ 60px ƒe didime 20px ƒe didime
Nukpɔkpɔ gã aɖe 1200px kple edzivɔ 70px ƒe didime 30px ƒe didime

Ebia be woawɔ meta tag

Be nàkpɔ egbɔ be mɔ̃wo ɖe axa siwo ɖoa nya ŋu nyuie la, tsɔ viewport meta tag la de eme.

  1. <meta ŋkɔ = "nukpɔƒe" emenyawo = "kekeme=mɔ̃-kekeme, gɔmedzedze-dzidzenu=1.0" >

Nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo zazã

Bootstrap metsɔa media biabia siawo dea eme le eɖokui si o, gake wo gɔmesese kple wo tsɔtsɔ kpee le bɔbɔe ŋutɔ eye ebia ɖoɖo sue aɖe ko. Tiatia ʋee aɖewo le asiwò nàtsɔ ade Bootstrap ƒe ŋuɖoɖo ƒe nɔnɔmewo eme:

  1. Zã nyaŋuɖoɖo ƒe tɔtrɔ si woƒo ƒu, bootstrap-responsive.css
  2. Tsɔ @import "responsive.less" kpee eye nàgbugbɔ aƒo Bootstrap nu ƒu
  3. Trɔ asi le responsive.less ŋu eye nàgbugbɔ aƒo ƒu abe faɛl si le vovo ene

Nukata màtsɔe ade eme ko oa? Ne míagblɔe tututu la, menye nusianue wòle be wòawɔ nu ɖe ​​ame ŋu nyuie o. Le esi teƒe be míade dzi ƒo na dɔwɔlawo be woaɖe nɔnɔme sia ɖa la, míebu eŋu be anyo wu be míawɔe wòawɔ dɔ.

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

Utility ƒe klass siwo ɖoa nya ŋu

What are they

For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 480px and below Tablets 767px and below Desktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

  • Phone✔ Telefon dzi
  • Tablet✔ Tablɛt
  • Desktop✔ 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ɔ