ريبوٽ

ريبوٽ، ھڪڙي فائل ۾ عنصر-مخصوص CSS تبديلين جو مجموعو، ڪِڪ اسٽارٽ بوٽ اسٽريپ کي ٺاھڻ لاءِ ھڪڙو خوبصورت، مسلسل ۽ سادي بيس لائين مهيا ڪرڻ لاءِ.

هن صفحي تي

طريقه ڪار

ريبوٽ ٺاهي ٿو Normalize تي، ڪيترن ئي HTML عناصر مهيا ڪري ٿو ڪجھه راءِ واري انداز سان صرف عنصر چونڊيندڙ استعمال ڪندي. اضافي اسٽائل صرف طبقن سان ڪيو ويندو آهي. مثال طور، اسان ڪجھ <table>اسلوب کي آسان بيس لائين لاءِ ريبوٽ ڪريو ۽ بعد ۾ مهيا ڪريو .table، .table-bordered, ۽ وڌيڪ.

ھتي آھن اسان جون ھدايتون ۽ سبب چونڊڻ لاءِ جيڪي ريبوٽ ۾ اوور رائڊ ڪرڻ لاءِ:

تازه ڪاري ڪريو ڪجھ برائوزر ڊفالٽ ويلز استعمال ڪرڻ لاءِ rems بدران s استعمال ڪرڻ emلاءِ اسپيبلبل جزو جي فاصلي لاءِ.
پاسو ڪرڻ margin-top. عمودي مارجن ختم ڪري سگھن ٿا، اڻڄاتل نتيجا پيدا ڪري سگھن ٿا. جيتوڻيڪ وڌيڪ اهم، هڪ واحد هدايت marginجو هڪ آسان ذهني ماڊل آهي.
ڊوائيس جي سائيز ۾ آسان اسڪيلنگ لاء، بلاڪ عناصر کي استعمال ڪرڻ گهرجي rems لاء margins.
fontلاڳاپيل ملڪيتن جا بيان گهٽ ۾ گهٽ رکو ، inheritجڏهن به ممڪن هجي استعمال ڪندي.

CSS متغير

v5.2.0 ۾ شامل ڪيو ويو

v5.1.1 سان، اسان اسان @importجي سڀني سي ايس ايس بنڊلن ۾ (بشمول , ۽ ) شامل ڪرڻ لاءِ اسان جي گهربل ايس bootstrap.cssکي bootstrap-reboot.cssمعياري bootstrap-grid.cssڪيو _root.scss. هي :rootسڀني بنڊلن ۾ ليول CSS متغير شامل ڪري ٿو، قطع نظر ته انهن مان ڪيترا ان بنڊل ۾ استعمال ڪيا ويا آهن. بالآخر Bootstrap 5 ڏسڻ لاءِ جاري رهندو وڌيڪ CSS متغير وقت سان گڏ شامل ڪيو ويو، وڌيڪ حقيقي وقت جي ڪسٽمائيزيشن مهيا ڪرڻ لاءِ هميشه ساس کي ٻيهر گڏ ڪرڻ جي ضرورت کان سواءِ. اسان جو طريقو اهو آهي ته اسان جو ذريعو ساس متغيرن کي وٺو ۽ انهن کي CSS متغير ۾ تبديل ڪيو وڃي. انهي طريقي سان، جيتوڻيڪ توهان CSS متغير استعمال نٿا ڪريو، توهان وٽ اڃا تائين ساس جي تمام طاقت آهي. اهو اڃا تائين جاري آهي ۽ مڪمل طور تي لاڳو ٿيڻ ۾ وقت وٺندو.

مثال طور، عام طرزن :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, and color. اهو بعد ۾ وراثت ۾ آهي ڪجهه فارم عناصر طرفان فونٽ جي تضاد کي روڪڻ لاءِ.
حفاظت لاء، <body>هڪ اعلان ڪيو آهي background-color، ڊفالٽ ڪرڻ لاء #fff.

اصلي فونٽ اسٽيڪ

بوٽ اسٽريپ استعمال ڪري ٿو "مقامي فونٽ اسٽيڪ" يا "سسٽم فونٽ اسٽيڪ" هر ڊوائيس ۽ او ايس تي بهترين ٽيڪسٽ رينڊرنگ لاءِ. اهي سسٽم فونٽ خاص طور تي اڄ جي ڊوائيسز کي ذهن ۾ رکندي، اسڪرين تي بهتر رينڊرنگ، متغير فونٽ سپورٽ، ۽ وڌيڪ سان ٺهيل آهن. هن Smashing Magazine آرٽيڪل ۾ اصلي فونٽ اسٽيڪ بابت وڌيڪ پڙهو .

$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برائوزر/پليٽفارم جي اصلي ايموجي فونٽ ۾ استعمال ڪيل انداز تي منحصر ڪري، انهن جي ظاهر مختلف هوندي، ۽ اهي ڪنهن به CSS طرز کان متاثر نه ٿيندا .

اهو 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-color. انهن کي ٽيڪسٽ، بارڊر، ۽ اوپيسيٽي افاديت سان تبديل ڪري سگهجي ٿو.colorcolor

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>, and <dl>− انهن margin-topکي هٽايو ويو آهي ۽ a margin-bottom: 1rem. Nested فهرستن ۾ ڪو به نه margin-bottomآهي. اسان padding-leftآن <ul>۽ <ol>عناصر کي پڻ ريٽ ڪيو آھي.

سڀني لسٽن کي انهن جي مٿين مارجن کي هٽايو ويو آهي
۽ انهن جي هيٺئين مارجن کي عام ڪيو ويو
Nested لسٽن ۾ ھيٺيون مارجن نه آھي
- اهڙيء طرح، اهي هڪ وڌيڪ هڪجهڙائي ظاهر آهي
- خاص طور تي جڏهن وڌيڪ فهرست جي شين جي پٺيان
کاٻي پيڊنگ پڻ ريٽ ڪيو ويو آهي

هتي هڪ ترتيب ڏنل فهرست آهي
ڪجھ شين جي فهرستن سان
اهو ساڳيو مجموعي نظر آهي
جيئن اڳئين غير ترتيب ڏنل فهرست

آسان اسٽائل، صاف ترتيب وار، ۽ بھترين فاصلي لاء، وضاحتن جي فهرستن کي اپڊيٽ ڪيو marginآھي. <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>ڪوڊ جي گھڻن لائنن لاءِ استعمال ڪريو . هڪ ڀيرو ٻيهر، پڪ ڪريو ته ڪنهن به زاويه برائوٽس کان بچڻ لاء ڪوڊ ۾ مناسب رينجرنگ لاء. <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 = م x + ب

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>جي، ختم ڪرڻ واري سرحدون، ۽ يقيني بڻائين ته پوريءَ 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 کي تبديل ڪيو ويو آھي صرف عمودي طور تي resizable ٿيڻ لاءِ جيئن افقي ريزائيزنگ اڪثر ڪري صفحي جي لي آئوٽ ”بريڪ“ ڪري ٿي.
<button>s ۽ <input>بٽڻ جا عنصر آهن cursor: pointerجڏهن :not(:disabled).

اهي تبديليون، ۽ وڌيڪ، هيٺ ڏيکاريل آهن.

ڏند ڪٿا جو مثال

مثال ان پٽ

مثال اي ميل

مثال ٽيليفون

مثال url

مثال نمبر

مثال جي ڳولا

مثال جي حد

مثال فائل ان پٽ

مثال چونڊيو

ھن چيڪ باڪس کي چيڪ ڪريو

اختيار هڪ آهي هي ۽ اهو آپشن ٻه ٻيو ڪجهه آهي جيڪو انهن فينسي فارم ڪنٽرولن جي لفافي کي ظاهر ڪرڻ لاءِ پڻ تمام ڊگهو آهي. آپشن ٽي غير فعال آهي

مثال ٽيڪسٽريا

مثال جي تاريخ

مثال وقت

مثال پاسورڊ

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

مثال هفتي

مثال مهيني

مثال رنگ

مثال جي پيداوار 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] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.

ريبوٽ

طريقه ڪار

CSS متغير

صفحو ڊفالٽ

اصلي فونٽ اسٽيڪ

عنوان ۽ پيراگراف

افقي ضابطا

فهرستون

ان لائن ڪوڊ

ڪوڊ بلاڪ

متغير

استعمال ڪندڙ ان پٽ

نموني جي پيداوار

ٽيبل

فارم

تاريخ ۽ رنگ ان پٽ سپورٽ

بٽڻ تي اشارو

متفرق عناصر

پتو

بلاڪ ڪوٽ

ان لائن عناصر

خلاصو

HTML5 [hidden]وصف

jQuery غير مطابقت

HTML5 `[hidden]`وصف