بوٹسٹریپ، ٹویٹر سے

بوٹسٹریپ ٹویٹر کی طرف سے ایک ٹول کٹ ہے جسے ویب ایپس اور سائٹس کی ترقی شروع کرنے کے لیے ڈیزائن کیا گیا ہے۔
اس میں ٹائپوگرافی، فارمز، بٹنز، ٹیبلز، گرڈز، نیویگیشن اور مزید کے لیے بیس CSS اور HTML شامل ہیں۔

نیرڈ الرٹ: بوٹسٹریپ کم کے ساتھ بنایا گیا ہے اور جدید براؤزرز کو ذہن میں رکھتے ہوئے گیٹ سے باہر کام کرنے کے لیے ڈیزائن کیا گیا ہے۔

سی ایس ایس کو ہاٹ لنک کریں۔

تیز ترین اور آسان ترین آغاز کے لیے، بس اس ٹکڑوں کو اپنے ویب پیج میں کاپی کریں۔

اسے کم کے ساتھ استعمال کریں۔

کم استعمال کرنے کے پرستار؟ کوئی مسئلہ نہیں، صرف ریپو کو کلون کریں اور یہ لائنیں شامل کریں:

GitHub پر فورک

Github پر آفیشل بوٹسٹریپ ریپو کے ساتھ ڈاؤن لوڈ، فورک، پل، فائل ایشوز اور بہت کچھ۔

GitHub پر بوٹسٹریپ »

تاریخ

ٹویٹر کے ابتدائی دنوں میں، انجینئرز فرنٹ اینڈ کی ضروریات کو پورا کرنے کے لیے تقریباً کسی بھی لائبریری کا استعمال کرتے تھے جس سے وہ واقف تھے۔ بوٹسٹریپ ان چیلنجوں کے جواب کے طور پر شروع ہوا جو ٹوئٹر کے پہلے ہیک ویک کے دوران پیش کیے گئے اور ترقی میں تیزی آئی۔

ٹویٹر پر بہت سے انجینئرز کی مدد اور آراء کے ساتھ، بوٹسٹریپ نے نہ صرف بنیادی طرزوں کو شامل کرنے کے لیے نمایاں طور پر ترقی کی ہے، بلکہ مزید خوبصورت اور پائیدار فرنٹ اینڈ ڈیزائن پیٹرن بھی شامل کیے ہیں۔

dev.twitter.com پر مزید پڑھیں ›

براؤزر سپورٹ

کروم، سفاری، انٹرنیٹ ایکسپلورر، اور فائر فاکس جیسے بڑے جدید براؤزرز میں بوٹسٹریپ کا تجربہ اور تعاون کیا جاتا ہے۔

تازہ ترین سفاری
تازہ ترین گوگل کروم
فائر فاکس 4+
انٹرنیٹ ایکسپلورر 7+
اوپیرا 11

کیا شامل ہے۔

بوٹسٹریپ مرتب شدہ CSS، غیر مرتب شدہ، اور مثال کے سانچوں کے ساتھ مکمل آتا ہے۔

تمام اصل .less فائلیں۔
مکمل طور پر مرتب شدہ اور کم سی ایس ایس
اسٹائل گائیڈ دستاویزات مکمل کریں۔
مثال صفحہ ٹیمپلیٹ (مزید جلد آنے والا ہے)

پہلے سے طے شدہ گرڈ

بوٹسٹریپ کے حصے کے طور پر فراہم کردہ ڈیفالٹ گرڈ سسٹم ایک 940px چوڑا 16 کالم گرڈ ہے۔ یہ مقبول 960 گرڈ سسٹم کا ذائقہ ہے، لیکن بائیں اور دائیں جانب اضافی مارجن/پڈنگ کے بغیر۔

گرڈ مارک اپ کی مثال

جیسا کہ یہاں دکھایا گیا ہے، ایک بنیادی ترتیب دو "کالموں" کے ساتھ بنائی جا سکتی ہے، ہر ایک 16 بنیادی کالموں کی تعداد پر پھیلا ہوا ہے جسے ہم نے اپنے گرڈ سسٹم کے حصے کے طور پر بیان کیا ہے۔ مزید تغیرات کے لیے ذیل کی مثالیں دیکھیں۔

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

1/3

2/3

کالمز کو آف سیٹ کرنا

8 آفسیٹ 4

1/3 آفسیٹ 2/3s

4 آفسیٹ 4

5 آفسیٹ 3

10 آفسیٹ 6

فکسڈ لے آؤٹ

پہلے سے طے شدہ اور سادہ 940px چوڑا، کسی بھی ویب سائٹ یا صفحہ کے لیے مرکزی ترتیب جو کسی ایک کے ذریعے فراہم کی گئی ہے <div.container>۔

<body>
  <div class = "کنٹینر" > 
    ...
  </div>
</body>

سیال لے آؤٹ

کم سے کم اور زیادہ سے زیادہ چوڑائی اور بائیں طرف کی سائڈبار کے ساتھ ایک متبادل، لچکدار سیال صفحہ کا ڈھانچہ۔ ایپس اور دستاویزات کے لیے بہترین۔

<body>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

عنوانات اور کاپی

آپ کے ویب صفحات کی ساخت کے لیے ایک معیاری ٹائپوگرافک درجہ بندی۔

مکمل ٹائپوگرافک گرڈ ہماری preboot.less فائل میں دو کم متغیرات پر مبنی ہے: @basefontاور @baseline. پہلا بنیادی فونٹ سائز ہے جو بھر میں استعمال ہوتا ہے اور دوسرا بیس لائن کی اونچائی ہے۔

ہم ان متغیرات، اور کچھ ریاضی کا استعمال کرتے ہیں، اپنی تمام قسم کے مارجن، پیڈنگ، اور لائن ہائٹس بنانے کے لیے۔

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
ماسا میں انٹیجر مولیسٹی لورم
پریٹیم نسل ایلیکیٹ میں فیسلیسس
nulla 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
Eget porttitor lorem

بے انداز`<ul.unstyled>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ماسا میں انٹیجر مولیسٹی لورم
پریٹیم نسل ایلیکیٹ میں فیسلیسس
nulla 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
Eget porttitor lorem

حکم دیا`<ol>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ماسا میں انٹیجر مولیسٹی لورم
پریٹیم نسل ایلیکیٹ میں فیسلیسس
nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor 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.
Malesuada porta: 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	سٹو	ڈینٹ	کوڈ

<ٹیبل>
  ...
</table>

مثال: زیبرا دھاری دار

زیبرا سٹرپنگ شامل کر کے اپنی ٹیبلز کے ساتھ تھوڑا سا فینسی حاصل کریں — بس .zebra-stripedکلاس شامل کریں۔

#	پہلا نام	آخری نام	زبان
1	کچھ	ایک	انگریزی
2	جو	چھ پیک	انگریزی
3	سٹو	ڈینٹ	کوڈ

نوٹ: زیبرا سٹرپنگ ایک ترقی پسند اضافہ ہے جو پرانے براؤزرز جیسے IE8 اور نیچے کے لیے دستیاب نہیں ہے۔

<ٹیبل کلاس = "زیبرا دھاری دار" > 
...
</table>

مثال: زیبرا دھاری دار w/ TableSorter.js

پچھلی مثال کو لے کر، ہم jQuery اور Tablesorter پلگ ان کے ذریعے ترتیب دینے کی فعالیت فراہم کرکے اپنے ٹیبل کی افادیت کو بہتر بناتے ہیں۔ ترتیب کو تبدیل کرنے کے لیے کسی بھی کالم کے ہیڈر پر کلک کریں۔

#	پہلا نام	آخری نام	زبان
1	آپ کا	ایک	انگریزی
2	جو	چھ پیک	انگریزی
3	سٹو	ڈینٹ	کوڈ

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( فنکشن () { 
    $ ( "table#sortTableExample" )۔ ٹیبلسورٹر ({ sortList : [[ 1 , 0 ]] })؛  
  });
</script>
<ٹیبل کلاس = "زیبرا دھاری دار" > 
  ...
</table>

فکسڈ ٹاپ بار

یہ کیا ہے

ہمارا ٹاپ بار ایک فکسڈ بار ہے جس میں ویب سائٹ کا لوگو یا نام، بنیادی نیویگیشن، اور سرچ فارم ہوتا ہے۔

مرضی کے مطابق

اندر کے تمام عناصر اور پوری ٹاپ بار بھی اختیاری ہیں۔ آپ لوگو/نام، nav، تلاش، اور ثانوی nav—یا اس کا کوئی بھی مجموعہ شامل کرنے کا انتخاب کر سکتے ہیں۔

ڈراپ ڈاؤن شامل ہیں۔

مرکزی نیویگیشن کے حصے کے طور پر، ہم نے آپ کے لیے آپ کے نیویگیشن میں ڈراپ ڈاؤنز شامل کرنے کی صلاحیت شامل کی ہے۔ یہ دیکھنے کے لیے اوپر ثانوی nav (دائیں سیدھ میں) دیکھیں کہ یہ کیسے ہوتا ہے۔

نوٹ:padding-top: 40px; کسی بھی صفحہ پر ٹاپ بار استعمال کرتے وقت، اپنے میں شامل کرنے سے اس کی وجہ بننے والے اوورلیپ کا حساب ضرور رکھیں body۔

ٹیبز اور گولیاں

ایک کے ساتھ سادہ ثانوی نیویگیشن بنائیں <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 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 کلاس = "اگلا" ><a href = "#" > اگلا → </a></li>  
  </ul>
</div>

بنیادی انتباہات

div.alert-message

ناکامی، ممکنہ ناکامی، یا کسی عمل کی کامیابی کو اجاگر کرنے کے لیے ایک سطری پیغامات۔ فارم کے لیے خاص طور پر مفید ہے۔

مقدس guacamole! خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔

اوہ سنیپ! اسے اور اسے تبدیل کریں اور دوبارہ کوشش کریں۔

بہت اچھے! آپ نے اس الرٹ پیغام کو کامیابی سے پڑھ لیا۔

سنو! یہ ایک انتباہ ہے جس پر آپ کی توجہ کی ضرورت ہے، لیکن ابھی یہ ایک بہت بڑی ترجیح نہیں ہے۔

پیغامات کو مسدود کریں۔

div.alert-message.block-message

ایسے پیغامات کے لیے جن کے لیے تھوڑی وضاحت کی ضرورت ہوتی ہے، ہمارے پاس پیراگراف اسٹائل الرٹس ہیں۔ یہ لمبے لمبے خرابی کے پیغامات کو بلبلا کرنے، صارف کو زیر التواء کارروائی سے خبردار کرنے، یا صفحہ پر مزید زور دینے کے لیے صرف معلومات پیش کرنے کے لیے بہترین ہیں۔

مقدس guacamole! یہ ایک انتباہ ہے! خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔ Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

یہ اقدام کریں۔ یا یہ کرو

اوہ سنیپ! آپ کو ایک غلطی ہو گئی ہے! اسے اور اسے تبدیل کریں اور دوبارہ کوشش کریں۔ Duis mollis, est non commodo luctus, Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

یہ اقدام کریں۔ یا یہ کرو

بہت اچھے! آپ نے اس الرٹ پیغام کو کامیابی سے پڑھ لیا۔ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

یہ اقدام کریں۔ یا یہ کرو

سنو! یہ ایک انتباہ ہے جس پر آپ کی توجہ کی ضرورت ہے، لیکن ابھی یہ ایک بہت بڑی ترجیح نہیں ہے۔

یہ اقدام کریں۔ یا یہ کرو

ماڈلز

موڈلز—ڈائیلاگس یا لائٹ بکس—ایسے حالات میں سیاق و سباق سے متعلق کارروائیوں کے لیے بہترین ہیں جہاں یہ ضروری ہے کہ پس منظر کے سیاق و سباق کو برقرار رکھا جائے۔

ٹول ٹپس

کنفیوزڈ صارف کی مدد کرنے اور انہیں صحیح سمت کی طرف اشارہ کرنے کے لیے Twipsies انتہائی مفید ہیں۔

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur، aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo، voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit، totam doloremque unde sunt sed dicta quae fugit quaevoltasuptum volutasuptium

نیچے!

ٹھیک ہے!

بائیں!

اوپر!

پاپورز

لے آؤٹ کو متاثر کیے بغیر کسی صفحہ کو ذیلی متن کی معلومات فراہم کرنے کے لیے پاپ اوور کا استعمال کریں۔

بوٹسٹریپ کو Preboot کے ساتھ بنایا گیا تھا ، جو کہ تیز اور آسان ویب ڈویلپمنٹ کے لیے ایک CSS پری پروسیسر Less کے ساتھ مل کر استعمال کیے جانے والے مکسینز اور متغیرات کا ایک اوپن سورس پیک ہے ۔

چیک کریں کہ ہم نے بوٹسٹریپ میں پری بوٹ کا استعمال کیسے کیا اور اگر آپ اپنے اگلے پروجیکٹ پر کم چلانے کا انتخاب کرتے ہیں تو آپ اسے کیسے استعمال کر سکتے ہیں۔

اسے کیسے استعمال کریں

اپنے براؤزر میں جاوا اسکرپٹ کے ذریعے بوٹسٹریپ کے کم متغیرات، مکسنس، اور سی ایس ایس میں نیسٹنگ کا مکمل استعمال کرنے کے لیے اس اختیار کا استعمال کریں۔

<link rel = "stylesheet/less" href = "less/bootstrap.less" میڈیا = "تمام" />    
<script src = "js/less-1.1.3.min.js" ></script>

.js حل محسوس نہیں کر رہے؟ کم میک ایپ آزمائیں یا جب آپ اپنا کوڈ لگاتے ہیں تو مرتب کرنے کے لیے Node.js استعمال کریں۔

کیا شامل ہے۔

بوٹسٹریپ کے حصے کے طور پر ٹویٹر بوٹسٹریپ میں کیا شامل ہے اس کی کچھ جھلکیاں یہ ہیں۔ ڈاؤن لوڈ کرنے اور مزید جاننے کے لیے بوٹسٹریپ ویب سائٹ یا گیتھب پروجیکٹ پیج پر جائیں۔

متغیرات

کم میں متغیرات آپ کے سی ایس ایس کے سر درد کو مفت برقرار رکھنے اور اپ ڈیٹ کرنے کے لیے بہترین ہیں۔ جب آپ رنگ کی قیمت یا اکثر استعمال ہونے والی قدر کو تبدیل کرنا چاہتے ہیں، تو اسے ایک جگہ پر اپ ڈیٹ کریں اور آپ سیٹ ہو جائیں۔

// لنکس
@linkColor : #8b59c2؛         
@linkColorHover :     سیاہ ( @linkColor ، 10 )؛ 
 
// گرے
سیاہ : #000؛             
گرے ڈارک :           ہلکا ( @ سیاہ ، 25 ٪)؛ 
گرے :               ہلکا ( @ سیاہ ، 50 ٪)؛ 
گرے لائٹ :          ہلکا ( @ سیاہ ، 70 ٪)؛ 
گرے لائٹر :        ہلکا ( @ سیاہ ، 90 ٪)؛ 
@white : #ffff;             
 
// لہجے کے رنگ
@blue : #08b5fb;              
سبز : #46a546 ;             
@سرخ : #9d261d ;               
@yellow : #ffc40d;            
@اورنج : #f89406 ؛            
@pink : #c3325f;              
@جامنی : #7a43b6 ;            
 
// بیس لائن گرڈ
@basefont : 13px ;          
@baseline : 18px ;

تبصرہ کرنا

/* ... */کم سی ایس ایس کے عام نحو کے علاوہ تبصرہ کرنے کا ایک اور انداز بھی فراہم کرتا ہے۔

// یہ ایک تبصرہ ہے۔
/* یہ بھی ایک تبصرہ ہے*/

وضو کو ملا دیتا ہے۔

مکسینز بنیادی طور پر سی ایس ایس کے لیے شامل یا جزوی ہوتے ہیں، جو آپ کو کوڈ کے بلاک کو ایک میں جوڑنے کی اجازت دیتے ہیں۔ وہ وینڈر پریفکسڈ پراپرٹیز جیسے box-shadowکراس براؤزر گریڈینٹ، فونٹ اسٹیک اور مزید کے لیے بہترین ہیں۔ ذیل میں مکسین کا ایک نمونہ ہے جو بوٹسٹریپ کے ساتھ شامل ہیں۔

فونٹ کے ڈھیر

#فونٹ {
  . شارٹ ہینڈ ( @وزن : نارمل ، @ سائز : 14px ، @lineHeight : 20px ) {     
    فونٹ سائز : @size ; _ 
    فونٹ وزن : @weight ; _ 
    لائن کی اونچائی : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    فونٹ فیملی : "Helvetica Neue " , Helvetica , Arial , sans - serif ؛   
    فونٹ سائز : @size ; _ 
    فونٹ وزن : @weight ; _ 
    لائن کی اونچائی : @lineHeight ; 
  }
  . سیرف ( @وزن : نارمل ، @ سائز : 14px ، @lineHeight : 20px ) {     
    فونٹ فیملی : " جارجیا " ، ٹائمز نیو رومن ، ٹائمز ، سینز سیرف ؛     
    فونٹ سائز : @size ; _ 
    فونٹ وزن : @weight ; _ 
    لائن کی اونچائی : @lineHeight ; 
  }
  . مونو اسپیس ( @وزن : نارمل ، @ سائز : 12px ، @lineHeight : 20px ) {     
    فونٹ فیملی : "موناکو" ، کورئیر نیو ، مونو اسپیس ؛   
    فونٹ سائز : @size ; _ 
    فونٹ وزن : @weight ; _ 
    لائن کی اونچائی : @lineHeight ; 
  }
}

میلان

#گریڈینٹ {
  . افقی ( @startColor : #555, @endColor: #333) { 
    پس منظر - رنگ : @endColor ; 
    پس منظر - دوبارہ : دوبارہ - x ;
    پس منظر - تصویر : - khtml - گریڈینٹ ( لکیری ، بائیں اوپر ، دائیں اوپر ، ( @startColor ) سے ( @endColor ) تک ؛ // کونکرر   
    پس منظر - تصویر : - موز - لکیری - میلان ( بائیں , @startColor , @endColor ) ; // FF 3.6+    
    پس منظر - تصویر : - ایم ایس - لکیری - تدریجی ( بائیں , @startColor , @endColor )؛ // IE10    
    پس منظر - تصویر : - ویب کٹ - میلان ( لکیری ، بائیں اوپر ، دائیں اوپر ، رنگ - سٹاپ ( 0 %، @startColor )، رنگ - سٹاپ ( 100 ٪، @endColor ))؛ // Safari 4+, Chrome 2+    
    پس منظر - تصویر : - ویب کٹ - لکیری - گریڈینٹ ( بائیں , @startColor , @endColor )؛ // Safari 5.1+, Chrome 10+    
    پس منظر - تصویر : - o - لکیری - میلان ( بائیں , @startColor , @endColor )؛ // اوپیرا 11.10    
    پس منظر - تصویر : لکیری - میلان ( بائیں , @startColor , @endColor )؛ // لی معیاری   
  }
  . عمودی ( @startColor : #555, @endColor: #333) { 
    پس منظر - رنگ : @endColor ; 
    پس منظر - دوبارہ : دوبارہ - x ;
    پس منظر - تصویر : - khtml - گریڈینٹ ( لکیری ، بائیں اوپر ، بائیں نیچے ، ( @startColor ) سے ( @endColor ) تک ؛ // کونکرر   
    پس منظر - تصویر : - موز - لکیری - میلان ( @startColor , @endColor )؛ // FF 3.6+   
    پس منظر - تصویر : - ایم ایس - لکیری - گریڈینٹ ( @startColor , @endColor )؛ // IE10   
    پس منظر - تصویر : - ویب کٹ - میلان ( لکیری ، بائیں اوپر ، بائیں نیچے ، رنگ - سٹاپ ( %، @startColor )، رنگ - سٹاپ ( 100 ٪، @endColor ) )؛ // Safari 4+, Chrome 2+    
    پس منظر - تصویر : - ویب کٹ - لکیری - میلان ( @startColor , @endColor )؛ // Safari 5.1+, Chrome 10+   
    پس منظر - تصویر : - o - لکیری - میلان ( @startColor , @endColor )؛ // اوپیرا 11.10   
    پس منظر - تصویر : لکیری - میلان ( @startColor , @endColor )؛ // معیار  
  }
  . سمتی ( @startColor : #555، @endColor: #333، @deg: 45deg) { 
    ...
  }
  . عمودی - تین - رنگ ( @startColor : #00b3ee، @midColor: #7a43b6، @colorStop: 50%، @endColor: #c3325f) { 
    ...
  }
}

آپریشنز اور گرڈ سسٹم

فینسی حاصل کریں اور نیچے کی طرح لچکدار اور طاقتور مکسنس تیار کرنے کے لیے کچھ ریاضی انجام دیں۔

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ))؛                 
 
// گرڈ سسٹم
. کنٹینر {
  چوڑائی : @siteWidth ; 
  مارجن : 0 آٹو ;  
  . clearfix ()
}
. کالم ( @columnSpan : 1 ) {  
  چوڑائی : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ))؛         
}
. آفسیٹ ( @columnOffset : 1 ) {  
  مارجن - بائیں : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}