Түүх

Твиттерийн эхний өдрүүдэд инженерүүд урд талын шаардлагыг хангахын тулд өөрсдийн мэддэг бараг бүх номын санг ашигладаг байв. 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"> анги = "мөр" >
  <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> <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> дээр хуучирсан ). Тайлбарын хэлбэрийг шошгон дотор байрлуулж, бүтэн нэрэнд гарчиг тавь.

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

<blockquote> <p> <small>

Хэрхэн иш татах вэ

<blockquote>Блок ишлэл оруулахын тулд тойруулан боож <p>, <small>тэмдэглэнэ үү. Элементийг ашиглан эх сурвалжаа иш татвал өмнө <small>нь зураас авах болно .—

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо posuere erat a ante venenatis dapibus posuere velit aliquet.

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

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Масса дахь бүхэл тоо
• Дээд зэрэглэлийн nisl aliquet дахь Facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Идээний идээт ундаа
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutp at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Масса дахь бүхэл тоо
• Дээд зэрэглэлийн nisl aliquet дахь Facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Идээний идээт ундаа
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutp at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

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

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Масса дахь бүхэл тоо
4. Дээд зэрэглэлийн nisl aliquet дахь Facilisis
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

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

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

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

Эйизмод

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>байхаар боож байгаарай .<thead><tr><th>

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

Жишээ нь: Үндсэн хүснэгтийн загварууд

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

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

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

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

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

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

Тайлбар: Zebra-striping нь IE8 болон түүнээс доош настай хөтчүүдэд байхгүй дэвшилтэт сайжруулалт юм.

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

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

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

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

<script src = "js/jquery/jquery.tablesorter.min.js" >></script> 
<скрипт > 
  $ ( функц () { 
    $ ( "хүснэгт#sortTableExample" ). хүснэгт эрэмбэлэгч ({ 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

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

X-Large оролт

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

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

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

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

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

Товчлуурууд

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

Бүх товчлуурууд нь анхдагчаар цайвар саарал өнгөтэй байдаг, гэхдээ цэнхэр .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 = "хуудас" > 
  <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>

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

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

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

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

Модаль

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

Хэрэгслийн зөвлөмжүүд

Twipsies нь эргэлзсэн хэрэглэгчдэд тусалж, зөв ​​чиглэлд чиглүүлэхэд маш хэрэгтэй байдаг.

Поповерууд

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

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

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

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

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

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<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 :     харанхуйлах ( @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 - шүүлтүүр : %( "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 )) ! чухал ;          
}