FIAINANY TALOHA

Tamin'ny andro voalohan'ny Twitter, nampiasa saika izay tranomboky nahazatra azy ireo injeniera mba hamenoana ny fepetra takina. Ny Bootstrap dia nanomboka ho valin'ny fanamby naseho sy ny fampandrosoana haingana haingana nandritra ny Hackweek voalohany an'ny Twitter.

Miaraka amin'ny fanampian'ny injeniera maro ao amin'ny Twitter, ny Bootstrap dia nitombo be ka tsy ny fomba fototra ihany, fa ny endrika endrika ivelany kanto sy maharitra kokoa.

Vakio bebe kokoa ao amin'ny dev.twitter.com ›

Fanohanana navigateur

Ny Bootstrap dia nosedraina sy tohanana amin'ny navigateur maoderina lehibe toa ny Chrome, Safari, Internet Explorer, ary Firefox.

• Safari farany
• Google Chrome farany
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Inona no tafiditra

Bootstrap dia feno miaraka amin'ny CSS natambatra, tsy voatambatra ary modely ohatra.

• Ny rakitra .less tany am-boalohany rehetra
• CSS voaangona tanteraka sy nohamaivanina
• Fenoy ny antontan-taratasy styleguide
• Modely pejy ohatra (ho avy tsy ho ela)

Grid default

Ny rafitra grid default nomena ho ampahany amin'ny Bootstrap dia tsanganana 16 tsanganana mirefy 940px. tsiron'ny rafitra 960 grid malaza izy io, saingy tsy misy sisiny / padding fanampiny amin'ny ilany havia sy havanana.

Ohatra grid markup

Araka ny aseho eto, dia azo amboarina miaraka amin'ny "tsanganana" roa ny lamina fototra iray, izay samy mamakivaky ny tsanganana fototra 16 izay nofaritanay ho ampahany amin'ny rafitry ny grid. Jereo ireto ohatra etsy ambany ireto raha te hahita fiovana bebe kokoa.

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

Filaminana raikitra

Ny fandrindrana 940px mirefy 940px mivelatra, mivondrona ho an'ny tranokala na pejy rehetra omen'ny <div.container>.

<vatana>
  <div class = "container" > 
    ...
  </div>
</body>

Fametrahana ranon-javatra

Firafitry ny pejin'ny ranom-boankazo azo ampiasaina miaraka amin'ny sakany kely indrindra sy max ary sisiny havia. Tsara ho an'ny fampiharana sy doka.

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

Lohateny & kopia

Ambaratonga typografika mahazatra amin'ny fandrafetana ny pejin-tranonkalanao.

Ny grids typografika manontolo dia mifototra amin'ny fari-pitsipika Less roa ao amin'ny rakitra preboot.less: @basefontsy @baseline. Ny voalohany dia ny haben'ny endri-tsoratra ampiasaina manerana ary ny faharoa dia ny haavon'ny tsipika fototra.

Mampiasa ireo fari-pahalalana ireo izahay, ary ny matematika sasany, mba hamoronana ny sisiny, ny padding, ary ny haavon'ny tsipika amin'ny karazana rehetra misy anay sy ny maro hafa.

h1. Lohateny 1

h2. Lohateny 2

h3. Lohateny 3

h4. Lohateny 4

h5. Lohateny 5

h6. Lohahevitra 6

Ohatra paragrafy

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

Lohateny ohatra Misy lohateny kely…

Misc. singa

Mampiasa fanamafisana, adiresy ary fanafohezana

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

Rahoviana no hampiasaina

Ny mari- pamantarana fanamafisana ( <strong>sy <em>) dia tokony hampiasaina mba hanondroana ny lanjany fanampiny na ny fanamafisana ny teny na andian-teny iray mifandraika amin'ny tahadika manodidina azy. Ampiasao <strong>ho zava-dehibe sy <em>ho an'ny fanamafisana ny adin-tsaina .

Fanamafisana ny fehintsoratra iray

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

Fanamarihana: Mbola tsy maninona ny mampiasa <b>sy ny <i>marika ao amin'ny HTML5 ary tsy voatery atao hoe bold sy italic izy ireo (na dia misy singa semantika kokoa aza dia ampiasao izany). <b>dia natao hanasongadinana teny na andian-teny nefa tsy mampita zava-dehibe fanampiny, fa <i>amin'ny feo, teny teknika, sns.

adiresy

Ny <address>singa dia ampiasaina mba hifandraisana amin'ny razambeny akaiky indrindra, na ny asa manontolo. Toy izao ny endriny:

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

Fanamarihana: Ny andalana tsirairay ao amin'ny an <address>dia tsy maintsy mifarana amin'ny tsipika ( <br />) na fonosina amin'ny tenifototra (oh, <p>) mba handrafetana araka ny tokony ho izy ny atiny.

fanafohezan-teny

Ho an'ny fanafohezana sy fanafohezana, ampiasao ny <abbr>tenifototra ( <acronym>lany ao amin'ny HTML5 ). Apetraho ao anatin'ny marika ny endrika fohy ary asio lohateny ho an'ny anarana feno.

Blockquotes

<blockquote> <p> <small>

Ahoana no mitanisa

Mba hampidirana blockquote, fonosina <blockquote>ary <p>asio <small>marika. Ampiasao io <small>singa io mba hitanisana ny loharanonao ary hahazo tsipika em —alohan'izany ianao.

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

Dr. Julius Hibbert

Tsy voalamina<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem sy massa
• Facilisis in pretium nisl aliquet
• Nulla 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

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem sy massa
• Facilisis in pretium nisl aliquet
• Nulla 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

baiko<ol>

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

Descriptiondl

Lisitry ny famaritana

Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.

Euismod

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

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Manorina latabatra

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

Tsara ny latabatra—ho an'ny zavatra maro. Ny latabatra lehibe anefa dia mila fitiavana marika kely mba ho ilaina, azo scalable ary azo vakiana (amin'ny ambaratonga kaody). Ireto misy torohevitra vitsivitsy hanampy anao.

Fenoy foana ny lohatenin'ny tsangananao amin'ny <thead>hoe hierarchy dia <thead>>> <tr>.<th>

Mitovy amin'ny lohatenin'ny tsanganana, ny votoatin'ny vatan'ny latabatrao dia tokony hofonosina a <tbody>ka ny ambaratonganao dia <tbody>> <tr>> <td>.

Ohatra: Fomba latabatra mahazatra

Ny latabatra rehetra dia hamboarina ho azy miaraka amin'ny sisin-tany tena ilaina mba hiantohana ny famakian-teny sy ny fikojakojana ny rafitra. Tsy mila manampy kilasy na toetra fanampiny.

#	Fanampin'anarana	Anarana	Fiteny
1	SASANY	Iray	anglisy
2	Joe	Sixpack	anglisy
3	Stu	fikasana handavaka	fehezan-dalàna

<latabatra>
  ...
</ table>

Ohatra: zebra miendrika

Ataovy mahafinaritra kely ny latabatrao amin'ny fampidirana zebra-striping - ampio fotsiny ny .zebra-stripedkilasy.

#	Fanampin'anarana	Anarana	Fiteny
1	SASANY	Iray	anglisy
2	Joe	Sixpack	anglisy
3	Stu	fikasana handavaka	fehezan-dalàna

Fanamarihana: Zebra-striping dia fanatsarana mivoatra tsy misy ho an'ny navigateur taloha toa ny IE8 sy ambany.

< kilasy latabatra = "zebra-striped" > 
...
</ table>

Ohatra: Zebra-striped w/ TableSorter.js

Raha raisina ny ohatra teo aloha, dia manatsara ny maha-ilaina ny latabatray izahay amin'ny alàlan'ny fanomezana fandrindrana amin'ny alalan'ny jQuery sy ny plugin Tablesorter . Kitiho ny lohatenin'ny tsanganana rehetra hanovana ny karazana.

#	Fanampin'anarana	Anarana	Fiteny
1	ny	Iray	anglisy
2	Joe	Sixpack	anglisy
3	Stu	fikasana handavaka	fehezan-dalàna

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( asa () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< kilasy latabatra = "zebra-striped" > 
  ...
</ table>

Fomba mahazatra

Ny endrika rehetra dia omena fomba fanao mahazatra mba hanehoana azy ireo amin'ny fomba azo vakiana sy azo esorina. Styles dia omena ho an'ny fampidirana lahatsoratra, mifidy lisitra, textareas, radio bokotra sy ny checkboxes, ary bokotra.

Ohatra endrika angano

X-Large Input

Select

1 2 3 4 5

Select

1 2 3 4 5

Input tsy azo ovaina

Sarobidy Eto

Input kilemaina

X-Large Input

Sombiny kely amin'ny lahatsoratra fanampiana

Ohatra endrika angano

Lahatsoratra efa voaomana

@

Boaty fanokafana mialoha

Ampidirina amin'ny Checkbox

Fampidirana rakitra

Ohatra endrika angano

Lisitry ny safidy

• Ny safidy voalohany dia izao sy izao—azo antoka ny hampiditra ny antony maha-tsara azy
• Ny safidy roa dia azo jerena ary ampidirina amin'ny valin'ny endrika
• Ny safidy telo dia afaka — eny, noheverinao izany — dia azo jerena ihany koa ary ampidirina amin'ny valin'ny endrika
• Ny safidy efatra dia tsy azo jerena satria kilemaina.

Fanamarihana: Manodidina ny safidy rehetra ho an'ny faritra kitiho lehibe kokoa sy endrika azo ampiasaina kokoa ny etikety.

Daty isan-karazany

ny Ny fotoana rehetra dia aseho amin'ny ora mahazatra Pasifika (GMT -08:00).

Textarea

Sakan'ny lahatsoratra fanampiana hamaritana ny saha etsy ambony raha ilaina.

Lisitry ny safidy

• Ny safidy voalohany dia izao sy izao—azo antoka ny hampiditra ny antony maha-tsara azy
• Ny safidy roa dia azo jerena ary ampidirina amin'ny valin'ny endrika

Save Changes  hanafoana

Endriky ny stacked

Ampio .form-stackedamin'ny HTML ny endrikao dia hanana etikety eo an-tampon'ny sahany ianao fa tsy eo ankaviany. Tena miasa tsara izany raha fohy ny endrikao na manana tsanganana roa ianao ho an'ny endrika mavesatra kokoa.

Ohatra endrika angano

X-Large Input

Select

1 2 3 4 5

Ohatra endrika angano

X-Large Input

Sombiny kely amin'ny lahatsoratra fanampiana

Lisitry ny safidy

• Ny safidy voalohany dia izao sy izao—azo antoka ny hampiditra ny antony maha-tsara azy
• Ny safidy roa dia azo jerena ary ampidirina amin'ny valin'ny endrika

Fanamarihana: Manodidina ny safidy rehetra ho an'ny faritra kitiho lehibe kokoa sy endrika azo ampiasaina kokoa ny etikety.

Save Changes  hanafoana

bokotra

Amin'ny maha-convention azy, ny bokotra dia ampiasaina amin'ny hetsika ary ny rohy dia ampiasaina amin'ny zavatra. Ohatra, ny "Download" dia mety ho bokotra ary ny "activité vao haingana" dia mety ho rohy.

Ny bokotra rehetra dia voafafa amin'ny endrika volondavenona maivana, saingy misy kilasy miasa maromaro azo ampiharina amin'ny endrika loko samihafa. Ireo kilasy ireo dia ahitana kilasy manga .primary, kilasy manga mazava, .infokilasy maitso .successary kilasy mena .danger. Fanampin'izany, mora peasy ny manodina ny fombanao manokana.

Bokotra ohatra

Ny fomba bokotra dia azo ampiharina amin'ny zavatra rehetra miaraka amin'ny .btnfampiharana. Amin'ny ankapobeny dia tianao ny hampihatra ireto amin'ny singa <a>, <button>, ary mifantina ihany. <input>Toy izao ny endriny:

Habe mifandimby

Mitady bokotra lehibe kokoa na kely kokoa? Manàna izany!

Fanjakana kilemaina

Ho an'ny bokotra tsy mavitrika na kilemain'ny fampiharana noho ny antony iray na hafa, ampiasao ny fanjakana kilemaina. Izany dia .disabledho an'ny rohy sy :disabledho an'ny <button>singa.

rohy

bokotra

Inona ity

Ny topbar-nay dia bara raikitra misy ny logo na ny anaran'ny tranokala, ny fitetezana voalohany ary ny endrika fikarohana.

Customizable

Ny singa rehetra ao anatiny, ary ny topbar manontolo koa dia tsy voatery. Azonao atao ny misafidy ny hampiditra logo/anarana, nav, fikarohana, ary nav faharoa—na izay fitambaran'izany.

Tafiditra ny dropdowns

Amin'ny maha-fitetezana lehibe indrindra, nampidirinay ny fahafahanao manampy fidinana amin'ny nav anao. Jereo ny nav faharoa etsy ambony (milamina havanana) hahitana ny fomba nanaovana azy.

Tabs sy pilina

Mamorona navigateur faharoa tsotra miaraka amin'ny <ul>. Ampifamadiho eo anelanelan'ny tabilao na pilina amin'ny fampidirana ny kilasy mety.

Tsara ho an'ny fizarana votoaty toy ny pejin'ny firafitry ny kaontintsika sy ny fandaharam-potoanan'ny mpampiasa mba hivezivezena eo anelanelan'ny pejin'ny atiny mitovy. Misy amin'ny endrika takelaka na pilina.

• an-trano
• TANTARANY
• Hafatra
• Fikirana
• Contact

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Hafatra </a></li> 
  <li><a href = "#" > Fikirana </a></li> 
  <li><a href = "#" > Fifandraisana </a></li> 
</ul>

• an-trano
• TANTARANY
• Hafatra
• Fikirana
• Contact

<ul class = "pills" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Hafatra </a></li> 
  <li><a href = "#" > Fikirana </a></li> 
  <li><a href = "#" > Fifandraisana </a></li> 
</ul>

Pagination

pagination faran'izay tsotra sy bitika indrindra aingam-panahy avy amin'ny Rdio. Ny sakana lehibe dia sarotra adino, mora miendrika, ary manome faritra kitiho lehibe.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Teo aloha </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 = "manaraka" ><a href = "#" > Manaraka → </a></li>  
  </ul>
</div>

Fampandrenesana fototra

div.alert-message

Hafatra tokana hanasongadinana ny tsy fahombiazana, ny mety ho tsy fahombiazana, na ny fahombiazan'ny hetsika iray. Tena ilaina amin'ny endrika.

Sakanana ny hafatra

div.alert-message.block-message

Ho an'ny hafatra mila fanazavana kely dia manana fanairana momba ny fomba paragrafy izahay. Ireo dia tonga lafatra amin'ny famoahana hafatra diso lava kokoa, fampitandremana ny mpampiasa iray amin'ny hetsika miandry, na fanolorana fampahalalana fotsiny mba hanamafisana bebe kokoa ny pejy.

Modals

Modals—dialogues na lightboxes—dia tsara ho an'ny hetsika mifandraika amin'ny toe-javatra izay zava-dehibe ny fitazonana ny contexte background.

Torohevitra momba ny fitaovana

Tena ilaina tokoa ny Twipsies amin'ny fanampiana mpampiasa misavoritaka ary manondro azy ireo amin'ny lalana marina.

Popovers

Mampiasà popovers mba hanomezana fampahalalana subtextual amin'ny pejy iray tsy misy fiantraikany amin'ny layout.

Bootstrap dia naorina tamin'ny Preboot , fonosana mivelatra misy mixins sy variables ampiasaina miaraka amin'ny Less , preprocessor CSS ho an'ny fampivoarana tranonkala haingana sy mora kokoa.

Jereo ny fomba nampiasanay ny Preboot ao amin'ny Bootstrap ary ny fomba ahafahanao mampiasa azy io raha misafidy ny handefa Less amin'ny tetikasanao manaraka ianao.

Ahoana ny fampiasana azy

Ampiasao ity safidy ity mba hampiasana tanteraka ny Variables Less, mixins ary akany ao amin'ny CSS amin'ny alàlan'ny javascript ao amin'ny navigateur Bootstrap.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "rehetra" />    
<script src = "js/less-1.1.3.min.js" ></script> 

Tsy mahatsapa ny vahaolana .js? Andramo ny fampiharana Less Mac na ampiasao ny Node.js mba hanangonana rehefa mametraka ny kaody ianao.

Inona no tafiditra

Ireto ny sasany amin'ireo nisongadina tamin'izay tafiditra ao amin'ny Twitter Bootstrap ho ampahany amin'ny Bootstrap. Mankanesa any amin'ny tranokala Bootstrap na pejy tetikasa Github raha hisintona sy hianatra bebe kokoa.

hiovaova

Ny Variables in Less dia tonga lafatra amin'ny fitazonana sy fanavaozana ny CSS tsy misy aretin'andoha. Rehefa te-hanova sanda miloko na sanda ampiasaina matetika ianao dia havaozy amin'ny toerana iray izany dia efa vonona ianao.

// Rohy
@linkColor : #8b59c2;         
@linkColorHover :     maizina ( @linkColor , 10 ); 
 
// Grey
@mainty : #000;             
@grayDark : maivana (           @mainty , 25 %); 
@volondavenona : maivana (               @mainty , 50 %); 
@grayLight : maivana (          @mainty , 70 %); 
@grayLighter : maivana (        @mainty , 90 %); 
@fotsy : #fff ;             
 
// Loko accent
@manga : #08b5fb;              
@maitso : #46a546;             
@mena : #9d261d;               
@mavo : #ffc40d;            
@orange : #f89406;            
@mavokely : #c3325f;              
@volomparasy : #7a43b6;            
 
// Grid baseline
@basefont : 13px ;          
@baseline : 18px ;          

fanehoan-kevitra

Less koa dia manome fomba fanehoan-kevitra hafa ankoatra ny /* ... */syntax mahazatra an'ny CSS.

// fanehoan-kevitra ity
/* Hevitra ihany koa ity */

Afangaro ny wazoo

Ny mixins amin'ny ankapobeny dia ahitana na ampahany amin'ny CSS, ahafahanao manambatra andian-kaody ho iray. Tsara izy ireo ho an'ny fananana efa misy mialoha ny mpivarotra toy ny box-shadow, gradients cross-browser, stacks font, sy ny maro hafa. Ity ambany ity ny santionan'ny mixins izay ampidirina amin'ny Bootstrap.

Antontan-tsoratra

#font {
  . fohy ( @lanja : normal , @habe : 14px , @lineHaavo : 20px ) {     
haben'ny     endritsoratra : @habe ; _ 
    endritsoratra - lanja : @lanja ; 
    tsipika - haavo : @lineHeight ; 
  }
  . sans - serif ( @lanja : normal , @habe : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
haben'ny     endritsoratra : @habe ; _ 
    endritsoratra - lanja : @lanja ; 
    tsipika - haavo : @lineHeight ; 
  }
  . serif ( @lanja : normal , @habe : 14px , @lineHaavo : 20px ) {     
    endri-tsoratra - fianakaviana : "Georgia" , Times New Roman , Times , sans - serif ;     
haben'ny     endritsoratra : @habe ; _ 
    endritsoratra - lanja : @lanja ; 
    tsipika - haavo : @lineHeight ; 
  }
  . monospace ( @lanja : normal , @habe : 12px , @lineHaavo : 20px ) {     
    endri-tsoratra - fianakaviana : "Monaco" , Courier New , monospace ;   
haben'ny     endritsoratra : @habe ; _ 
    endritsoratra - lanja : @lanja ; 
    tsipika - haavo : @lineHeight ; 
  }
}

Gradients

#gradient {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    ambadika - loko : @endColor ; 
    ambadika - averina : averina - x ;
    background - sary : - khtml - gradient ( linear , ankavia ambony , havanana ambony , manomboka amin'ny ( @startColor ), mankany amin'ny ( @endColor )); // Mpandresy   
    background - sary : - moz - linear - gradient ( ankavia , @startColor , @endColor ); // FF 3.6+    
    background - sary : - ms - linear - gradient ( ankavia , @startColor , @endColor ); // IE10    
    background - sary : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - sary : - webkit - linear - gradient ( ankavia , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - sary : - o - linear - gradient ( ankavia , @startColor , @endColor ); // Opera 11.10    
    ambadika - sary : linear - gradient ( ankavia , @startColor , @endColor ); // Le standard   
  }
  . mitsangana ( @startColor : #555, @endColor: #333) { 
    ambadika - loko : @endColor ; 
    ambadika - averina : averina - x ;
    background - sary : - khtml - gradient ( linear , ankavia ambony , ankavia ambany , avy @startColor ), mankany @endColor ) ) ; // Mpandresy   
    background - sary : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - sary : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - sary : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - sary : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - sary : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    background - sary : linear - gradient ( @startColor , @endColor ); // Ny fenitra  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . mitsangana - telo - loko ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Operations sy rafitra grid

Manaova kajy ary manaova matematika mba hamoronana mixins moramora sy mahery toy ny etsy ambany.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Rafitra Grid
. container {
  sakany : @siteWidth ; 
  sisiny : 0 auto ;  
  . clearfix ();
}
. tsanganana ( @columnSpan : 1 ) {  
  sakany : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  sisiny - ankavia : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}