Таърих

Дар рӯзҳои қаблии Twitter, муҳандисон қариб ҳама китобхонаеро, ки бо онҳо шинос буданд, барои қонеъ кардани талаботи пештара истифода мекарданд. Bootstrap ҳамчун ҷавоб ба мушкилоте оғоз ёфт, ки дар давоми аввалин Hackweek Twitter зуд суръат гирифт.

Бо кӯмак ва фикру мулоҳизаҳои бисёре аз муҳандисон дар Twitter, Bootstrap ба таври назаррас афзоиш ёфт, то на танҳо услубҳои асосӣ, балки намунаҳои тарроҳии пешрафта ва пойдорро дар бар гирад.

Муфассалтар дар dev.twitter.com ›

Дастгирии браузер

Bootstrap дар браузерҳои асосии муосир ба монанди Chrome, Safari, Internet Explorer ва Firefox санҷида ва дастгирӣ карда мешавад.

• Сафари охирин
• Охирин Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Опера 11

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

Bootstrap бо қолибҳои CSS-и тартибдодашуда, тартибнашуда ва намунавӣ пурра меояд.

• Ҳама файлҳои аслии .кам
• CSS-и пурра тартиб додашуда ва хурдкардашуда
• Ҳуҷҷатҳои дастури услубӣ
• Намунаи шаблони саҳифа (бештар ба зудӣ меояд)

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

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

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

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

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

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

Тарҳбандии пешфарз ва соддаи 940px-и васеъ, мутамарказ барои ҳама гуна вебсайт ё саҳифае, ки аз ҷониби як <div.container>.

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

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

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

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

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

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

Тамоми шабакаи типографӣ ба ду тағирёбандаи Less дар файли preboot.less мо асос ёфтааст: @basefontва @baseline. Якум андозаи шрифти асосист, ки дар саросари ҷаҳон истифода мешавад ва дуввум баландии сатри асосӣ мебошад.

Мо ин тағирёбандаҳо ва баъзе аз математикаро барои эҷод кардани ҳошияҳо, пӯшишҳо ва баландии сатрҳои ҳама намуди мо ва ғайра истифода мебарем.

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

Эзоҳ: Истифода <b>ва <i>тегҳо дар HTML5 ҳоло ҳам хуб аст ва онҳо набояд мутаносибан ғафс ва курсив тарҳрезӣ шаванд (гарчанде ки агар унсури семантикии бештар вуҷуд дошта бошад, онро истифода баред). <b>Барои таъкид кардани калимаҳо ё ибораҳо бе аҳамияти иловагӣ пешбинӣ шудааст, дар ҳоле <i>ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.

Суроғаҳо

Элемент <address>барои маълумоти тамос барои аҷдодони наздиктарин ё тамоми кори кор истифода мешавад. Ин аст, ки чӣ тавр ба назар мерасад:

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

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

Ихтисорот

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

Нохунакҳо

<blockquote> <p> <small>

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

<blockquote>Барои дохил кардани иқтибос, печонед <p>ва <small>барчаспҳо. <small>Барои истинод ба манбаи худ элементро истифода баред ва шумо —пеш аз он тире мегиред.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо як қисми пешқадамро нишон медиҳанд.

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

Бетартиб<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Молести бутуни дар масса
• Facilisis дар aliquet nisl pretium
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ба таври ройгон озодона возеҳ кунед
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor loem

Бесабз<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Молести бутуни дар масса
• Facilisis дар aliquet nisl pretium
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ба таври ройгон озодона возеҳ кунед
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor loem

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

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Молести бутуни дар масса
4. Facilisis дар aliquet nisl pretium
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor loem

Тавсифи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	Дент	Кодекс

Эзоҳ: Zebra-striping як такмилдиҳии прогрессивӣ аст, ки барои браузерҳои кӯҳна ба монанди IE8 ва поёнтар дастрас нест.

< синфи ҷадвал = "зебра-рах" > 
...
</ҷадвал>

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

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

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

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

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

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

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

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

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

1 2 3 4 5

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

1 2 3 4 5

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

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

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

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

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

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

Матни пешакӣ

@

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

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

Вуруди файл

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

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

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

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

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

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

Текстареа

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

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

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

  Бекор кардан

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

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

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

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

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

1 2 3 4 5

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

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

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

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

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

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

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

Тугмаҳо

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

Ҳама тугмаҳо ба таври пешфарз сабки хокистарии сабук доранд, аммо як қатор синфҳои функсионалӣ метавонанд барои сабкҳои рангҳои гуногун татбиқ карда шаванд. Ба ин синфҳо синфҳои кабуд .primary, синфи кабуди сабук .info, синфи сабз .successва синфи сурх .dangerдохил мешаванд. Илова бар ин, печонидани услубҳои шахсии худ осон аст.

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

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

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

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

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

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

Пайвандҳо

Тугмаҳо

Ин чист

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

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

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

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

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

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

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

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

• Хона
• Профил
• Паёмҳо
• Танзимотҳо
• Тамос
• Поёнафтода
  • Пайванди дуюмдараҷа
  • Дар ин ҷо чизи дигар
  • Пайванди дигар

<ul class = "таббачаҳо" > 
  <li class = "active" ><a href = "#" > Home </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 = "#" > Home </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 = "саҳифагузорӣ" > 
  <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>

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

div.alert-message

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

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

div.alert-message.block-message

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

Модалҳо

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

Маслиҳатҳои асбоб

Twipsies барои кӯмак ба корбари ошуфташуда ва нишон додани онҳо ба самти дуруст хеле муфид аст.

Поповерҳо

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

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

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

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

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

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "ҳама" />    
<script src = "js/less-1.1.3.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 ;            
 
// Шабакаи ибтидоӣ
@basefont : 13px ;          
@baseline : 18px ;          

Шарҳ додан

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

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

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

Миксинҳо асосан барои 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    
    замина - тасвир : хатӣ - градиент ( аз чап , @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   
    замина - тасвир : хатӣ - градиент ( @startColor , @endColor ); // Стандарт  
  }
  . самтнок ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . амудӣ - се - ранг ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

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

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

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