دوبارہ شروع کریں۔

ریبوٹ، ایک فائل میں عنصر سے متعلق مخصوص CSS تبدیلیوں کا مجموعہ، بوٹسٹریپ کو کِک اسٹارٹ کریں تاکہ ایک خوبصورت، مستقل اور سادہ بیس لائن فراہم کی جا سکے۔

نقطہ نظر

ریبوٹ نارملائز پر بناتا ہے، صرف عنصر سلیکٹرز کا استعمال کرتے ہوئے بہت سے HTML عناصر کو کسی حد تک رائے دینے والے انداز کے ساتھ فراہم کرتا ہے۔ اضافی اسٹائل صرف کلاسوں کے ساتھ کیا جاتا ہے۔ مثال کے طور پر، ہم کچھ <table>اسٹائلز کو ایک آسان بیس لائن کے لیے ریبوٹ کرتے ہیں اور بعد میں فراہم کرتے ہیں .table، .table-borderedاور مزید۔

ریبوٹ میں کس چیز کو اوور رائڈ کرنا ہے اس کا انتخاب کرنے کی ہماری رہنما خطوط اور وجوہات یہ ہیں:

کچھ براؤزر کی ڈیفالٹ قدروں کو اپ ڈیٹ کریں تاکہ توسیع پذیر اجزاء کی جگہ کے لیے rems کی بجائے s استعمال کریں۔em
اجتناب margin-topکریں۔ عمودی مارجن گر سکتے ہیں، غیر متوقع نتائج برآمد کر سکتے ہیں۔ اگرچہ زیادہ اہم بات یہ ہے کہ، کی ایک سمت marginایک آسان ذہنی ماڈل ہے۔
آلے کے سائز میں آسانی سے اسکیلنگ کے لیے، بلاک عناصر کو rems کے لیے margins استعمال کرنا چاہیے۔
جب بھی ممکن ہو fontاستعمال کرتے ہوئے، متعلقہ خصوصیات کے اعلانات کو کم سے کم رکھیں ۔inherit

صفحہ ڈیفالٹس

اور عناصر کو صفحہ بھر میں بہتر ڈیفالٹس فراہم کرنے کے لیے اپ ڈیٹ کیا جاتا ہے <html>۔ <body>مزید خاص طور پر:

عالمی box-sizingسطح پر ہر عنصر پر سیٹ کیا گیا ہے — بشمول *::beforeاور *::after، سے border-box۔ یہ یقینی بناتا ہے کہ عنصر کی اعلان کردہ چوڑائی پیڈنگ یا بارڈر کی وجہ سے کبھی بھی تجاوز نہیں کرتی ہے۔
پر کسی بنیاد font-sizeکا اعلان نہیں کیا گیا ہے <html>، لیکن 16pxفرض کیا جاتا ہے (براؤزر ڈیفالٹ)۔ صارف کی ترجیحات کا احترام کرتے ہوئے اور زیادہ قابل رسائی نقطہ نظر کو یقینی بناتے ہوئے میڈیا کے سوالات کے ذریعے آسان ریسپانسیو ٹائپ اسکیلنگ کے لیے font-size: 1remلاگو کیا جاتا ہے ۔<body>
یہ <body>ایک عالمی font-family, line-heightاور text-align. یہ فونٹ کی عدم مطابقت کو روکنے کے لیے کچھ فارم عناصر کے ذریعے بعد میں وراثت میں ملتا ہے۔
سیفٹی کے لیے، نے ڈیفالٹ کرنے <body>کا اعلان کیا ہے ۔background-color#fff

مقامی فونٹ اسٹیک

پہلے سے طے شدہ ویب فونٹس (Helvetica Neue، Helvetica، اور Arial) کو بوٹسٹریپ 4 میں چھوڑ دیا گیا ہے اور ہر ڈیوائس اور OS پر زیادہ سے زیادہ ٹیکسٹ رینڈرنگ کے لیے "مقامی فونٹ اسٹیک" سے تبدیل کر دیا گیا ہے۔ اس سمیشنگ میگزین آرٹیکل میں مقامی فونٹ اسٹیک کے بارے میں مزید پڑھیں ۔

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

نوٹ کریں کہ چونکہ فونٹ اسٹیک میں ایموجی فونٹس شامل ہیں، اس لیے بہت سے عام علامت/ڈنگبٹ یونیکوڈ حروف کو کثیر رنگوں والی تصویروں کے طور پر پیش کیا جائے گا۔ ان کی ظاہری شکل مختلف ہوگی، براؤزر/پلیٹ فارم کے مقامی ایموجی فونٹ میں استعمال ہونے والے انداز پر منحصر ہے، اور وہ کسی سی ایس ایس colorاسٹائل سے متاثر نہیں ہوں گے۔

اس font-familyکا اطلاق <body>پورے بوٹسٹریپ پر ہوتا ہے اور خود بخود عالمی سطح پر وراثت میں ملتا ہے۔ گلوبل کو تبدیل کرنے کے لیے ، بوٹسٹریپ کو font-familyاپ ڈیٹ اور دوبارہ کمپائل کریں۔$font-family-base

عنوانات اور پیراگراف

تمام سرخی والے عناصر — جیسے، <h1>— اور <p>انہیں ہٹانے کے لیے دوبارہ ترتیب margin-topدیا گیا ہے۔ سرخیوں میں آسان وقفہ کاری کے لیے margin-bottom: .5remپیراگراف شامل کیے گئے ہیں۔margin-bottom: 1rem

سرخی	مثال
`<h1></h1>`	h1. بوٹسٹریپ کی سرخی
`<h2></h2>`	h2. بوٹسٹریپ کی سرخی
`<h3></h3>`	h3. بوٹسٹریپ کی سرخی
`<h4></h4>`	h4. بوٹسٹریپ کی سرخی
`<h5></h5>`	h5. بوٹسٹریپ کی سرخی
`<h6></h6>`	h6. بوٹسٹریپ کی سرخی

فہرستیں

تمام فہرستیں— <ul>, <ol>اور <dl>— کو margin-topہٹا دیا گیا ہے اور a margin-bottom: 1rem۔ گھریلو فہرستوں میں کوئی نہیں margin-bottomہے۔

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

یہاں ایک ترتیب شدہ فہرست ہے۔
چند فہرست اشیاء کے ساتھ
اس کی مجموعی شکل ایک جیسی ہے۔
پچھلی غیر ترتیب شدہ فہرست کے طور پر

آسان اسٹائل، واضح درجہ بندی، اور بہتر وقفہ کاری کے لیے، تفصیل کی فہرستوں نے margins کو اپ ڈیٹ کر دیا ہے۔ <dd>s پر دوبارہ ترتیب margin-leftدیں 0اور شامل کریں margin-bottom: .5rem۔ <dt>s بولڈ ہیں .

تفصیل کی فہرستیں۔: وضاحت کی فہرست اصطلاحات کی وضاحت کے لیے بہترین ہے۔
مدت: اصطلاح کی تعریف۔; اسی اصطلاح کی دوسری تعریف۔
ایک اور اصطلاح: اس دوسری اصطلاح کی تعریف۔

پہلے سے فارمیٹ شدہ متن

<pre>عنصر کو اسے ہٹانے اور اس کے لیے یونٹس استعمال کرنے کے لیے دوبارہ ترتیب دیا گیا margin-topہے ۔remmargin-bottom

مثال کے عنصر {
  مارجن نیچے: 1rem؛
}

میزیں

ٹیبلز کو سٹائل <caption>s میں تھوڑا سا ایڈجسٹ کیا جاتا ہے، بارڈرز کو گرا دیا جاتا ہے، اور اس بات کو یقینی بنایا text-alignجاتا ہے کہ ہر جگہ مستقل مزاجی ہو۔ بارڈرز، پیڈنگ اور مزید کے لیے اضافی تبدیلیاں کلاس کے.table ساتھ آتی ہیں ۔

یہ ایک مثالی جدول ہے، اور یہ مواد کو بیان کرنے کے لیے اس کا کیپشن ہے۔
ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی	ٹیبل کی سرخی
ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل
ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل
ٹیبل سیل	ٹیبل سیل	ٹیبل سیل	ٹیبل سیل

فارمز

سادہ بیس اسٹائلز کے لیے مختلف فارم عناصر کو دوبارہ شروع کیا گیا ہے۔ یہاں کچھ سب سے زیادہ قابل ذکر تبدیلیاں ہیں:

<fieldset>s میں کوئی بارڈرز، پیڈنگ یا مارجن نہیں ہے لہذا انہیں انفرادی ان پٹ یا ان پٹ کے گروپس کے لیے آسانی سے ریپر کے طور پر استعمال کیا جا سکتا ہے۔
<legend>s، فیلڈ سیٹس کی طرح، کو بھی ایک قسم کی سرخی کے طور پر ظاہر کرنے کے لیے دوبارہ ترتیب دیا گیا ہے۔
<label>s کو لاگو display: inline-blockکرنے کی اجازت دینے کے لیے سیٹ کیا گیا ہے۔margin
<input>s, <select>s, <textarea>s, اور <button>s کو زیادہ تر نارملائز کے ذریعے ایڈریس کیا جاتا ہے، لیکن ریبوٹ ان کے marginاور سیٹ line-height: inheritکو بھی ہٹا دیتا ہے۔
<textarea>s کو صرف عمودی طور پر دوبارہ سائز دینے کے لیے تبدیل کیا گیا ہے کیونکہ افقی سائز کا سائز اکثر صفحہ کی ترتیب کو "بریک" کرتا ہے۔
<button>s اور <input>بٹن عناصر کے پاس cursor: pointerکب ہوتا :not(:disabled)ہے۔

یہ تبدیلیاں، اور مزید، ذیل میں دکھایا گیا ہے۔

بٹنوں پر پوائنٹرز

ریبوٹ میں role="button"ڈیفالٹ کرسر کو میں تبدیل کرنے کے لیے ایک اضافہ شامل ہے pointer۔ اس وصف کو عناصر میں شامل کریں تاکہ یہ بتانے میں مدد ملے کہ عناصر متعامل ہیں۔ یہ کردار ان عناصر کے لیے ضروری نہیں ہے <button>، جو خود اپنی cursorتبدیلی لاتے ہیں۔

غیر بٹن عنصر بٹن

<span role="button" tabindex="0">Non-button element button</span>

متفرق عناصر

پتہ

عنصر کو <address>براؤزر ڈیفالٹ font-styleسے پر ری سیٹ کرنے کے لیے اپ ڈیٹ کیا جاتا italicہے normal۔ line-heightاب وراثت میں ملا ہے، اور margin-bottom: 1remشامل کیا گیا ہے۔ <address>s قریبی آباؤ اجداد (یا کام کے پورے جسم) کے لیے رابطے کی معلومات پیش کرنے کے لیے ہیں۔ کے ساتھ لائنوں کو ختم کرکے فارمیٹنگ کو محفوظ رکھیں <br>۔

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

پورا نام
[email protected]

بلاک کوٹ

marginبلاک کوٹس پر پہلے سے طے شدہ ہے 1em 40px، لہذا ہم اسے 0 0 1remدوسرے عناصر کے ساتھ زیادہ مطابقت رکھنے کے لیے دوبارہ ترتیب دیتے ہیں۔

ایک معروف اقتباس، بلاک کوٹ عنصر میں شامل ہے۔

ماخذ کے عنوان میں مشہور کوئی

ان لائن عناصر

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

Nulla attr vitae elit libero, a pharetra augue.

خلاصہ

cursorخلاصہ پر پہلے سے طے شدہ ہے text، لہذا ہم اسے یہ بتانے کے لیے دوبارہ ترتیب دیں کہ pointerعنصر پر کلک کرکے اس کے ساتھ بات چیت کی جا سکتی ہے۔

کچھ تفصیلات

تفصیلات کے بارے میں مزید معلومات۔

اس سے بھی زیادہ تفصیلات

یہاں تفصیلات کے بارے میں مزید تفصیلات ہیں.

HTML5 `[hidden]`وصف

HTML5 ایک نیا عالمی وصف[hidden] شامل کرتا ہے جس کا نام بطور display: noneڈیفالٹ ہوتا ہے۔ PureCSS سے ایک آئیڈیا ادھار لے کر ، ہم اس ڈیفالٹ کو غلطی سے اوور رائیڈ ہونے سے [hidden] { display: none !important; }روکنے میں مدد کرتے ہوئے بہتر بناتے ہیں۔ displayاگرچہ [hidden]IE10 کی طرف سے مقامی طور پر تعاون نہیں کیا جاتا ہے، ہمارے CSS میں واضح اعلان اس مسئلے کو حل کرتا ہے۔

<input type="text" hidden>

jQuery کی عدم مطابقت

[hidden]$(...).hide()jQuery اور $(...).show()طریقوں سے مطابقت نہیں رکھتا ۔ لہذا، ہم فی الحال خاص طور پر عناصر [hidden]کے انتظام کے لیے دیگر تکنیکوں کی توثیق نہیں کرتے ہیں۔display

کسی عنصر کی مرئیت کو محض ٹوگل کرنے کے لیے، یعنی اس displayمیں ترمیم نہیں کی گئی ہے اور عنصر اب بھی دستاویز کے بہاؤ کو متاثر کر سکتا ہے، اس کے بجائے کلاس کا استعمال کریں ۔.invisible