Pakasaritaan

Kadagiti immun-una nga aldaw ti Twitter, inusar dagiti inheniero ti dandani aniaman a libraria a pamiliar kadakuada tapno matungpal dagiti kasapulan iti front-end. Nangrugi ti Bootstrap a kas sungbat kadagiti karit a naiparang ken napartak a naparpartak ti panagdur-as bayat ti umuna a Hackweek ti Twitter.

Babaen ti tulong ken feedback dagiti adu nga inheniero iti Twitter, ti Bootstrap ket dimmakkel a dakkel tapno mangsaklaw saan laeng a dagiti batayan nga estilo, ngem dagiti ad-adu nga elegante ken naandur a padron ti disenio ti front-end.

Basaen ti ad-adu pay iti dev.twitter.com ›

Suporta ti browser

Nasubok ken nasuportaran ti Bootstrap kadagiti kangrunaan a moderno a browser a kas iti Chrome, Safari, Internet Explorer, ken Firefox.

• Kaudian nga Safari
• Kaudian a Google Chrome
• Firefox nga 4+
• Internet nga Eksplorador 7+
• Opera nga 11

Ania ti nairaman

Ti Bootstrap ket umay a kompleto kadagiti naurnong a CSS, saan a naurnong, ken dagiti pagarigan a plantilia.

• Amin nga orihinal a .less a file
• Naan-anay a naurnong ken napabassit ti CSS
• Kompleto a dokumentasion ti styleguide
• Pagarigan ti plantilia ti panid (ad-adu pay ti umay iti mabiit) .

Default nga grid

Ti kasisigud a sistema ti grid a naited a kas paset ti Bootstrap ket ti 940px a kalawa a 16-kolum a grid. Daytat’ raman ti nalatak a 960 grid system, ngem awan ti kanayonan a margin/padding iti kannigid ken kannawan a sikigan.

Pagarigan ti grid markup

Kas naipakita ditoy, ti batayan a layout ket mabalin a maparsua babaen ti dua a "adigi," tunggal maysa ket mangsaklaw ti bilang dagiti 16 a pundasional nga adigi nga inkeddengmi a kas paset ti sistema ti gridmi. Kitaen dagiti pagarigan iti baba para kadagiti ad-adu pay a panagduduma.

<div klase = "hilera" > 
  <div klase = "span6 nga adigi" > 
    ...
  </div>
  < klase ti div = "span10 nga adigi" > 
    ...
  </div>
</div>

Natakder ti layout

Ti default ken simple a 940px-a kalawa, naisentro a layout para iti dandani laeng ania man a website wenno panid nga inted babaen ti maymaysa <div.container>.

<bagi> nga
  <div klase = "laon" > 
    ...
  </div>
</bagi>

Layout ti pluido

Maysa nga alternatibo, nalaka a maibagay nga estruktura ti panid ti pluido nga addaan kadagiti min- ken max-a kalawa ken ti kannigid a sidebar. Nasayaat para kadagiti apps ken docs.

<bagi> nga
  <div klase = "paglaon-a-pluido" > 
    <div klase = "bara ti sikigan" > 
      ...
    </div>
    <div klase = "linaon" > 
      ...
    </div>
  </div>
</bagi>

Dagiti paulo & kopia

Ti maysa a pagalagadan a tipograpiko a hirarkia para iti panangistruktura kadagiti panidmo iti web.

Ti sibubukel a grid ti tipograpiko ket naibatay iti dua a Basbassit a variable iti preboot.less a papelestayo: @basefontken @baseline. Ti umuna ket ti base font-size a nausar iti intero ken ti maikadua ket ti base line-height.

Usarenmi dagita a variable, ken sumagmamano a matematika, tapno mangpartuat kadagiti margin, padding, ken line-heights ti amin a kitami ken dadduma pay.

h1. Paulo 1

h2. Paulo 2

h3. Paulo 3

h4. Paulo 4

h5. Paulo 5

h6. Paulo 6

Pagarigan ti parapo

Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies lugan ut id elit.

Pagarigan ti paulo Adda sub-paulo...

Misc. dagiti elemento

Panangusar iti panangipaganetget, adres, & abbreviation

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

Kaano nga usaren

Rumbeng a mausar dagiti emphasis tag ( <strong>ken <em>) a mangipakita iti kanayonan a kinapateg wenno panangipaganetget iti maysa a sao wenno ragup ti sasao no maidilig iti aglawlawna a kopia. Usaren <strong>para iti kinapateg ken <em>para iti panangipaganetget iti stress .

Ipaganetget iti maysa a parapo

Fusce dapibus , tellus ac cursus commodo , tortor mauris kondimento nibh , ut fermentum masa justo agtugaw amet risus. Maecenas nga faucibus nga mollis nga interdum. Nulla vitae elit libero, maysa a pharetra nga augue.

Pakaammo: Okey pay laeng ti agusar <b>ken <i>dagiti etiketa iti HTML5 ken saan a kasapulan nga estilo a bold ken italic, a nagsasaruno (nupay no adda ti ad-adu a semantiko nga elemento, usaren daytoy). <b>ket nairanta a mangitag-ay kadagiti balikas wenno ragup ti sasao a saan a mangipaay iti kanayonan a kinapateg, idinto <i>a kaaduanna ket para iti timek, teknikal a termino, kdpy.

Dagiti Adres

Ti <address>elemento ket naus-usar para iti impormasion ti pannakiuman para iti kaasitgan nga inapona, wenno ti sibubukel a bagi ti trabaho. Kastoy ti langana:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890. Ti panagadal ti panagbiag ti tao

Pakaammo: Tunggal linia iti maysa <address>ket masapul nga agpatingga iti line-break ( <br />) wenno mabalkot iti maysa a block-level tag (kas pagarigan, <p>) tapno umno nga istruktura ti linaon.

Dagiti abbreviation

Para kadagiti abbreviation ken acronym, usaren ti <abbr>tag ( <acronym>ket saanen a maus-usar iti HTML5 ). Ikabil ti porma ti shorthand iti uneg ti tag ken mangikeddeng iti paulo para iti kompleto a nagan.

Dagiti sitas ti bloke

<blockquote> <p> <small>

Kasano ti ag-quote

Tapno mairaman ti blockquote, ibalkot <blockquote>ken <p>tag <small>. Usaren ti <small>elemento a mangidatag ti taudanmo ket makagun-odka iti em dash —sakbay daytoy.

Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer a posuere erat maysa nga ante venenatis dapibus a posuere velit aliquet.

Ni Julius Hibbert ni Dr

Di naurnos<ul>

• Lorem ipsum dolor agtugaw amet
• Consectetur nga adipiscing nga elit
• Integer nga molestie lorem iti masa
• Facilisis iti pretium nisl nga aliquet
• Nulla volutpat nga aliquam nga velit
  • Phasellus nga iaculis nga neque
  • Purus dagiti sodales nga ultricies
  • Vestibulum nga laoreet nga porttitor sem
  • Ac tristique nga libero nga volutpat ni
• Faucibus porta nga lakos nga fringilla vel
• Aenean agtugaw amet erat nunc
• Eget nga porttitor nga lorem

Saan nga estilo<ul.unstyled>

• Lorem ipsum dolor agtugaw amet
• Consectetur nga adipiscing nga elit
• Integer nga molestie lorem iti masa
• Facilisis iti pretium nisl nga aliquet
• Nulla volutpat nga aliquam nga velit
  • Phasellus nga iaculis nga neque
  • Purus dagiti sodales nga ultricies
  • Vestibulum nga laoreet nga porttitor sem
  • Ac tristique nga libero nga volutpat ni
• Faucibus porta nga lakos nga fringilla vel
• Aenean agtugaw amet erat nunc
• Eget nga porttitor nga lorem

Nabilin<ol>

1. Lorem ipsum dolor agtugaw amet
2. Consectetur nga adipiscing nga elit
3. Integer nga molestie lorem iti masa
4. Facilisis iti pretium nisl nga aliquet
5. Nulla volutpat nga aliquam nga velit
6. Faucibus porta nga lakos nga fringilla vel
7. Aenean agtugaw amet erat nunc
8. Eget nga porttitor nga lorem

Panangiladawandl

Dagiti listaan ​​ti panangiladawan

Ti listaan ​​ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.

Euismod nga

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

Donec id elit nga saan nga mi porta gravida iti eget metus.

Malesuada nga porta

Etiam porta sem malesuada nga agtagibalay nga euismod.

Panagaramid kadagiti lamisaan

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

Nasayaat dagiti lamisaan—para iti adu a banag. Dagiti naindaklan a lamisaan, nupay kasta, kasapulanda ti sangkabassit a panagayat ti panagmarka tapno makatulong, maipadakkel, ken mabasa (iti lebel ti kodigo). Adtoy ti sumagmamano a tips a makatulong.

Kanayon a baluten dagiti ulo ti kolummo iti <thead>kastoy a ti hirarkia ket <thead>> <tr>> <th>.

Kasla dagiti ulo ti kolum, amin a linaon ti bagi ti lamisaanmo ket rumbeng a nabalkot iti maysa <tbody>isu a ti hirarkiam ket <tbody>> <tr>> <td>.

Pagarigan: Dagiti default nga estilo ti lamisaan

Amin a lamisaan ket automatiko nga estilo nga addaan laeng kadagiti nasken a beddeng tapno masigurado ti pannakabasa ken mataginayon ti estruktura. Saan a kasapulan ti mangnayon kadagiti ekstra a klase wenno attribute.

#	Nagan	Apelyido	Lengguahe
1 nga	Sumagmamano	Maysa	Ingles
2. 2	Joe nga	Sixpack nga	Ingles
3.	Stu nga	Dent nga	Kodigo nga

<lamisaan>
  ...
</table>

Kas pagarigan: Zebra-striped

Agbalinka a magarbo bassit kadagiti lamisaanmo babaen ti pananginayon iti zebra-striping—inayonmo laeng ti .zebra-stripedklase.

#	Nagan	Apelyido	Lengguahe
1 nga	Sumagmamano	Maysa	Ingles
2. 2	Joe nga	Sixpack nga	Ingles
3.	Stu nga	Dent nga	Kodigo nga

Pakaammo: Ti Zebra-striping ket maysa a progresibo a panagpasayaat a saan a magun-od para kadagiti daan a browser a kas ti IE8 ken iti baba.

< klase ti lamisaan = "zebra-striped" > 
...
</table>

Pagarigan: Zebra-a-garis w / TableSorter.js

Iti panangala ti napalabas a pagarigan, pasayaatenmi ti pakausaran dagiti lamisaanmi babaen ti panangipaay ti panagusar ti panagurnos babaen ti jQuery ken ti plugin ti Tablesorter . I-click ti header ti ania man a kolum tapno baliwan ti panagurnos.

#	Nagan	Apelyido	Lengguahe
1 nga	Bukod mo	Maysa	Ingles
2. 2	Joe nga	Sixpack nga	Ingles
3.	Stu nga	Dent nga	Kodigo nga

<script src = "js/jsaludsod/jsaludsod.tablesorter.min.js" ></script> 
<iskrip > 
  $ ( trabaho () { . 
    $ ( "table#sortPagarigan ti Lamisaan" ). tablesorter ({ Listaan ​​ti panagurnos : [[ 1 , 0 ]] });  
  });
</script>
< klase ti lamisaan = "zebra-striped" > 
  ...
</table>

Dagiti default nga estilo

Amin a porma ket naikkan kadagiti default nga estilo tapno maipresenta dagitoy iti mabasa ken maipadakkel a wagas. Dagiti estilo ket naited para kadagiti panagserrek ti teksto, dagiti listaan ​​ti panagpili, dagiti lugar ti teksto, dagiti buton ti radio ken dagiti kahon ti tsek, ken dagiti buton.

Pagarigan ti porma a sarsarita

X-Dakkel nga Input

Agpili

1 nga 2. 2 3. 4. 5.

Agpili

1 nga 2. 2 3. 4. 5.

Di Ma-edit nga Input

Sumagmamano a Pateg Ditoy

Nabaldado nga Input

X-Dakkel nga Input

Bassit a snippet ti teksto ti tulong

Pagarigan ti porma a sarsarita

Nasaksakbay a Teksto

@

Nasaksakbay a Nasaksakbay a Kahon ti Tsek

Naikapet a Checkbox

Input ti File

Pagarigan ti porma a sarsarita

Listaan ​​dagiti Pagpilian

• Ti umuna a pagpilian ket daytoy ken dayta—siguraduenyo nga iraman no apay a nagsayaat dayta
• Mabalin met a kitaen ti pagpilian dua ken mairaman kadagiti resulta ti porma
• Mabalin met a kitaen ken mairaman ti pagpilian a maikatlo—wen, napagtengmo dayta—ket mairaman kadagiti resulta ti porma
• Saan a ma-check ti Option four ta na-disable.

Pakaammo: Dagiti etiketa ket manglikmut kadagiti amin a pagpilian para kadagiti dakdakkel nga amang a lugar ti panagpidut ken ti ad-adu a mausar a porma.

Sakop ti Petsa

tapno Amin nga oras ket naipakita a kas ti Pagalagadan nga Oras ti Pasipiko (GMT -08:00).

Lugar ti Teksto

Block ti teksto ti tulong tapno mailadawan ti tay-ak iti ngato no kasapulan.

Listaan ​​dagiti Pagpilian

• Ti umuna a pagpilian ket daytoy ken dayta—siguraduenyo nga iraman no apay a nagsayaat dayta
• Ti pagpilian dua mabalin ket sabali a banag ken ti panangpili iti dayta ket mangikkat iti panangpili kadagiti pagpilian 1

  Ikansela

Naurnong dagiti porma

Inayonmo .form-stackediti HTML ti pormam ket maaddaanka kadagiti etiketa iti rabaw dagiti tay-akda imbes nga iti kannigidda. Daytoy ket agtrabaho a nasayaat no dagiti pormam ket ababa wenno addaanka iti dua a kolum dagiti input para kadagiti nadagdagsen a porma.

Pagarigan ti porma a sarsarita

X-Dakkel nga Input

Agpili

1 nga 2. 2 3. 4. 5.

Pagarigan ti porma a sarsarita

X-Dakkel nga Input

Bassit a snippet ti teksto ti tulong

Listaan ​​dagiti Pagpilian

• Ti umuna a pagpilian ket daytoy ken dayta—siguraduenyo nga iraman no apay a nagsayaat dayta
• Mabalin met a kitaen ti pagpilian dua ken mairaman kadagiti resulta ti porma

Pakaammo: Dagiti etiketa ket manglikmut kadagiti amin a pagpilian para kadagiti dakdakkel nga amang a lugar ti panagpidut ken ti ad-adu a mausar a porma.

Idulin dagiti Panagbalbaliw  Ikansela

Dagiti Buton

Kas maysa a konbension, dagiti buton ket maus-usar para kadagiti tignay bayat a dagiti silpo ket maus-usar para kadagiti banag. Kas pagarigan, ti "I-download" ket mabalin a maysa a buton ken ti "nabiit pay nga aktibidad" ket mabalin a maysa a silpo.

Amin a buton ket agdefault iti nalawag nga abuabu nga estilo, ngem ti bilang dagiti klase ti panagandar ket mabalin a mayaplikar para kadagiti nadumaduma nga estilo ti kolor. Dagitoy a klase iramanna ti maysa nga asul a .primaryklase, maysa a nalawag-asul a .infoklase, maysa a berde a .successklase, ken maysa a nalabaga a .dangerklase. Plus, nalaka a peasy ti panangi-roll kadagiti bukodmo nga estilo.

Pagarigan dagiti buton

Mabalin nga iyaplikar dagiti estilo ti buton iti aniaman nga addaan iti .btnnaipakat. Gagangay a kayatmo nga iyaplikar dagitoy kadagiti laeng <a>, , ken dagiti elemento a <button>mangpili . <input>Kastoy ti langana:

Agsisinnublat dagiti kadakkel

Magarbo a dakdakkel wenno basbassit a butones? Adda koma iti dayta!

Kasasaad ti baldado

Para kadagiti buton a saan nga aktibo wenno baldado ti app gapu iti maysa wenno sabali a rason, usarem ti disabled state. Dayta ket .disabledpara kadagiti link ken :disabledpara kadagiti <button>elemento.

Dagiti silpo

Dagiti Buton

Ania dayta

Ti topbar-mi ket maysa a fixed bar a nakaikabilan ti logo wenno nagan ti website, kangrunaan a nabigasion, ken porma ti panagbirok.

Mabalin nga i-customize

Amin nga elemento iti uneg, ken ti sibubukel a topbar pay, ket opsional. Mabalinmo a pilien nga iraman ti logo/nagan, nav, panagbirok, ken segundario a nav—wenno aniaman a kombinasion dayta.

Nairaman dagiti dropdown

Kas paset ti kangrunaan a nabigasion, inramanmi ti abilidad para kenka a mangnayon kadagiti dropdown iti nav-mo. Kitaen ti secondary nav iti ngato (right aligned) tapno makita no kasano ti pannakaaramidna.

Tabs ken pildoras

Mangpartuat ti simple a sekondario a panaglayag babaen ti <ul>. Agsinnukat iti nagbaetan dagiti tab wenno pildoras babaen ti pananginayon iti maitutop a klase.

Nasayaat para kadagiti sub-seksion ti linaon a kas dagiti panid ti panagitunos ti kuentami ken dagiti linia ti oras ti agar-aramat para iti panagbalbaliw iti nagbaetan dagiti panid ti kas iti linaon. Magun-odan iti tabbed wenno estilo ti pildoras.

• Balay
• Profile
• Dagiti Mensahe
• Dagiti Pagsaad
• Kontaken
• Dropdown nga
  • Segundario a silpo
  • Sabali pay ditoy
  • Sabali pay a silpo

<ul klase = "dagiti tab" > 
  <li klase = "aktibo" ><a href = "#" > Pagtaengan </a></li>  
  <li><a href = "#" > Pakasaritaan </a></li> 
  <li><a href = "#" > Dagiti Mensahe </a></li> 
  <li><a href = "#" > Dagiti Pagsaad </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

• Balay
• Profile
• Dagiti Mensahe
• Dagiti Pagsaad
• Kontaken

<ul klase = "pildoras" > 
  <li klase = "aktibo" ><a href = "#" > Pagtaengan </a></li>  
  <li><a href = "#" > Pakasaritaan </a></li> 
  <li><a href = "#" > Dagiti Mensahe </a></li> 
  <li><a href = "#" > Dagiti Pagsaad </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

Panagpagina

Ultra a simple ken minimal nga estilo ti pagination nga inspired ti Rdio. Ti dakkel a bloke ket narigat a malipatan, nalaka a maipadakkel, ken mangipaay kadagiti dadakkel a lugar ti panag-click.

<div klase = "paginasyon" > 
  <ul> nga
    <li klase = "nabayagen a nabaldado" ><a href = "#" > ← Naudi nga </a></li>  
    <li klase = "aktibo" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 nga </a></li> 
    <li><a href = "#" > 3 nga </a></li> 
    <li><a href = "#" > 4 ​​nga </a></li> 
    <li><a href = "#" > 5 nga </a></li> 
    <li klase = "sumaruno" ><a href = "#" > Sumaruno → </a></li> nga adda  
  </ul>
</div>

Dagiti kangrunaan nga alerto

div.alert-message

Dagiti maysa a linia a mensahe para iti panangitampok iti pannakapaay, posible a pannakapaay, wenno balligi ti maysa nga aramid. Nangnangruna a makatulong kadagiti porma.

I-block dagiti mensahe

div.alert-message.block-message

Para kadagiti mensahe a kasapulan ti sangkabassit a panangilawlawag, addaantayo kadagiti alerto ti estilo ti parapo. Dagitoy ket perpekto para iti panagbubbling kadagiti at-atiddog ​​a mensahe ti biddut, mangpakdaar iti maysa nga agar-aramat iti maysa a nakasagana nga aramid, wenno basta panangidatag ti impormasion para iti ad-adu a panangipaganetget iti panid.

Dagiti Modal

Dagiti modal—dagiti dialogo wenno dagiti lightbox—ket nasayaat para kadagiti konteksto a panagtignay kadagiti kasasaad a napateg a mataginayon ti konteksto ti likudan.

Dagiti Tips iti Remienta

Dagiti Twipsies ket super makatulong para iti panangtulong iti maysa a nariribuk nga agus-usar ken panangiturong kadakuada iti umno a direksion.

Dagiti Popovers

Usaren dagiti popovers tapno mangipaay ti subtekstual nga impormasion iti maysa a panid a saan a mangapektar iti layout.

Ti Bootstrap ket naibangon babaen ti Preboot , ti maysa nga open-source a pakete dagiti mixin ken dagiti variable a mausar a maikuyog iti Less , ti maysa a CSS a preprosesor para iti naparpartak ken nalaklaka a panagrang-ay ti web.

Kitaen no kasano nga inusarmi ti Preboot iti Bootstrap ken no kasano a mausarmo daytoy no piliem nga ipatarayen ti Less iti sumaruno a proyektom.

No kasano nga usaren dayta

Usaren daytoy a pagpilian tapno naan-anay nga usaren dagiti Less variables, mixins, ken panagumok ti Bootstrap iti CSS babaen ti javascript iti browsermo.

<link rel = "estilo a panid/basbassit" href = "basbassit/bootstrap.basbassit" media = "amin" />    
<script src = "js / basbassit-1.1.3.min.js" ></script> 

Saan kadi a marikna ti .js a solusion? Padasem ti Less Mac app wenno usarem ti Node.js tapno ag-compile no i-deploy-mo ti code-mo.

Ania ti nairaman

Adtoy ti sumagmamano kadagiti highlights ti nairaman iti Twitter Bootstrap kas paset ti Bootstrap. Agturongka iti website ti Bootstrap wenno panid ti proyekto ti Github tapno mai-download ken maammuan ti ad-adu pay.

Dagiti Variable

Dagiti variable iti Less ket perpekto para iti panangmantener ken panangpabaro iti CSS headache free. No kayatmo a baliwan ti pateg ti kolor wenno ti masansan a maus-usar a pateg, i-update dayta iti maysa a lugar ket naikabilka.

// Dagiti silpo
@silpo nga Kolor : # 8b59c2;         
@linkColorHover :     agsipnget ( @Kolor ti silpo , 10 ); 
 
// Dagiti abuabu
@nangisit : # 000;             
@grayDark :           palag-an ( @nangisit , 25 %); 
@gray :               palag-an ( @itim , 50 %); 
@grayLight :          palag-an ( @itim , 70 %); 
@grayLighter :        palag-an ( @nangisit , 90 %); 
@puraw : #fff;             
 
// Dagiti Kolor ti Aksento
@asul nga : # 08b5fb;              
@berde nga : # 46a546;             
@nalabaga : # 9d261d;               
@duyaw : # ffc40d nga;            
@ kahel : # f89406 nga;            
@rosas nga : # c3325f;              
@lila nga : # 7a43b6;            
 
// Grid ti batayan
@base nga letra : 13px ;          
@baseline : 18px nga ;          

Agkomento

Ti Less ket mangipaay pay ti sabali nga estilo ti panagkomento malaksid ti gagangay a /* ... */sintaksis ti CSS.

// Daytoy ket maysa a komento
/* Daytoy met ti komento */

Mixins up ti wazoo

Dagiti mixin ket kangrunaan a mairaman wenno dagiti paset para iti CSS, a mangipalubos kenka a mangtipon ti maysa a bloke ti kodigo iti maysa. Nasayaat dagitoy para kadagiti tagikua ti prefixed ti aglaklako a kas ti box-shadow, cross-browser gradients, font stacks, ken dadduma pay. Iti baba ket ti sample dagiti mixins a nairaman iti Bootstrap.

Dagiti stack ti letra

# nga letra { .
  . shorthand ( @timbang : normal , @kadakkel : 14px , @lineHeight : 20px ) {     
kadakkel ti     letra : @size ; 
    font - timbang : @timbang ; 
kangato ti     linia : @lineHeight ; 
  } nga
  . sans - serif ( @timbang : normal , @kadakkel : 14px , @lineHeight : 20px ) {     
pamilia ti     letra : " Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
kadakkel ti     letra : @size ; 
    font - timbang : @timbang ; 
kangato ti     linia : @lineHeight ; 
  } nga
  . serif ( @timbang : normal , @kadakkel : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Panawen Baro a Romano , Panawen , sans - serif ;     
kadakkel ti     letra : @size ; 
    font - timbang : @timbang ; 
kangato ti     linia : @lineHeight ; 
  } nga
  . monospace ( @timbang : normal , @kadakkel : 12px , @lineHeight : 20px ) {     
    letra - pamilia : "Monaco" , Kurier Baro , monoespasio ;   
kadakkel ti     letra : @size ; 
    font - timbang : @timbang ; 
kangato ti     linia : @lineHeight ; 
  } nga
} nga

Dagiti Gradiente

#gradient nga { .
  . horizontal ( @Kolor ti pangrugian : # 555, @Kolor ti panagpatingga: # 333) { 
kolor ti     likudan : @endColor ; 
    background - ulit : ulit - x ;
    background - image : - khtml - gradient ( linear , kannigid nga ngato , kannawan nga ngato , manipud iti ( @startColor ), agingga iti ( @endColor )); // Konqueror nga   
    background - imahe : -moz - linear - gradient ( kannigid , @mangrugi a Kolor , @endColor ); // FF nga 3.6+    
    background - imahe : -ms - linear - gradient ( kannigid , @mangrugi a Kolor , @endColor ); // IE10 nga    
    likudan - ladawan : - webkit - gradient ( linear , kannigid nga ngato , kannawan nga ngato , kolor - panagsardeng ( 0 %, @startColor ), kolor - panagsardeng ( 100 %, @endColor )); // Safari nga 4+, Kromo 2+    
    background - imahe : -webkit - linear - gradient ( kannigid , @mangrugi a Kolor , @endColor ); // Safari nga 5.1+, Kromo nga 10+    
    background - imahe : -o - linear - gradient ( kannigid , @startColor , @endColor ) ; // Opera nga 11.10    
    background - imahe : linear - gradient ( kannigid , @startColor , @endColor ); // Le nga estandarte   
  } nga
  . bertikal ( @Kolor ti pangrugian : # 555, @Kolor ti panagpatingga: # 333) { 
kolor ti     likudan : @endColor ; 
    background - ulit : ulit - x ;
    background - image : - khtml - gradient ( linear , kannigid nga ngato , kannigid nga baba , manipud iti ( @startColor ), agingga iti ( @endColor )); // Konqueror nga   
    likudan - ladawan : -moz - linear - gradient ( @mangrugi a Kolor , @patingga a Kolor ); // FF nga 3.6+   
    background - imahe : - ms - linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // IE10 nga   
    likudan - ladawan : - webkit - gradient ( linear , kannigid nga ngato , kannigid nga baba , kolor - panagsardeng ( 0 %, @startColor ), kolor - panagsardeng ( 100 %, @endColor )); // Safari nga 4+, Kromo 2+    
    likudan - ladawan : - webkit - linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // Safari nga 5.1+, Kromo nga 10+   
    background - imahe : - o - linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // Opera nga 11.10   
    background - imahe : linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // Ti pagalagadan  
  } nga
  . direksional ( @Mangrugi nga Kolor : # 555, @ ngudo nga Kolor: # 333, @ deg: 45deg) { 
    ...
  } nga
  . bertikal - tallo - nga mga kolor ( @mangrugi nga Kolor : # 00b3ee, @midColor: #7a43b6, @colorStop: 50%, @maudi nga Kolor: #c3325f) { 
    ...
  } nga
} nga

Operasion ken sistema ti grid

Agbalinka a magarbo ken mangaramid iti sumagmamano a matematika tapno makapataud kadagiti nalaka a maibagay ken nabileg a mixin a kas iti adda iti baba.

// Griditude nga
@gridDagiti Kolum : 16 ;       
@gridKalawa ti Kolum : 40px ;   
@gridKalawa ti Kanal : 20px ;   
@siteWidth : ( @gridKolum * @gridKolumn ) + ( @gridGutterWidth * ( @gridKolum - 1 ));                 
 
// Sistema ti Grid
. pagkargaan { .
  kalawa : @Kalawa ti site ; 
  margin : 0 nga auto ;  
  . nalawag a panangtarimaan ();
} nga
. dagiti kolum ( @columnSpan : 1 ) { .  
  width : ( @gridKlawa ti Kolum * @KolumnSpan ) + ( @gridGutterWidth * ( @KolumnSpan - 1 ));         
} nga
. offset ( @ kolum ngaOffset : 1 ) { .  
  margin - kannigid : ( @gridKlawa ti Kolum * @KolumOffset ) + ( @gridGutterWidth * ( @kolumOffset - 1 )) + @ekstra nga Espasio ;           
} nga