Tarix

Twitterning dastlabki kunlarida muhandislar o'zlariga tanish bo'lgan deyarli har qanday kutubxonadan frontend talablarini qondirish uchun foydalanganlar. Bootstrap paydo bo'lgan muammolarga javob sifatida boshlandi va Twitter'ning birinchi Hackweek paytida rivojlanish tezlashdi.

Twitterdagi ko'plab muhandislarning yordami va fikr-mulohazalari bilan Bootstrap nafaqat asosiy uslublarni, balki yanada oqlangan va bardoshli frontend dizayn modellarini ham qamrab olish uchun sezilarli darajada o'sdi.

Batafsil: dev.twitter.com ›

Brauzerni qo'llab-quvvatlash

Bootstrap Chrome, Safari, Internet Explorer va Firefox kabi yirik zamonaviy brauzerlarda sinovdan o'tkaziladi va qo'llab-quvvatlanadi.

• Eng so'nggi Safari
• Eng so'nggi Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Nima kiritilgan

Bootstrap kompilyatsiya qilingan CSS, kompilyatsiya qilinmagan va namuna shablonlari bilan birga keladi.

• Barcha original .less fayllar
• To'liq kompilyatsiya qilingan va kichiklashtirilgan CSS
• To'liq uslublar qo'llanmasi hujjatlari
• Sahifa shabloniga misol (yaqinda ko'proq chiqadi)

Standart tarmoq

Bootstrap-ning bir qismi sifatida taqdim etilgan standart tarmoq tizimi kengligi 940px bo'lgan 16 ustunli tarmoqdir. Bu mashhur 960 grid tizimining lazzatidir, lekin chap va o'ng tomonlarda qo'shimcha chekka/to'ldirishsiz.

To'r belgisiga misol

Bu erda ko'rsatilganidek, asosiy tartib ikkita "ustun" bilan yaratilishi mumkin, ularning har biri biz panjara tizimimizning bir qismi sifatida belgilagan 16 ta asosiy ustunlar sonini qamrab oladi. Ko'proq o'zgarishlar uchun quyidagi misollarni ko'ring.

<div class = "satr" > 
  <div class = "span6 ustunlar" > 
    ...
  </div>
  <div class = "span10 ustunlar" > 
    ...
  </div>
</div>

Ruxsat etilgan tartib

Yagona tomonidan taqdim etilgan deyarli har qanday veb-sayt yoki sahifa uchun standart va oddiy 940px kenglikdagi, markazlashtirilgan tartib <div.container>.

<tana>
  <div class = "konteyner" > 
    ...
  </div>
</body>

Suyuqlikning joylashuvi

Minimal va maksimal kengliklari va chap yon panelli muqobil, moslashuvchan suyuqlik sahifa tuzilishi. Ilovalar va hujjatlar uchun juda yaxshi.

<tana>
  <div class = "konteyner-suyuqlik" > 
    <div class = "yon panel" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Sarlavhalar va nusxa

Veb-sahifalaringizni tizimlashtirish uchun standart tipografik ierarxiya.

Butun tipografik panjara bizning preboot.less faylimizdagi ikkita Less o'zgaruvchisiga asoslangan: @basefontva @baseline. Birinchisi, butun ishlatiladigan asosiy shrift o'lchami, ikkinchisi esa asosiy satr balandligi.

Biz ushbu o'zgaruvchilardan va ba'zi matematikadan barcha turdagi va boshqalarning chekkalari, to'ldirishlari va chiziq balandligini yaratish uchun foydalanamiz.

h1. Sarlavha 1

h2. Sarlavha 2

h3. Sarlavha 3

h4. Sarlavha 4

h5. Sarlavha 5

h6. Sarlavha 6

Misol paragraf

Nullam quis risus eget urna mollis ornare vel eu leo. Sociis natoque penatibus va magnis disparturient Montes, nascetur ridiculus mus. Nollam id dolor id nibh ultricies vehicula ut id elit.

Misol sarlavhada kichik sarlavha bor…

Boshqa. elementlar

Urg'u, manzillar va qisqartmalardan foydalanish

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

Qachon foydalanish kerak

Ta'kid teglari ( <strong>va <em>) so'z yoki iboraning atrofdagi nusxasiga nisbatan qo'shimcha ahamiyatini yoki urg'usini ko'rsatish uchun ishlatilishi kerak. <strong>Muhimlik va stressni<em> ta'kidlash uchun foydalaning .

Bir paragrafda urg'u

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.

Eslatma:<b> HTML5 da va teglardan foydalanish hali ham <i>ma'qul va ular mos ravishda qalin va kursiv bo'lishi shart emas (garchi ko'proq semantik element bo'lsa, undan foydalaning). <b>qo'shimcha ahamiyatga ega bo'lmasdan so'z yoki iboralarni ajratib ko'rsatish uchun mo'ljallangan <i>, asosan ovoz, texnik atamalar va boshqalar uchun.

Manzillar

Element <address>o'zining eng yaqin ajdodi yoki butun ish qismi uchun aloqa ma'lumotlari uchun ishlatiladi. Bu shunday ko'rinadi:

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

Eslatma: Tarkibni toʻgʻri tuzish uchun har bir <address>satr qator uzilishi ( <br />) bilan tugashi yoki blok darajasidagi tegga (masalan, ) oʻralgan boʻlishi kerak.<p>

Qisqartmalar

Qisqartmalar va qisqartmalar uchun <abbr>tegdan foydalaning ( HTML5<acronym> da eskirgan ). Qisqa shaklni teg ichiga qo'ying va to'liq ism uchun sarlavha qo'ying.

Blok tirnoq

<blockquote> <p> <small>

Qanday qilib iqtibos keltirish kerak

<blockquote>Blok qo'shtirnoq qo'shish uchun atrofga o'rang <p>va <small>teglar. <small>Manbaga iqtibos keltirish uchun elementdan foydalaning va siz undan —oldin chiziqcha olasiz.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Doktor Yuliy Xibbert

Tartibsiz<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Massada butun son molestie lorem
• Pretium nisl aliquetdagi facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • To'g'ri keling
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Uslubsiz<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Massada butun son molestie lorem
• Pretium nisl aliquetdagi facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • To'g'ri keling
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Buyurtma qilingan<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Massada butun son molestie lorem
4. Pretium nisl aliquetdagi facilisis
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Tavsifdl

Tavsif ro'yxatlari

Ta'riflar ro'yxati atamalarni aniqlash uchun juda mos keladi.

Euismod

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

Donec id elit non mi porta gravida va eget metus.

Malesuada porti

Etiam porta sem malesuada magna mollis euismod.

Qurilish stollari

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

Jadvallar juda yaxshi - ko'p narsalar uchun. Ajoyib jadvallar foydali, kengaytiriladigan va o'qilishi mumkin (kod darajasida) bo'lishi uchun bir oz belgilash sevgisi kerak. Bu erda yordam beradigan bir nechta maslahatlar mavjud.

Ustun sarlavhalarini har doim <thead>ierarxiya <thead>> <tr>> bo'ladigan tarzda o'rang <th>.

Ustun sarlavhalariga o'xshab, jadvalingizning barcha asosiy mazmuni <tbody>ierarxiyangiz <tbody>> <tr>> bo'lishi uchun o'ralgan bo'lishi kerak <td>.

Misol: standart jadval uslublari

Barcha jadvallar o'qishni ta'minlash va tuzilmani saqlab qolish uchun faqat asosiy chegaralar bilan avtomatik tarzda shakllantiriladi. Qo'shimcha sinflar yoki atributlarni qo'shishning hojati yo'q.

#	Ism	Familiya	Til
1	Biroz	Bir	Ingliz
2	Jo	Sixpack	Ingliz
3	Stu	Tish	Kod

<jadval>
  ...
</jadval>

Misol: zebra chiziqli

“Zebra” chizig‘ini qo‘shish orqali jadvallaringizga biroz zavqlaning – shunchaki .zebra-stripedsinfni qo‘shing.

#	Ism	Familiya	Til
1	Biroz	Bir	Ingliz
2	Jo	Sixpack	Ingliz
3	Stu	Tish	Kod

Eslatma: Zebra-striping - bu IE8 va undan pastroq eski brauzerlar uchun mavjud bo'lmagan progressiv takomillashtirish.

<stol sinfi = "zebra-chiziqli" > 
...
</jadval>

Misol: TableSorter.js bilan zebra-chiziqli

Oldingi misolni olib, biz jQuery va Tablesorter plaginlari orqali tartiblash funksiyalarini ta'minlash orqali jadvallarimizning foydaliligini yaxshilaymiz . Turni o'zgartirish uchun har qanday ustun sarlavhasini bosing.

#	Ism	Familiya	Til
1	Sizning	Bir	Ingliz
2	Jo	Sixpack	Ingliz
3	Stu	Tish	Kod

<script src = "js/jquery/jquery.tablesorter.min.js" >></script> 
<skript > 
  $ ( funktsiya () { 
    $ ( "jadval#sortTableExample" ). jadval saralovchi ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<stol sinfi = "zebra-chiziqli" > 
  ...
</jadval>

Standart uslublar

Barcha shakllarga ularni o'qilishi va kengaytiriladigan tarzda taqdim etish uchun standart uslublar berilgan. Uslublar matn kiritish, tanlash roʻyxatlari, matn maydonlari, radio tugmalar va belgilash katakchalari va tugmalar uchun taqdim etiladi.

Misol shakli afsonasi

X-katta kirish

Tanlang

1 2 3 4 5

Tanlang

1 2 3 4 5

Tahrirlanmaydigan kiritish

Bu erda qandaydir qiymat

Kirish oʻchirilgan

X-katta kirish

Yordam matnining kichik qismi

Misol shakli afsonasi

Oldindan yozilgan matn

@

Oldindan qo'yilgan belgilash katakchasi

Qo'shilgan tasdiqlash qutisi

Fayl kiritish

Misol shakli afsonasi

Tanlovlar roʻyxati

• Birinchi variant - bu va boshqa - bu nima uchun ajoyib ekanligini qo'shishni unutmang
• Ikkinchi variant ham tekshirilishi va shakl natijalariga kiritilishi mumkin
• Uchinchi variant ham tekshirilishi va shakl natijalariga kiritilishi mumkin - ha, siz taxmin qildingiz
• To'rtinchi variantni tekshirish mumkin emas, chunki u o'chirilgan.

Eslatma: Yorliqlar kattaroq bosish joylari va undan foydalanish mumkin bo'lgan shakl uchun barcha variantlarni o'rab oladi.

Sana diapazoni

uchun Barcha vaqtlar Tinch okeani standart vaqti (GMT -08:00) sifatida ko'rsatilgan.

Textarea

Agar kerak bo'lsa, yuqoridagi maydonni tavsiflash uchun yordam matni bloki.

Tanlovlar roʻyxati

• Birinchi variant - bu va boshqa - bu nima uchun ajoyib ekanligini qo'shishni unutmang
• Ikkinchi variant ham tekshirilishi va shakl natijalariga kiritilishi mumkin

O'zgarishlarni saqlash  Bekor qilish

Yig'ilgan shakllar

Shaklingizning HTML-ga qo'shing .form-stackedva siz ularning maydonlarining chap tomonida emas, tepasida teglarga ega bo'lasiz. Agar sizning shakllaringiz qisqa bo'lsa yoki sizda og'irroq shakllar uchun ikkita ustun bo'lsa, bu juda yaxshi ishlaydi.

Misol shakli afsonasi

X-katta kirish

Tanlang

1 2 3 4 5

Misol shakli afsonasi

X-katta kirish

Yordam matnining kichik qismi

Tanlovlar roʻyxati

• Birinchi variant - bu va boshqa - bu nima uchun ajoyib ekanligini qo'shishni unutmang
• Ikkinchi variant ham tekshirilishi va shakl natijalariga kiritilishi mumkin

Eslatma: Yorliqlar kattaroq bosish joylari va undan foydalanish mumkin bo'lgan shakl uchun barcha variantlarni o'rab oladi.

O'zgarishlarni saqlash  Bekor qilish

Tugmalar

Konventsiya sifatida tugmalar amallar uchun, havolalar esa ob'ektlar uchun ishlatiladi. Masalan, "Yuklab olish" tugmasi va "so'nggi faoliyat" havola bo'lishi mumkin.

Barcha tugmalar sukut bo'yicha ochiq kulrang uslubda bo'ladi, lekin turli xil rang uslublari uchun bir qator funktsional sinflar qo'llanilishi mumkin. Bu sinflarga ko'k .primarysinf, ochiq-ko'k .infosinf, yashil .successsinf va qizil .dangersinf kiradi. Bundan tashqari, o'z uslublaringizni yaratish juda oson.

Misol tugmalari

Tugma uslublari qo'llaniladigan har qanday narsaga .btnqo'llanilishi mumkin. Odatda siz ularni faqat <a>, <button>, va tanlangan <input>elementlarga qo'llashni xohlaysiz. Bu shunday ko'rinadi:

Muqobil o'lchamlar

Kattaroq yoki kichikroq tugmalarni xohlaysizmi? Qabul qiling!

O'chirilgan holat

Faol bo'lmagan yoki biron bir sababga ko'ra ilova tomonidan o'chirilgan tugmalar uchun o'chirilgan holatdan foydalaning. Bu .disabledhavolalar va elementlar :disableduchun .<button>

Havolalar

Tugmalar

Nima u

Bizning yuqori panelimiz - bu veb-sayt logotipi yoki nomi, asosiy navigatsiya va qidiruv shaklini o'z ichiga olgan sobit panel.

Moslashuvchan

Barcha elementlar va yuqori paneldagi barcha elementlar ixtiyoriydir. Siz logotip/ism, navbatma-navbat, qidiruv va ikkinchi darajali navbatni yoki ularning har qanday kombinatsiyasini qo'shishni tanlashingiz mumkin.

Ochiladigan menyular kiritilgan

Asosiy navigatsiyaning bir qismi sifatida biz sizning navbatingizga ochiladigan menyularni qo'shish imkoniyatini qo'shdik. Bu qanday bajarilganligini ko'rish uchun yuqoridagi (o'ngga tekislangan) ikkinchi navbatni tekshiring.

Tabletkalar va tabletkalar

yordamida oddiy ikkilamchi navigatsiya yarating <ul>. Tegishli sinfni qo'shish orqali yorliqlar yoki tabletkalarni almashtiring.

Hisob sozlamalari sahifalari kabi kontentning quyi boʻlimlari va oʻxshash kontent sahifalari oʻrtasida almashish uchun foydalanuvchi vaqt jadvallari uchun juda yaxshi. Yorliqli yoki hapli uslublarda mavjud.

• Uy
• Profil
• Xabarlar
• Sozlamalar
• Aloqa

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Bosh sahifa </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Xabarlar </a></li> 
  <li><a href = "#" > Sozlamalar </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

• Uy
• Profil
• Xabarlar
• Sozlamalar
• Aloqa

<ul class = "tabletkalar" > 
  <li class = "active" ><a href = "#" > Bosh sahifa </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Xabarlar </a></li> 
  <li><a href = "#" > Sozlamalar </a></li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Sahifalar

Rdio-dan ilhomlangan ultra sodda va minimal uslubdagi sahifalash. Katta blokni o'tkazib yuborish qiyin, osongina kengaytiriladi va katta bosish joylarini ta'minlaydi.

<div class = "sahifalash" > 
  <ul>
    <li class = "oldingi o'chirilgan" ><a href = "#" > ← Oldingi </a></li>  
    <li class = "faol" ><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 = "keyingi" ><a href = "#" > Keyingi → </a></li>  
  </ul>
</div>

Asosiy ogohlantirishlar

div.alert-message

Harakatning muvaffaqiyatsizligi, mumkin bo'lgan muvaffaqiyatsizligi yoki muvaffaqiyatini ta'kidlash uchun bir qatorli xabarlar. Shakllar uchun ayniqsa foydali.

Xabarlarni bloklash

div.alert-message.block-message

Bir oz tushuntirishni talab qiladigan xabarlar uchun bizda paragraf uslubidagi ogohlantirishlar mavjud. Ular uzoqroq xato xabarlarini ko'paytirish, foydalanuvchini kutilayotgan harakat haqida ogohlantirish yoki sahifaga ko'proq e'tibor berish uchun ma'lumotlarni taqdim etish uchun juda mos keladi.

Modallar

Modallar - dialoglar yoki yorug'lik qutilari - fon kontekstini saqlab qolish muhim bo'lgan holatlarda kontekstli harakatlar uchun juda yaxshi.

Asbob bo'yicha maslahatlar

Twipsies chalkash foydalanuvchiga yordam berish va ularni to'g'ri yo'nalishga ko'rsatish uchun juda foydali.

Popoverlar

Tartibga ta'sir qilmasdan sahifaga subtekst ma'lumotlarini berish uchun popoverlardan foydalaning.

Bootstrap tezroq va osonroq veb-ishlab chiqish uchun CSS protsessorlari bo'lgan Less bilan birgalikda foydalanish uchun ochiq manbali miksinlar va o'zgaruvchilar to'plami bo'lgan Preboot bilan yaratilgan.

Bootstrap-da Preboot-dan qanday foydalanganimizni va keyingi loyihangizda Less-ni ishga tushirishni tanlasangiz, undan qanday foydalanishingiz mumkinligini tekshiring.

Uni qanday ishlatish kerak

Brauzeringizdagi javascript orqali Bootstrap-ning Less o'zgaruvchilari, miksinlari va CSS-ga joylashtirishlaridan to'liq foydalanish uchun ushbu parametrdan foydalaning.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" >></script> 

.js yechimini sezmayapsizmi? Less Mac ilovasini sinab ko'ring yoki kodingizni joylashtirganingizda kompilyatsiya qilish uchun Node.js dan foydalaning .

Nima kiritilgan

Bootstrap-ning bir qismi sifatida Twitter Bootstrap-ga kiritilgan narsalarning ba'zi diqqatga sazovor joylari. Yuklab olish va qo'shimcha ma'lumot olish uchun Bootstrap veb-saytiga yoki Github loyihasi sahifasiga o'ting.

O'zgaruvchilar

Less-dagi o'zgaruvchilar CSS-ni bosh og'rig'idan xalos qilish va yangilash uchun juda mos keladi. Rang qiymatini yoki tez-tez ishlatiladigan qiymatni o'zgartirmoqchi bo'lsangiz, uni bir joyda yangilang va siz o'rnatasiz.

// Havolalar
@linkColor : #8b59c2;         
@linkColorHover :     qorayish ( @linkColor , 10 ); 
 
// Kulrang
@qora : #000;             
@grayDark :           yorug'lik ( @qora , 25 %); 
@kulrang :               oqartirish ( @qora , 50 %); 
@grayLight :          yorug'lik ( @qora , 70 %); 
@grayLighter :        yorug'lik ( @qora , 90 %); 
@oq : #fff;             
 
// Urg'u ranglari
@ko'k : #08b5fb ;              
@yashil : #46a546;             
@qizil : #9d261d;               
@sariq : #ffc40d;            
@orange : #f89406;            
@pushti : #c3325f;              
@binafsha rang : #7a43b6;            
 
// Asosiy chiziq
@basefont : 13px ;          
@baseline : 18px ;          

Fikr bildirish

/* ... */Less shuningdek, CSS-ning oddiy sintaksisiga qo'shimcha ravishda sharhlashning yana bir uslubini taqdim etadi .

// Bu sharh
/* Bu ham izoh */

Wazoo-ni aralashtirib yuboradi

Miksinlar asosan CSS-ni o'z ichiga oladi yoki qisman bo'lib, kod blokini bittaga birlashtirishga imkon beradi. Ular box-shadowbrauzerlar o'rtasidagi gradientlar, shrift steklari va boshqalar kabi sotuvchining prefiksli xususiyatlari uchun juda yaxshi. Quyida Bootstrap-ga kiritilgan miksinlarning namunasi keltirilgan.

Shrift to'plami

#shrift {
  . stenografiya ( @og'irlik : normal , @size : 14px , @lineHeight : 20px ) {     
    shrift - o'lchami : @size ; 
    shrift - vazn : @weight ; 
    chiziq balandligi : @lineHeight ; _ 
  }
  . sans - serif ( @og'irlik : normal , @size : 14px , @lineHeight : 20px ) {     
    shrift oilasi : " Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    shrift - o'lchami : @size ; 
    shrift - vazn : @weight ; 
    chiziq balandligi : @lineHeight ; _ 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    shrift oilasi : " Gruziya" , Times New Roman , Times , sans - serif ;     
    shrift - o'lchami : @size ; 
    shrift - vazn : @weight ; 
    chiziq balandligi : @lineHeight ; _ 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    shrift oilasi : " Monako" , Courier New , monospace ;   
    shrift - o'lchami : @size ; 
    shrift - vazn : @weight ; 
    chiziq balandligi : @lineHeight ; _ 
  }
}

Gradientlar

#gradient {
  . gorizontal ( @startColor : #555, @endColor: #333) { 
    fon - rang : @endColor ; 
    fon - takrorlash : takrorlash - x ;
    fon - tasvir : - khtml - gradient ( chiziqli , chap tepa , o'ng tepa , dan ( @startColor ), ( @endColor ) ga ); // Konqueror   
    fon - tasvir : - moz - chiziqli - gradient ( chapda , @startColor , @endColor ); // FF 3.6+    
    fon - tasvir : - ms - chiziqli - gradient ( chapda , @startColor , @endColor ); // IE10    
    fon - tasvir : - webkit - gradient ( chiziqli , chap tepa , o'ng tepa , rang - to'xtash ( 0 %, @startColor ), rang - to'xtash ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fon - tasvir : - webkit - chiziqli - gradient ( chapda , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    fon - tasvir : - o - chiziqli - gradient ( chapda , @startColor , @endColor ); // Opera 11.10    
    fon - tasvir : chiziqli - gradient ( chapda , @startColor , @endColor ); // Standart   
  }
  . vertikal ( @startColor : #555, @endColor: #333) { 
    fon - rang : @endColor ; 
    fon - takrorlash : takrorlash - x ;
    fon - tasvir : - khtml - gradient ( chiziqli , chap yuqori , chap pastki , dan ( @startColor ), ( @endColor ) ga ); // Konqueror   
    fon - tasvir : - moz - chiziqli - gradient ( @startColor , @endColor ); // FF 3.6+   
    fon - tasvir : - ms - chiziqli - gradient ( @startColor , @endColor ); // IE10   
    fon - tasvir : - webkit - gradient ( chiziqli , chap yuqori , chap pastki , rang - to'xtash ( 0 %, @startColor ), rang - to'xtash ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fon - tasvir : - webkit - chiziqli - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    fon - tasvir : - o - chiziqli - gradient ( @startColor , @endColor ); // Opera 11.10   
    fon - tasvir : chiziqli - gradient ( @startColor , @endColor ); // Standart  
  }
  . yo'nalishli ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikal - uchta rang ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Operatsiyalar va tarmoq tizimi

Quyidagi kabi moslashuvchan va kuchli miksinlarni yaratish uchun o'zingizni qiziqtiring va matematikani bajaring.

// Gridituda
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Grid tizimi
. konteyner {
  kenglik : @siteWidth ; 
  chegara : 0 avtomatik ;  
  . aniq tuzatish ();
}
. ustunlar ( @columnSpan : 1 ) {  
  kenglik : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. ofset ( @columnOffset : 1 ) {  
  margin - chap : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}