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

Grille ya 940px ya liboso

1. 1.

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.

<div kelasi = "molongo" > 
  <div kelasi = "span4" > ... </div> 
  <div kelasi = "span8" > ... </div> 
</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 kosala offset 4

3 kosala offset 3

8 kosala offset 4

<div kelasi = "molongo" > 
  <div kelasi = "span4" > ... </div> 
  <div kelasi = "span4 offset4" > ... </div> 
</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

Niveau 1 ya colonne

Niveau ya 2

<div kelasi = "molongo" > 
  < kelasi ya div = "span12" > 
    Niveau 1 ya colonne
    <div kelasi = "molongo" > 
      <div kelasi = "span6" > Niveau 2 </div> 
      <div kelasi = "span6" > Niveau 2 </div> 
    </div>
  </div>
</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

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.

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

<nzoto>
  <div classe = "conteneur" > 
    ...
  </div>
</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.

<div class = "eloko-ya-conteneur" > 
  <div classe = "molongo-molongo" > 
    < kelasi ya div = "span2" > 
      <!--Makambo ya barre ya mopanzi-->
    </div>
    < kelasi ya div = "span10" > 
      <!--Makambo ya nzoto-->
    </div>
  </div>
</div>

Ba appareils oyo esungami

Bootstrap esalisaka mwa mituna ya media 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
Batablɛti ya bililingi	480px na 768px	Ba colonnes fluides, ba largeurs fixes te
Ba tablettes ya paysage	768px na 940px	44px ezali	20px ezali
Mbeba	940px mpe likolo	60px ezali	20px ezali
Emoniseli ya monene	1210px mpe likolo	70px ezali	30px ezali

Oyo basalaka

Ba requêtes ya media epesaka nzela na CSS personnalisé na kotalela motango ya ba conditions —ba rapports, ba largeurs, type ya écran, 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

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:

Salelá version ya eyano oyo esangisi, bootstrap-responsive.css
Bobakisa @import "responsive.less" mpe bo recompiler Bootstrap
Modifier pe recompiler responsive.less lokola 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.

  // Ba téléphones ya paysage na se
  @media ( max - largeur : 480px ) { ... } Ezali ndenge nini?     
 
  // Paysage téléphone na portrait tablette
  @media ( max - largeur : 768px ) { ... } Ezali ndenge nini?     
 
  // Portrait tablette na paysage na bureau
  @media ( min - largeur : 768px ) mpe ( max - largeur : 940px ) { ... }.        
 
  // Bureau ya monene
  @media ( min - largeur : 1200px ) { . } Ezali ndenge nini?