Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
گرڈ سسٹم معیاری 940px کو روکیں یا خود رول کریں۔
ڈیفالٹ گرڈ
بوٹسٹریپ کے حصے کے طور پر فراہم کردہ ڈیفالٹ گرڈ سسٹم ایک 940px چوڑا 16 کالم گرڈ ہے۔ یہ مقبول 960 گرڈ سسٹم کا ذائقہ ہے، لیکن بائیں اور دائیں جانب اضافی مارجن/پڈنگ کے بغیر۔
گرڈ مارک اپ کی مثال
جیسا کہ یہاں دکھایا گیا ہے، ایک بنیادی ترتیب دو "کالموں" کے ساتھ بنائی جا سکتی ہے، ہر ایک 16 بنیادی کالموں کی تعداد پر پھیلا ہوا ہے جسے ہم نے اپنے گرڈ سسٹم کے حصے کے طور پر بیان کیا ہے۔ مزید تغیرات کے لیے ذیل کی مثالیں دیکھیں۔
- <div class="row"> کلاس = "قطار" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
8
8
5
11
16
کالمز کو آف سیٹ کرنا
4
8 آفسیٹ 4
4 آفسیٹ 4
4 آفسیٹ 4
5 آفسیٹ 3
5 آفسیٹ 3
10 آفسیٹ 6
ویب صفحات بنانے کے لیے لے آؤٹ بنیادی ٹیمپلیٹس
فکسڈ لے آؤٹ
کسی بھی سائٹ یا صفحہ کے لیے ایک بنیادی 940px چوڑا، سینٹرڈ کنٹینر لے آؤٹ۔
- <body>
- <div class = "کنٹینر" >
- ...
- </div>
- </body>
سیال لے آؤٹ
کم سے کم اور زیادہ سے زیادہ چوڑائی اور بائیں طرف کی سائڈبار کے ساتھ ایک لچکدار سیال یا مائع صفحہ کا ڈھانچہ۔ ایپس کے لیے بہت اچھا ہے۔
- <body>
- <div class = "container-fluid" >
- <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 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لیے استعمال کیا جاتا ہے — آپ نے اندازہ لگایا! — ایڈریسز۔ یہاں یہ کیسا لگتا ہے:
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>
- جیریمی بکسبی
- رابرٹ ڈیزور
- جوش واشنگٹن
- انتون کیپریسی
- میری ٹیم میٹس
- جارج کاسٹانزا
- جیری سین فیلڈ
- کاسمو کریمر
- ایلین بینس
- نیو مین
- جان جیکب
- پال پیئرس
- کیون گارنیٹ
بے انداز<ul.unstyled>
- جیریمی بکسبی
- رابرٹ ڈیزور
- جوش واشنگٹن
- انتون کیپریسی
- میری ٹیم میٹس
- جارج کاسٹانزا
- جیری سین فیلڈ
- کاسمو کریمر
- ایلین بینس
- نیو مین
- جان جیکب
- پال پیئرس
- کیون گارنیٹ
حکم دیا<ol>
- جیریمی بکسبی
- رابرٹ ڈیزور
- جوش واشنگٹن
- انتون کیپریسی
- میری ٹیم میٹس
- جارج کاسٹانزا
- جیری سین فیلڈ
- کاسمو کریمر
- ایلین بینس
- نیو مین
- جان جیکب
- پال پیئرس
- کیون گارنیٹ
تفصیل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 class="common-table"> کلاس = "کامن ٹیبل" >
- ...
- </table>
مثال: زیبرا دھاری دار
زیبرا سٹرپنگ شامل کر کے اپنی ٹیبلز کے ساتھ تھوڑا سا فینسی حاصل کریں — بس .zebra-stripedکلاس شامل کریں۔
| # | پہلا نام | آخری نام | زبان |
|---|---|---|---|
| 1 | کچھ | ایک | انگریزی |
| 2 | جو | چھ پیک | انگریزی |
| 3 | سٹو | ڈینٹ | کوڈ |
- <table class="common-table zebra-striped"> کلاس = "کامن ٹیبل زیبرا دھاری دار" >
- ...
- </table>
مثال: زیبرا دھاری دار w/ TableSorter.js
پچھلی مثال کو لے کر، ہم jQuery اور Tablesorter پلگ ان کے ذریعے ترتیب دینے کی فعالیت فراہم کرکے اپنے ٹیبل کی افادیت کو بہتر بناتے ہیں۔ ترتیب کو تبدیل کرنے کے لیے کسی بھی کالم کے ہیڈر پر کلک کریں۔
| # | پہلا نام | آخری نام | زبان |
|---|---|---|---|
| 1 | آپ کا | ایک | انگریزی |
| 2 | جو | چھ پیک | انگریزی |
| 3 | سٹو | ڈینٹ | کوڈ |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <اسکرپٹ کی قسم = "text/javascript" >
- $ ( دستاویز ) تیار ( فنکشن () {
- $ ( "table#sortTableExample" )۔ ٹیبلسورٹر ( { ترتیب کی فہرست : [[ 1 , 0 ]]} );
- });
- </script>
- <ٹیبل کلاس = "کامن ٹیبل زیبرا دھاری دار" >
- ...
- </table>
فارمز
پہلے سے طے شدہ انداز
تمام فارمز کو پڑھنے کے قابل اور قابل توسیع انداز میں پیش کرنے کے لیے پہلے سے طے شدہ انداز دیے گئے ہیں۔ طرزیں ٹیکسٹ ان پٹس، سلیکٹ لسٹ، ٹیکسٹیریاز، ریڈیو بٹن اور چیک باکسز اور بٹنوں کے لیے فراہم کی جاتی ہیں۔
اسٹیک شدہ فارم
اپنے فارم کے ایچ ٹی ایم ایل میں شامل کریں .form-stackedاور آپ کے بائیں طرف کے بجائے ان کے فیلڈز کے اوپر لیبلز ہوں گے۔ یہ بہت اچھا کام کرتا ہے اگر آپ کے فارم چھوٹے ہیں یا آپ کے پاس بھاری فارمز کے لیے دو کالم ان پٹ ہیں۔
بٹن
ایک کنونشن کے طور پر، بٹنوں کو اعمال کے لیے استعمال کیا جاتا ہے جبکہ لنکس اشیاء کے لیے استعمال کیے جاتے ہیں۔ مثال کے طور پر، "ڈاؤن لوڈ" ایک بٹن ہو سکتا ہے اور "حالیہ سرگرمی" ایک لنک ہو سکتا ہے۔
تمام بٹن پہلے سے ہلکے سرمئی طرز پر ہوتے ہیں، لیکن نیلی .primaryکلاس دستیاب ہے۔ اس کے علاوہ، آپ کے اپنے شیلیوں کو رول کرنا آسان ہے.
مثال کے بٹن
بٹن کی طرزیں کسی بھی چیز پر لگائی جا سکتی ہیں .btn۔ aعام طور پر آپ ان کو صرف ، buttonاور منتخب inputعناصر پر لاگو کرنا چاہیں گے ۔ یہاں یہ کیسا لگتا ہے:
متبادل سائز
بڑے یا چھوٹے بٹن پسند ہیں؟ اس پر ہے!
معذور حالت
ان بٹنوں کے لیے جو فعال نہیں ہیں یا کسی نہ کسی وجہ سے ایپ کے ذریعے غیر فعال ہیں، غیر فعال حالت کا استعمال کریں۔ یہ .disabledروابط اور عناصر :disabledکے لیے ہے۔button
لنکس
بٹن
کامیابی، انتباہ، اور غلطی کے پیغامات یا انتباہات کے لیے انتباہات اور غلطیوں کے انداز
بنیادی انتباہات
ناکامی، ممکنہ ناکامی، یا کسی عمل کی کامیابی کو اجاگر کرنے کے لیے ایک سطری پیغامات۔ فارم کے لیے خاص طور پر مفید ہے۔
پیغامات کو مسدود کریں۔
ایسے پیغامات کے لیے جن کے لیے تھوڑی وضاحت کی ضرورت ہوتی ہے، ہمارے پاس پیراگراف اسٹائل الرٹس ہیں۔ یہ لمبے لمبے خرابی کے پیغامات کو بلبلا کرنے، صارف کو زیر التواء کارروائی سے خبردار کرنے، یا صفحہ پر مزید زور دینے کے لیے صرف معلومات پیش کرنے کے لیے بہترین ہیں۔
موڈلز ، ٹول ٹپس، اور پاپ اوور میں مواد کو ظاہر کرنے کے لیے Popovers اجزاء
ماڈلز
موڈلز—ڈائیلاگز یا لائٹ بکس—ایسے حالات میں سیاق و سباق سے متعلق کارروائیوں کے لیے بہترین ہیں جہاں یہ ضروری ہے کہ پس منظر کے سیاق و سباق کو برقرار رکھا جائے۔
موڈل ہیڈنگ
×ایک ٹھیک جسم...
ٹول ٹپس
کنفیوزڈ صارف کی مدد کرنے اور انہیں صحیح سمت کی طرف اشارہ کرنے کے لیے 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" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" میڈیا = "تمام" />
- <script type = "text/javascript" src = "js/less-1.0.41.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 ;
- // بیس لائن
- @baseline : 20px ;
تبصرہ کرنا
/* ... */کم سی ایس ایس کے عام نحو کے علاوہ تبصرہ کرنے کا ایک اور انداز بھی فراہم کرتا ہے۔
- // یہ ایک تبصرہ ہے۔
- /* یہ بھی ایک تبصرہ ہے*/
وضو کو ملا دیتا ہے۔
مکسینز بنیادی طور پر سی ایس ایس کے لیے شامل یا جزوی ہوتے ہیں، جو آپ کو کوڈ کے بلاک کو ایک میں جوڑنے کی اجازت دیتے ہیں۔ وہ وینڈر پریفکسڈ پراپرٹیز جیسے 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
- - 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 ) تک ؛ // کونکرر
- پس منظر - تصویر : - موز - لکیری - میلان ( @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
- - 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) {
- ...
- }
- }
آپریشنز اور گرڈ سسٹم
فینسی حاصل کریں اور نیچے کی طرح لچکدار اور طاقتور مکسنس تیار کرنے کے لیے کچھ ریاضی انجام دیں۔
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // گرڈ سسٹم
- . کنٹینر {
- چوڑائی : @siteWidth ;
- مارجن : 0 آٹو ;
- . clearfix ()
- }
- . کالم ( @columnSpan : 1 ) {
- ڈسپلے : ان لائن ؛
- فلوٹ : بائیں ;
- چوڑائی : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ))؛
- مارجن - بائیں : @gridGutterWidth ;
- اور: پہلا - بچہ {
- مارجن - بائیں : 0 ;
- }
- }
- . آفسیٹ ( @columnOffset : 1 ) {
- مارجن - بائیں : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! اہم _
- }