Өгөгдмөл сүлжээ

Bootstrap-ийн нэг хэсэг болгон өгсөн анхдагч сүлжээний систем нь 940px өргөнтэй 16 баганатай сүлжээ юм. Энэ нь алдартай 960 сүлжээний системийн амт боловч зүүн болон баруун талд нэмэлт зах/доторгүй.

Сүлжээний тэмдэглэгээний жишээ

Энд үзүүлсэнчлэн үндсэн бүдүүвчийг хоёр "багана"-аар үүсгэж болох бөгөөд тус бүр нь бидний сүлжээний системийн нэг хэсэг гэж тодорхойлсон 16 суурийн баганын хэд хэдэн хэсгийг хамардаг. Доорх жишээнүүдээс илүү олон хувилбаруудыг харна уу.

<div class="row">
  <div class = "span6 багана" > 
    ...
  </div>
  <div class = "span10 багана" > 
    ...
  </div>
</div>

Тогтмол зохион байгуулалт

Ямар ч сайт эсвэл хуудсанд зориулсан 940 пикселийн өргөнтэй, төвлөрсөн савны үндсэн загвар.

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

Шингэний зохион байгуулалт

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

<бие>
  <div class = "контейнер-шингэн" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </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 aparturient montes, nascetur ridiculus mus. 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, pharetra augue.

Хаяг

Элементийг addressта таамагласан биз дээ!- хаягуудад ашигладаг. Энэ нь дараах байдалтай байна.

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

Тэмдэглэл: Агуулгыг ямар ч хэв маяг хэрэглэхгүйгээр бодит амьдрал дээр уншихын тулд зөв бүтэцжүүлэхийн тулд мөр бүр addressзаавал мөр таслах ( )-аар төгсөх ёстой.<br />

Товчлол

Товчлол болон товчилсон нэрийн хувьд abbrтагийг ашиглана уу ( HTML5acronym дээр хуучирсан ). Тайлбарын хэлбэрийг шошгон дотор байрлуулж, бүтэн нэрэнд гарчиг тавь.

Хаалттай ишлэл

<blockquote> <p> <cite>

blockquoteЭргэн тойронд paragraphболон citeшошготой байхаа мартуузай . Эх сурвалжаас иш татахдаа citeэлементийг ашиглана уу. CSS нь нэрийг автоматаар em зураасаар (—) өмнөтгөлд оруулна.

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

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

Захиалгагүй<ul>

• Жереми Биксби
• Роберт Дезур
• Жош Вашингтон
• Антон Капреси
• Миний багийн найзууд
  • Жорж Кастанза
  • Жерри Сейнфельд
  • Космо Крамер
  • Элейн Беннис
  • Шинэ хүн
• Жон Жэйкоб
• Пол Пирс
• Кевин Гарнетт

Загваргүй<ul.unstyled>

• Жереми Биксби
• Роберт Дезур
• Жош Вашингтон
• Антон Капреси
• Миний багийн найзууд
  • Жорж Кастанза
  • Жерри Сейнфельд
  • Космо Крамер
  • Элейн Беннис
  • Шинэ хүн
• Жон Жэйкоб
• Пол Пирс
• Кевин Гарнетт

Захиалсан<ol>

1. Жереми Биксби
2. Роберт Дезур
3. Жош Вашингтон
4. Антон Капреси
5. Миний багийн найзууд
   1. Жорж Кастанза
   2. Жерри Сейнфельд
   3. Космо Крамер
   4. Элейн Беннис
   5. Шинэ хүн
6. Жон Жэйкоб
7. Пол Пирс
8. Кевин Гарнетт

Тодорхойлолтdl

Тодорхойлолтын жагсаалтууд

Тодорхойлолтын жагсаалт нь нэр томъёог тодорхойлоход төгс төгөлдөр юм.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

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

Etiam porta sem malesuada magna mollis euismod.

Барилгын ширээ

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

Хүснэгт нь маш сайн - олон зүйлд зориулагдсан. Гайхалтай хүснэгтүүд нь ашигтай, өргөтгөх боломжтой, унших боломжтой (кодын түвшинд) байхын тулд бага зэрэг тэмдэглэгээ хийх хэрэгтэй. Энд туслах хэдэн зөвлөгөө байна.

Баганын толгой хэсгийг үргэлж > > theadбайхаар боож байгаарай .theadtrth

Баганын толгойтой адил таны хүснэгтийн бүх агуулгыг дотор нь ороосон байх ёстой бөгөөд tbodyингэснээр таны шатлал tbody> tr> tdбайна.

Жишээ нь: Өгөгдмөл хүснэгтийн загварууд

Унших, бүтцийг хадгалахын тулд бүх хүснэгтийг зөвхөн чухал хүрээгээр автоматаар загварчлах болно. Нэмэлт анги, шинж чанар нэмэх шаардлагагүй.

#	Нэр	Овог	Хэл
1	Зарим	Нэг	Англи
2	Жо	Зургаан хайрцаг	Англи
3	Stu	Хонхорхой	Код

<хүснэгт анги = "нийтлэг хүснэгт"> анги = "нийтлэг хүснэгт" >
  ...
</хүснэгт>

Жишээ нь: тахө судалтай

Тахө зураасыг нэмж ширээгээ бага зэрэг гоёмсог болго—зүгээр л .zebra-stripedанги нэмээрэй.

#	Нэр	Овог	Хэл
1	Зарим	Нэг	Англи
2	Жо	Зургаан хайрцаг	Англи
3	Stu	Хонхорхой	Код

<хүснэгт анги = "нийтлэг хүснэгт тахө судалтай"> анги = "нийтлэг ширээний тахө судалтай" >
...
</хүснэгт>

Жишээ нь: тахө судалтай / TableSorter.js

Өмнөх жишээг авч үзвэл, бид jQuery болон Tablesorter залгаасаар дамжуулан эрэмбэлэх функцээр дамжуулан хүснэгтүүдийнхээ ашиг тусыг сайжруулдаг . Ангилалыг өөрчлөхийн тулд дурын баганын толгой дээр дарна уу.

#	Нэр	Овог	Хэл
1	Таны	Нэг	Англи
2	Жо	Зургаан хайрцаг	Англи
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> 
<script type = "текст/javascript" > 
  $ ( баримт бичиг ). бэлэн ( функц () { 
    $ ( "хүснэгт#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<хүснэгт анги = "нийтлэг ширээний тахө судалтай" > 
  ...
</хүснэгт>

Өгөгдмөл хэв маяг

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

Жишээ маягтын домог

X-Large оролт

Сонго

1 2 3 4 5

Сонго

1 2 3 4 5

Засварлах боломжгүй оролт

Энд зарим үнэ цэнэ

Оролтыг идэвхгүй болгосон

X-Large оролт

Тусламжийн текстийн жижиг хэсэг

Жишээ маягтын домог

Урьдчилсан текст

@

Урьдчилсан тэмдэглэгээ

Хавсаргасан шалгах хайрцаг

Файлын оролт

Жишээ маягтын домог

Сонголтуудын жагсаалт

• Нэгдүгээр сонголт бол энэ, тэр нь - энэ нь яагаад гайхалтай болохыг заавал оруулаарай
• Хоёр дахь сонголтыг мөн шалгаж, маягтын үр дүнд оруулах боломжтой
• Гурав дахь сонголт - тийм ээ, та үүнийг тааварласан - мөн шалгаж, маягтын үр дүнд оруулах боломжтой
• Дөрөвдүгээр сонголтыг идэвхгүй болгосон тул шалгах боломжгүй.

Тэмдэглэл: Шошго нь илүү том товшилтын хэсгүүд болон илүү ашиглах боломжтой маягтын бүх сонголтыг тойрон хүрээлдэг.

Огнооны хүрээ

руу Бүх цагийг Номхон далайн стандарт цагаар (GMT -08:00) харуулсан.

Текстареа

Шаардлагатай бол дээрх талбарыг тайлбарлах тусламжийн текстийн блок.

Сонголтуудын жагсаалт

• Нэгдүгээр сонголт бол энэ, тэр нь - энэ нь яагаад гайхалтай болохыг заавал оруулаарай
• Хоёр дахь сонголтыг мөн шалгаж, маягтын үр дүнд оруулах боломжтой

Өөрчлөлтүүдийг хадгалах Цуцлах

Овоолсон маягтууд

Маягтынхаа HTML-д нэмбэл .form-stackedта талбаруудын зүүн талд биш дээд талд шошготой болно. Хэрэв таны маягт богино эсвэл хүнд хэлбэрт оруулах хоёр багана байгаа бол энэ нь маш сайн ажилладаг.

Жишээ маягтын домог

X-Large оролт

Сонго

1 2 3 4 5

Жишээ маягтын домог

Сонголтуудын жагсаалт

• Нэгдүгээр сонголт бол энэ, тэр нь - энэ нь яагаад гайхалтай болохыг заавал оруулаарай
• Хоёр дахь сонголтыг мөн шалгаж, маягтын үр дүнд оруулах боломжтой

Тэмдэглэл: Шошго нь илүү том товшилтын хэсгүүд болон илүү ашиглах боломжтой маягтын бүх сонголтыг тойрон хүрээлдэг.

Өөрчлөлтүүдийг хадгалах Цуцлах

Товчлуурууд

Дүрмээр бол товчлууруудыг үйлдэл хийхэд ашигладаг бол холбоосыг объектод ашигладаг. Жишээлбэл, "Татаж авах" нь товчлуур, "сүүлийн үйл ажиллагаа" нь холбоос байж болно.

Бүх товчлуурууд нь анхдагчаар цайвар саарал өнгөтэй байдаг, гэхдээ цэнхэр .primaryанги байдаг. Нэмж дурдахад, өөрийн гэсэн хэв маягийг хэвлэхэд хялбар байдаг.

Жишээ товчлуурууд

Товчлуурын хэв маягийг ашигласан бүх зүйлд .btnхэрэглэж болно. Ерөнхийдөө та эдгээрийг зөвхөн a, button, сонгох inputэлементүүдэд хэрэглэхийг хүсдэг. Энэ нь дараах байдалтай байна.

Өөр хэмжээсүүд

Илүү том эсвэл жижиг товчлуурууд танд таалагдаж байна уу? Болоорой!

Идэвхгүй байдал

Идэвхгүй байгаа эсвэл ямар нэг шалтгааны улмаас програм идэвхгүй болсон товчлууруудын хувьд идэвхгүй байдлыг ашиглана уу. Энэ .disabledнь холбоосууд болон элементүүдэд :disabledзориулагдсан .button

Холбоосууд

Товчлуурууд

Энэ юу вэ

Манай topbar нь вэб сайтын лого эсвэл нэр, үндсэн навигаци, хайлтын маягтыг агуулсан суурин баар юм.

Тохируулах боломжтой

Доторх бүх элементүүд болон дээд самбарыг бүхэлд нь сонгох боломжтой. Та лого/нэр, навигаци, хайлт, хоёрдогч навигац эсвэл тэдгээрийн аль нэг хослолыг оруулахаар сонгож болно.

Унтраах цэсүүд багтсан

Үндсэн навигацийн нэг хэсэг болгон бид танд өөрийн Nav-д унадаг цэс нэмэх боломжийг оруулсан. Хэрхэн хийгдсэнийг харахын тулд дээрх (баруун зэрэгцүүлсэн) хоёрдогч хөтөчийг шалгана уу.

Таб болон эм

ашиглан энгийн хоёрдогч навигац үүсгээрэй 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"> анги = "хуудас" >
  <ul>
    <li class = "prev disabled" ><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>

Үндсэн сэрэмжлүүлэг

Аливаа үйлдлийн бүтэлгүйтэл, болзошгүй бүтэлгүйтэл, амжилтыг тодруулах нэг мөр мессеж. Ялангуяа маягтуудад хэрэгтэй.

Зурвасуудыг блоклох

Бага зэрэг тайлбар шаарддаг мессежүүдийн хувьд бид догол мөрний хэв маягийн анхааруулгатай. Эдгээр нь илүү урт алдааны мэдээг гаргах, хэрэглэгчдэд хүлээгдэж буй үйлдлийн талаар сэрэмжлүүлэх, эсвэл хуудсанд илүү их анхаарал хандуулахын тулд зүгээр л мэдээлэл өгөхөд тохиромжтой.

Модаль

Модаль-харилцах цонх эсвэл гэрлийн хайрцаг нь суурь контекстийг хадгалах нь чухал нөхцөл байдалд контекст үйлдэл хийхэд тохиромжтой.

Поповерууд

Хуудасны бүтцэд нөлөөлөхгүйгээр дэд текст мэдээллээр хангахын тулд поповер ашиглана уу.

Bootstrap нь вэбийг илүү хурдан бөгөөд хялбар болгоход зориулагдсан CSS-ийн урьдчилсан процессор болох Less -тэй хамт ашиглах холимог болон хувьсагчийн нээлттэй эхийн багц болох Preboot -ээр бүтээгдсэн.

Бид Bootstrap-д Preboot-г хэрхэн ашигласан, хэрэв та дараагийн төсөл дээрээ Less програмыг ажиллуулахаар сонгосон бол үүнийг хэрхэн ашиглаж болохыг харна уу.

Үүнийг хэрхэн ашиглах вэ

Хөтөч дээрээ javascript-ээр дамжуулан Bootstrap-ийн Less хувьсагч, холимог болон CSS-ийн үүрийг бүрэн ашиглахын тулд энэ сонголтыг ашиглана уу.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "загварын хуудас/бага" төрөл = "текст/css" href = "бага/bootstrap.less" медиа = "бүгд" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" >></script>  

.js шийдлийг мэдрэхгүй байна уу? Less Mac програмыг ашиглах эсвэл Node.js ашиглан кодоо байршуулахдаа эмхэтгээрэй.

Юу багтсан байна

Энд Bootstrap-ийн нэг хэсэг болох Twitter Bootstrap-д багтсан зүйлсийн зарим онцлох зүйлсийг энд оруулав. Татаж авах болон илүү ихийг мэдэхийн тулд Bootstrap вэбсайт эсвэл Github төслийн хуудас руу очно уу.

Өнгөний хувьсагч

Less дахь хувьсагч нь таны CSS-ийн толгойн өвчинг арилгах, шинэчлэхэд төгс төгөлдөр юм. Хэрэв та өнгөний утга эсвэл байнга ашиглагддаг утгыг өөрчлөхийг хүсвэл нэг цэгт шинэчлээрэй.

// Холбоосууд
@linkColor : #8b59c2;         
@linkColorHover :     харанхуйлах ( @linkColor , 10 ); 
// Саарал
@хар : #000;             
@grayDark :           гэрэлтүүлэх ( @хар , 25 %); 
@саарал :               цайруулах ( @хар , 50 %); 
@grayLight :          гэрэлтүүлэх ( @хар , 70 %); 
@grayLighter :        гэрэлтүүлэх ( @хар , 90 %); 
@цагаан : #fff ;             
// Өргөлтийн өнгө
@цэнхэр : #08b5fb ;              
@ногоон : #46a546 ;             
@улаан : #9d261d ;               
@шар : #ffc40d ;            
@улбар шар : #f89406 ;            
@ягаан : #c3325f ;              
@ нил ягаан : #7a43b6 ;            
// Суурь
@baseline : 20px ;          

Сэтгэгдэл бичиж байна

/* ... */Less нь CSS-ийн ердийн синтаксаас гадна тайлбар бичих өөр хэв маягийг өгдөг .

// Энэ бол тайлбар юм
/* Энэ бас сэтгэгдэл */

Wazoo-г холино

Холимог нь үндсэндээ 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 ) {     
    font - family : "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 ;
    background - image : - khtml - градиент ( шугаман , зүүн дээд , баруун дээд , -аас ( @startColor ), ( @endColor ) хүртэл ); // Konqueror   
    дэвсгэр - зураг : - moz - шугаман - градиент ( зүүн , @startColor , @endColor ); // FF 3.6+    
    дэвсгэр - зураг : - ms - шугаман - градиент ( зүүн , @startColor , @endColor ); // IE10    
    background - image : - webkit - градиент ( шугаман , зүүн дээд , баруун дээд , өнгө - зогсоох ( 0 %, @startColor ), өнгө - зогсоох ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    дэвсгэр - зураг : - webkit - шугаман - градиент ( зүүн , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    дэвсгэр - зураг : - o - шугаман - градиент ( зүүн , @startColor , @endColor ); // Opera 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 ); // Стандарт   
  }
  . босоо ( @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 - linear - gradient ( @startColor , @endColor ); // IE10   
    background - image : - 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 ); // Opera 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) { 
    ...
  }
}

Үйл ажиллагаа ба сүлжээний систем

Доорх шиг уян хатан, хүчирхэг холимог үүсгэхийн тулд сонирхолтой болж, математик тооцоолоорой.

// Сүлжээ
@gridБаганууд : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Сүлжээний систем
. сав {
  өргөн : @siteWidth ; 
  захын зай : 0 автомат ;  
  . тодорхой засах ();
}
. баганууд ( @columnSpan : 1 ) {  
  дэлгэц : inline ; 
  хөвөх : зүүн ;
  өргөн : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  захын зай - зүүн : @gridGutterWidth ; 
  &: анхны - хүүхэд {
    захын зай - зүүн : 0 ; 
  }
}
. офсет ( @columnOffset : 1 ) {  
  маржин - зүүн : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! чухал ;          
}