Échafaudage

Esengaka doctype ya HTML5

Bootstrap esalelaka ba éléments HTML mosusu mpe ba propriétés CSS oyo esengaka kosalela doctype HTML5. Botia yango na ebandeli ya ba projets na bino nionso.

<!MOKANDA html>
<html lang = "en" > 
  ...
</html>

Typographie mpe ba liens

Bootstrap etie ba styles ya moboko ya elakiseli ya mokili mobimba, typographie, mpe ya lien. Mingimingi, biso:

Longola marginna nzoto
Set background-color: white;na ...body
Salelá bizaleli @baseFontFamily, @baseFontSize, mpe @baseLineHeightlokola moboko na biso ya konyata
Set couleur ya lien global via @linkColorpe appliquer ba sous-lignes ya lien kaka na:hover

Ba styles oyo ekoki kozwama na kati ya échafaudage.less .

Réinitialiser na nzela ya Normaliser

Na Bootstrap 2, bloc ya kala ya réinitialisation elongolami na faveur ya Normalize.css , projet ya Nicolas Gallagher na Jonathan Neal oyo epesaka pe puissance na HTML5 Boilerplate . Alors que tosalelaka mingi ya Normalize na kati ya reset.less na biso , tolongoli ba éléments mosusu spécifiquement pona Bootstrap.

Ndakisa ya grille en direct

Système ya grille ya Bootstrap par défaut esalelaka 12 colonnes , kosala mpo na conteneur ya largeur ya 940px sans fonctionnalités responsives activées. Na fichier CSS oyo ezo répondre oyo ebakisami, grille ezo adapter ezala 724px na 1170px ya largeur selon port de vue na yo. Na se ya ba portes de vue ya 767px, ba colonnes ekomi fluide mpe e stack verticalement.

1. 1.

2. 2

HTML ya grille ya moboko

Mpo na ebongiseli ya pɛtɛɛ ya makonzí mibale, salá a .rowmpe bakisá motángo ya .span*makonzí oyo ebongi. Lokola oyo ezali grille ya makonzí 12, moko na moko .span*etandami na motángo ya makonzí wana 12, mpe esengeli ntango nyonso kobakisa kino 12 mpo na molɔngɔ́ mokomoko (to motángo ya makonzí na moboti).

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

Na kopesaka ndakisa oyo, tozali na .span4mpe .span8, kosala mpo na 12 makonzí totale mpe molɔngɔ́ mobimba.

Kosala offset ya ba colonnes

Bokende na makonzí na lobɔkɔ ya mobali na kosaleláká .offset*bakelasi. Kelasi mokomoko ebakisaka marge ya lobɔkɔ ya mwasi ya likonzi moko na likonzi mobimba. Na ndakisa, .offset4etambolaka .span4likoló ya makonzí minei.

3 kosala offset 2

3 kosala offset 1

3 kosala offset 2

6 kosala offset 3

<div classe = "molongo" > 
  <div kelasi = "span4" > ... </div> 
  <div kelasi = "span3 offset2" > ... </div> 
</div>

Ba colonnes ya kosala zumbu

Mpo na kosala nest ya makambo na yo na grille ya liboso, bakisa ya sika .rowmpe ensemble ya .span*ba colonnes na kati ya .span*colonne oyo ezali. Ba lignes encastrées esengeli kozala na ensemble ya ba colonnes oyo ebakisami na nombre ya ba colonnes ya moboti na yango.

Niveau 1 colonne

Niveau ya 2

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

Ndakisa ya grille ya fluide en direct

Système ya grille fluide esalela ba pourcentages na esika ya ba pixels pona ba largeurs ya colonne. Ezali na makoki ya koyanola 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.

1. 1.

Grille ya fluide ya base HTML

Sala molongo nyonso "fluide" na kobongola .rowna .row-fluid. Ba classes ya colonne etikalaka exactement ndenge moko, kosala que ezala facile ko flip entre ba grilles fixes na ba grilles fluides.

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

Offset ya fluide

Esalaka ndenge moko na offsetting ya système ya grille fixe : bakisa .offset*na colonne nionso mpo na offset na ba colonnes ebele boye.

4 kosala offset 4

3 kosala offset 3

6 kosala offset 6

<div classe = "molongo-molongo" > 
  <div kelasi = "span4" > ... </div> 
  <div kelasi = "span4 offset2" > ... </div> 
</div>

Kosala zumbu ya mai

Ba grilles fluides esalelaka nest na ndenge ekeseni : niveau moko na moko ya ba colonnes esengeli ebakisa jusqu’à 12 colonnes. Yango ezali bongo mpamba te grille ya fluide esalelaka ba pourcentages, kasi ba pixels te, mpo na kotya ba largeurs.

Liki ya mai 12

Liki ya mai 6

<div classe = "molongo-molongo" > 
  < kelasi ya div = "span12" > 
    Liki ya mai 12
    <div classe = "molongo-molongo" > 
      < kelasi ya div = "span6" > 
        Liki ya mai 6
        <div classe = "molongo-molongo" > 
          <div classe = "span6" > Liziba 6 </div> 
          <div classe = "span6" > Liziba 6 </div> 
        </div>
      </div>
      <div classe = "span6" > Liziba 6 </div> 
    </div>
  </div>
</div>

Layout oyo ebongwani

Epesi layout ya commun fixe-width (mpe optionnellement responsive) na kaka <div class="container">esengeli.

<nzoto>
  <div classe = "conteneur" > 
    ...
  </div>
</nzoto>

Layout ya fluide

Bosala lokasa ya fluide, ya makonzí mibale na <div class="container-fluid">—malamu mpo na ba applications 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>

Kofungola makambo oyo ekoki koyanola

Fungola CSS oyo ezo répondre na projet na yo na kotia étiquette méta oyo ebongi mpe feuille de style ya kobakisa na kati ya <head>ya mokanda na yo. Soki o compilé Bootstrap na page Personnaliser, esengeli kaka otia meta tag.

<meta name = "viewport" content = "bonene=bonene-ya-esaleli, échelle-ya ebandeli=1.0" >  
<link href = "biloko/css/bootstrap-responsive.css" rel = "lokasa ya lolenge" >

Mitó likoló!Bootstrap ezali na ba fonctionnalités responsives te par défaut na tango oyo lokola nionso esengeli te ezala responsive. Na esika ya kolendisa bato oyo basalaka yango bálongola eloko yango, tokanisaka malamu ete tófungola yango soki esengeli.

Na ntina na Bootstrap oyo ezali koyanola

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
Emoniseli ya monene	1200px mpe likolo	70px ezali	30px ezali
Mbeba	980px mpe likolo	60px ezali	20px ezali
Batablɛti ya bililingi	768px mpe likolo	42px na yango	20px ezali
Batelefone na ba tablettes	767px mpe na nse	Ba colonnes fluides, ba largeurs fixes te
Batelefone	480px mpe na nse	Ba colonnes fluides, ba largeurs fixes te

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

Ba classes ya utilité oyo ezo répondre

Mpo na kosala nokinoki mpo na kosalela telefone ya mabɔkɔ, salelá bakelasi oyo ya lisalisi mpo na kolakisa mpe kobomba makambo na kotalela aparɛyi. Awa na se ezali na tableau ya ba classes oyo ezali mpe effet na yango na layout ya requête ya media donnée (etiqueté par appareil). Bakoki kozwa yango na responsive.less.

Kelasi	Batelefone767px mpe na nse	Ba tablettes979px na 768px	Ba bureaux ya bureauMbeba
`.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

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. Ba utilitaires réponses esengeli te kosalelama na ba tableaux, mpe lokola yango esungami te.

Cas ya test ya ba utilitaires réponses

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

Ba paramètres ya mokili mobimba