Mbiri

M'masiku oyambilira a Twitter, mainjiniya adagwiritsa ntchito pafupifupi laibulale iliyonse yomwe amawadziwa kuti akwaniritse zofunikira zakutsogolo. Bootstrap idayamba ngati yankho ku zovuta zomwe zidabwera ndikukula mwachangu pa Hackweek yoyamba ya Twitter.

Mothandizidwa ndi mayankho a mainjiniya ambiri pa Twitter, Bootstrap yakula kwambiri kuti isaphatikize masitayelo oyambira okha, komanso mawonekedwe owoneka bwino komanso olimba akutsogolo.

Werengani zambiri pa dev.twitter.com ›

Thandizo la msakatuli

Bootstrap imayesedwa ndikuthandizidwa mu msakatuli wamkulu wamakono monga Chrome, Safari, Internet Explorer, ndi Firefox.

• Zaposachedwa Safari
• Google Chrome yaposachedwa
• Firefox 4+
• Internet Explorer 7+

Zomwe zikuphatikizidwa

Bootstrap imabwera yokwanira ndi CSS yophatikizidwa, yosaphatikizidwa, ndi ma templates.

• Mafayilo onse apachiyambi .less
• CSS yopangidwa mokwanira komanso yosinthidwa
• Malizitsani zolemba za styleguide
• Tsamba lachitsanzo (zambiri zikubwera posachedwa)

Gridi yofikira

Makina osasinthika a gridi omwe amaperekedwa ngati gawo la Bootstrap ndi grid ya 940px wide 16-column grid. Ndikokoma kwa makina odziwika bwino a gridi ya 960, koma opanda malire / padding kumanzere ndi kumanja.

Chitsanzo cha grid markup

Monga tawonera apa, mawonekedwe oyambira atha kupangidwa ndi "mizere" iwiri, iliyonse ikatenga magawo 16 oyambira omwe tafotokoza ngati gawo la gridi yathu. Onani zitsanzo pansipa kuti mumve zambiri.

<div class="row">
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Masanjidwe okhazikika

Mawonekedwe a 940px okulirapo, okhazikika apakati pa tsamba lililonse kapena tsamba.

<thupi>
  <div class = "chotengera" > 
    ...
  </div>
</ thupi>

Kapangidwe kamadzimadzi

Masamba osinthika amadzimadzi kapena amadzimadzi okhala ndi min- ndi max-widths ndi kampando wakumanzere. Zabwino kwa mapulogalamu.

<thupi>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</ thupi>

Mitu ndi kukopera

Mndandanda wokhazikika wa typographic pakukonza masamba anu.

h1 ndi. Mutu 1

h2 ndi. Mutu 2

h3 ndi. Mutu 3

h4 ndi. Mutu 4

h5 ndi. Mutu 5

h6 ndi. Mutu 6

Chitsanzo ndime

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Mutu wachitsanzo uli ndi mutu waung'ono...

Zina. zinthu

Pogwiritsa ntchito kutsindika, maadiresi, ndi mawu achidule

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

Nthawi yoti mugwiritse ntchito

Ma tag otsindika ( <strong>ndi <em>) ayenera kugwiritsidwa ntchito kusonyeza kufunikira kowonjezera kapena kutsindika kwa liwu kapena chiganizo chogwirizana ndi mawu ozungulira. Gwiritsani <strong>ntchito kufunikira komanso <em>kutsindika kupsinjika .

Kutsindika m'ndime

Fusce dapibus , tellus ac cursus commodo , tor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Zindikirani: Zili bwino kugwiritsa ntchito <b>ndi <i>ma tag mu HTML5, koma samabweranso ndi masitayelo achibadwidwe. <b>cholinga chake ndi kuwunikira mawu kapena ziganizo popanda kupereka zofunikira zowonjezera, pomwe <i>nthawi zambiri zimakhala za mawu, mawu aukadaulo, ndi zina zambiri.

Maadiresi

Chigawocho <address>chimagwiritsidwa ntchito pazolumikizana ndi makolo ake apafupi, kapena gulu lonse lantchito. Umu ndi momwe zimawonekera:

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

Zindikirani: Mzere uliwonse mumzere <address>uyenera kutha ndi kuthyola mzere ( <br />) kapena kukulungidwa ndi tag ya block-level (mwachitsanzo, <p>) kuti mukonzekere bwino zomwe zili.

Chidule cha mawu

Pachidule ndi ma acronyms, gwiritsani ntchito <abbr>tag ( <acronym>yatsitsidwa mu HTML5 ). Ikani mawonekedwe achidule mkati mwa tag ndikuyika mutu wa dzina lathunthu.

Mawu a blockquotes

<blockquote> <p> <small>

Momwe mungatchulire

Kuti muphatikizepo blockquote, <blockquote>zungulirani <p>ndi ma tag <small>. Gwiritsani ntchito <small>chinthucho kuti mutchule gwero lanu ndipo mupeza dash —isanachitike.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

Osalamulidwa<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ndi massa
• Facilisis mu pretium nisl aliquet
• Chotsatira cha volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Osatchulidwa<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ndi massa
• Facilisis mu pretium nisl aliquet
• Chotsatira cha volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Adalamulidwa<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem ndi massa
4. Facilisis mu pretium nisl aliquet
5. Chotsatira cha volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Kufotokozeradl

Mndandanda wamafotokozedwe

Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.

Euismod

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

Donec id ili si mi porta gravida ndi eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kumanga matebulo

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

Matebulo ndi abwino - pazinthu zambiri. Magome abwino, komabe, amafunikira chikondi chocheperako kuti chikhale chothandiza, chokhazikika, komanso chowerengeka (pamlingo wamakhodi). Nawa malangizo angapo othandiza.

Mangirirani mitu yanu nthawi <thead>zonse kuti utsogoleri ndi <thead>> <tr>> <th>.

Mofanana ndi mitu yazagawo, zonse zomwe zili patebulo lanu ziyenera kukulungidwa <tbody>kuti utsogoleri wanu ukhale <tbody>> <tr>> <td>.

Chitsanzo: Masitayelo a tebulo

Matebulo onse azisinthidwa okha ndi malire ofunikira kuti awonetsetse kuti awerengeka komanso kukonza bwino. Palibe chifukwa chowonjezera makalasi owonjezera kapena mawonekedwe.

#	Dzina loyamba	Dzina lomaliza	Chiyankhulo
1	Ena	Mmodzi	Chingerezi
2	Joe	Sixpack	Chingerezi
3	Stu	Dent	Kodi

<table class="common-table"> class = "common-table" >
  ...
</table>

Chitsanzo: Zamizeremizere Mbidzi

Pezani zokometsera pang'ono ndi matebulo anu powonjezera mbidzi - ingowonjezerani .zebra-stripedkalasi.

#	Dzina loyamba	Dzina lomaliza	Chiyankhulo
1	Ena	Mmodzi	Chingerezi
2	Joe	Sixpack	Chingerezi
3	Stu	Dent	Kodi

Zindikirani: Zebra-striping ndi njira yopititsira patsogolo yosapezeka kwa asakatuli akale monga IE8 ndi pansipa.

<table class="common-table zebra-striped"> class = "common-table zebra-milozo" >
...
</table>

Chitsanzo: Mizere ya Mbidzi w/ TableSorter.js

Kutengera chitsanzo cham'mbuyomu, timawongolera magwiridwe antchito a matebulo athu popereka magwiridwe antchito kudzera pa jQuery ndi pulogalamu yowonjezera ya Tablesorter . Dinani mutu wagawo lililonse kuti musinthe mtundu.

#	Dzina loyamba	Dzina lomaliza	Chiyankhulo
1	Anu	Mmodzi	Chingerezi
2	Joe	Sixpack	Chingerezi
3	Stu	Dent	Kodi

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<script > 
  $ ( ntchito () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "common-table zebra-milozo" > 
  ...
</table>

Masitayilo ofikira

Mafomu onse amapatsidwa masitayelo osasinthika kuti awawonetse m'njira yowerengeka komanso yowonjezereka. Masitayilo amaperekedwa pazolowetsa mawu, sankhani ndandanda, zolemba, mabatani a wailesi ndi mabokosi otsimikizira, ndi mabatani.

Nthano yachitsanzo

Zolowetsa X-Zazikulu

Sankhani

1 2 3 4 5

Sankhani

1 2 3 4 5

Zolowetsa Zosasinthika

Zina Zamtengo Pano

Zolowetsa Zoyimitsidwa

Zolowetsa X-Zazikulu

Kagawo kakang'ono ka mawu othandizira

Nthano yachitsanzo

Mawu Okonzedweratu

@

Bokosi Loyang'anira

Bokosi Lowonjezera

Kulowetsa Fayilo

Nthano yachitsanzo

Mndandanda wa Zosankha

• Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino
• Njira yachiwiri ingathenso kufufuzidwa ndikuphatikizidwa muzotsatira za fomu
• Njira yachitatu ingathe-inde, munangoganiza - iwunikiridwanso ndikuphatikizidwa muzotsatira zamafomu
• Njira zinayi sizingawunikidwe chifukwa ndizozimitsa.

Zindikirani: Malebulo amazungulira zonse zomwe mungasankhe pazigawo zazikuluzikulu zodina komanso mawonekedwe osavuta kugwiritsa ntchito.

Date Range

ku Nthawi zonse zimawonetsedwa ngati Pacific Standard Time (GMT -08:00).

Textarea

Malemba othandizira ofotokozera gawo lomwe lili pamwambapa ngati likufunika.

Mndandanda wa Zosankha

• Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino
• Njira yachiwiri ingathenso kufufuzidwa ndikuphatikizidwa muzotsatira za fomu

Sungani Zosintha  Letsani

mafomu osanjikizidwa

Onjezani .form-stackedku HTML ya fomu yanu ndipo mudzakhala ndi zilembo pamwamba pamasamba awo m'malo mwa kumanzere kwawo. Izi zimagwira ntchito bwino ngati mafomu anu ali aafupi kapena muli ndi magawo awiri olowera mafomu olemera.

Nthano yachitsanzo

Zolowetsa X-Zazikulu

Sankhani

1 2 3 4 5

Nthano yachitsanzo

Zolowetsa X-Zazikulu

Kagawo kakang'ono ka mawu othandizira

Mndandanda wa Zosankha

• Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino
• Njira yachiwiri ingathenso kufufuzidwa ndikuphatikizidwa muzotsatira za fomu

Zindikirani: Malebulo amazungulira zonse zomwe mungasankhe pazigawo zazikuluzikulu zodina komanso mawonekedwe osavuta kugwiritsa ntchito.

Sungani Zosintha  Letsani

Mabatani

Monga msonkhano, mabatani amagwiritsidwa ntchito pochita zinthu pomwe maulalo amagwiritsidwa ntchito pazinthu. Mwachitsanzo, "Kutsitsa" kungakhale batani ndipo "zochitika zaposachedwa" zitha kukhala ulalo.

Mabatani onse amasinthidwa kukhala mtundu wotuwa, koma gulu labuluu .primarylikupezeka. Komanso, kugubuduza masitayelo anu ndikosavuta.

Mwachitsanzo mabatani

Mabatani a mabatani amatha kugwiritsidwa ntchito pa chilichonse chomwe .btnchikugwiritsidwa ntchito. Nthawi zambiri mudzafuna kugwiritsa ntchito izi pazokha <a>, <button>, ndikusankha <input>zinthu. Umu ndi momwe zimawonekera:

Kukula kosinthika

Mukufuna mabatani akulu kapena ang'onoang'ono? Khalani nazo!

Dziko olumala

Kwa mabatani omwe sakugwira ntchito kapena oyimitsidwa ndi pulogalamuyi pazifukwa zina, gwiritsani ntchito malo olumala. Ndiwo .disabledmaulalo ndi :disabledzinthu <button>.

Maulalo

Mabatani

Ndi chiyani

Topbar yathu ndi bala yokhazikika yomwe imakhala ndi logo kapena dzina la webusayiti, mayendedwe oyambira, ndi mawonekedwe osakira.

Customizable

Zinthu zonse mkati, ndi topbar yonse, ndizosankha. Mutha kusankha kuphatikiza logo/dzina, nav, kusaka, ndi nav yachiwiri-kapena kuphatikiza kulikonse.

Zotsitsa zikuphatikizidwa

Monga gawo lalikulu lakusakatula, taphatikizanso kuthekera kwakuti muwonjezere zotsikira ku nav yanu. Onani nav yachiwiri pamwambapa (yolumikizidwa kumanja) kuti muwone momwe zimachitikira.

Ma tabu ndi mapiritsi

Pangani navigation yosavuta yachiwiri ndi <ul>. Sinthani pakati pa ma tabo kapena mapiritsi powonjezera kalasi yoyenera.

Zabwino kwambiri pamagawo ang'onoang'ono monga masamba ochunira akaunti yathu komanso nthawi ya ogwiritsa ntchito kuti asinthe pakati pamasamba omwe ali ngati. Amapezeka mumitundu yama tabbed kapena mapiritsi.

• Kunyumba
• Mbiri
• Mauthenga
• Zokonda
• Contact

<ul class="tabs"> class = "ma tabu" >
  <li class = "active" > <a href = "#"> Kwawo </a></li>  
  <li><a href = "#"> Mbiri </a> </li> 
  <li><a href = "#"> Mauthenga </a> </li> 
  <li><a href = "#"> Zokonda </a> </li> 
  <li><a href = "#"> Lumikizanani </a> </li> 
</ul>

• Kunyumba
• Mbiri
• Mauthenga
• Zokonda
• Contact

<ul class="mapiritsi"> class = "mapiritsi" >
  <li class = "active" > <a href = "#"> Kwawo </a></li>  
  <li><a href = "#"> Mbiri </a> </li> 
  <li><a href = "#"> Mauthenga </a> </li> 
  <li><a href = "#"> Zokonda </a> </li> 
  <li><a href = "#"> Lumikizanani </a> </li> 
</ul>

Pagination

Ultra mophweka komanso kalembedwe pang'ono pagination wouziridwa ndi Rdio. Chotchinga chachikulu ndi chovuta kuphonya, chiwonjezeke mosavuta, ndipo chimapereka malo akulu odina.

<div class="pagination"> class = "pagination" >
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Zam'mbuyo </a></li>  
    <li class = "active" > <a href = "#"> 1 </a></li>  
    <li><a href = "#"> 2 </a> </li> 
    <li><a href = "#"> 3 </a> </li> 
    <li><a href = "#"> 4 </a> </li> 
    <li><a href = "#"> 5 </a> </li> 
    <li class = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

Zidziwitso zoyambira

Mauthenga a mzere umodzi wowunikira kulephera, kulephera kotheka, kapena kupambana kwa chinthu. Zothandiza makamaka mafomu.

Letsani mauthenga

Pamauthenga omwe amafunikira kufotokozera pang'ono, tili ndi zidziwitso za mawonekedwe a ndime. Izi ndi zabwino potulutsa mauthenga olakwika ataliatali, kuchenjeza wogwiritsa ntchito zomwe akuyembekezera, kapena kungopereka chidziwitso kuti mutsindike kwambiri patsamba.

Makhalidwe

Ma modals—ma dialogs kapena lightboxes—ndiabwino pa zochitika zapanthawi yomwe kuli kofunika kuti nkhani yakumbuyo isungidwe.

Malangizo a Zida

Ma Twipsies ndi othandiza kwambiri pothandizira wogwiritsa ntchito wosokonezeka ndikuwalozera njira yoyenera.

Popovers

Gwiritsani ntchito popovers kuti mupereke zambiri pamasamba osakhudza masanjidwe.

Bootstrap inamangidwa ndi Preboot , paketi yotseguka ya zosakaniza ndi zosinthika kuti zigwiritsidwe ntchito pamodzi ndi Zochepa , CSS preprocessor kuti ikhale yofulumira komanso yosavuta.

Onani momwe tidagwiritsira ntchito Preboot mu Bootstrap ndi momwe mungagwiritsire ntchito ngati mutasankha kuyendetsa Zochepa pa polojekiti yanu yotsatira.

Momwe mungagwiritsire ntchito

Gwiritsani ntchito njirayi kuti mugwiritse ntchito mokwanira za Bootstrap's Less variables, mixin, ndi nesting mu CSS kudzera pa javascript mu msakatuli wanu.

<link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "stylesheet/ zochepa" href = "zochepa/bootstrap.less" media = "zonse" />   
<script src = "js/less-1.0.41.min.js" > </script> 

Simukumva yankho la .js? Yesani pulogalamu ya Less Mac kapena gwiritsani ntchito Node.js kuti muphatikize mukatumiza khodi yanu.

Zomwe zikuphatikizidwa

Nawa zina mwazabwino kwambiri zomwe zikuphatikizidwa mu Twitter Bootstrap ngati gawo la Bootstrap. Pitani patsamba la Bootstrap kapena tsamba la polojekiti ya Github kuti mutsitse ndikuphunzira zambiri.

Zosintha zamitundu

Zosintha mu Pang'ono ndizabwino posungira ndikusintha mutu wanu wa CSS kwaulere. Mukafuna kusintha mtundu kapena mtengo womwe umagwiritsidwa ntchito pafupipafupi, sinthani pamalo amodzi ndipo mwakhazikitsidwa.

// Zogwirizana
@linkColor : #8b59c2;         
@linkColorHover :     mdima ( @linkColor , 10 ); 
// Magulu
@wakuda : #000;             
@grayDark : chepetsa (           @black , 25 %); 
@imvi : chepetsa (               @black , 50 %); 
@grayLight : chepetsa (          @black , 70 %); 
@grayLighter : chepetsa (        @black , 90 %); 
@woyera : #fff;             
// Mitundu ya Mawu
@buluu : #08b5fb;              
@wobiriwira : #46a546;             
@chofiira : #9d261d;               
@chikasu : #ffc40d;            
@lalanje : #f89406;            
@pinki : #c3325f;              
@wofiirira : #7a43b6;            
// Zoyambira
@chiyambi : 20px ;          

Kupereka ndemanga

Pang'ono amaperekanso njira ina yoperekera ndemanga kuwonjezera pa /* ... */mawu abwinobwino a CSS.

// Awa ndi ndemanga
/* Ilinso ndi ndemanga */

Amasakaniza wazoo

Mixins amaphatikizanso kapena magawo a CSS, kukulolani kuti muphatikize ma code kukhala amodzi. Ndiabwino kwa ogulitsa omwe ali ndi prefixed monga box-shadow, ma gradients abrowser, masanjidwe amtundu, ndi zina zambiri. Pansipa pali zitsanzo za zosakaniza zomwe zikuphatikizidwa ndi Bootstrap.

Mitundu ya zilembo

#mtundu {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
kukula kwa     font : @size ; 
    font - kulemera : @weight ; 
    mzere - kutalika : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
kukula kwa     font : @size ; 
    font - kulemera : @weight ; 
    mzere - kutalika : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
kukula kwa     font : @size ; 
    font - kulemera : @weight ; 
    mzere - kutalika : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
kukula kwa     font : @size ; 
    font - kulemera : @weight ; 
    mzere - kutalika : @lineHeight ; 
  }
}

Ma gradients

#gradient {
  . yopingasa ( @startColor : #555, @endColor: #333) { 
    maziko - mtundu : @endColor ; 
    maziko - kubwereza : kubwereza - x ;
    maziko - chithunzi : - khtml - gradient ( mzere , kumanzere pamwamba , kumanja kumanja , kuchokera ( @startColor ), mpaka ( @endColor )); // Konqueror   
    maziko - chithunzi : - moz - mzere - gradient ( kumanzere , @startColor , @endColor ); // FF 3.6+    
    maziko - chithunzi : - ms - mzere - gradient ( kumanzere , @startColor , @endColor ); // IE10    
    maziko - chithunzi : - webkit - gradient ( mzere , kumanzere pamwamba , kumanja kumanja , mtundu - imani ( 0 %, @startColor ), mtundu - imani ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    maziko - chithunzi : - webkit - linear - gradient ( kumanzere , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    maziko - chithunzi : - o - mzere - gradient ( kumanzere , @startColor , @endColor ); // Opera 11.10    
    - ms - fyuluta : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    fyuluta : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    maziko - chithunzi : mzere - gradient ( kumanzere , @startColor , @endColor ); // Le standard   
  }
  . ofukula ( @startColor : #555, @endColor: #333) { 
    maziko - mtundu : @endColor ; 
    maziko - kubwereza : kubwereza - x ;
    maziko - chithunzi : - khtml - gradient ( mzere , kumanzere pamwamba , kumanzere kumanzere , kuchokera ( @startColor ), kupita ku ( @endColor )); // Konqueror   
    maziko - chithunzi : - moz - mzere - gradient ( @startColor , @endColor ); // FF 3.6+   
    maziko - chithunzi : - ms - mzere - gradient ( @startColor , @endColor ); // IE10   
    maziko - chithunzi : - webkit - gradient ( mzere , kumanzere pamwamba , kumanzere kumanzere , mtundu - imani ( 0 %, @startColor ), mtundu - imani ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    maziko - chithunzi : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    maziko - chithunzi : - o - mzere - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - fyuluta : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    fyuluta : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    maziko - chithunzi : mzere - gradient ( @startColor , @endColor ); // Muyezo  
  }
  . mbali ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ofukula - mitundu itatu ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Ntchito ndi grid system

Sangalalani ndikuchita masamu kuti mupange zosakaniza zosinthika komanso zamphamvu ngati zomwe zili pansipa.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Grid System
. chidebe {
  m'lifupi : @siteWidth ; 
  malire : 0 auto ;  
  . clearfix ();
}
. mizati ( @columnSpan : 1 ) {  
  kuwonetsera : mkati ; 
  kuyandama : kumanzere ;
  m 'lifupi: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
  kumanzere: @gridGutterWidth;
  &:mwana woyamba {
    kusunga-kumanzere: 0;
  }
}
.offset(@columnOffset: 1) {
  kumanzere: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !zofunika;
}