тарых

Твиттердин мурунку күндөрүндө инженерлер алдыңкы талаптарга жооп берүү үчүн тааныш болгон дээрлик бардык китепканаларды колдонушкан. Bootstrap сунушталган кыйынчылыктарга жооп катары башталып, Twitterдин биринчи Hackweek учурунда өнүгүү тез ылдамдады.

Твиттердеги көптөгөн инженерлердин жардамы жана пикири менен, Bootstrap негизги стилдерди гана эмес, эң элеганттуу жана туруктуу алдыңкы дизайн үлгүлөрүн камтышы үчүн олуттуу өстү.

Кененирээк dev.twitter.com сайтынан окуңуз ›

Браузерди колдоо

Bootstrap сыналган жана Chrome, Safari, Internet Explorer жана Firefox сыяктуу негизги заманбап браузерлерде колдоого алынат.

• Акыркы Safari
• Акыркы Google Chrome
• Firefox 4+
• Internet Explorer 7+

Эмне камтылган

Bootstrap компиляцияланган CSS, компиляцияланбаган жана үлгү калыптары менен толук келет.

• Бардык оригиналдуу .аз файлдар
• Толук компиляцияланган жана кичирейтилген CSS
• Толук стилдик жетектөөчү документация
• Үлгү бет шаблоны (жакында дагы көп болот)

Демейки тор

Bootstrap бөлүгү катары берилген демейки тор системасы 940px кең 16 тилкелүү тор болуп саналат. Бул популярдуу 960 тор системасынын даамы, бирок сол жана оң тарабында кошумча маржа/толтуру жок.

Тор белгилөөнүн мисалы

Бул жерде көрсөтүлгөндөй, негизги макет эки "мамыча" менен түзүлүшү мүмкүн, алардын ар бири тор тутумубуздун бир бөлүгү катары аныктаган 16 фундаменталдык мамычалардын санын камтыйт. Көбүрөөк вариациялар үчүн төмөндөгү мисалдарды караңыз.

<div class="row"> class = "сап" >
  <div class = "span6 мамычалар" > 
    ...
  </div>
  <div class = "span10 мамычалар" > 
    ...
  </div>
</div>

Фиксалдуу макет

Каалаган сайт же бет үчүн негизги 940px кең, борборлоштурулган контейнер макети.

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

Суюктуктун жайгашуусу

Мин- жана максимум-туурасы жана сол жагындагы каптал тилкеси бар ийкемдүү суюктук же суюк барак структурасы. Колдонмолор үчүн сонун.

<дене>
  <div класс = "контейнер-суюктук" > 
    <div класс = "каптал тилкеси" > 
      ...
    </div>
    <div класс = "мазмун" > 
      ...
    </div>
  </div>
</body>

Баш аты жана көчүрмөсү

Веб баракчаларыңызды структуралаштыруу үчүн стандарттуу типографиялык иерархия.

h1. 1-башкы

h2. 2-башкы

h3. 3-башкы

h4. 4-башкы

h5. 5-башкы

h6. 6-башкы

Мисал абзац

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

Мисал рубрикада бөлүмчө бар…

Башка. элементтер

Баса, даректер жана аббревиатураларды колдонуу

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

Эскертүү:<b> HTML5те жана тегдерди колдонуу дагы деле жакшы <i>, бирок алар мындан ары мүнөздүү стилдер менен келбейт. <b>кошумча маани бербестен сөздөрдү же сөз айкаштарын бөлүп көрсөтүү үчүн арналган, ал эми <i>негизинен үн, техникалык терминдер ж.б.у.с.

Даректер

<address>Элемент анын жакынкы ата-бабасы же бүткүл иш органы үчүн байланыш маалыматы үчүн колдонулат . Бул кандай көрүнөт:

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

Эскертүү: Мазмунду туура түзүш үчүн ар бир сап <address>сызык тыныгуусу ( <br />) менен аякташы керек же блок деңгээлиндеги тегге (мисалы, <p>) оролгон болушу керек.

Аббревиатуралар

<abbr>Кыскартуулар жана аббревиатуралар үчүн тегди колдонуңуз ( HTML5те <acronym>эскирген ) . Тегдин ичине стенографиялык форманы коюңуз жана толук ат үчүн аталышты коюңуз.

Blockquotes

<blockquote> <p> <small>

Кантип цитата кылуу керек

Блок цитатаны кошуу үчүн, <blockquote>тегерете ороп <p>, <small>тегдер. Булакыңызга шилтеме кылуу үчүн элементти колдонуңуз жана анын алдында <small>сызыкча —аласыз.

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

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

Тартипсиз<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• претиум nisl aliquet жылы Facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Анеан сит амет эрат нунц
• Eget porttitor lorem

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• претиум nisl aliquet жылы Facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Анеан сит амет эрат нунц
• Eget porttitor lorem

Заказ берди<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. претиум nisl aliquet жылы Facilisis
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Анеан сит амет эрат нунц
8. Eget porttitor lorem

Descriptiondl

Сүрөттөмө тизмелери

Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.

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.

Курулуш үстөлдөрү

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

Столдор сонун - көп нерселер үчүн. Мыкты таблицалар пайдалуу, масштабдуу жана окула турган (код деңгээлинде) болушу үчүн бир аз белгилөө керек. Бул жерде жардам берүү үчүн бир нече кеңештер бар.

Ар дайым мамычаңыздын баштарын <thead>иерархия <thead>> <tr>> болгудай кылып ороп алыңыз <th>.

Мамычалардын аталыштарына окшоп, таблицаңыздын бардык мазмуну <tbody>иерархияңыз <tbody>> <tr>> болушу үчүн оролушу керек <td>.

Мисал: Демейки таблица стилдери

Окуу мүмкүнчүлүгүн камсыз кылуу жана структураны сактоо үчүн бардык таблицалар автоматтык түрдө негизги чектер менен гана стилделет. Кошумча класстарды же атрибуттарды кошуунун кереги жок.

#	Биринчи аты	Акыркы аты	Тил
1	Кээ бир	Бир	Англисче
2	Джо	Sixpack	Англисче
3	Stu	Дент	Code

<таблица классы="жалпы стол"> класс = "жалпы стол" >
  ...
</таблица>

Мисал: Зебра-сызык

Зебра сызыгын кошуу менен үстөлдөрүңүздү бир аз кооздоңуз — .zebra-stripedклассты кошуңуз.

#	Биринчи аты	Акыркы аты	Тил
1	Кээ бир	Бир	Англисче
2	Джо	Sixpack	Англисче
3	Stu	Дент	Code

Эскертүү: Zebra-стрипинг IE8 жана андан төмөн сыяктуу эски браузерлер үчүн жеткиликтүү эмес прогрессивдүү өркүндөтүү.

<таблица классы="жалпы стол зебра-сызык"> класс = "жалпы стол зебра-сызык" >
...
</таблица>

Мисал: Зебра-сызык w/ TableSorter.js

Мурунку мисалды алып, биз jQuery жана Tablesorter плагини аркылуу сорттоо функциясын камсыз кылуу менен таблицаларыбыздын пайдалуулугун жакшыртабыз . Сортту өзгөртүү үчүн каалаган мамычанын башын чыкылдатыңыз.

#	Биринчи аты	Акыркы аты	Тил
1	Сиздин	Бир	Англисче
2	Джо	Sixpack	Англисче
3	Stu	Дент	Code

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<скрипт > 
  $ ( функция () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<таблица классы = "жалпы стол зебра-сызык" > 
  ...
</таблица>

Демейки стилдер

Бардык формаларга аларды окула турган жана масштабдуу түрдө көрсөтүү үчүн демейки стилдер берилет. Стилдер текст киргизүү, тандоо тизмелери, текст аймактары, радио баскычтар жана белги кутучалары жана баскычтар үчүн берилген.

Мисал форма легендасы

X-Large киргизүү

Тандоо

1 2 3 4 5

Тандоо

1 2 3 4 5

Түзөтүлбөгөн киргизүү

Бул жерде кээ бир баалуулуктар

Өчүрүлгөн киргизүү

X-Large киргизүү

Жардам текстинин кичинекей үзүндүсү

Мисал форма легендасы

Алдын ала текст

@

Prepended Checkbox

Кошулган белги кутучасы

Файл киргизүү

Мисал форма легендасы

Параметрлердин тизмеси

• Биринчи вариант бул жана тигил — бул эмне үчүн сонун экенин камтууну унутпаңыз
• Экинчи вариантты да текшерип, форманын натыйжаларына кошууга болот
• Үчүнчү вариантты да текшерип, форманын натыйжаларына кошууга болот - ооба, сиз ойлодуңуз
• Төртүнчү вариантты текшерүү мүмкүн эмес, анткени ал өчүрүлгөн.

Эскертүү: Энбелгилер бир кыйла чоңураак чыкылдатуу аймактарынын жана колдонууга ыңгайлуу форманын бардык варианттарын курчап турат.

Дата диапазону

чейин Бардык убакыттар Тынч океандын стандарттык убактысы (GMT -08:00) катары көрсөтүлгөн.

Textarea

Зарыл болсо, жогорудагы талааны сүрөттөө үчүн жардам текстинин блогу.

Параметрлердин тизмеси

• Биринчи вариант бул жана тигил — бул эмне үчүн сонун экенин камтууну унутпаңыз
• Экинчи вариантты да текшерип, форманын натыйжаларына кошууга болот

Өзгөрүүлөрдү сактоо  Жокко чыгаруу

Топтолгон формалар

.form-stackedФормаңыздын HTML'ине кошсоңуз, алардын сол жагында эмес, алардын талаасынын үстүндө энбелгилер болот . Формаларыңыз кыска болсо же оор формалар үчүн эки мамычасы болсо, бул сонун иштейт.

Мисал форма легендасы

X-Large киргизүү

Тандоо

1 2 3 4 5

Мисал форма легендасы

X-Large киргизүү

Жардам текстинин кичинекей үзүндүсү

Параметрлердин тизмеси

• Биринчи вариант бул жана тигил — бул эмне үчүн сонун экенин камтууну унутпаңыз
• Экинчи вариантты да текшерип, форманын натыйжаларына кошууга болот

Эскертүү: Энбелгилер бир кыйла чоңураак чыкылдатуу аймактарынын жана колдонууга ыңгайлуу форманын бардык варианттарын курчап турат.

Өзгөрүүлөрдү сактоо  Жокко чыгаруу

Buttons

Конвенция катары баскычтар иш-аракеттер үчүн колдонулат, ал эми шилтемелер объекттер үчүн колдонулат. Мисалы, "Жүктөө" баскычы жана "акыркы аракет" шилтеме болушу мүмкүн.

Бардык баскычтар демейки ачык боз стилде, бирок көк .primaryкласс бар. Мындан тышкары, өз стилиңизди жылдыруу оңой.

Мисал баскычтары

Баскычтардын стилдери колдонулган бардык нерсеге .btnколдонулушу мүмкүн. <a>Адатта, сиз буларды , <button>, жана тандалган <input>элементтерге гана колдонгуңуз келет . Бул кандай көрүнөт:

Альтернативдик өлчөмдөр

Чоңураак же кичине баскычтарды жактырасызбы? Бол!

Өчүрүлгөн абал

Активдүү эмес же тигил же бул себептерден улам колдонмо тарабынан өчүрүлгөн баскычтар үчүн өчүрүлгөн абалды колдонуңуз. Бул .disabledшилтемелер жана элементтер :disabledүчүн .<button>

Шилтемелер

Buttons

Бул эмне

Биздин топбар - бул веб-сайттын логотиби же аталышы, негизги навигациясы жана издөө формасы жайгашкан туруктуу тилке.

Ыңгайлаштырылган

Бардык элементтер, ошондой эле үстүнкү панелдин баары милдеттүү эмес. Сиз логотипти/атын, навигацияны, издөөнү жана кошумча навигацияны же алардын каалаган комбинациясын кошууну тандай аласыз.

Ашылма тизмелер камтылган

Негизги навигациянын бир бөлүгү катары, биз сиздин навигацияңызга ылдый түшүүчү тизмелерди кошуу мүмкүнчүлүгүн кошконбуз. Анын кантип жасалганын көрүү үчүн жогорудагы кошумча навигацияны текшериңиз (оңго тегизделген).

Таблеткалар жана таблеткалар

менен жөнөкөй кошумча навигация түзүңүз <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>

• Үй
• Профиль
• Кабарлар
• Орнотуулар
• Байланыш

<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 класс = "беттөө" > 
  <ul>
    <li class = "мурдагы өчүрүлгөн" ><a href = "#" > ← Мурунку </a></li>  
    <li класс = "активдүү" ><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 класс = "кийинки" ><a href = "#" > Кийинки → </a></li>  
  </ul>
</div>

Негизги эскертүүлөр

Иштин ийгиликсиздигин, мүмкүн болбой калышын же ийгилигин көрсөтүү үчүн бир саптык билдирүүлөр. Өзгөчө формалар үчүн пайдалуу.

Билдирүүлөрдү бөгөттөө

Бир аз түшүндүрүүнү талап кылган билдирүүлөр үчүн бизде абзац стилиндеги эскертүүлөр бар. Булар узакка созулган ката билдирүүлөрүн чыгаруу, колдонуучуга күтүлүп жаткан аракет жөнүндө эскертүү же бетке көбүрөөк басым жасоо үчүн жөн гана маалыматты көрсөтүү үчүн идеалдуу.

модалдар

Модальдар—диалогдор же лайтбокстор—фондук контекстти сактоо маанилүү болгон жагдайларда контексттик аракеттер үчүн эң сонун.

Куралдар боюнча кеңештер

Twipsies башаламан колдонуучуга жардам берүү жана аларды туура багытты көрсөтүү үчүн абдан пайдалуу.

Popovers

Макетке таасирин тийгизбестен баракка субтексттик маалымат берүү үчүн поповерлерди колдонуңуз.

Bootstrap Preboot менен курулган , аралашмалардын жана өзгөрмөлөрдүн ачык булагы болгон Less , тезирээк жана оңой веб иштеп чыгуу үчүн CSS препроцессору менен бирге колдонулуучу .

Preboot'ду Bootstrap'те кантип колдонгонубузду жана кийинки долбооруңузда Less иштетүүнү тандасаңыз, аны кантип колдонсоңуз болорун карап көрүңүз.

Аны кантип колдонуу керек

Бул параметрди браузериңиздеги javascript аркылуу Bootstrap'тын Less өзгөрмөлөрүн, микстерин жана CSS'те уялоосун толук пайдалануу үчүн колдонуңуз.

<link rel = "stylesheet/less" href = "less/bootstrap.less" медиа = "бардыгы" />    
<script src = "js/less-1.0.41.min.js" ></script> 

.js чечимди сезбей жатасызбы? Less Mac колдонмосун колдонуп көрүңүз же кодуңузду жайгаштырганыңызда компиляциялоо үчүн Node.js колдонуңуз .

Эмне камтылган

Бул жерде Bootstrapтын бир бөлүгү катары Twitter Bootstrapге камтылган нерселердин айрымдары. Жүктөп алуу жана көбүрөөк билүү үчүн Bootstrap веб-сайтына же Github долбоорунун барагына өтүңүз.

Түс өзгөрмөлөрү

Less ичиндеги өзгөрмөлөр CSS башыңызды оорутпай кармап туруу жана жаңыртуу үчүн идеалдуу. Түс маанисин же көп колдонулган маанини өзгөрткүңүз келсе, аны бир жерде жаңыртыңыз жана сиз орнотуңуз.

// Шилтемелер
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
 
// Боз
@black : #000;             
@grayDark :           lighten ( @black , 25 %); 
@gray :               lighten ( @black , 50 %); 
@grayLight :          lighten ( @black , 70 %); 
@grayLighter : жарыктандыруу (        @black , 90 %); 
@white : #fff;             
 
// Акцент Түстөр
@blue : #08b5fb;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@purple : #7a43b6;            
 
// Базалык
@baseline : 20px ;          

Комментарий берүү

Less ошондой эле CSSтин кадимки /* ... */синтаксисине кошумча комментарий берүүнүн дагы бир стилин камсыз кылат.

// Бул комментарий
/* Бул да комментарий */

Wazoo аралаштырат

Миксиндер негизинен CSS үчүн камтылган же жарым-жартылай болуп, код блогун бир блокко бириктирүүгө мүмкүндүк берет. Алар box-shadow, кайчылаш браузер градиенттери, шрифт стектери жана башкалар сыяктуу сатуучулардын префикстүү касиеттери үчүн эң сонун. Төмөндө Bootstrap менен камтылган аралашмалардын үлгүсү келтирилген.

Шрифт стектери

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

Градиенттер

#градиент {
  . горизонталдуу ( @startColor : #555, @endColor: #333) { 
    фон - түс : @endColor  ;
    фон - кайталоо : кайталоо - x ;
    background - image : - khtml - градиент ( сызыктуу , сол үстү , оң үстү , баштап ( @startColor ), чейин ( @endColor ) ); // Konqueror   
    background - image : - moz - linear - gradient ( сол , @startColor , @endColor );    // FF 3.6+
    background - image : - ms - сызыктуу - градиент ( сол , @startColor , @endColor ); // IE10    
    фон - сүрөт : - webkit - градиент ( сызыктуу , сол үстү , оң үстү , түс - токтотуу ( 0 %, @startColor ), түс - токтотуу ( 100 %, @endColor ));    // Safari 4+, Chrome 2+
    background - image : - webkit - сызыктуу - градиент ( солдо , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - image : - o - сызыктуу - градиент ( солдо , @startColor , @endColor ); // Опера 11.10    
    - ms - filter : %( "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 ); // Le стандарт   
  }
  . вертикалдуу ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    фон - кайталоо : кайталоо - x;
    background - image : - khtml - градиент ( сызыктуу , жогорку сол , сол ылдый , баштап ( @startColor ), чейин ( @endColor ) ); // Konqueror   
    background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    фон - сүрөт : - webkit - градиент ( сызыктуу , сол жакта , сол ылдыйда , түс - токтотуу ( 0 %, @startColor ), түс - токтотуу ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( @startColor , @endColor );   // Safari 5.1+, Chrome 10+
    background - image : - o - сызыктуу - градиент ( @startColor , @endColor ); // Опера 11.10   
    - ms - filter : %( "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) { 
    ...
  }
}

Операциялар жана тор системасы

Төмөнкүдөй ийкемдүү жана күчтүү миксингдерди түзүү үчүн фантазияга ээ болуп, математиканы аткарыңыз.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Тор системасы
. контейнер {
  туурасы : @siteWidth ; 
  маржа : 0 auto ;  
  . clearfix ();
}
. мамычалар ( @columnSpan : 1 )   {
  дисплей : inline ; 
  float : left ;
  туурасы : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  маржа - сол : @gridGutterWidth ; 
  &: биринчи - бала {
    маржа - сол : 0 ; 
  }
}
. offset ( @columnOffset : 1 )   {
  маржа - сол : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! маанилүү ;          
}