Lisolo

Na mikolo ya liboso ya Twitter, ba ingénieurs basalelaki pene na bibliothèque nionso oyo bayebaki malamu mpo na kokokisa masengami ya front-end. Bootstrap ebandaki lokola eyano na mikakatano oyo elakisama mpe bokoli noki noki na ntango ya Hackweek ya yambo ya Twitter.

Na lisalisi mpe makanisi ya ba ingénieurs mingi na Twitter, Bootstrap ekoli mingi mpo na kosangisa kaka ba styles ya moboko te, kasi ba modèles ya design ya front-end ya elegan mpe ya koumela mingi.

Tanga makambo mosusu na dev.twitter.com ›

Lisungi ya navigateur

Bootstrap emekami mpe esungami na ba navigateurs minene ya mikolo oyo lokola Chrome, Safari, Internet Explorer, mpe Firefox.

• Safari ya sika
• Google Chrome ya sika
• Firefox ya 4+
• Explorateur ya Internet 7+
• Opéra 11

Oyo ezali na kati

Bootstrap eyaka mobimba na CSS oyo esangisi, oyo esalemi te, mpe ba modèles ya ndakisa.

• Ba fichiers nionso ya .less original
• CSS oyo esalemi mobimba mpe esili kosala yango moke
• Mikanda ya styleguide ya mobimba
• Ndakisa ya modèle ya lokasa (mingi ekoya kala mingi te)

Grille ya liboso

Système ya grille par défaut oyo epesami lokola eteni ya Bootstrap ezali grille ya 940px ya largeur ya 16 colonnes. Ezali elengi ya système ya grille 960 oyo eyebani mingi, kasi kozanga marge/padding ya kobakisa na ngambo ya gauche mpe ya droite.

Ndakisa ya kosala bilembo ya grille

Ndenge elakisami awa, bobongisi ya moboko ekoki kosalama na "makonzí" mibale, moko na moko etali motango ya makonzí 16 ya moboko oyo tolimbolaki lokola eteni ya système na biso ya grille. Tala bandakisa oyo ezali awa na nse mpo na koyeba bokeseni mosusu.

<div kelasi = "molongo" > 
  <div classe = "span6 ya makonzí" > 
    ...
  </div>
  <div classe = "ba colonnes ya span10" > 
    ...
  </div>
</div>

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

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

Layout ya fluide

Structure ya lokasa ya fluide ya ndenge mosusu, oyo ekoki kobongwana na bonene ya min- mpe max mpe barre ya mopanzi ya lobɔkɔ ya mwasi. Ezali malamu mingi mpo na ba apps mpe ba docs.

<nzoto>
  <div class = "eloko-ya-conteneur" > 
    <div classe = "barre ya mopanzi" > 
      ...
    </div>
    <div classe = "makambo oyo ezali na kati" > 
      ...
    </div>
  </div>
</nzoto>

Mitó ya makambo & kopi

Hiérarchie typographique standard mpo na ko structurer ba pages web na yo.

Grille typographique mobimba esalemi na ba variables mibale ya Moins na fichier na biso ya preboot.less: @basefontmpe @baseline. Ya liboso ezali base font-size oyo esalelami na mobimba mpe ya mibale ezali base line-height.

Tosalelaka ba variables wana, mpe mwa matematiki, mpo na kosala ba marges, ba paddings, mpe ba line-heights ya lolenge na biso nyonso mpe mingi mosusu.

h1. Motó ya likambo 1

h2. Motó ya likambo 2

h3. Motó ya likambo 3

h4. Motó ya likambo 4

h5. Motó ya likambo 5

h6. Motó ya likambo 6

Ndakisa ya paragrafe

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus. Nullam id dolor id nibh ultricies mituka ut id elit.

Ndakisa ya motó ya likambo Ezali na motó ya likambo moke...

Misc. biloko oyo ezali na kati

Kosalela accent, ba adresses, & ba abréviations

<strong> <em> <address> <abbr>

Ntango nini osengeli kosalela

Esengeli kosalela bilembo ya konyata likebi ( <strong>mpe <em>) mpo na komonisa ntina mosusu to ya konyata liloba to fraze moko soki tokokanisi yango na kopi oyo ezali zingazinga na yango. Salelá <strong>mpo na ntina mpe <em>mpo na konyata mitungisi .

Konyata na paragrafe moko

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa kaka kofanda amet risus. Maecenas faucibus mollis oyo ezali na kati. Nulla vitae elit libero, oyo ezali na mbula-mpɛmbɛ oyo babengi pharetra augue.

Note: Ezali kaka malamu kosalela <b>mpe <i>ba tags na HTML5 mpe esengeli te kozala na style ya gras mpe italic, respectivement (bien que soki ezali na élément moko ya sémantique mingi, salela yango). <b>ezali mpo na kobimisa maloba to bafraze kozanga kopesa ntina mosusu, nzokande <i>ezali mingimingi mpo na mongongo, maloba ya tekiniki, mpe bongo na bongo.

Baadrɛsi

Elemento <address>esalelamaka mpo na ba informations ya contact mpo na nkɔkɔ na yango ya penepene, to nzoto mobimba ya mosala. Talá ndenge oyo ezali komonana:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890. Ezali ndenge moko na likambo ya kozala na bomoi ya malamu

Liyebisi: Molongo moko na moko na kati <address>esengeli kosuka na ligne-break ( <br />) to kozingama na tag ya niveau ya bloc (ndakisa, <p>) mpo na kobongisa malamu makambo oyo ezali na kati.

Maloba ya mokuse

Mpo na ba abréviations mpe ba sigles, salelá <abbr>tag ( <acronym>ezali déprecated na HTML5 ). Tia formulaire ya stenographie na kati ya tag mpe tia titre mpo na kombo mobimba.

Ba citations ya bloc

<blockquote> <p> <small>

Ndenge ya kosala citatio

Mpo na kotya blockquote, zipa <blockquote>mpe <p>bilembo <small>. Salelá <small>élément mpo na ko citer source na yo mpe okozwa em dash —liboso na yango.

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba oyo ezali na ntango ya liboso ya venenatis dapibus oyo ezali na velit aliquet.

Monganga Julius Hibbert

Ezali na ordre te<ul>

• Lorem ipsum dolor vanda amet
• Consectetur elit oyo ezali na mafuta
• Moléstie ya motángo mobimba lorem na massa
• Facilisis na aliquet ya nisl ya prétium
• Nulla volutpat azali na nzoto kolɔngɔnɔ
  • Eloko oyo babengi Phasellus iaculis neque
  • Purus sodales ya ba ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libéré volutpat na
• Faucibus porta lacus oyo ezali na mpɛmbɛ
• Aenean afanda amet erat nunc
• Eget porttitor lorem na kombo ya nzambe

Kozanga style<ul.unstyled>

• Lorem ipsum dolor vanda amet
• Consectetur elit oyo ezali na mafuta
• Moléstie ya motángo mobimba lorem na massa
• Facilisis na aliquet ya nisl ya prétium
• Nulla volutpat azali na nzoto kolɔngɔnɔ
  • Eloko oyo babengi Phasellus iaculis neque
  • Purus sodales ya ba ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libéré volutpat na
• Faucibus porta lacus oyo ezali na mpɛmbɛ
• Aenean afanda amet erat nunc
• Eget porttitor lorem na kombo ya nzambe

Epesamaki mitindo<ol>

1. Lorem ipsum dolor vanda amet
2. Consectetur elit oyo ezali na mafuta
3. Moléstie ya motángo mobimba lorem na massa
4. Facilisis na aliquet ya nisl ya prétium
5. Nulla volutpat azali na nzoto kolɔngɔnɔ
6. Faucibus porta lacus oyo ezali na mpɛmbɛ
7. Aenean afanda amet erat nunc
8. Eget porttitor lorem na kombo ya nzambe

Ndimboladl

Ba liste ya bandimbola

Liste ya kolimbola ezali malamu mpenza mpo na kolimbola maloba.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida na eget metus.

Malesuada ezali porta

Etiam porta sem malesuada ya monene ya mollis euismod.

Kotonga bamesa

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Bamesa ezali malamu mpenza —mpo na makambo mingi. Ba tableaux ya minene, cependant, esengeli na mua bolingo ya marquage po ezala na tina, évolutif, pe etangama (na niveau ya code). Talá mwa batoli oyo okoki kosalisa.

Zinga ntango nyonso mitó ya makonzí na yo na <thead>ndenge oyo ete hiérarchie ezala <thead>> <tr>> <th>.

Ndenge moko na mitó ya makonzí, makambo nyonso ya nzoto ya tableau na yo esengeli kozingama na <tbody>yango mpo hiérarchie na yo ezala <tbody>> <tr>> <td>.

Ndakisa: Ba styles ya tableau par défaut

Ba tableaux nionso ekozala automatiquement styled na kaka ba frontières essentielles pona ko assurer lecture pe ko maintenir structure. Pas besoin ya kobakisa ba classes to ba attributs ya likolo.

# .	Prenom	Nkombo ya libota	Lokota
1. 1.	Mosusu	Moko	Lingelesi
2. 2	Joe	Sixpack ya nzoto	Lingelesi
3	Stu	Dent	Code

<mesa>
  ...
</tableau>

Ndakisa: Ezali na bansinga ya zébra

Bozwa mwa kitoko na bamesa na bino na kobakisa zebra-striping —bakisa kaka .zebra-stripedkelasi.

# .	Prenom	Nkombo ya libota	Lokota
1. 1.	Mosusu	Moko	Lingelesi
2. 2	Joe	Sixpack ya nzoto	Lingelesi
3	Stu	Dent	Code

Liyebisi: Zebra-striping ezali bobongisi ya kokende liboso oyo ezali te mpo na ba navigateurs ya kala lokola IE8 mpe na nse.

< kelasi ya mesa = "ezali na bansinga ya zébré" > 
...
</tableau>

Ndakisa: Zébra-rayé w/ TableSorter.js

Soki tozwi ndakisa ya liboso, tobongisi litomba ya ba tableaux na biso na kopesaka mosala ya kosala triage na nzela ya jQuery mpe plugin ya Tablesorter . Finá na motó ya likambo ya colonne nyonso mpo na kobongola ndenge oyo ozali kosala.

# .	Prenom	Nkombo ya libota	Lokota
1. 1.	Ya yo	Moko	Lingelesi
2. 2	Joe	Sixpack ya nzoto	Lingelesi
3	Stu	Dent	Code

<script src = "js/jquery/jquery.molongo ya ba tableaux.min.js" ></script> 
<script ya > 
  $ ( mosala () { . 
    $ ( "tableau#kobongisa Ndakisa ya Tableau" ). mobongisi ya mesa ({ Liste ya molongo : [[ 1 , 0 ]] });  
  });
</script>
< kelasi ya mesa = "ezali na bansinga ya zébré" > 
  ...
</tableau>

Ba styles ya défaut

Ba formulaire nionso epesami ba styles par défaut pona ko présenter yango na ndenge ya kotanga pe ya ko évoluer. Ba styles epesami mpo na bokotisi makomi, ba liste ya kopona, bisika ya makomi, ba boutons ya radio mpe ba cases ya kotiya bilembo, mpe ba boutons.

Ndakisa ya lolenge ya lisapo

X-Entrée ya monene

Kopona

1. 1. 2. 2 3 4. 5

Kopona

1. 1. 2. 2 3 4. 5

Entrée oyo ekoki kobongisama te

Ba Valeurs Mususu Awa

Entrée désactivé

X-Entrée ya monene

Eteni ya moke ya makomi ya lisalisi

Ndakisa ya lolenge ya lisapo

Texte oyo esili kozela

@

Boîte de contrôle oyo esalemi liboso

Boîte de contrôle oyo ebakisami

Bokotisi ya Fisyé

Ndakisa ya lolenge ya lisapo

Liste ya ba Options

• Nzela ya liboso ezali oyo mpe oyo —kobosana te kokɔtisa ntina oyo ezali malamu mpenza
• Option ya mibale ekoki pe ko vérifier pe ko kotisa na ba résultats ya formulaire
• Nzela ya misato ekoki —ɛɛ, okanisaki yango —ekoki mpe kotalama mpe kokɔtisa yango na ba résultats ya formulaire
• Option ya minei ekoki ko vérifier te lokola ezali désactivé.

Liyebisi: Ba étiquettes ezingami na ba options nionso mpo na ba zones ya cliquage ya minene mingi mpe formulaire oyo ekoki kosalelama mingi.

Molongo ya mikolo

na Bangonga nyonso elakisami lokola ngonga ya Pasifike (GMT -08:00).

Esika ya makomi

Bloc ya texte ya lisungi mpo na kolimbola esika oyo ezali likolo soki esengeli.

Liste ya ba Options

• Nzela ya liboso ezali oyo mpe oyo —kobosana te kokɔtisa ntina oyo ezali malamu mpenza
• Option mibale ekoki ezali eloko mosusu mpe kopona yango ekolongola kopona ba options 1

  Kolongola

Baformilɛrɛ oyo batyá ebele

Bakisa .form-stackedna HTML ya formulaire na yo mpe okozala na ba étiquettes likolo ya ba champs na bango na esika ya na gauche na bango. Yango esalaka malamu soki ba formulaire na yo ezali mokuse to ozali na ba colonne mibale ya ba entrées mpo na ba formulaire ya kilo.

Ndakisa ya lolenge ya lisapo

X-Entrée ya monene

Kopona

1. 1. 2. 2 3 4. 5

Ndakisa ya lolenge ya lisapo

X-Entrée ya monene

Eteni ya moke ya makomi ya lisalisi

Liste ya ba Options

• Nzela ya liboso ezali oyo mpe oyo —kobosana te kokɔtisa ntina oyo ezali malamu mpenza
• Option ya mibale ekoki pe ko vérifier pe ko kotisa na ba résultats ya formulaire

Liyebisi: Ba étiquettes ezingami na ba options nionso mpo na ba zones ya cliquage ya minene mingi mpe formulaire oyo ekoki kosalelama mingi.

Bomba Mbongwana  Kolongola

Ba boutons

Lokola boyokani, ba boutons esalelamaka mpo na misala nzokande ba liens esalelamaka mpo na biloko. Ndakisa, "Télécharger" ekoki kozala bouton mpe "activité récente" ekoki kozala lien.

Ba boutons nionso par défaut na style ya gris clair, kasi nombre ya ba classes fonctionnelles ekoki kosalelama pona ba styles ya couleur différente. Bakelasi yango ezali na kelasi ya langi ya bule .primary, kelasi ya langi ya bule makasi .info, kelasi ya langi ya vert .success, mpe kelasi ya motane .danger. Plus, ko rouler ba styles na yo moko eza facile peasy.

Ndakisa ya ba boutons

Ba styles ya boutons ekoki kozala appliqué na eloko nionso na oyo .btnesalemi. Na momesano okolinga kosalela yango kaka na <a>, <button>, mpe kopona <input>biloko. Talá ndenge oyo ezali komonana:

Bokeseni ya ba taille

Fancy ba boutons ya minene to ya mike? Zalá na yango!

Etat ya désactivé

Mpo na ba boutons oyo ezali activé te to oyo ezali désactivé na appli mpo na ntina moko to mosusu, salelá état désactivé. Yango ezali .disabledmpo na ba liens mpe :disabledmpo na <button>ba éléments.

Ba liens

Ba boutons

Ezali nini

Barre na biso ya likolo ezali barre fixe oyo ezali na logo to kombo ya site internet, navigation ya liboso, mpe formulaire ya recherche.

Personnalisable na ndenge ya moto ye moko

Ba éléments nionso na kati, pe topbar mobimba lokola, ezali optionnel. Okoki kopona kotya logo/kombo, nav, boluki, mpe nav ya mibale —to kosangisa nyonso ya yango.

Ba dropdowns ezali na kati

Lokola eteni ya navigation principale, totie makoki mpo na yo kobakisa ba dropdowns na nav na yo. Tala nav secondaire oyo ezali likolo (aligné na droite) po omona ndenge esalemaka.

Ba onglets na ba pilili

Bosala navigation secondaire simple na <ul>. Bobongola kati na ba onglets to ba pilili na kobakisa kelasi oyo ebongi.

Grand mpo na ba sous-sections ya contenus lokola ba pages ya paramètres ya compte na biso mpe ba timelines ya usager mpo na toggling entre ba pages ya contenus lokola. Ezali na ba styles ya tabbed to ya pilili.

• Ndako
• Profil
• Ba messages
• Ba paramètres
• Kokutana
• Kokita ya nse
  • Lien ya mibale
  • Eloko mosusu awa
  • Lien mosusu

<ul classe = "ba onglets" > 
  <li kelasi = "mosala" ><a href = "#" > Ndako </a></li>  
  <li><a href = "#" > Lisolo ya bato </a></li> 
  <li><a href = "#" > Ba sango </a></li> 
  <li><a href = "#" > Bobongisi </a></li> 
  <li><a href = "#" > Bokutani na </a></li> 
</ul>

• Ndako
• Profil
• Ba messages
• Ba paramètres
• Kokutana

<ul classe = "pilili" > 
  <li kelasi = "mosala" ><a href = "#" > Ndako </a></li>  
  <li><a href = "#" > Lisolo ya bato </a></li> 
  <li><a href = "#" > Ba sango </a></li> 
  <li><a href = "#" > Bobongisi </a></li> 
  <li><a href = "#" > Bokutani na </a></li> 
</ul>

Kosala ba paginations

Pagination ultra simpliste et minimalement style inspirée par Rdio. Bloc ya monene ezali mpasi mpo na kozanga, ekoki ko évoluer na pete, mpe epesaka bisika ya minene ya ko cliquer.

<div classe = "kosala lokasa" > 
  <ul>
    <li class = "liboso ekangamaki" ><a href = "#" > ← Liboso </a></li>  
    <li kelasi = "mosala" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> Ezali ndenge nini? 
    <li><a href = "#" > 3 </a></li> Ezali ndenge nini? 
    <li><a href = "#" > 4 ​​</a></li> Ezali ndenge nini? 
    <li><a href = "#" > 5 </a></li> Ezali ndenge nini? 
    <li class = "oyo elandi" ><a href = "#" > Oyo elandi → </a></li>  
  </ul>
</div>

Ba alertes ya base

div.alert-message

Ba messages ya ligne moko pona ko souligner échec, échec oyo ekoki kozala, to elonga ya action moko. Mingimingi ezali na ntina mpo na baformilɛrɛ.

Bokanga ba messages

div.alert-message.block-message

Mpo na ba messages oyo esengaka mua explication, tozali na ba alertes ya style ya paragraphe. Yango ezali malamu mpenza mpo na kobimisa bansango ya mabunga milai, kokebisa mosaleli na likambo oyo ezali kozela, to kaka kolakisa makambo mpo na kotya likebi mingi na lokasa.

Ba modaux

Modals —ba dialogues to ba lightboxes —ezali malamu mingi mpo na misala ya contexte na makambo oyo ezali na ntina ete contexte ya sima ebatelama.

Batoli ya bisaleli

Twipsies ezali super utile pona ko aider usager confus pe ko pointer bango na direction ya bien.

Bapopovers

Salelá ba popovers mpo na kopesa nsango ya nse ya makomi na lokasa moko kozanga ete ezala na bopusi likoló na layout.

Bootstrap etongamaki na Preboot , pack ya source ouverte ya ba mixins mpe ba variables oyo ekosalelama elongo na Less , préprocesseur ya CSS mpo na développement web ya mbangu mpe ya pete.

Tala ndenge tosalelaki Preboot na Bootstrap mpe ndenge nini okoki kosalela yango soki oponi kosala Less na projet na yo ya sima.

Ndenge ya kosalela yango

Salelá option oyo mpo na kosalela malamu ba variables Less ya Bootstrap, mixins, mpe nesting na CSS na nzela ya javascript na navigateur na yo.

<link rel = "lokasa ya lolenge/moke" href = "moke/bootstrap.moke" media = "nyonso" />    
<script src = "js/moke-1.1.3.min.js" ></script> 

Ozali koyoka te solution ya .js? Meka appli Less Mac to salela Node.js mpo na ko compiler tango ozali ko déployer code na yo.

Oyo ezali na kati

Tala mwa makambo ya ntina ya oyo ezali na kati ya Twitter Bootstrap lokola eteni ya Bootstrap. Motó na site Internet ya Bootstrap to lokasa ya projet Github mpo na kozwa mpe koyeba makambo mingi.

Ba variables oyo ezali

Variables na Moins ezali parfait pona ko maintenir pe ko mettre à jour CSS na yo sans mutu pasi. Ntango olingi kobongola motuya ya langi to motuya oyo osalelaka mingi, salá yango na esika moko mpe otye yango.

// Ba liens
@LienColor : #8b59c2 na mokili mobimba;         
@LienColorHover :     molili ( @LienColor , 10 ); 
 
// Ba gris
@moindo : #000;             
@grayDark :           kopesa pole ( @moindo , 25 %); 
@gris :               kopelisa pole ( @noir , 50 %); 
@Light ya gris :          kopelisa ( @noir , 70 %); 
@grayLighter :        kopelisa pole ( @moindo , 90 %); 
@mondele : #fff;             
 
// Ba couleurs ya accent
@bleu : #08b5fb na mokili mobimba;              
@vert : #46a546 na mokili mobimba;             
@motane : #9d261d;               
@ya langi ya jaune : #ffc40d;            
@orange : #f89406 na mokili mobimba;            
@rose : #c3325f na mokili mobimba;              
@violet : #7a43b6 na mokili mobimba;            
 
// Grille ya base
@fonte ya moboko : 13px ;          
@molongo ya ebandeli : 18px ;          

Kopesa makanisi

/* ... */Less epesaka pe style mosusu ya commentaire en plus ya syntaxe normale ya CSS .

// Oyo ezali commentaire
/* Oyo pe eza commentaire */

Mixins likolo ya wazoo

Mixins ezali essentiellement ba inclus to ba partiels pona CSS, e permettre yo osangisa bloc ya code na moko. Bazali malamu mpo na ba propriétés ya préfix ya motɛkisi lokola box-shadow, ba gradients ya navigateur croisé, ba stacks ya ba fonts, mpe mingi mosusu. Awa na se ezali na échantillon ya ba mixins oyo ezali na kati ya Bootstrap.

Ba stacks ya ba fonts

#fonte { .
  . stenographie ( @kilo : normal , @taille : 14px , @Bolai ya ligne : 20px ) {     
    fonte - bonene : @bonene ; 
    font - kilo : @kilo ; 
molai ya     molongo : @Bolai ya molongo ; 
  } .
  . sans - serif ( @kilo : normal , @taille : 14px , @Bolai ya ligne : 20px ) {     
libota ya     makomi : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    fonte - bonene : @bonene ; 
    font - kilo : @kilo ; 
molai ya     molongo : @Bolai ya molongo ; 
  } .
  . serif ( @kilo : normal , @taille : 14px , @Bolai ya ligne : 20px ) {     
libota ya     makomi : "Géorgie" , Times New Roman , Times , sans - serif ;     
    fonte - bonene : @bonene ; 
    font - kilo : @kilo ; 
molai ya     molongo : @Bolai ya molongo ; 
  } .
  . monospace ( @kilo : normal , @taille : 12px , @Bolai ya ligne : 20px ) {     
    font - famille : "Monaco" , Courier Nouveau , esika moko ;   
    fonte - bonene : @bonene ; 
    font - kilo : @kilo ; 
molai ya     molongo : @Bolai ya molongo ; 
  } .
} .

Ba gradients

#gradient { .
  . horizontal ( @Couleur ya ebandeli : #555, @Couleur ya suka: #333) { 
langi ya     nsima : @endColor ; 
    fond - kozongela : kozongela - x ;
    fond - image : - khtml - gradient ( linéaire , likolo ya gauche , likolo ya droite , kobanda ( @startColor ), tii na ( @endColor )); // Moto oyo azali kosala mobulu   
    fond - image : - moz - linéaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // FF 3,6+ ezali    
    fond - image : - ms - lineaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // IE10    
    fond - image : - webkit - gradient ( linéaire , likolo gauche , likolo ya droite , couleur - arrêt ( 0 %, @startColor ), couleur - arrêt ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fond - image : - webkit - linéaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // Safari 5.1+, Chrome 10+    
    fond - image : - o - linéaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // Opéra 11.10    
    fond - image : linéaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // Le standard   
  } .
  . vertical ( @Langi ya ebandeli : #555, @Langi ya suka: #333) { 
langi ya     nsima : @endColor ; 
    fond - kozongela : kozongela - x ;
    fond - image : - khtml - gradient ( linéaire , likolo na gauche , na se gauche , kobanda na ( @startColor ), tii na ( @endColor )); // Moto oyo azali kosala mobulu   
    fond - image : - moz - linéaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // FF 3,6+ ezali   
    fond - image : - ms - linéaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // IE10   
    fond - image : - webkit - gradient ( linéaire , gauche haut , gauche na se , couleur - arrêt ( 0 %, @startColor ), couleur - arrêt ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fond - image : - webkit - linéaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // Safari 5.1+, Chrome 10+   
    fond - image : - o - lineaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // Opéra 11.10   
    fond - image : linéaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // Mobeko ya momesano  
  } .
  . directionnel ( @Couleur ya ebandeli : #555, @Couleur ya suka: #333, @deg: 45deg) { 
    ...
  } .
  . vertical - misato - balangi ( @Couleur ya ebandeli : #00b3ee, @Couleur ya katikati: #7a43b6, @CouleurStop: 50%, @Couleur ya suka: #c3325f) { 
    ...
  } .
} .

Opérations na système ya grille

Bozua fancy pe bosala mua mathématiques pona ko produire ba mixins flexibles et puissants lokola oyo ezali awa na se.

// Griditude ya kosala
@gridMakonzí : 16 ;       
@gridBolai ya Likonzí : 40px ;   
@gridBolai ya Gutter : 20px ;   
@Bolai ya esika : ( @Makonzí ya grille * @Bolai ya makonzí ya grille ) + ( @Bolai ya makonzí ya grille * ( @Makonzí ya grille - 1 ));                 
 
// Système ya grille
. eloko oyo batyaka na kati { .
  bonene : @Bolai ya esika ; 
  marge : 0 na ndenge ya automatique ;  
  . bobongisi ya polele ();
} .
. makonzí ( @columnSpan : 1 ) { .  
  bonene : ( @Bolai ya Likonzí ya grille * @Esika ya Likonzí ) + ( @Bolai ya Likonzí ya grille * ( @Etando ya Likonzí - 1 ));         
} .
. offset ( @columnOffset : 1 ) { Ezali ndenge nini?  
  margin - gauche : ( @Bolai ya Likolo ya grille * @Offset ya colonne ) + ( @Bolai ya Gutter ya grille * ( @Offset ya colonne - 1 )) + @extraSpace ;           
} .