Kokangama ya bottes

Échafaudage

Bootstrap etongami na grille ya 12 colonnes oyo ezo répondre. Totie mpe ba layouts ya fixe- mpe ya fluide-width oyo esalemi na système wana.

Ba styles ya mokili mobimba mpo na kozongisa CSS, typographie, mpe ba liens

Esengaka doctype ya HTML5

Bootstrap esalelaka ba éléments HTML mpe ba propriétés ya CSS oyo esengaka kosalela doctype HTML5. Sala makasi otia yango na ebandeli ya page nionso ya Bootstrapped na projet na yo.

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

Typographie mpe ba liens

Na kati ya fichier scaffolding.less , totie ba styles ya affichage global ya base, typographie, na ba lien. Mingimingi, biso:

  • Longola marge na nzoto
  • Set background-color: white;na ...body
  • Salelá ba attributs @baseFontFamily, @baseFontSize, mpe @baseLineHeightlokola base na biso ya typographie
  • Set couleur ya lien global via @linkColorpe appliquer ba sous-lignes ya lien kaka na:hover

Réinitialiser na nzela ya Normaliser

Kobanda na Bootstrap 2, réinitialisation ya CSS ya bonkoko evoluaki mpo na kosala usage ya ba éléments oyo ewutaki na Normalize.css , projet ya Nicolas Gallagher oyo epesaka mpe nguya na HTML5 Boilerplate .

Réinitialisation ya sika ekoki kaka kozwama na reset.less , kasi na ba éléments ebele oyo elongolami mpo na bokuse mpe bosikisiki.

Système ya grille par défaut 12 colonnes na torsion réponse

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

Système ya grille ya liboso oyo epesami lokola eteni ya Bootstrap ezali grille ya bonene ya 940px, ya makonzí 12 .

Ezali mpe na ba variations minei ya réponse mpo na ba appareils mpe ba résolutions ndenge na ndenge: téléphone, portrait ya tablette, paysage ya table mpe ba bureaux ya mike, mpe ba bureaux ya minene ya écran large.

  1. <div classe = "molongo" > 
  2.   <div kelasi = "span4" > ... </div> 
  3.   <div kelasi = "span8" > ... </div> 
  4. </div>

Ndenge elakisami awa, bobongisi ya moboko ekoki kosalama na "makonzí" mibale, moko na moko etali motango ya makonzí 12 ya moboko oyo tolimbolaki lokola eteni ya système na biso ya grille.


Kosala offset ya ba colonnes

4.
4 kosala offset 4
3 kosala offset 3
3 kosala offset 3
8 kosala offset 4 
  1. <div classe = "molongo" > 
  2.   <div kelasi = "span4" > ... </div> 
  3.   <div kelasi = "span4 offset4" > ... </div> 
  4. </div>

Ba colonnes ya kosala zumbu

Na système ya grille statique (non fluide) na Bootstrap, nesting ezali facile. Mpo na kosala nest ya contenus na yo, bakisa kaka ya sika .rowmpe ensemble ya .span*ba colonnes na kati ya .span*colonne oyo ezali.

Ndakisa

Ba lignes encastrées esengeli ezala na ensemble ya ba colonnes oyo ebakisaka na nombre ya ba colonnes ya parent na yango. Na ndakisa, .span3esengeli kotya makonzí mibale oyo ekangami na kati ya .span6.

Niveau 1 ya colonne
Niveau ya 2
Niveau ya 2 
  1. <div classe = "molongo" > 
  2.   < kelasi ya div = "span12" > 
  3.     Niveau 1 ya colonne
  4.     <div classe = "molongo" > 
  5.       <div kelasi = "span6" > Niveau 2 </div> 
  6.       <div kelasi = "span6" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Système ya grille fluide 12 colonnes oyo ezo répondre, na ba pourcentages

Ba colonnes ya fluide

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

Ba pourcentages, kasi ba pixels te

Système ya grille fluide esalelaka ba pourcentages mpo na ba largeurs ya colonne na esika ya ba pixels fixes. Ezali mpe na ba variations responsives ndenge moko na système na biso ya grille fixe, ko assurer ba proportions propre mpo na ba résolutions ya écran clé mpe ba appareils.

Milɔngɔ́ ya mai

Salá ete molɔngɔ nyonso ezala mai na kobongola kaka .rowna .row-fluid. Ba colonnes etikalaka exactement ndenge moko, kosala yango super droit ya ko flip entre ba layouts fixes na fluides.

Kosala bilembo

  1. <div classe = "molongo-molongo" > 
  2.   <div kelasi = "span4" > ... </div> 
  3.   <div kelasi = "span8" > ... </div> 
  4. </div>

Kosala zumbu ya mai

Nesting na ba grilles fluides ezali mua différent : nombre ya ba colonne encadré ezali na besoin te ya ko correspondre na parent. Au lieu ya kosala bongo, ba colonnes na yo ezo réinitialiser na niveau moko na moko po molongo moko na moko ezuaka 100% ya colonne parent.

Liki ya mai 12
Liki ya mai 6
Liki ya mai 6 
  1. <div classe = "molongo-molongo" > 
  2.   < kelasi ya div = "span12" > 
  3.     Niveau 1 ya colonne
  4.     <div classe = "molongo-molongo" > 
  5.       <div kelasi = "span6" > Niveau 2 </div> 
  6.       <div kelasi = "span6" > Niveau 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Personnalisation ya grille

Variable oyo ekoki kobongwana Valeur ya défaut Ndimbola
@gridColumns 12 Motángo ya makonzí
@gridColumnWidth 60px ezali Bolai ya likonzi mokomoko
@gridGutterWidth 20px ezali Esika ya mabe kati na makonzí
@siteWidth Somme calculée ya ba colonne nionso na ba gouttières Etangi motango ya makonzí mpe ba gouttières mpo na kotya bonene ya .container-fixed()mixin

Ba variables na LESS

Etongami na kati ya Bootstrap ezali na mwa ndambo ya ba variables mpo na ko personnaliser système ya grille ya 940px par défaut, oyo ekomami likolo. Ba variables nionso pona grille ebombami na ba variables.less.

Ndenge ya kosala na ndenge ya moto ye moko

Ko modifier grille elakisi ko changer ba @grid*variables misatu pe ko recompiler Bootstrap. Bobongola ba variables ya grille na ba variables.less pe salela moko ya ba façons minei oyo ekomami pona ko recompiler . Soki ozali kobakisa ba colonnes mosusu, sala makasi obakisa CSS mpo na oyo ezali na grid.less.

Kotikala na boyokani

Personnalisation ya grille esalaka kaka na niveau par défaut, grille ya 940px. Pona ko maintenir ba aspects responsifs ya Bootstrap, il faudra pe o personnaliser ba grilles na responsive.less.

Ba layouts Ba modèles ya base pona kosala ba pages web

Layout oyo ebongwani

Layout ya défaut mpe ya pete ya 940px-wide, centred mpo na kaka pene na site internet to lokasa nyonso oyo epesami na moko <div class="container">.

  1. <nzoto>
  2.   <div classe = "conteneur" > 
  3.     ...
  4.   </div>
  5. </nzoto>

Layout ya fluide

<div class="container-fluid">epesi ebongiseli ya lokasa oyo ekoki kobongwana, bonene ya min- mpe max, mpe barre ya mopanzi oyo ezali na lobɔkɔ ya mwasi. Ezali malamu mingi mpo na ba apps mpe ba docs.

  1. <div class = "eloko-ya-conteneur" > 
  2.   <div classe = "molongo-molongo" > 
  3.     < kelasi ya div = "span2" > 
  4.       <!--Makambo ya barre ya mopanzi-->
  5.     </div>
  6.     < kelasi ya div = "span10" > 
  7.       <!--Makambo ya nzoto-->
  8.     </div>
  9.   </div>
  10. </div>

Conception réponse Ba requêtes ya ba médias pona ba appareils na ba résolutions ndenge na ndenge

Ba dispositifs oyo ezo répondre

Oyo basalaka

Ba requêtes ya media epesaka nzela na CSS personnalisé na kotalela motango ya ba conditions —ba rapports, ba largeurs, type ya affichage, etc —kasi mingi mingi etali mingi zingazinga min-widthmpe max-width.

  • Modifier largeur ya colonne na grille na biso
  • Empiler ba éléments au lieu ya ko flotter bisika nionso esengeli
  • Bongisá bonene ya mitó ya makambo mpe makomi mpo ezala malamu mpo na baaparɛyi

Salelá mituna ya media na mokumba mpe kaka lokola ebandeli mpo na bayoki na yo ya telefone ya mabɔkɔ. Pona ba projets ya minene, sala considérer ba bases ya code dédié et non couches ya ba requêtes ya média.

Ba appareils oyo esungami

Bootstrap esalisaka mwa mituna ya media na fichier moko mpo na kosalisa kosala ete ba projets na yo ebongi mingi na ba appareils mpe ba résolutions ya écran ekeseni. Talá makambo oyo ezali na kati:

Etikete Largeur ya layout Bolai ya makonzí Largeur ya gouttière
Ba smartphones ya mayele 480px mpe na nse Ba colonnes fluides, ba largeurs fixes te
Ba smartphones na ba tablettes 767px mpe na nse Ba colonnes fluides, ba largeurs fixes te
Batablɛti ya bililingi 768px mpe likolo 42px na yango 20px ezali
Mbeba 980px mpe likolo 60px ezali 20px ezali
Emoniseli ya monene 1200px mpe likolo 70px ezali 30px ezali

Esengaka meta tag

Mpo na kosala ete baaparɛyi elakisaka malamu nkasa oyo ezali koyanola, tyá elembo ya méta ya port de vue.

  1. <meta name = "viewport" content = "bonene=bonene-ya-esaleli, échelle-ya ebandeli=1.0" >

Kosalela mituna ya media

Bootstrap esangisi te automatiquement ba requêtes oyo ya media, kasi ko comprendre mpe kobakisa yango ezali très facile mpe esengaka configuration minimale. Ozali na mwa ba options pona ko kotisa ba fonctionnalités responsives ya Bootstrap:

  1. Salelá version ya eyano oyo esangisi, bootstrap-responsive.css
  2. Bobakisa @import "responsive.less" mpe bo recompiler Bootstrap
  3. Modifier pe recompiler responsive.less lokola fichier separate

Mpo na nini te kokɔtisa yango kaka? Solo elobami, makambo nyonso te esengeli kozala na boyokani. Na esika ya kolendisa bato oyo basalaka yango bálongola eloko yango, tokanisaka malamu ete tófungola yango.

  1.   // Ba téléphones ya paysage na se
  2.   @media ( max - largeur : 480px ) { ... } Ezali ndenge nini?     
  3.  
  4.   // Paysage téléphone na portrait tablette
  5.   @media ( max - largeur : 768px ) { ... } Ezali ndenge nini?     
  6.  
  7.   // Portrait tablette na paysage na bureau
  8.   @media ( min - largeur : 768px ) mpe ( max - largeur : 980px ) { ... }.        
  9.  
  10.   // Bureau ya monene
  11.   @media ( min - largeur : 1200px ) { . } Ezali ndenge nini?

Ba classes ya utilité oyo ezo répondre

Bazali nini

Mpo na kosala nokinoki mpo na kosalela telefone ya mabɔkɔ, salelá bakelasi oyo ya ntina mpo na kolakisa mpe kobomba makambo na kotalela aparɛyi.

Ntango nini osengeli kosalela

Salelá yango na ndelo mpe koboya kosala ba versions oyo ekeseni mpenza na site moko. Salelá yango nde mpo na kokokisa maloba ya aparɛyi mokomoko.

Ndakisa, okoki kolakisa <select>élément moko mpo na nav na ba layouts ya ba mobiles, kasi na ba tablettes to ba bureaux te.

Ba kelasi ya lisungi

Elakisami awa ezali tableau ya ba classes oyo tozali ko soutenir mpe effet na yango na layout ya requête ya media donnée (etiqueté par appareil). Bakoki kozwa yango na responsive.less.

Kelasi Batelefone480px mpe na nse Ba tablettes767px mpe na nse Ba bureaux ya bureau768px mpe likolo
.visible-phone Ezali komonana
.visible-tablet Ezali komonana
.visible-desktop Ezali komonana
.hidden-phone Ezali komonana Ezali komonana
.hidden-tablet Ezali komonana Ezali komonana
.hidden-desktop Ezali komonana Ezali komonana

Likambo ya komeka

Bobongola bonene ya navigateur na bino to bo charger na ba appareils différents pona ko tester ba clases oyo ezali likolo.

Ezali komonana na...

  • Tyombo✔ Telefone
  • Tablette✔ Tablɛti
  • Bureau ya bureau✔ Bureau ya bureau

Ebombami na...

  • Tyombo✔ Telefone
  • Tablette✔ Tablɛti
  • Bureau ya bureau✔ Bureau ya bureau