Source

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

ریبوٹ، ایک فائل میں عنصر سے متعلق مخصوص 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

اس 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ہے۔

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
پورٹٹیٹر lorem کے لئے تیار ہیں۔

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ماسا میں انٹیجر مولیسٹی لورم
پریٹیم نسل ایلیکیٹ میں فیسلیسس
nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
پورٹٹیٹر lorem کے لئے تیار ہیں۔

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

تفصیل کی فہرستیں۔: وضاحت کی فہرست ا��طلاحات کی وضاحت کے لیے بہترین ہے۔
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

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

.example-element {
  مارجن نیچے: 1rem؛
}

میزیں

ٹیبلز کو سٹائل <caption>کے مطابق تھوڑا سا ایڈجسٹ کیا گیا ہے، بارڈرز کو گرائیں، اور اس بات کو یقینی بنائیں کہ وہ 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)ہے۔

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

متفرق عناصر

پتہ

عنصر کو <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دوسرے عناصر کے ساتھ زیادہ مطابقت رکھنے کے لیے دوبارہ ترتیب دیتے ہیں۔

Lorem ipsum dolor sit amet, consectetur adipiscing elit. انٹیجر posuere erat a ante.

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

ان لائن عناصر

عنصر کو <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