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

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

اس صفحہ پر

نقطہ نظر

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

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

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

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

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

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

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

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

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

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

صفحہ ڈیفالٹس

اور عناصر کو صفحہ بھر میں بہتر ڈیفالٹس فراہم کرنے کے لیے اپ ڈیٹ کیا جاتا ہے <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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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. بوٹسٹریپ کی سرخی

افقی قواعد

<hr>عنصر کو آسان بنایا گیا ہے ۔ براؤزر ڈیفالٹس کی طرح، <hr>s کو بذریعہ اسٹائل کیا جاتا border-topہے، ایک ڈیفالٹ ہوتا ہے ، اور خود بخود ان کے ذریعے opacity: .25وراثت میں آتا ہے ، بشمول جب والدین کے ذریعے سیٹ کیا جاتا ہے۔ متن، بارڈر، اور دھندلاپن کی افادیت کے ساتھ ان میں ترمیم کی جا سکتی ہے۔border-colorcolorcolor

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

فہرستیں

تمام فہرستیں— <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>ان لائن کے طور پر لپیٹ ہونا چاہئے.

html

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>

html

<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

html

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

صارف کا ان پٹ

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

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

html

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>ٹیگ کا استعمال کریں۔

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

html

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

میزیں

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

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</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تبدیلی لاتے ہیں۔

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

html

<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]`وصف