تاريخ

Twitter جي اڳئين ڏينهن ۾، انجنيئر تقريبن ڪنهن به لائبريري کي استعمال ڪندا هئا جن سان اهي واقف هئا فرنٽ-اينڊ گهرجن کي پورو ڪرڻ لاءِ. بوٽ اسٽراپ انهن چيلينجز جي جواب جي طور تي شروع ڪيو جيڪي پيش ڪيا ويا ۽ ترقي تيزيء سان Twitter جي پهرين هيڪ ويڪ دوران.

Twitter تي ڪيترن ئي انجنيئرن جي مدد ۽ موٽ سان، بوٽ اسٽراپ نه رڳو بنيادي اندازن کي شامل ڪرڻ لاءِ خاص طور تي وڌيو آهي، پر وڌيڪ خوبصورت ۽ پائيدار فرنٽ-اينڊ ڊيزائن جي نمونن کي.

وڌيڪ پڙهو dev.twitter.com تي>

برائوزر سپورٽ

بوٽ اسٽريپ آزمائشي ۽ سپورٽ ڪئي وئي وڏن جديد برائوزرن جهڙوڪ ڪروم، سفاري، انٽرنيٽ ايڪسپلورر، ۽ فائر فاکس.

• جديد سفاري
• جديد گوگل ڪروم
• فائر فاکس 4+
• انٽرنيٽ ايڪسپلورر 7+

ڇا شامل آهي

Bootstrap مرتب ڪيل CSS، uncompiled، ۽ مثال ٽيمپليٽس سان مڪمل اچي ٿو.

• سڀ اصل .less فائلون
• مڪمل طور تي مرتب ڪيل ۽ گھٽ سي ايس ايس
• اسٽائل گائيڊ دستاويز مڪمل ڪريو
• مثال صفحو ٽيمپليٽ (وڌيڪ جلد اچڻو آهي)

ڊفالٽ گرڊ

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

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

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

<div class="row"> ڪلاس = "قطار" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 ڪالمن" > 
    ...
  </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> <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.

نوٽ:<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. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

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

بي ترتيب<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• پريتيم نسل اليڪيٽ ۾ فيڪليس
• نولا volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• ايجٽ پورٽيٽر lorem

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• پريتيم نسل اليڪيٽ ۾ فيڪليس
• نولا volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• ايجٽ پورٽيٽر lorem

حڪم ڏنو<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. پريتيم نسل اليڪيٽ ۾ فيڪليس
5. نولا volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. ايجٽ پورٽيٽر lorem

وصف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>>> .<tr><td>

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

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

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

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

مثال: Zebra-striped

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

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

نوٽ: زيبرا-اسٽريپنگ هڪ ترقي پسند واڌارو آهي پراڻن برائوزرن جهڙوڪ IE8 ۽ هيٺيان لاءِ دستياب ناهي.

<ٽيبل ڪلاس = "عام ٽيبل زيبرا پٽي ٿيل" > 
...
</ ٽيبل>

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

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

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

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

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

X-وڏو ان پٽ

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

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

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

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

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

بٽڻ

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

سڀ بٽڻ ڊفالٽ هڪ هلڪو سرمائي انداز ۾، پر هڪ نيري .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 = "#" > رابطو  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 = "اڳوڻي غير فعال" ><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" href = "less/bootstrap.less"    ميڊيا = "سڀ" /> 
< اسڪرپٽ  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 - لڪير - gradient ( @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 )) ! اهم ؛          
}