Шабакаи пешфарз

Системаи пешфарз шабакаи пешфарз, ки ҳамчун як қисми Bootstrap пешниҳод шудааст, шабакаи 16-сутуни васеъаш 940px мебошад. Ин мазза аз системаи маъмули шабакаи 960 аст, аммо бидуни маржа/паҳнкунии иловагӣ дар паҳлӯҳои чап ва рост.

Намунаи аломатгузории шабака

Тавре ки дар ин ҷо нишон дода шудааст, тарҳбандии асосиро бо ду "сутун" сохтан мумкин аст, ки ҳар кадоми онҳо як қатор 16 сутуни бунёдиро дар бар мегиранд, ки мо ҳамчун як қисми системаи шабакаи мо муайян кардем. Барои вариантҳои бештар ба мисолҳои зер нигаред.

<div class="сатр"> синф = "сатр" >
  <div class = "span6 сутунҳо" > 
    ...
  </div>
  <div class = "span10 сутун" > 
    ...
  </div>
</div>

Тарҳбандии собит

Тарҳбандии асосии 940px васеъ ва мутамаркази контейнер барои ҳама гуна сайт ё саҳифа.

<бадан>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Тарҳбандии моеъ

Сохтори саҳифаи моеъ ё моеъ бо паҳнои ҳадди ақал ва максимум ва панели паҳлӯи чап. Беҳтарин барои барномаҳо.

<бадан>
  <div class = "контейнер-моеъ" > 
    <div class = "панели паҳлӯ" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Сарлавҳаҳо ва нусхабардорӣ

Як иерархияи типографии стандартӣ барои сохтори вебсайтҳои шумо.

h1. Сарлавҳаи 1

h2. Сарлавҳаи 2

h3. Сарлавҳаи 3

h4. Сарлавҳаи 4

h5. Сарлавҳаи 5

h6. Сарлавҳаи 6

Мисол параграф

Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад. Nullam id dolor id nibh ultricies vehicula ut id elit.

Сарлавҳаи мисол Зерсарлавҳа дорад...

Шумо инчунин метавонед зерсарлавҳаҳоро бо <strong>ва илова кунед<em>

Дигар. унсурҳо

Истифодаи таъкид, суроғаҳо ва ихтисорот

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

Кай истифода бурдан

Тегҳои таъкид ( <strong>ва <em>) бояд барои илова кардани фарқияти визуалӣ байни калима ё ибора ва нусхаи атрофи он истифода шаванд. <strong>Барои таваҷҷӯҳи оддии кӯҳна ва <em>барои таваҷҷӯҳ ва унвонҳои ҷолиб истифода баред .

Таваҷҷӯҳ дар параграф

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 augue pharetra.

Суроғаҳо

Элемент addressбарои-шумо тахмин кардед!-адресҳо истифода мешавад. Ин аст, ки чӣ тавр ба назар мерасад:

Twitter, Inc.
795 Folsom Ave, Suite 600
Сан-Франсиско, CA 94107
P: (123) 456-7890

Эзоҳ: Ҳар як сатр addressбояд бо танаффус ( <br />) хотима ёбад, то мундариҷаро дуруст сохт, зеро он дар ҳаёти воқеӣ бидуни ягон услуб хонда мешавад.

Ихтисорот

Барои ихтисорот ва ихтисоротҳо тегро истифода баред abbr( acronymдар HTML5 бекор карда шудааст ). Шакли стенографияро дар дохили тег ҷойгир кунед ва барои номи пурра унвон таъин кунед.

Нохунакҳо

<blockquote> <p> <cite>

Боварӣ ҳосил кунед, ки blockquoteдар атрофи худ paragraphва citeбарчаспҳои худро печонед. Ҳангоми истинод ба манбаъ, citeэлементро истифода баред. CSS ба таври худкор номро бо аломати em (—) пешгуфтор хоҳад кард.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut worke and dolor magna aliqua...

Доктор Юлиус Ҳибберт

Бетартиб<ul>

• Ҷереми Биксби
• Роберт Дезур
• Ҷош Вашингтон
• Антон Капреси
• Ҳамкорони ман
  • Ҷорҷ Кастанза
  • Джерри Сейнфелд
  • Космо Крамер
  • Элейн Беннис
  • Нюман
• Ҷон Яъқуб
• Пол Пирс
• Кевин Гарнетт

Бесабз<ul.unstyled>

• Ҷереми Биксби
• Роберт Дезур
• Ҷош Вашингтон
• Антон Капреси
• Ҳамкорони ман
  • Ҷорҷ Кастанза
  • Джерри Сейнфелд
  • Космо Крамер
  • Элейн Беннис
  • Нюман
• Ҷон Яъқуб
• Пол Пирс
• Кевин Гарнетт

Фармоиш дод<ol>

1. Ҷереми Биксби
2. Роберт Дезур
3. Ҷош Вашингтон
4. Антон Капреси
5. Ҳамкорони ман
   1. Ҷорҷ Кастанза
   2. Джерри Сейнфелд
   3. Космо Крамер
   4. Элейн Беннис
   5. Нюман
6. Ҷон Яъқуб
7. Пол Пирс
8. Кевин Гарнетт

Тавсифиdl

Рӯйхати тавсиф

Рӯйхати тавсиф барои муайян кардани истилоҳот комил аст.

Эусмод

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

Donec id elit non mi porta gravida ва дар вақти дилхоҳ.

Порта Малесуада

Этиам порта семина любовь любвие.

Ҷадвалҳои сохтмонӣ

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

Ҷадвалҳо бузурганд - барои бисёр чизҳо. Бо вуҷуди ин, ҷадвалҳои олӣ барои муфид, миқёспазир ва хонданшаванда (дар сатҳи код) каме муҳаббати аломатгузорӣ лозиманд. Инҳоянд чанд маслиҳат барои кӯмак.

Ҳамеша сарлавҳаҳои сутуни худро тавре печонед thead, ки иерархия thead> tr> thбошад.

Монанди сарлавҳаҳои сутун, тамоми мундариҷаи бадани ҷадвали шумо бояд дар як печонида шаванд, tbodyто иерархияи шумо tbody> tr> tdбошад.

Мисол: Услубҳои ҷадвали пешфарз

Ҳама ҷадвалҳо ба таври худкор танҳо бо сарҳадҳои муҳим тарҳрезӣ мешаванд, то хондан ва нигоҳ доштани сохторро таъмин кунанд. Ба илова кардани синфҳо ё атрибутҳои иловагӣ лозим нест.

#	Ном	Насаб	Забон
1	Баъзехо	Як	англисӣ
2	Ҷо	Sixpack	англисӣ
3	Stu	Дент	Кодекс

<ҷадвал синфи = "ҷадвали умумӣ"> синф = "мизи умумӣ" >
  ...
</ҷадвал>

Мисол: Зебра-рах

Тавассути илова кардани зебра-рахи ҷадвалҳои худ каме ҷолиб шавед - танҳо .zebra-stripedсинфро илова кунед.

#	Ном	Насаб	Забон
1	Баъзехо	Як	англисӣ
2	Ҷо	Sixpack	англисӣ
3	Stu	Дент	Кодекс

<table class="common-table zebra-striped"> синф = "мизи умумӣ зебра-рах" >
...
</ҷадвал>

Мисол: Zebra-striped w/ TableSorter.js

Бо назардошти мисоли қаблӣ, мо фоиданокии ҷадвалҳои худро тавассути фароҳам овардани функсияҳои ҷудокунӣ тавассути jQuery ва плагини Tablesorter беҳтар мегардонем . Барои тағир додани навъ сарлавҳаи ягон сутунро клик кунед.

#	Ном	Насаб	Забон
1	шумо	Як	англисӣ
2	Ҷо	Sixpack	англисӣ
3	Stu	Дент	Кодекс

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
< навъи скрипт = "матн/javascript" > 
  $ ( ҳуҷҷат ). тайёр ( функсия () { 
    $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
< синфи ҷадвал = "мизи умумӣ-зебра-рах" > 
  ...
</ҷадвал>

Услубҳои пешфарз

Ба ҳама шаклҳо услубҳои пешфарз дода мешаванд, то онҳоро ба таври қобили хондан ва миқёспазир пешниҳод кунанд. Сабкҳо барои вуруди матн, рӯйхатҳои интихоб, майдонҳои матн, тугмаҳои радио ва қуттиҳои қайд ва тугмаҳо таъмин карда мешаванд.

Намунаи шакли афсона

X-Вориди калон

Интихоб кунед

1 2 3 4 5

Интихоб кунед

1 2 3 4 5

Вуруди таҳрирнашаванда

Баъзе арзишҳо дар ин ҷо

Вуруди ғайрифаъол

X-Вориди калон

Порчаи хурди матни кӯмак

Намунаи шакли афсона

Матни пешакӣ

@

Қуттии санҷиши пешакӣ

Қуттии санҷиши замимашуда

Вуруди файл

Намунаи шакли афсона

Рӯйхати интихобҳо

• Варианти якум ин ва он аст - боварӣ ҳосил кунед, ки чаро он бузург аст
• Варианти дуюм низ метавонад тафтиш ва ба натиҷаҳои форма дохил карда шавад
• Варианти сеюм метавонад - бале, шумо онро фаҳмидед - инчунин тафтиш карда шуда, ба натиҷаҳои форма дохил карда мешавад
• Варианти чорумро тафтиш кардан мумкин нест, зеро он ғайрифаъол аст.

Эзоҳ: Тамғакоғазҳо ҳама имконотро барои минтақаҳои калонтари клик ва шакли истифодашаванда иҳота мекунанд.

Диапазони сана

ба Ҳама вақтҳо ҳамчун вақти стандартии Уқёнуси Ором нишон дода шудаанд (GMT -08:00).

Текстареа

Блоки матни кӯмак барои тавсифи майдони дар боло зикршуда, агар лозим бошад.

Рӯйхати интихобҳо

• Варианти якум ин ва он аст - боварӣ ҳосил кунед, ки чаро он бузург аст
• Варианти дуюм низ метавонад тафтиш ва ба натиҷаҳои форма дохил карда шавад

Тағйиротро захира кунед Бекор кардан

Форматҳои ҷамъшуда

Ба .form-stackedHTML-и формаи худ илова кунед ва шумо дар болои майдонҳои онҳо нишонаҳо хоҳед дошт, на дар тарафи чапи онҳо. Ин хуб кор мекунад, агар шаклҳои шумо кӯтоҳ бошанд ё шумо ду сутуни вурудот барои шаклҳои вазнинтар дошта бошед.

Намунаи шакли афсона

X-Вориди калон

Интихоб кунед

1 2 3 4 5

Намунаи шакли афсона

Рӯйхати интихобҳо

• Варианти якум ин ва он аст - боварӣ ҳосил кунед, ки чаро он бузург аст
• Варианти дуюм низ метавонад тафтиш ва ба натиҷаҳои форма дохил карда шавад

Эзоҳ: Тамғакоғазҳо ҳама имконотро барои минтақаҳои калонтари клик ва шакли истифодашаванда иҳота мекунанд.

Тағйиротро захира кунед Бекор кардан

Тугмаҳо

Чун қоида, тугмаҳо барои амалҳо истифода мешаванд, дар ҳоле ки истинодҳо барои объектҳо истифода мешаванд. Масалан, "Зеркашӣ" метавонад тугма бошад ва "фаъолияти охирин" пайванде бошад.

Ҳама тугмаҳо ба услуби хокистарии сабук, аммо .primaryсинфи кабуд дастрас аст. Илова бар ин, печонидани услубҳои шахсии худ осон аст.

Тугмаҳои намунавӣ

Сабкҳои тугмаҳо метавонанд ба ҳама чиз бо .btnистифодашаванда татбиқ карда шаванд. Одатан шумо мехоҳед, ки онҳоро танҳо ба a, button, ва inputунсурҳои интихобшуда татбиқ кунед. Ин аст, ки чӣ тавр ба назар мерасад:

Андозаҳои алтернативӣ

Тугмаҳои калонтар ё хурдтарро мехоҳед? Бигиред!

Ҳолати ғайрифаъол

Барои тугмаҳое, ки фаъол нестанд ё бо ин ё он сабаб аз ҷониби барнома ғайрифаъол шудаанд, ҳолати ғайрифаъолро истифода баред. Ин барои .disabledистинодҳо ва элементҳост.:disabledbutton

Пайвандҳо

Тугмаҳо

Ин чист

Панели болоии мо як сатри собит аст, ки дар он логотип ё номи вебсайт, паймоиши ибтидоӣ ва шакли ҷустуҷӯ ҷойгир аст.

Мутобиқшаванда

Ҳама унсурҳои дохили ва тамоми панели боло низ ихтиёрӣ мебошанд. Шумо метавонед интихоб кунед, ки логотип/ном, навсозӣ, ҷустуҷӯ ва навгонии дуюмдараҷа ва ё ҳар гуна омезиши онро дохил кунед.

Равзанаҳои афтанда дохил карда шудаанд

Ҳамчун як қисми паймоиши асосӣ, мо қобилияти илова кардани афтандаҳоро ба navi худ дохил кардем. Навъи дуюмдараҷаи болоро санҷед (ба рост ҳамзамон) то бубинед, ки он чӣ гуна иҷро шудааст.

Таблетҳо ва доруҳо

Бо новбари оддии дуюмдараҷа эҷод кунед ul. Бо илова кардани синфи мувофиқ байни ҷадвалҳо ё доруҳо иваз кунед.

Барои зербахшҳои мундариҷа, ба монанди саҳифаҳои танзимоти ҳисоби мо ва ҷадвалҳои корбар барои гузаштан байни саҳифаҳои мундариҷаи монанд хеле хуб аст. Дар сабкҳои ҷадвал ё ҳаб дастрас аст.

• Хона
• Профил
• Паёмҳо
• Танзимотҳо
• Тамос

<ul class="tabs"> синф = "табҳо" >
  <li class = "active" ><a href = "" > Хона </a></li>  
  <li><a href = "" > Профил </a></li> 
  <li><a href = "" > Паёмҳо </a></li> 
  <li><a href = "" > Танзимот </a></li> 
  <li><a href = "" > Тамос бо </a></li> 
</ul>

• Хона
• Профил
• Паёмҳо
• Танзимотҳо
• Тамос

<ul class="ҳабҳо"> синф = "ҳабҳо" >
  <li class = "active" ><a href = "" > Хона </a></li>  
  <li><a href = "" > Профил </a></li> 
  <li><a href = "" > Паёмҳо </a></li> 
  <li><a href = "" > Танзимот </a></li> 
  <li><a href = "" > Тамос бо </a></li> 
</ul>

Саҳифабандӣ

Саҳифабандии ултра содда ва ҳадди аққал услубӣ, ки аз ҷониби Rdio илҳом гирифта шудааст. Блоки калонро аз даст додан душвор аст, ба осонӣ миқёспазир аст ва минтақаҳои калони кликро таъмин мекунад.

<div class="pagination"> class = "саҳифабандӣ" >
  <ul>
    <li class = "каблан ғайрифаъол" ><a href = "" > ← Пешина </a></li>  
    <li class = "фаъол" ><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 = "" > Оянда → </a></li>  
  </ul>
</div>

Огоҳиҳои асосӣ

Паёмҳои як сатр барои таъкид кардани нокомӣ, нокомии эҳтимолӣ ё муваффақияти амал. Махсусан барои шакл муфид аст.

Паёмҳоро блок кунед

Барои паёмҳое, ки каме тавзеҳот талаб мекунанд, мо огоҳиҳои услуби параграф дорем. Инҳо барои пур кардани паёмҳои хатогии тӯлонӣ, огоҳ кардани корбар аз амали интизорӣ ё танҳо пешниҳод кардани маълумот барои таваҷҷӯҳи бештар дар саҳифа комиланд.

Модалҳо

Модалҳо - муколамаҳо ё қуттиҳои равшанӣ - барои амалҳои контекстӣ дар ҳолатҳое, ки нигоҳ доштани контексти замина муҳим аст, хубанд.

Поповерҳо

Поповҳоро барои пешниҳоди иттилооти зерматнӣ ба саҳифа бидуни таъсир ба тарҳ истифода баред.

Bootstrap бо Preboot сохта шудааст , як бастаи кушодаи омехтаҳо ва тағирёбандаҳо, ки дар якҷоягӣ бо Less , протсессори CSS барои рушди тезтар ва осонтари веб истифода мешавад.

Санҷед, ки чӣ тавр мо Preboot-ро дар Bootstrap истифода мебарем ва чӣ гуна шумо метавонед онро истифода баред, агар шумо дар лоиҳаи навбатии худ Less-ро иҷро кунед.

Чӣ тавр истифода бурдани он

Ин хосиятро барои истифодаи пурраи тағирёбандаҳои Less Bootstrap, миксинҳо ва лона дар CSS тавассути javascript дар браузери худ истифода баред.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "ҳама" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Оё ҳалли .js-ро эҳсос намекунед? Замимаи Less Mac-ро санҷед ё ҳангоми ҷойгиркунии коди худ Node.js -ро истифода баред.

Чӣ дохил карда шудааст

Инҳоянд баъзе нуктаҳои муҳими он чизе, ки дар Twitter Bootstrap ҳамчун як қисми Bootstrap дохил карда шудаанд. Барои зеркашӣ ва маълумоти бештар ба вебсайти Bootstrap ё саҳифаи лоиҳаи Github гузаред.

Тағйирёбандаҳои ранг

Тағирёбандаҳо дар Less барои нигоҳдорӣ ва навсозии дарди сари CSS-и шумо комиланд. Вақте ки шумо мехоҳед арзиши ранг ё арзиши зуд-зуд истифодашавандаро тағир диҳед, онро дар як ҷой навсозӣ кунед ва шумо муқаррар кардаед.

// Пайвандҳо
@linkColor : #8b59c2;         
@linkColorHover :     торик кардан ( @linkColor , 10 ); 
// Грейс
@сиёҳ : #000;             
@grayDark :           равшан кардан ( @black , 25 %); 
@грей :               равшан кардан ( @сиёҳ , 50 %); 
@grayLight :          равшан кардан ( @сиёҳ , 70 %); 
@grayLighter :        равшан кардан ( @сиёҳ , 90 %); 
@сафед : #fff ;             
// Рангҳои аксент
@кабуд : #08b5fb ;              
@сабз : #46a546 ;             
@red : # 9d261d;               
@зард : #ffc40d ;            
@orange : #f89406;            
@pink : #c3325f;              
@арғувон : #7a43b6 ;            
// Асосӣ
@baseline : 20px ;          

Шарҳ додан

/* ... */Less инчунин ба ғайр аз синтаксиси муқаррарии CSS услуби дигари шарҳро пешниҳод мекунад .

// Ин шарҳ аст
/* Ин ҳам шарҳ аст */

Вазооро омехта мекунад

Миксинҳо асосан барои CSS-ро дар бар мегиранд ё қисман доранд, ки ба шумо имкон медиҳанд, ки блоки кодро дар як блок муттаҳид кунед. Онҳо барои хосиятҳои пешоянди фурӯшанда box-shadow, ба монанди градиентҳои кросс-браузер, стекҳои шрифт ва ғайра бузурганд. Дар зер намунаи омехтаҳое оварда шудааст, ки ба Bootstrap дохил карда шудаанд.

Стекҳои шрифт

#шрифт {
  . стенография ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    шрифт - андоза : @size ; 
    шрифт - вазн : @weight ; 
    сатр - баландӣ : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    шрифт - оила : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    шрифт - андоза : @size ; 
    шрифт - вазн : @weight ; 
    сатр - баландӣ : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    шрифт - оила : "Georgia" , Times New Roman , Times , sans - serif ;     
    шрифт - андоза : @size ; 
    шрифт - вазн : @weight ; 
    сатр - баландӣ : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    шрифт - оила : "Монако" , Courier New , monospace ;   
    шрифт - андоза : @size ; 
    шрифт - вазн : @weight ; 
    сатр - баландӣ : @lineHeight ; 
  }
}

Градиентҳо

#градиент {
  . уфуқӣ ( @startColor : #555, @endColor: #333) { 
    замина - ранг : @endColor ; 
    замина - такрор : такрор - x ;
    замина - тасвир : - khtml - градиент ( хаттӣ , боло чап , боло аз рост , аз ( @startColor ), то ( @endColor )); // Konqueror   
    замина - тасвир : - moz - linear - градиент ( аз чап , @startColor , @endColor ); // FF 3.6+    
    замина - тасвир : - ms - хатӣ - градиент ( аз чап , @startColor , @endColor ); // IE10    
    замина - тасвир : - webkit - градиент ( хаттӣ , болои чап , болои рост , ранг - қатъ ( 0 %, @startColor ), ранг - қатъ ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    замина - тасвир : - webkit - linear - градиент ( аз чап , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    замина - тасвир : - o - градиенти хатӣ ( аз чап , @startColor , @endColor ); // Опера 11.10    
    - ms - филтр : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    филтр : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ва IE7 
    замина - тасвир : хатӣ - градиент ( аз чап , @startColor , @endColor ); // Стандарт   
  }
  . амудӣ ( @startColor : #555, @endColor: #333) { 
    замина - ранг : @endColor ; 
    замина - такрор : такрор - x ;
    замина - тасвир : - khtml - градиент ( хаттӣ , боло чап , поёни чап , аз ( @startColor ), то ( @endColor )); // Konqueror   
    замина - тасвир : - moz - linear - градиент ( @startColor , @endColor ); // FF 3.6+   
    замина - тасвир : - ms - хатти - градиент ( @startColor , @endColor ); // IE10   
    замина - тасвир : - webkit - градиент ( хаттӣ , болои чап , поёни чап , ранг - қатъ ( 0 %, @startColor ), ранг - қатъ ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    замина - тасвир : - webkit - linear - градиент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    замина - тасвир : - o - хатӣ - градиент ( @startColor , @endColor ); // Опера 11.10   
    - ms - филтр : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    филтр : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 ва IE7 
    замина - тасвир : хатӣ - градиент ( @startColor , @endColor ); // Стандарт  
  }
  . самтнок ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . амудӣ - се - ранг ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0,5, @endColor: #c3325f) { 
    ...
  }
}

Амалиёт ва системаи шабакавӣ

Барои тавлиди миксинҳои фасеҳ ва пурқудрате, ки дар зер оварда шудааст, тасаввур кунед ва математика иҷро кунед.

// Гридитуд
@gridСутунҳо : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Системаи шабакавӣ
. контейнер {
  паҳно : @siteWidth ; 
  маржа : 0 худкор ;  
  . clearfix ();
}
. сутунҳо ( @columnSpan : 1 ) {  
  намоиш : inline ; 
  шинокунанда : чап ;
  паҳно : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  маржа - чап : @gridGutterWidth ; 
  &: якум - фарзанд {
    маржа - чап : 0 ; 
  }
}
. офсет ( @columnOffset : 1 ) {  
  маржа - чап : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! муҳим ;          
}