ڊفالٽ گرڊ

بوٽ اسٽريپ جي حصي طور مهيا ڪيل ڊفالٽ گرڊ سسٽم هڪ 940px ويڪر 16-ڪالمن گرڊ آهي. اهو مشهور 960 گرڊ سسٽم جو ذائقو آهي، پر کاٻي ۽ ساڄي پاسن تي اضافي مارجن / پيڊنگ کان سواء.

مثال گرڊ مارڪ اپ

جيئن ته هتي ڏيکاريل آهي، هڪ بنيادي ترتيب ٺاهي سگهجي ٿي ٻن "ڪالمن" سان، هر هڪ 16 بنيادي ڪالمن جي هڪ انگ تي مشتمل آهي جنهن کي اسان اسان جي گرڊ سسٽم جي حصي طور بيان ڪيو آهي. وڌيڪ تغيرات لاءِ ھيٺ ڏنل مثال ڏسو.

<div class="row">
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

مقرر ٿيل ترتيب

هڪ بنيادي 940px ويڪرو، مرڪزي ڪنٽينر ترتيب صرف ڪنهن به سائيٽ يا صفحي لاءِ.

<جسم>
  <div class = "container" > 
    ...
  </div>
</body>

فلاڻي ترتيب

هڪ لچڪدار سيال يا مائع صفحي جي جوڙجڪ گھٽ ۾ گھٽ ۽ وڌ کان وڌ ويڪر ۽ کاٻي هٿ جي سائڊبار سان. ايپس لاءِ وڏو.

<جسم>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "مواد" > 
      ...
    </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 et magnis dis parturient 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، a 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 خود بخود هڪ نالي کي ايم ڊيش (—) سان پيش ڪندي.

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

ڊاڪٽر جوليس هيبرٽ

بي ترتيب<ul>

• جيريمي بيڪسبي
• رابرٽ ڊيزور
• جوش واشنگٽن
• Anton Capresi
• منهنجي ٽيم جا ساٿي
  • جارج ڪاسٽانزا
  • جيري سين فيلڊ
  • Cosmo Kramer
  • ايلين بينيس
  • نيومن
• جان جيڪب
• پال پئرس
• Kevin Garnett

اڻ سڌريل<ul.unstyled>

• جيريمي بيڪسبي
• رابرٽ ڊيزور
• جوش واشنگٽن
• Anton Capresi
• منهنجي ٽيم جا ساٿي
  • جارج ڪاسٽانزا
  • جيري سين فيلڊ
  • Cosmo Kramer
  • ايلين بينيس
  • نيومن
• جان جيڪب
• پال پئرس
• Kevin Garnett

حڪم ڏنو<ol>

1. جيريمي بيڪسبي
2. رابرٽ ڊيزور
3. جوش واشنگٽن
4. Anton Capresi
5. منهنجي ٽيم جا ساٿي
   1. جارج ڪاسٽانزا
   2. جيري سين فيلڊ
   3. Cosmo Kramer
   4. ايلين بينيس
   5. نيومن
6. جان جيڪب
7. پال پئرس
8. Kevin Garnett

وصفdl

وضاحت جي فهرست

وضاحت جي فهرست اصطلاحن جي وضاحت لاءِ ڀرپور آهي.

Euismod

Vestibulum id ligula porta felis euismod sempre 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>> .trtd

مثال: ڊفالٽ ٽيبل اسلوب

سڀني جدولن کي خود بخود صرف ضروري سرحدن سان اسٽائل ڪيو ويندو ته جيئن پڙهڻ جي قابليت ۽ ساخت کي برقرار رکيو وڃي. اضافي ڪلاس يا خاصيتون شامل ڪرڻ جي ڪا ضرورت ناهي.

#	پهريون نالو	آخري نالو	ٻولي
1	ڪجھ	هڪ	انگريزي
2	جو	سڪس پيڪ	انگريزي
3	اسٽو	ڏند	ڪوڊ

<table class="common-table"> ڪلاس = "عام ٽيبل" >
  ...
</ ٽيبل>

مثال: Zebra-striped

زيبرا-اسٽريپنگ شامل ڪندي پنھنجي جدولن سان ٿورڙي فينسي حاصل ڪريو- بس .zebra-stripedڪلاس شامل ڪريو.

#	پهريون نالو	آخري نالو	ٻولي
1	ڪجھ	هڪ	انگريزي
2	جو	سڪس پيڪ	انگريزي
3	اسٽو	ڏند	ڪوڊ

<table class="common-table zebra-striped"> class = "common-table zebra-striped" >
...
</ ٽيبل>

مثال: Zebra-striped w/ TableSorter.js

پوئين مثال کي کڻندي، اسان jQuery ۽ Tablesorter پلگ ان ذريعي ترتيب ڏيڻ واري ڪارڪردگي مهيا ڪندي اسان جي جدولن جي افاديت کي بهتر بڻايون ٿا. ترتيب کي تبديل ڪرڻ لاءِ ڪنهن به ڪالمن جي هيڊر تي ڪلڪ ڪريو.

#	پهريون نالو	آخري نالو	ٻولي
1	تنهنجو	هڪ	انگريزي
2	جو	سڪس پيڪ	انگريزي
3	اسٽو	ڏند	ڪوڊ

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> ٽائپ = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" </script> 
<اسڪرپٽ جو قسم = "ٽيڪسٽ/جاوا اسڪرپٽ" > 
  $ ( دستاويز ). تيار ( فنڪشن () { 
    $ ( "table#sortTableExample" ). ٽيبل ترتيب ڏيڻ وارو ( { ترتيب جي فهرست : [[ 1 , 0 ]]} );   
  })؛
</script>
<ٽيبل ڪلاس = "عام ٽيبل زيبرا پٽي ٿيل" > 
  ...
</ ٽيبل>

ڊفالٽ انداز

سڀني فارمن کي ڊفالٽ انداز ڏنو ويو آهي انهن کي پڙهڻ جي قابل ۽ اسپيبلبل انداز ۾ پيش ڪرڻ لاء. اسٽائلس ٽيڪسٽ انپٽس لاءِ مهيا ڪيا ويا آهن، فهرستون چونڊيو، ٽيڪسٽ ايريا، ريڊيو بٽڻ ۽ چيڪ بڪس، ۽ بٽڻ.

افسانوي فارم جو مثال

X-وڏو ان پٽ

چونڊيو

1 2 3 4 5

چونڊيو

1 2 3 4 5

اڻ سڌريل ان پٽ

ڪجھ قدر هتي

بند ٿيل ان پٽ

X-وڏو ان پٽ

مدد جي متن جو ننڍڙو ٽڪرو

افسانوي فارم جو مثال

اڳيون متن

@

اڳيون چيڪ باڪس

شامل ٿيل چيڪ باڪس

فائل ان پٽ

افسانوي فارم جو مثال

اختيارن جي فهرست

• آپشن ھڪڙو ھي آھي ۽ اھو آھي- شامل ڪرڻ جي پڪ ڪريو ڇو اھو عظيم آھي
• آپشن ٻه به چيڪ ڪري سگھجن ٿا ۽ فارم جي نتيجن ۾ شامل ڪري سگھجن ٿا
• آپشن ٽي ٿي سگھي ٿو- ها، توھان اندازو لڳايو- پڻ چيڪ ڪيو وڃي ۽ فارم جي نتيجن ۾ شامل ڪيو وڃي
• اختيار چار چيڪ نه ٿو ڪري سگھجي جيئن ته اهو غير فعال آهي.

نوٽ: ليبل سڀني اختيارن کي گھيرو ڪري ٿو تمام وڏي ڪلڪ واري علائقن ۽ وڌيڪ استعمال لائق فارم لاءِ.

تاريخ جي حد

جي طرف سڀ وقت ڏيکاريا ويا آهن پئسفڪ معياري وقت (GMT -08:00).

Textarea

جيڪڏهن ضرورت هجي ته مٿين فيلڊ کي بيان ڪرڻ لاءِ مدد جي متن جو بلاڪ.

اختيارن جي فهرست

• آپشن ھڪڙو ھي آھي ۽ اھو آھي- شامل ڪرڻ جي پڪ ڪريو ڇو اھو عظيم آھي
• آپشن ٻه به چيڪ ڪري سگھجن ٿا ۽ فارم جي نتيجن ۾ شامل ڪري سگھجن ٿا

تبديليون محفوظ ڪريو منسوخ ڪريو

اسٽيڪ ٿيل فارم

پنھنجي فارم جي HTML ۾ شامل ڪريو .form-stacked۽ توھان وٽ انھن جي کاٻي پاسي بدران انھن جي فيلڊ جي مٿان ليبل ھوندا. اهو تمام سٺو ڪم ڪري ٿو جيڪڏهن توهان جا فارم ننڍا آهن يا توهان وٽ ٻه ڪالمن جا ان پٽ آهن وڏن فارمن لاءِ.

افسانوي فارم جو مثال

X-وڏو ان پٽ

چونڊيو

1 2 3 4 5

افسانوي فارم جو مثال

اختيارن جي فهرست

• آپشن ھڪڙو ھي آھي ۽ اھو آھي- شامل ڪرڻ جي پڪ ڪريو ڇو اھو عظيم آھي
• آپشن ٻه به چيڪ ڪري سگھجن ٿا ۽ فارم جي نتيجن ۾ شامل ڪري سگھجن ٿا

نوٽ: ليبل سڀني اختيارن کي گھيرو ڪري ٿو تمام وڏي ڪلڪ واري علائقن ۽ وڌيڪ استعمال لائق فارم لاءِ.

تبديليون محفوظ ڪريو منسوخ ڪريو

بٽڻ

ڪنوينشن جي طور تي، بٽڻ استعمال ڪيا ويندا آهن ڪارناما لاءِ جڏهن ته ڪڙيون شيون استعمال ڪيون وينديون آهن. مثال طور، "ڊائون لوڊ" هڪ بٽڻ ٿي سگهي ٿو ۽ "تازو سرگرمي" هڪ لنڪ ٿي سگهي ٿي.

سڀ بٽڻ ڊفالٽ هڪ هلڪو سرمائي انداز ۾، پر هڪ نيري .primaryڪلاس موجود آهي. ان سان گڏ، توهان جي پنهنجي اندازن کي رول ڪرڻ آسان آهي.

مثال بٽڻ

بٽڻ جي اسلوب کي ڪنهن به شيء تي لاڳو ڪري سگهجي ٿو .btn. عام طور تي توھان انھن کي لاڳو ڪرڻ چاھيو ٿا صرف a، button۽ منتخب ڪريو inputعناصر. هتي اهو ڪيئن ڏسڻ ۾ اچي ٿو:

متبادل سائز

فينسي وڏا يا ننڍا بٽڻ؟ ان تي آهي!

معذور رياست

انهن بٽڻن لاءِ جيڪي فعال نه آهن يا ائپ طرفان بند ٿيل آهن هڪ سبب يا ٻئي سبب، استعمال ڪريو معذور رياست. اهو .disabledآهي لنڪس ۽ عناصر :disabledلاءِ .button

لنڪس

بٽڻ

اهو ڇا آهي

اسان جو ٽاپ بار ھڪ مقرر ٿيل بار آھي جنھن ۾ ويب سائيٽ جو لوگو يا نالو، پرائمري نيويگيشن، ۽ سرچ فارم ھوندو آھي.

حسب ضرورت

سڀئي عناصر اندر، ۽ سڄي ٽاپبار پڻ، اختياري آهن. توھان چونڊي سگھو ٿا ھڪڙو لوگو/نالو، 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="pills"> ڪلاس = " گوليون" >
  <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 = "اڳوڻي غير فعال" ><a href = "" > ← پويون </a></li>  
    <li class = "active" ><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 = "اڳيون" ><a href = "" > اڳيون → </a></li>  
  </ul>
</div>

بنيادي خبرداري

ناڪامي، ممڪن ناڪامي، يا عمل جي ڪاميابي کي نمايان ڪرڻ لاءِ ون لائين پيغام. فارم لاء خاص طور تي مفيد.

پيغامن کي بلاڪ ڪريو

انھن پيغامن لاءِ جن کي ٿوري وضاحت جي ضرورت آھي، اسان وٽ آھي پيراگراف طرز الارٽس. اهي ڊگھا نقص پيغامن کي بلبل ڪرڻ، صارف کي التوا واري عمل جي خبردار ڪرڻ، يا صفحي تي وڌيڪ زور ڏيڻ لاءِ صرف معلومات پيش ڪرڻ لاءِ مڪمل آهن.

ماڊلز

Modals- dialogs يا lightboxes- انھن حالتن ۾ لاڳاپيل ڪارناما لاءِ بھترين آھن جتي اھو ضروري آھي ته پس منظر جي حوالي کي برقرار رکيو وڃي.

پاپورز

صفحي تي ذيلي متن جي معلومات مهيا ڪرڻ لاءِ پاپ اوور استعمال ڪريو بغير اثر انداز جي.

Bootstrap Preboot سان ٺاهيو ويو، ميڪسينز ۽ متغيرن جو هڪ اوپن سورس پيڪ، Less سان گڏ استعمال ٿيڻ لاءِ، تيز ۽ آسان ويب ڊولپمينٽ لاءِ هڪ CSS پري پروسيسر.

چيڪ ڪريو ته اسان بوٽ اسٽريپ ۾ Preboot ڪيئن استعمال ڪيو ۽ توھان ان کي ڪيئن استعمال ڪري سگھوٿا توھان کي پنھنجي ايندڙ پروجيڪٽ تي گھٽ هلائڻ لاءِ چونڊيو وڃي.

ان کي ڪيئن استعمال ڪجي

توھان جي برائوزر ۾ جاوا اسڪرپٽ ذريعي CSS ۾ Bootstrap جي گھٽ متغيرن، mixins ۽ nesting جو پورو استعمال ڪرڻ لاءِ ھي اختيار استعمال ڪريو.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" قسم = "text/css" href = "less/bootstrap.less" ميڊيا = "سڀ" />    
<اسڪرپٽ جو قسم = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

.js حل محسوس نه ڪيو؟ ڪوشش ڪريو Less Mac ايپ يا استعمال ڪريو Node.js گڏ ڪرڻ لاءِ جڏھن توھان پنھنجو ڪوڊ لڳايو.

ڇا شامل آهي

هتي ڪجھ نمايان آھن جيڪي Twitter بوٽ اسٽريپ ۾ بوٽ اسٽراپ جي حصي طور شامل آھن. مٿي وڃو بوٽ اسٽريپ ويب سائيٽ يا گٿب پروجيڪٽ پيج ڊائون لوڊ ڪرڻ ۽ وڌيڪ سکڻ لاءِ.

رنگ متغير

گھٽ ۾ متغير توهان جي CSS سر درد کي مفت برقرار رکڻ ۽ تازه ڪاري ڪرڻ لاءِ ڀرپور آهن. جڏهن توهان هڪ رنگ جي قيمت يا اڪثر استعمال ٿيل قيمت تبديل ڪرڻ چاهيو ٿا، ان کي هڪ جڳهه ۾ تازه ڪاري ڪريو ۽ توهان سيٽ ڪيو آهي.

// لنڪس
@link رنگ : #8b59c2؛         
@linkColorHover : ڳاڙهو (     @linkColor ، 10 )؛ 
// گرين
@ڪارو : #000؛             
گري ڊارڪ :           هلڪو ( @ڪارو ، 25 ٪)؛ 
@ گري :               هلڪو ( @ ڪارو ، 50 ٪)؛ 
گري لائيٽ :          روشن ( @ ڪارو ، 70 ٪)؛ 
گري لائٽر :        هلڪو ڪريو ( @ ڪارو ، 90 ٪)؛ 
@اڇو : #ffff ؛             
// تلفظ رنگ
نيرو : #08b5fb ;              
سائو : #46a546 ؛             
ڳاڙهي : #9d261d ؛               
پيلو : #ffc40d؛            
@ نارنگي : #f89406 ؛            
گلابي : #c3325f ؛              
@جامني : #7a43b6 ;            
// بنيادي
@baseline : 20px ؛          

تبصرو ڪرڻ

گهٽ سي ايس ايس جي عام /* ... */نحو کان علاوه تبصري جو هڪ ٻيو انداز پڻ مهيا ڪري ٿو.

// هي هڪ تبصرو آهي
/* هي پڻ هڪ رايو آهي */

وزو کي ملائي ٿو

Mixins بنيادي طور تي شامل آهن يا سي ايس ايس لاء جزوي، توهان کي ڪوڊ جي هڪ بلاڪ کي گڏ ڪرڻ جي اجازت ڏئي ٿي. اهي وينڊر جي اڳڪٿي ڪيل ملڪيتن لاءِ بهترين آهن جهڙوڪ box-shadow، ڪراس-براؤزر گريڊينٽ، فونٽ اسٽيڪ، ۽ وڌيڪ. هيٺ ڏنل ميڪسين جو هڪ نمونو آهي جيڪو بوٽ اسٽريپ سان شامل ڪيو ويو آهي.

فونٽ اسٽيڪ

#فونٽ {
  . شارٽ هينڊ ( @وزن : نارمل ، @ سائز : 14px ، @lineHeight : 20px ) {     
    فونٽ سائيز : @size ؛ _ 
    فونٽ وزن : @weight ; _ 
    ليڪ - اوچائي : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ؛   
    فونٽ سائيز : @size ؛ _ 
    فونٽ وزن : @weight ; _ 
    ليڪ - اوچائي : @lineHeight ; 
  }
  . سيرف ( @وزن : نارمل ، @ سائز : 14px ، @lineHeight : 20px ) {     
    font - family : "جارجيا" ، ٽائمز نيو رومن ، ٽائمز ، سنس - سيرف ؛     
    فونٽ سائيز : @size ؛ _ 
    فونٽ وزن : @weight ; _ 
    ليڪ - اوچائي : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ؛   
    فونٽ سائيز : @size ؛ _ 
    فونٽ وزن : @weight ; _ 
    ليڪ - اوچائي : @lineHeight ; 
  }
}

رتبي

#ترجمان {
  . افقي ( @startColor : #555, @endColor: #333) { 
    پس منظر - رنگ : @endColor ؛ 
    پس منظر - ورجائي : ورجائي - x ؛
    پس منظر - تصوير : - khtml - گريجوئيٽ ( لڪير ، کاٻي مٿي ، ساڄي مٿي ، کان ( @startColor )، ( @endColor ) تائين ؛ // ڪانڪرر   
    پس منظر - تصوير : - moz - لڪير - gradient ( کاٻي , @startColor , @endColor )؛ // ايف ايف 3.6+    
    پس منظر - تصوير : - ايم ايس - لڪير - گريجوئيٽ ( کاٻي ، @startColor ، @endColor )؛ // آئي 10    
    پس منظر - تصوير : - ويبڪٽ - گريجوئيٽ ( لڪير ، کاٻي مٿي ، ساڄي مٿي ، رنگ - اسٽاپ ( 0 ٪، @startColor )، رنگ - اسٽاپ ( 100 ٪، @endColor ))؛ // سفاري 4+، ڪروم 2+    
    پس منظر - تصوير : - ويبڪٽ - لڪير - گريجوئيٽ ( کاٻي ، @startColor ، @endColor )؛ // سفاري 5.1+، ڪروم 10+    
    پس منظر - تصوير : - o - لڪير - gradient ( کاٻي ، @startColor ، @endColor )؛ // اوپيرا 11.10    
    - ms - فلٽر : %( "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 ؛
    پس منظر - تصوير : - khtml - گريجوئيٽ ( ليڪير ، کاٻي مٿي ، کاٻي هيٺان ، کان ( @startColor )، ( @endColor ) تائين ؛ // ڪانڪرر   
    پس منظر - تصوير : - moz - لڪير - gradient ( @startColor ، @endColor )؛ // ايف ايف 3.6+   
    پس منظر - تصوير : - ms - لڪير - گريڊينٽ ( @startColor ، @endColor )؛ // آئي 10   
    پس منظر - تصوير : - ويبڪٽ - گريجوئيٽ ( لڪير ، کاٻي مٿي ، کاٻي هيٺيون ، رنگ - اسٽاپ ( 0 ٪، @startColor )، رنگ - اسٽاپ ( 100 ٪، @endColor ))؛ // سفاري 4+، ڪروم 2+    
    پس منظر - تصوير : - ويب ڪٽ - لڪير - گريجوئيٽ ( @startColor ، @endColor )؛ // سفاري 5.1+، ڪروم 10+   
    پس منظر - تصوير : - o - لڪير - gradient ( @startColor ، @endColor )؛ // اوپيرا 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) { 
    ...
  }
}

آپريشن ۽ گرڊ سسٽم

فينسي حاصل ڪريو ۽ ڪجھ رياضي انجام ڏيو لچڪدار ۽ طاقتور ميڪسينس پيدا ڪرڻ لاءِ جيئن ھيٺ ڏنل آھي.

// گرڊٽيوڊ
گرڊ ڪالم : 16 ;       
@gridColumnWidth : 40px ؛   
@gridGutterWidth : 20px ؛   
// گرڊ سسٽم
. ڪنٽينر {
  ويڪر : @siteWidth ؛ 
  مارجن : 0 خودڪار ؛  
  . صاف فڪس ()؛
}
. ڪالم ( @columnSpan : 1 ) {  
  ڏيکاريو : ان لائن ؛ 
  float : کاٻي ؛
  ويڪر : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ))؛         
  مارجن - کاٻي : @gridGutterWidth ؛ 
  ۽: پهريون - ٻار {
    مارجن - کاٻي : 0 ؛ 
  }
}
. آفسیٹ ( @columnOffset : 1 ) {  
  مارجن - کاٻي : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! اهم ؛          
}