سہاروں کے اوپری حصے میں، بنیادی HTML عناصر کو ایک تازہ، مستقل شکل اور احساس فراہم کرنے کے لیے قابل توسیع کلاسوں کے ساتھ اسٹائل اور بڑھایا جاتا ہے۔
پوری ٹائپوگرافک گرڈ ہماری variables.less فائل میں دو کم متغیرات پر مبنی ہے: @baseFontSize
اور @baseLineHeight
. پہلا بنیادی فونٹ سائز ہے جو بھر میں استعمال ہوتا ہے اور دوسرا بیس لائن کی اونچائی ہے۔
ہم ان متغیرات، اور کچھ ریاضی کا استعمال کرتے ہیں، اپنی تمام قسم کے مارجن، پیڈنگ، اور لائن ہائٹس بنانے کے لیے۔
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.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
عنصر | استعمال | اختیاری |
---|---|---|
<strong> |
اہم کے ساتھ متن کے ٹکڑوں پر زور دینے کے لیے | کوئی نہیں۔ |
<em> |
تناؤ کے ساتھ متن کے ٹکڑوں پر زور دینے کے لیے | کوئی نہیں۔ |
<abbr> |
ہوور پر توسیع شدہ ورژن دکھانے کے لیے مخففات اور مخففات کو لپیٹتا ہے۔ | title توسیع شدہ متن کے لیے اختیاری شامل کریں۔ |
<address> |
اس کے قریبی آباؤ اجداد یا کام کے پورے جسم کے لیے رابطہ کی معلومات کے لیے | کے ساتھ تمام لائنوں کو ختم کرکے فارمیٹنگ کو محفوظ کریں۔<br> |
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>
اور <i>
HTML5 میں استعمال کریں، لیکن ان کا استعمال تھوڑا سا بدل گیا ہے۔ <b>
اضافی اہمیت کے بغیر الفاظ یا جملے کو نمایاں کرنا ہے جبکہ <i>
زیادہ تر آواز، تکنیکی اصطلاحات وغیرہ کے لیے ہے۔
یہاں دو مثالیں ہیں کہ <address>
ٹیگ کیسے استعمال کیا جا سکتا ہے:
مخففات کو بڑے حروف کے متن اور ہلکے نقطوں والے نیچے والے بارڈر کے ساتھ اسٹائل کیا گیا ہے۔ ان کے پاس ہوور پر ایک ہیلپ کرسر بھی ہے لہذا صارفین کے پاس اضافی اشارہ ہے کہ ہوور پر کچھ دکھایا جائے گا۔
کٹی ہوئی روٹی کے بعد ایچ ٹی ایم ایل بہترین چیز ہے۔
لفظ وصف کا مخفف attr ہے۔
عنصر | استعمال | اختیاری |
---|---|---|
<blockquote> |
دوسرے ماخذ سے مواد کا حوالہ دینے کے لیے بلاک سطح کا عنصر |
.pull-left اور .pull-right کلاسز |
<small> |
صارف کا سامنا کرنے والا حوالہ شامل کرنے کے لیے اختیاری عنصر، عام طور پر کام کے عنوان کے ساتھ مصنف | <cite> ماخذ کے عنوان یا نام کے ارد گرد رکھیں |
<blockquote>
بلاک کوٹ شامل کرنے کے لیے، کسی بھی HTML کو اقتباس کے طور پر لپیٹ دیں۔ براہ راست اقتباسات کے لیے ہم تجویز کرتے ہیں a <p>
.
<small>
اپنے ماخذ کا حوالہ دینے کے لیے ایک اختیاری عنصر شامل کریں اور آپ —
کو اسٹائلنگ کے مقاصد کے لیے اس سے پہلے ایک ایم ڈیش ملے گا۔
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> کوئی مشہور </small>
- </blockquote>
پہلے سے طے شدہ بلاک کوٹس کو اس طرح ترتیب دیا گیا ہے:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
کام کے جسم میں مشہور کوئی
اپنے بلاک کوٹ کو دائیں طرف فلوٹ کرنے کے لیے، شامل کریں class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
کام کے جسم میں مشہور کوئی
<ul>
<ul class="unstyled">
<ol>
<dl>
کوڈ کے ان لائن ٹکڑوں کو کے ساتھ لپیٹیں <code>
۔
- مثال کے طور پر ، <code> سیکشن </ code > کو ان لائن کے طور پر لپیٹنا چاہیے ۔
<pre>
کوڈ کی متعدد لائنوں کے لیے استعمال کریں ۔ مناسب رینڈرنگ کے لیے کسی بھی کیریٹ کو ان کے یونیکوڈ حروف میں تبدیل کرنا یقینی بنائیں۔
<p> نمونہ متن یہاں...</p>
- <pre>
- <p>نمونہ متن یہاں...</p>
- </pre>
نوٹ:<pre>
ٹیگز کے اندر کوڈ کو ہر ممکن حد تک بائیں طرف رکھنا یقینی بنائیں ۔ یہ تمام ٹیبز کو رینڈر کرے گا۔
وہی <pre>
عنصر لیں اور بہتر رینڈرنگ کے لیے دو اختیاری کلاسیں شامل کریں۔
- <p> نمونہ متن یہاں... </p>
- <پری کلاس = "پریٹی پرنٹ
- linenums" >
- <p>نمونہ متن یہاں...</p>
- </pre>
google-code-prettify ڈاؤن لوڈ کریں اور استعمال کرنے کا طریقہ کے لیے ریڈمی دیکھیں۔
ٹیگ | تفصیل |
---|---|
<table> |
ٹیبلر فارمیٹ میں ڈیٹا ڈسپلے کرنے کے لیے ریپنگ عنصر |
<thead> |
<tr> ٹیبل کالموں کو لیبل کرنے کے لیے ٹیبل ہیڈر قطاروں ( ) کے لیے کنٹینر عنصر |
<tbody> |
<tr> ٹیبل کے باڈی میں ٹیبل کی قطاروں ( ) کے لیے کنٹینر کا عنصر |
<tr> |
ٹیبل سیلز ( <td> یا <th> ) کے سیٹ کے لیے کنٹینر عنصر جو ایک قطار پر ظاہر ہوتا ہے۔ |
<td> |
ڈیفالٹ ٹیبل سیل |
<th> |
کالم کے لیے خصوصی ٹیبل سیل (یا قطار، دائرہ کار اور جگہ کے لحاظ سے) لیبلز کو ایک کے اندر استعمال کیا جانا چاہیے۔ <thead> |
<caption> |
جدول میں جو کچھ ہے اس کی تفصیل یا خلاصہ، خاص طور پر اسکرین ریڈرز کے لیے مفید ہے۔ |
- <ٹیبل>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
نام | کلاس | تفصیل |
---|---|---|
طے شدہ | کوئی نہیں۔ | کوئی سٹائل نہیں، صرف کالم اور قطار |
بنیادی | .table |
قطاروں کے درمیان صرف افقی لکیریں۔ |
سرحدی | .table-bordered |
کونوں کو گول کرتا ہے اور بیرونی سرحد کا اضافہ کرتا ہے۔ |
زیبرا کی پٹی | .table-striped |
طاق قطاروں میں ہلکے سرمئی پس منظر کا رنگ شامل کرتا ہے (1، 3، 5، وغیرہ) |
گاڑھا ۔ | .table-condensed |
عمودی پیڈنگ کو نصف میں کاٹتا ہے، 8px سے 4px تک، تمام td اور th عناصر کے اندر |
پڑھنے کی اہلیت کو یقینی بنانے اور ساخت کو برقرار رکھنے کے لیے میزیں خود بخود صرف چند بارڈرز کے ساتھ اسٹائل کی جاتی ہیں۔ 2.0 کے ساتھ، .table
کلاس درکار ہے۔
- <ٹیبل کلاس = "ٹیبل" >
- …
- </table>
# | پہلا نام | آخری نام | زبان |
---|---|---|---|
1 | نشان | اوٹو | سی ایس ایس |
2 | جیکب | تھورنٹن | جاوا اسکرپٹ |
3 | سٹو | ڈینٹ | ایچ ٹی ایم ایل |
زیبرا سٹرپنگ شامل کر کے اپنی ٹیبلز کے ساتھ تھوڑا سا فینسی حاصل کریں — بس .table-striped
کلاس شامل کریں۔
نوٹ: اسپرٹڈ ٹیبلز :nth-child
CSS سلیکٹر استعمال کرتی ہیں اور IE7-IE8 میں دستیاب نہیں ہیں۔
- <table class = "table table-striped" >
- …
- </table>
# | پہلا نام | آخری نام | زبان |
---|---|---|---|
1 | نشان | اوٹو | سی ایس ایس |
2 | جیکب | تھورنٹن | جاوا اسکرپٹ |
3 | سٹو | ڈینٹ | ایچ ٹی ایم ایل |
جمالیاتی مقاصد کے لیے پوری میز کے گرد بارڈرز اور گول کونوں کو شامل کریں۔
- <ٹیبل کلاس = "ٹیبل ٹیبل بارڈرڈ" >
- …
- </table>
# | پہلا نام | آخری نام | زبان |
---|---|---|---|
1 | مارک اوٹو | سی ایس ایس | |
2 | جیکب | تھورنٹن | جاوا اسکرپٹ |
3 | سٹو | ڈینٹ | |
3 | بروسف | سٹالن | ایچ ٹی ایم ایل |
.table-condensed
ٹیبل سیل پیڈنگ کو آدھے حصے میں (8px سے 4px تک) کاٹنے کے لیے کلاس شامل کر کے اپنے ٹیبلز کو مزید کمپیکٹ بنائیں ۔
- <ٹیبل کلاس = "ٹیبل ٹیبل کنڈینسڈ" >
- …
- </table>
# | پہلا نام | آخری نام | زبان |
---|---|---|---|
1 | نشان | اوٹو | سی ایس ایس |
2 | جیکب | تھورنٹن | جاوا اسکرپٹ |
3 | سٹو | ڈینٹ | ایچ ٹی ایم ایل |
دستیاب کلاسوں میں سے کسی کو استعمال کرکے مختلف شکلیں حاصل کرنے کے لیے کسی بھی ٹیبل کلاس کو بلا جھجھک یکجا کریں۔
- <ٹیبل کلاس = "ٹیبل ٹیبل سٹرپڈ ٹیبل بارڈرڈ ٹیبل گاڑھا" >
- ...
- </table>
# | پہلا نام | آخری نام | زبان |
---|---|---|---|
1 | نشان | اوٹو | سی ایس ایس |
2 | جیکب | تھورنٹن | جاوا اسکرپٹ |
3 | سٹو | ڈینٹ | ایچ ٹی ایم ایل |
4 | بروسف | سٹالن | ایچ ٹی ایم ایل |
بوٹسٹریپ میں فارم کے بارے میں سب سے اچھی بات یہ ہے کہ آپ کے تمام ان پٹ اور کنٹرولز بہت اچھے لگتے ہیں چاہے آپ انہیں اپنے مارک اپ میں کیسے بنائیں۔ ضرورت سے زیادہ HTML کی ضرورت نہیں ہے، لیکن ہم ان لوگوں کے لیے نمونے فراہم کرتے ہیں جنہیں اس کی ضرورت ہے۔
آسان اسٹائلنگ اور ایونٹ بائنڈنگ کے لیے مزید پیچیدہ لے آؤٹ مختصر اور توسیع پذیر کلاسز کے ساتھ آتے ہیں، لہذا آپ ہر قدم پر محیط ہیں۔
بوٹسٹریپ چار قسم کے فارم لے آؤٹ کے لیے سپورٹ کے ساتھ آتا ہے:
مختلف قسم کے فارم لے آؤٹ کو مارک اپ میں کچھ تبدیلیوں کی ضرورت ہوتی ہے، لیکن کنٹرول خود ہی رہتے ہیں اور وہی برتاؤ کرتے ہیں۔
بوٹسٹریپ کے فارمز میں تمام بیس فارم کنٹرولز جیسے ان پٹ، ٹیکسٹیریا، اور وہ انتخاب شامل ہیں جن کی آپ توقع کریں گے۔ لیکن یہ متعدد حسب ضرورت اجزاء کے ساتھ بھی آتا ہے جیسے اپنڈڈ اور پری پینڈڈ ان پٹ اور چیک باکسز کی فہرستوں کے لیے سپورٹ۔
ہر قسم کے فارم کنٹرول کے لیے غلطی، انتباہ، اور کامیابی جیسی ریاستیں شامل ہیں۔ اس کے علاوہ معذور کنٹرول کے لیے اسٹائل بھی شامل ہیں۔
بوٹسٹریپ عام ویب فارم کے چار طرزوں کے لیے سادہ مارک اپ اور اسٹائل فراہم کرتا ہے۔
نام | کلاس | تفصیل |
---|---|---|
عمودی (پہلے سے طے شدہ) | .form-vertical (ضرورت نہیں ہے) |
اسٹیک شدہ، کنٹرولز پر بائیں جانب سے منسلک لیبلز |
لائن میں | .form-inline |
کومپیکٹ اسٹائل کے لیے بائیں جانب سے منسلک لیبل اور ان لائن بلاک کنٹرولز |
تلاش کریں۔ | .form-search |
ایک عام تلاش کے جمالیاتی کے لیے اضافی گول ٹیکسٹ ان پٹ |
افقی | .form-horizontal |
کنٹرول کے طور پر ایک ہی لائن پر بائیں، دائیں سیدھ والے لیبلز کو فلوٹ کریں۔ |
v2.0 کے ساتھ، ہمارے پاس فارم اسٹائل کے لیے ہلکے اور بہتر ڈیفالٹس ہیں۔ کوئی اضافی مارک اپ نہیں، صرف فارم کنٹرولز۔
پہلے سے طے شدہ WebKit طرزوں کی عکاسی کرتے ہوئے، صرف .form-search
اضافی گول سرچ فیلڈز کے لیے شامل کریں۔
شروع کرنے کے لیے ان پٹ بلاک لیول ہیں۔ .form-inline
اور کے .form-horizontal
لیے، ہم ان لائن بلاک استعمال کرتے ہیں۔
بائیں طرف دکھائے گئے تمام ڈیفالٹ فارم کنٹرولز ہیں جن کی ہم حمایت کرتے ہیں۔ گولیوں والی فہرست یہ ہے:
v1.4 تک، بوٹسٹریپ کے ڈیفالٹ فارم اسٹائل افقی لے آؤٹ کا استعمال کرتے ہیں۔ بوٹسٹریپ 2 کے ساتھ، ہم نے کسی بھی شکل کے لیے زیادہ ہوشیار، زیادہ قابل توسیع ڈیفالٹس کی اس رکاوٹ کو ہٹا دیا۔
بوٹسٹریپ میں براؤزر سے تعاون یافتہ فوکسڈ اور اسٹیٹس کے لیے اسٹائل کی خصوصیات ہیں disabled
۔ ہم پہلے سے طے شدہ ویب کٹ کو ہٹاتے ہیں اور اس کی جگہ پر outline
ایک لاگو کرتے ہیں ۔box-shadow
:focus
اس میں غلطیوں، انتباہات اور کامیابی کے لیے توثیق کے انداز بھی شامل ہیں۔ استعمال کرنے کے لیے، ایرر کلاس کو ارد گرد میں شامل کریں .control-group
۔
- <fieldset
- کلاس = "کنٹرول گروپ کی خرابی" >
- …
- </fieldset>
ان پٹ گروپس—ضمنی یا پہلے سے منسلک متن کے ساتھ—آپ کے ان پٹس کو مزید سیاق و سباق دینے کا ایک آسان طریقہ فراہم کرتے ہیں۔ بہترین مثالوں میں ٹویٹر کے صارف نام کے لیے @ نشان یا مالیات کے لیے $ شامل ہیں۔
v1.4 تک، بوٹسٹریپ کو چیک باکسز اور ریڈیوز کو اسٹیک کرنے کے لیے اضافی مارک اپ کی ضرورت ہوتی ہے۔ اب، اس کو دہرانا ایک سادہ سا معاملہ ہے <label class="checkbox">
جو لپیٹ دیتا ہے <input type="checkbox">
۔
ان لائن چیک باکسز اور ریڈیوز بھی معاون ہیں۔ بس کسی میں شامل کریں .inline
یا .checkbox
اور .radio
آپ کا کام ہو گیا۔
ان لائن فارم میں ان پٹ کو پری پینڈ یا شامل کرنے کے لیے ، خالی جگہوں کے بغیر .add-on
اور کو ایک ہی لائن پر رکھنا یقینی بنائیں۔input
اپنے فارم ان پٹس کے لیے ہیلپ ٹیکسٹ شامل کرنے کے لیے، ان لائن ہیلپ ٹیکسٹ کے ساتھ یا ان پٹ عنصر <span class="help-inline">
کے بعد ہیلپ ٹیکسٹ بلاک شامل کریں۔<p class="help-block">
:after
ہے۔ دستاویزات میں، ہم آئیکن کے سائز کو نمایاں کرنے کے لیے ہوور پر ہلکے سرخ پس منظر کا رنگ دکھاتے ہیں۔
ہر آئیکن کو اضافی درخواست بنانے کے بجائے، ہم نے انہیں ایک اسپرائٹ میں مرتب کیا ہے—ایک فائل میں تصاویر کا ایک گروپ جو تصاویر کو پوزیشن میں رکھنے کے لیے CSS کا استعمال کرتا ہے background-position
۔ یہ وہی طریقہ ہے جسے ہم Twitter.com پر استعمال کرتے ہیں اور اس نے ہمارے لیے اچھا کام کیا ہے۔
تمام شبیہیں کی کلاسیں .icon-
ہمارے دوسرے اجزاء کی طرح مناسب نام کی جگہ اور اسکوپنگ کے لیے پہلے سے لگائی گئی ہیں۔ اس سے دوسرے ٹولز کے ساتھ تنازعات سے بچنے میں مدد ملے گی۔
Glyphicons نے ہمیں ہماری اوپن سورس ٹول کٹ میں سیٹ Halflings کے استعمال کی اجازت دی ہے جب تک کہ ہم یہاں دستاویزات میں ایک لنک اور کریڈٹ فراہم کرتے ہیں۔ براہ کرم اپنے منصوبوں میں بھی ایسا ہی کرنے پر غور کریں۔
v2.0.0 کے ساتھ، ہم نے <i>
اپنے تمام آئیکنز کے لیے ایک ٹیگ استعمال کرنے کا انتخاب کیا ہے، لیکن ان میں کوئی کیس کلاس نہیں ہے—صرف ایک مشترکہ سابقہ۔ استعمال کرنے کے لیے، درج ذیل کوڈ کو تقریباً کہیں بھی رکھیں:
- <i class = "icon-search" ></i>
الٹی (سفید) شبیہیں کے لیے بھی اسٹائل دستیاب ہیں، جو ایک اضافی کلاس کے ساتھ تیار ہیں:
- <i class = "icon-search icon-white" ></i>
آپ کے شبیہیں کے لیے منتخب کرنے کے لیے 120 کلاسز ہیں۔ بس <i>
صحیح کلاسز کے ساتھ ایک ٹیگ شامل کریں اور آپ سیٹ ہو جائیں۔ آپ پوری فہرست sprites.less میں یا یہاں اس دستاویز میں تلاش کر سکتے ہیں۔
شبیہیں بہت اچھے ہیں، لیکن کوئی انہیں کہاں استعمال کرے گا؟ یہاں چند خیالات ہیں:
بنیادی طور پر، جہاں بھی آپ <i>
ٹیگ لگا سکتے ہیں، آپ ایک آئیکن لگا سکتے ہیں۔
انہیں بٹن، بٹن گروپس میں ٹول بار، نیویگیشن، یا پہلے سے منسلک فارم ان پٹ میں استعمال کریں۔