in English

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

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

اس صفحہ پر

نقطہ نظر

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

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

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

سی ایس ایس متغیرات

v5.1.1 میں شامل کیا گیا۔

v5.1.1 کے ساتھ، ہم @importنے اپنے تمام CSS بنڈلوں (بشمول bootstrap.css, bootstrap-reboot.css, اور bootstrap-grid.cssشامل کرنے کے لیے اپنے مطلوبہ s کو معیاری بنایا _root.scss۔ یہ تمام بنڈلوں میں لیول CSS متغیرات کا اضافہ کرتا ہے :root، قطع نظر اس کے کہ ان میں سے کتنے ہی بنڈل میں استعمال کیے گئے ہوں۔ بالآخر بوٹسٹریپ 5 جاری رہے گا۔ وقت کے ساتھ ساتھ مزید سی ایس ایس متغیرات کو دیکھیں۔

صفحہ ڈیفالٹس

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

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

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

بوٹسٹریپ ہر ڈیوائس اور OS پر بہترین ٹیکسٹ رینڈرنگ کے لیے "مقامی فونٹ اسٹیک" یا "سسٹم فونٹ اسٹیک" کا استعمال کرتا ہے۔ ان سسٹم فونٹس کو خاص طور پر آج کے آلات کو ذہن میں رکھتے ہوئے ڈیزائن کیا گیا ہے، جس میں اسکرینوں پر بہتر رینڈرنگ، متغیر فونٹ سپورٹ، اور بہت کچھ شامل ہے۔ اس سمیشنگ میگزین آرٹیکل میں مقامی فونٹ اسٹیک کے بارے میں مزید پڑھیں ۔

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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

سی ایس ایس متغیرات

جیسا کہ بوٹسٹریپ 5 پختہ ہوتا جا رہا ہے، سی ایس ایس متغیرات کے ساتھ زیادہ سے زیادہ اسٹائلز بنائے جائیں گے تاکہ ساس کو ہمیشہ دوبارہ کمپائل کرنے کی ضرورت کے بغیر مزید ریئل ٹائم حسب ضرورت فراہم کیا جا سکے۔ ہمارا طریقہ یہ ہے کہ ہم اپنے ماخذ Sass متغیرات کو لے کر انہیں CSS متغیرات میں تبدیل کریں۔ اس طرح، اگر آپ CSS متغیرات استعمال نہیں کرتے ہیں، تب بھی آپ کے پاس Sass کی تمام طاقت ہے۔ یہ ابھی بھی جاری ہے اور اس پر مکمل عمل درآمد میں وقت لگے گا۔

مثال کے طور پر، عام طرزوں :rootکے لیے ان CSS متغیرات پر غور کریں:<body>

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

عملی طور پر، وہ متغیرات پھر اس طرح ریبوٹ میں لاگو ہوتے ہیں:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

جو آپ کو ریئل ٹائم کسٹمائزیشن کرنے کی اجازت دیتا ہے حالانکہ آپ چاہیں:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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

تمام سرخی والے عناصر — جیسے، <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ہے۔ ہم نے padding-leftآن <ul>اور <ol>عناصر کو بھی دوبارہ ترتیب دیا ہے۔

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

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

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

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

ان لائن کوڈ

کوڈ کے ان لائن ٹکڑوں کو کے ساتھ لپیٹیں <code>۔ HTML زاویہ بریکٹ سے بچنا یقینی بنائیں۔

مثال کے طور پر، <section>ان لائن کے طور پر لپیٹ ہونا چاہئے.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

کوڈ بلاکس

<pre>کوڈ کی متعدد لائنوں کے لیے s کا استعمال کریں ۔ ایک بار پھر، مناسب رینڈرنگ کے لیے کوڈ میں کسی بھی زاویہ بریکٹ سے بچنا یقینی بنائیں۔ <pre>عنصر کو اسے ہٹانے اور اس کے لیے یونٹس استعمال کرنے کے لیے دوبارہ ترتیب دیا گیا margin-topہے ۔remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

متغیرات

متغیرات کی نشاندہی کرنے کے لیے <var>ٹیگ کا استعمال کریں۔

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

صارف کا ان پٹ

<kbd>ان پٹ کی نشاندہی کرنے کے لیے استعمال کریں جو عام طور پر کی بورڈ کے ذریعے داخل کیا جاتا ہے۔

cdڈائریکٹریز کو تبدیل کرنے کے لیے، ڈائرکٹری کے نام کے بعد ٹائپ کریں۔
سیٹنگز میں ترمیم کرنے کے لیے، دبائیں۔ ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

نمونہ آؤٹ پٹ

کسی پروگرام سے نمونہ آؤٹ پٹ کی نشاندہی کرنے کے لیے <samp>ٹیگ کا استعمال کریں۔

اس متن کو کمپیوٹر پروگرام سے نمونہ آؤٹ پٹ کے طور پر سمجھا جانا ہے۔

<samp>This text is meant to be treated as sample output from a computer program.</samp>

میزیں

ٹیبلز کو سٹائل <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)ہے۔

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

مثال لیجنڈ

مثال ان پٹ

ای میل کی مثال

ٹیلیفون کی مثال

مثال یو آر ایل

مثال نمبر

مثال کی تلاش

مثال کی حد

فائل ان پٹ کی مثال

مثال منتخب کریں۔

اس چیک باکس کو چیک کریں۔

آپشن ایک یہ اور وہ ہے۔ آپشن دو کچھ اور ہے جو ان فینسی فارم کنٹرولز کی ریپنگ کو ظاہر کرنے کے لیے بہت طویل ہے۔ آپشن تین غیر فعال ہے۔

ٹیکسٹیریا کی مثال

مثال کی تاریخ

مثال کا وقت

مثال پاس ورڈ

مثال تاریخ وقت-مقامی

مثال ہفتہ

مثال مہینہ

رنگ کی مثال

مثال آؤٹ پٹ 100

تاریخ اور رنگ ان پٹ سپورٹ

ذہن میں رکھیں کہ تاریخ کے ان پٹ تمام براؤزرز، یعنی سفاری کے ذریعے مکمل طور پر تعاون یافتہ نہیں ہیں۔

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

ریبوٹ میں 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>بنیادی اسٹائل حاصل ہوتا ہے تاکہ اسے پیراگراف کے متن میں نمایاں کیا جاسکے۔

HTML مخفف عنصر ۔

خلاصہ

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

کچھ تفصیلات

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

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

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

HTML5 `[hidden]`وصف

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

<input type="text" hidden>

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

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

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

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

نقطہ نظر

سی ایس ایس متغیرات

صفحہ ڈیفالٹس

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

سی ایس ایس متغیرات

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

فہرستیں

ان لائن کوڈ

کوڈ بلاکس

متغیرات

صارف کا ان پٹ

نمونہ آؤٹ پٹ

میزیں

فارمز

تاریخ اور رنگ ان پٹ سپورٹ

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

متفرق عناصر

پتہ

بلاک کوٹ

ان لائن عناصر

خلاصہ

HTML5 [hidden]وصف

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

HTML5 `[hidden]`وصف