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

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.

<!MOKANDA YA MOSALA html>
<html lang = "en" > 
  ...
</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.

1. 1.

Système ya grille par défaut oyo epesami na Bootstrap esalelaka ba colonnes 12 oyo ezo rendre na largeur ya 724px, 940px (par défaut sans CSS réponse inclus), na 1170px. Na se ya ba portes de vue ya 767px, ba colonnes ekomi fluide mpe e stack verticalement.

<div kelasi = "molongo" > 
  <div kelasi = "span4" > ... </div> 
  <div kelasi = "span8" > ... </div> 
</div>

Ndenge elakisami awa, layout ya base ekoki kosalama na ba "colonnes" mibale, moko na moko epanzani na motango ya ba colonnes 12 ya fondation oyo to définir lokola eteni ya système ya grille na biso.

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

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

<div kelasi = "molongo" > 
  < kelasi ya div = "span6" > 
    Niveau 1 colonne
    <div kelasi = "molongo" > 
      <div kelasi = "span3" > Niveau 2 </div> 
      <div kelasi = "span3" > Niveau 2 </div> 
    </div>
  </div>
</div>

Ba colonnes ya fluide

1. 1.

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

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

<div classe = "molongo-molongo" > 
  < kelasi ya div = "span12" > 
    Niveau 1 ya colonne
    <div classe = "molongo-molongo" > 
      <div kelasi = "span6" > Niveau 2 </div> 
      <div kelasi = "span6" > Niveau 2 </div> 
    </div>
  </div>
</div>

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í

Ba variables na LESS

Etongami na kati ya Bootstrap ezali 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 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 é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

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.

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

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

  /* Ba téléphones ya paysage na se */
  @media ( max - largeur : 480px ) { ... } Ezali ndenge nini?     
 
  /* Telefone ya paysage na tablette ya portrait */
  @media ( max - largeur : 767px ) { ... } Ezali ndenge nini?     
 
  /* Portrait tablette na paysage na bureau */
  @media ( min - largeur : 768px ) mpe ( max - largeur : 979px ) { ... }.        
 
  /* Bureau ya monene */
  @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	Ya kobombana	Ya kobombana
`.visible-tablet`	Ya kobombana	Ezali komonana	Ya kobombana
`.visible-desktop`	Ya kobombana	Ya kobombana	Ezali komonana
`.hidden-phone`	Ya kobombana	Ezali komonana	Ezali komonana
`.hidden-tablet`	Ezali komonana	Ya kobombana	Ezali komonana
`.hidden-desktop`	Ezali komonana	Ezali komonana	Ya kobombana

Likambo ya komeka

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

Ezali komonana na...

Ba marques ya vert elakisi ete kelasi ezali komonana na esika ya kotala na yo ya lelo.

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

Ebombami na...

Awa, bilembo ya vert elakisi ete kelasi ebombami na esika ya kotala na yo ya lelo.

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