Dîrok

Di rojên pêşîn ên Twitter-ê de, endezyaran hema hema her pirtûkxaneyek ku bi wan re nas dikirin bikar anîn da ku daxwazên pêş-endê bicîh bînin. Bootstrap wekî bersivek ji kêşeyên ku pêşkêş kirin dest pê kir û pêşkeftin zû di dema yekem Hackweek Twitter-ê de bileztir bû.

Bi alîkarî û bertekên gelek endezyarên li Twitter-ê, Bootstrap bi girîngî mezin bûye ku ne tenê şêwazên bingehîn, lê şêwazên sêwirana pêş-endê jî xweşiktir û domdar digire nav xwe.

Zêdetir li ser dev.twitter.com bixwînin ›

Piştgiriya gerokê

Bootstrap di gerokên sereke yên nûjen ên mîna Chrome, Safari, Internet Explorer, û Firefox de tê ceribandin û piştgirî kirin.

• Latest Safari
• Google Chrome ya herî dawî
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Çi tê de ye

Bootstrap bi şablonên CSS-ê yên berhevkirî, nehevkirî, û mînakan re temam dibe.

• Hemû pelên .kêm orjînal
• CSS bi tevahî hatî berhev kirin û kêm kirin
• Belgekirina şêwazê bi tevahî
• Nimûne şablonê rûpelê (zêdetir di demek nêzîk de)

Tora xwerû

Pergala torê ya xwerû ya ku wekî beşek Bootstrap tê peyda kirin tora 16-stûnî ya fireh a 940px e. Ew tama pergala tevna populer a 960-ê ye, lê bêyî marjînal / pêvek zêde li aliyên çep û rast.

Mînak nîşankirina torê

Wekî ku li vir tê xuyang kirin, sêwirana bingehîn dikare bi du "stûnan" were afirandin, ku her yek hejmarek ji 16 stûnên bingehîn ên ku me wekî beşek ji pergala xweya torê destnîşan kirine vedihewîne. Ji bo guhertoyên bêtir mînakên jêrîn bibînin.

<div class = "rêz" > 
  <div class = "span6 stûn" > 
    ...
  </div>
  <div class = "span10 stûn" > 
    ...
  </div>
</div>

layout Fixed

Plansaziya xwerû û hêsan a 940px-berfireh, navend ji bo hema hema her malper an rûpelek ku ji hêla yek ve hatî peyda kirin <div.container>.

<beden>
  <div class = "konteyner" > 
    ...
  </div>
</body>

layout Fluid

Strukturek rûpela şilavê ya alternatîf, maqûl bi min- û herî zêde û milê çepê. Ji bo sepan û belgeyan mezin e.

<beden>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "naveroka" > 
      ...
    </div>
  </div>
</body>

Sernav & kopî

Hiyerarşiyek tîpografî ya standard ji bo avakirina malperên we.

Tevahiya tora tîpografiyê li ser du guhêrbarên Kêmtir di pelê meya preboot.less de ye: @basefontû @baseline. Ya yekem mezinahiya tîpên bingehîn e ku li seranserê tê bikar anîn û ya duyemîn jî rêzika bingehîn e.

Em wan guherbaran, û hin matematîkê bikar tînin, da ku marjînal, peldank, û bilindahiyên rêzê yên hemî celeb û hêj bêtir biafirînin.

h1. Sernav 1

h2. Sernav 2

h3. Sernav 3

h4. Sernav 4

h5. Sernav 5

h6. Sernav 6

Mînak paragraf

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

Sernavê Mînak Sernavê jêrîn heye…

Misc. hêmanên

Bikaranîna balkişandin, navnîşan, û kurtenivîsan

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

Dema ku bikar bînin

Divê etîketên lêhûrbûnê ( <strong>û <em>) werin bikar anîn da ku girîngî an giraniya peyvek an hevokek li gorî kopiya derdora wê nîşan bide. Ji <strong>bo girîngî û <em>ji bo giraniya stresê bikar bînin .

Di paragrafekê de tekez kirin

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.

Nîşe: Hîn jî baş e ku meriv di HTML5-ê de bikar bîne <b>û <i>etîketan bike û ne hewce ye ku ew bi rêzê bi stûr û îtalîk bêne şêwazê (her çend heke hêmanek semantîktir hebe, wê bikar bînin). <b>tê wateya ronîkirina peyvan an hevokan bêyî gihandina girîngiyek zêde, di heman demê <i>de bi piranî ji bo deng, peyvên teknîkî, hwd.

Navnîşan

Hêman <address>ji bo agahdariya pêwendiyê ji bo bav û kalê xwe yê herî nêzîk, an tevahiya laşê xebatê tê bikar anîn. Li vir çawa xuya dike:

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

Nîşe: Her rêzek di navokê de <address>divê bi xêzek ( <br />) biqede an jî di tagek asta blokê de were pêçandin (mînak, <p>) da ku naverokê bi rêkûpêk ava bike.

Kurtenivîsandin

Ji bo kurtenivîs û kurtenivîsan, etîketê bikar bînin <abbr>( <acronym>di HTML5 -ê de jêbirin ). Forma kurtenivîsê têxin hundurê tagê û ji bo navê tevahî sernavek saz bikin.

Blockquotes

<blockquote> <p> <small>

Meriv çawa vedibêje

Ji bo tevlêkirina blokê, li <blockquote>dora xwe bipêçin <p>û <small>etîketan bikin. Hêmanê bikar bînin <small>da ku çavkaniya xwe binav bikin û hûn ê —berî wê xêzek em bistînin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Jimareke bêkêmasî ya ku ji berê ve hatî veguheztin tê xuyang kirin.

Julius Hibbert Dr

Unordered<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Hêsankirin di aliquet pretium nisl
• 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 at massa
• Hêsankirin di aliquet pretium nisl
• 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

Ferman kirin<ol>

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

Terîfdl

Navnîşan lîsteyên

Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Avakirina maseyên

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

Tabloyên mezin in - ji bo gelek tiştan. Lêbelê, tabloyên mezin, hewceyê piçek hezkirina nîşankirinê ne ku bikêr, berbelav û xwendin (di asta kodê de) bin. Li vir çend serişteyên alîkariyê hene.

Her tim sernavên stûnên xwe bi awakî <thead>wisa bipêçin ku hiyerarşiya <thead>> <tr>> <th>be.

Mîna sernavên stûnê, divê hemî naveroka laşê tabloya we bi rengekî were pêçandin <tbody>da ku hiyerarşiya we <tbody>> <tr>> <td>be.

Mînak: Şêweyên tabloya xwerû

Hemî tablo dê bixweber bi tenê bi sînorên bingehîn ve werin şêwaz kirin da ku xwendin û strukturê biparêzin. Ne hewce ye ku çîn an taybetmendiyên zêde zêde bikin.

#	Nav	Paşnav	Ziman
1	Hin	Yek	Îngilîzî
2	Joe	Şeş pakêt	Îngilîzî
3	Stu	Peq	Navê dizî

<table>
  ...
</table>

Nimûne: Zebra-xêrî

Bi lêzêdekirina zebra-striping bi tabloyên xwe piçek xweşiktir bibin - tenê .zebra-stripedpolê zêde bikin.

#	Nav	Paşnav	Ziman
1	Hin	Yek	Îngilîzî
2	Joe	Şeş pakêt	Îngilîzî
3	Stu	Peq	Navê dizî

Nîşe: Zebra-striping pêşkeftinek pêşkeftî ye ku ji bo gerokên kevn ên mîna IE8 û jêrîn peyda nabe.

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

Mînak: Zebra-striped w/ TableSorter.js

Mînaka berê digirin, em bi peydakirina fonksiyonên cûrbecûr bi jQuery û pêveka Tablesorter re bikêrhatina tabloyên xwe baştir dikin . Sernivîsa her stûnekê bikirtînin da ku cûreyê biguherînin.

#	Nav	Paşnav	Ziman
1	Ya te	Yek	Îngilîzî
2	Joe	Şeş pakêt	Îngilîzî
3	Stu	Peq	Navê dizî

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

Şêweyên xwerû

Hemî formên xwerû şêwazên xwerû têne dayîn da ku wan bi rengek xwendin û pîvandinê pêşkêş bikin. Ji bo têketina nivîsê, navnîşên hilbijartî, deverên tekstê, bişkokên radyoyê û qutiyên kontrolê, û bişkokan şêwaz têne peyda kirin.

Nimûne forma efsaneyê

X-Input Mezin

Neqandin

1 2 3 4 5

Neqandin

1 2 3 4 5

Ketina neguherbar

Hin Nirx Li vir

Input neçalak

X-Input Mezin

Parçeyek piçûk a nivîsa alîkariyê

Nimûne forma efsaneyê

Nivîsa Pêşkêşkirî

@

Qutiya kontrolê ya pêşdekirî

Qutiya kontrolê ya pêvekirî

Ketina pelê

Nimûne forma efsaneyê

Lîsteya Vebijêrkan

• Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
• Vebijarka duyan jî dikare were kontrol kirin û di encamên formê de were nav kirin
• Vebijarka sê dikare - erê, we texmîn kir - di heman demê de were kontrol kirin û di encamên formê de jî were nav kirin
• Vebijêrk çar nayê kontrol kirin ji ber ku ew neçalak e.

Nîşe: Etîket hemî vebijarkan ji bo deverên klîk pir mezintir û formek bêtir bikêrhatî dorpêç dikin.

Rêzeya Dîrokê

ber Hemî dem wekî Dema Standard a Pasîfîkê (GMT -08:00) têne destnîşan kirin.

Textarea

Bloka nivîsa alîkariyê ku heke hewce be, qada jorîn rave bike.

Lîsteya Vebijêrkan

• Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
• Vebijarka duyan jî dikare were kontrol kirin û di encamên formê de were nav kirin

Save Changes  Bişûndekirin

Formên stacked

Li HTML .form-stacked-a forma xwe zêde bikin û hûn ê li ser qadên wan etîketan li şûna yên çepê hebin. Ger formên we kurt bin an jî du stûnên we ji bo formên giran hebin ev pir baş dixebite.

Nimûne forma efsaneyê

X-Input Mezin

Neqandin

1 2 3 4 5

Nimûne forma efsaneyê

X-Input Mezin

Parçeyek piçûk a nivîsa alîkariyê

Lîsteya Vebijêrkan

• Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
• Vebijarka duyan jî dikare were kontrol kirin û di encamên formê de were nav kirin

Nîşe: Etîket hemî vebijarkan ji bo deverên klîk pir mezintir û formek bêtir bikêrhatî dorpêç dikin.

Save Changes  Bişûndekirin

Buttons

Wekî peymanek, bişkok ji bo çalakiyan têne bikar anîn dema ku girêdan ji bo tiştan têne bikar anîn. Mînakî, "Daxistin" dikare bişkokek be û "çalakiya dawî" dikare bibe girêdanek.

Hemî bişkok bi şêwazek gewr ronahiyê xwemalî dikin, lê çend dersên fonksiyonel dikarin ji bo şêwazên rengên cihê werin sepandin. Di van dersan de çînek şîn .primary, çînek şîn-ronahî .info, çînek kesk .success, û .dangerpola sor heye. Zêdetir, rijandina şêwazên xwe hêsan e.

Bişkokên Mînak

Şêweyên bişkokê dikarin bi serîlêdanê re li ser her tiştî bêne .btnsepandin. Bi gelemperî hûn dixwazin van tenê li <a>, <button>, û <input>hêmanan hilbijêrin. Li vir çawa xuya dike:

Mezinahiyên Alternatîf

Bişkokên mezintir an piçûktir dixwazin? Hay jê hebe!

Dewlet seqet

Ji bo bişkokên ku ne çalak in an ji ber sedemek din ji hêla sepanê ve têne asteng kirin, dewleta neçalak bikar bînin. Ew ji .disabledbo girêdan û :disabledji bo <button>hêmanan e.

Girêdanên

Buttons

Çiye

Topbara me barek sabît e ku logo an navê malperek, navîgasyon bingehîn, û forma lêgerînê vedihewîne.

Customizable

Hemî hêmanên hundur, û tevahiya topbarê jî, vebijarkî ne. Hûn dikarin hilbijêrin ku logo / navek, nav, lêgerîn û navokek duyemîn-an jî têkeliyek ji wê hebe.

Dropdowns di nav de

Wekî beşek ji navîgasyona sereke, me kapasîteya ku hûn dakêşan li nav xwe zêde bikin vekiriye. Navika navîn a li jor (rast rêzkirî) binihêrin da ku bibînin ka ew çawa pêk tê.

Tabs û hebên

Navîgasyonek navîn a hêsan bi a <ul>. Bi lêzêdekirina çîna guncan di navbera tab an heban de biguhezînin.

Ji bo jêr-beşên naverokê yên mîna rûpelên mîhengên hesabê me û rêzikên bikarhêneran ên ji bo veguheztina di navbera rûpelên naverokê yên mîna de mezin e. Di şêwazên tabî an heb de peyda dibe.

• Xane
• Tengal
• Messages
• Settings
• Têkelî

<ul class = "tabs" > 
  <li class = "çalak" ><a href = "#" > Mal </a></li>  
  <li><a href = "#" > Profîl </a></li> 
  <li><a href = "#" > Peyam </a></li> 
  <li><a href = "#" > Mîhengan </a></li> 
  <li><a href = "#" > Têkilî </a></li> 
</ul>

• Xane
• Tengal
• Messages
• Settings
• Têkelî

<ul class = "heb" > 
  <li class = "çalak" ><a href = "#" > Mal </a></li>  
  <li><a href = "#" > Profîl </a></li> 
  <li><a href = "#" > Peyam </a></li> 
  <li><a href = "#" > Mîhengan </a></li> 
  <li><a href = "#" > Têkilî </a></li> 
</ul>

Pagination

Rûpelek pir hêsan û hindik bi şêwazê ku ji hêla Rdio ve hatî îlhama kirin. Bloka mezin zehmet e ku meriv ji bîr neke, bi hêsanî tê pîvandin, û deverên klîk ên mezin peyda dike.

<div class = "rûpelkirin" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Berê </a></li>  
    <li class = "çalak" ><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 = "#" > Piştre → </a></li>  
  </ul>
</div>

alerts bingehîn

div.alert-message

Peyamên yek-xêz ji bo ronîkirina têkçûn, têkçûna gengaz, an serfiraziya çalakiyek. Bi taybetî ji bo formên kêrhatî.

Mesajên asteng bikin

div.alert-message.block-message

Ji bo peyamên ku hinekî ravekirinê hewce dikin, me hişyariyên şêwaza paragrafê hene. Vana ji bo guheztina peyamên xeletiyê yên dirêjtir, hişyarkirina bikarhênerek ji çalakiyek li bendê, an tenê pêşkêşkirina agahdariya ji bo hûrguliya bêtir li ser rûpelê bêkêmasî ne.

Modals

Modal - dîalog an qutiyên sivik - ji bo çalakiyên konteksual ên di rewşên ku girîng e ku çarçoveyek paşerojê were domandin de mezin in.

Tool Tips

Twipsies ji bo arîkariya bikarhênerek tevlihev û nîşankirina wan di riya rast de pir bikêr in.

Popovers

Popoveran bikar bînin da ku agahdariya binetekstûalî pêşkêşî rûpelek bikin bêyî ku bandorê li sêwiranê bikin.

Bootstrap bi Preboot ve hatî çêkirin , pakêtek mîksîn û guhêrbar-çavkaniya vekirî ya ku bi Less re, pêş-processorek CSS-ê ji bo pêşkeftina malperê zûtir û hêsantir tê bikar anîn.

Binihêrin ka me Preboot di Bootstrap-ê de çawa bikar anî û hûn çawa dikarin wê bikar bînin heke hûn hilbijêrin ku li ser projeya xweya paşîn Less bimeşînin.

Meriv çawa bikar tîne

Vê vebijarkê bikar bînin da ku guhêrbarên Kêmtir ên Bootstrap, mîksîn û hêlînên li CSS-ê bi javascript-ê di geroka xwe de bi tevahî bikar bînin.

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

Çareseriya .js hîs nakin? Serlêdana Less Mac-ê biceribînin an jî Node.js bikar bînin da ku hûn koda xwe berhev bikin.

Çi tê de ye

Li vir hin hûrguliyên ku di Twitter Bootstrap-ê de wekî beşek Bootstrap-ê tê de hene hene. Serî malpera Bootstrap an rûpela projeya Github bidin da ku bêtir dakêşin û fêr bibin.

Variables

Guherbarên di Less de ji bo domandin û nûvekirina serêşiya CSS-ya xwe ya belaş bêkêmasî ne. Gava ku hûn dixwazin nirxek rengîn an nirxek pir caran tê bikar anîn biguhezînin, wê li yek cîhek nûve bikin û hûn amade ne.

// Girêdan
@linkColor : #8b59c2;         
@linkColorHover : tarîkirin (     @linkColor , 10 ); 
 
// Gewr
@black : #000;             
@grayDark :           ronahîkirin ( @reş , 25 %); 
@grey :               ronahîkirin ( @reş , 50 %); 
@grayLight :          ronahîkirin ( @reş , 70 %); 
@grayLighter :        ronahîkirin ( @reş , 90 %); 
@white : #fff;             
 
// Rengên Devokê
@blue : #08b5fb;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@purple : #7a43b6;            
 
// Tora bingehîn
@basefont : 13px ;          
@baseline : 18px ;          

Şîrovekirin

/* ... */Less ji bilî hevoksaziya normal a CSS-ê şêwazek din a şîrovekirinê jî peyda dike .

// Ev şîroveyek e
/* Ev jî şîroveyek e */

wazoo tevlihev dike

Miksîn bi bingehîn ji bo CSS-ê tê de an jî parçeyek in, ku dihêle hûn bloka kodê li yek hev bikin. Ew ji bo taybetmendiyên pêşgir ên firoşkar ên mîna box-shadow, gradientên gerokê yên cross-gerok, stûnên tîpan, û hêj bêtir mezin in. Li jêr nimûneyek mîksên ku bi Bootstrap-ê ve girêdayî ne.

Pişkên tîpan

#font {
  . kurtenivîs ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
}

Gradients

#gradient {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    background - repeat : repeat - x ;
    paşxane - wêne : - khtml - gradient ( xêz , jor çep , jor rast , ji ( @startColor ), ber ( @endColor )); // Konqueror   
    paşxane - wêne : - moz - xêz - gradient ( çep , @startColor , @endColor ); // FF 3.6+    
    paşnav - wêne : - ms - xêz - gradient ( çep , @startColor , @endColor ); // IE10    
    paşxane - wêne : - webkit - gradient ( xêz , jor çep , jor rast , reng - rawestgeh ( 0 %, @startColor ), reng - rawest ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    paşxane - wêne : - webkit - linear - gradient ( çep , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    paşnav - wêne : - o - xêz - gradient ( çep , @startColor , @endColor ); // Opera 11.10    
    paşxane - wêne : xêz - gradient ( çep , @startColor , @endColor ); // Le standard   
  }
  . vertical ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    background - repeat : repeat - x ;
    paşxane - wêne : - khtml - gradient ( xêz , çepê jorîn , çepê jêrîn , ji ( @startColor ), ber ( @endColor )); // Konqueror   
    paşxane - wêne : - moz - xêz - gradient ( @startColor , @endColor ); // FF 3.6+   
    paşxane - wêne : - ms - xêz - gradient ( @startColor , @endColor ); // IE10   
    paşxane - wêne : - webkit - gradient ( xêz , jor çep , jêrîn çep , reng - rawestgeh ( 0 %, @startColor ), reng - rawest ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    paşxane - wêne : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    paşxane - wêne : - o - xêz - gradient ( @startColor , @endColor ); // Opera 11.10   
    paşxane - wêne : xêz - gradient ( @startColor , @endColor ); // Standard  
  }
  . rêberî ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertîkal - sê - reng ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Operasyon û pergala torê

Xemgîn bibin û hin matematîkê pêk bînin da ku tevliheviyên maqûl û hêzdar ên mîna ya jêrîn biafirînin.

// Girtî
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Sîstema Tûr
. konteynir {
  firehî : @siteWidth ; 
  margin : 0 auto ;  
  . zelalfix ();
}
. stûn ( @columnSpan : 1 ) {  
  firehî : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  margin - çep : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}