Source

ريبوٽ

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

طريقه ڪار

ريبوٽ ٺاهي ٿو Normalize تي، ڪيترن ئي 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، and Arial) بوٽ اسٽريپ 4 ۾ ڇڏيا ويا آھن ۽ ھر ڊيوائس ۽ OS تي بھترين ٽيڪسٽ رينڊرنگ لاءِ ”ملي فونٽ اسٽيڪ“ سان تبديل ڪيا ويا آھن. هن Smashing Magazine آرٽيڪل ۾ اصلي فونٽ اسٽيڪ بابت وڌيڪ پڙهو .

$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>, and <dl>− انهن margin-topکي هٽايو ويو آهي ۽ a margin-bottom: 1rem. Nested فهرستن ۾ ڪو به نه margin-bottomآهي.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
پريتيم نسل اليڪيٽ ۾ فيڪليس
نولا 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
ايجٽ porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
پريتيم نسل اليڪيٽ ۾ فيڪليس
نولا volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ايجٽ porttitor lorem

آسان اسٽائل، صاف ترتيب وار، ۽ بھترين فاصلي لاء، وضاحتن جي فهرستن کي اپڊيٽ ڪيو marginآھي. <dd>s margin-leftتي ري سيٽ 0ڪريو ۽ شامل ڪريو margin-bottom: .5rem. <dt>s بولڊ ٿيل آهن .

وضاحت جي فهرست: وضاحت جي فهرست اصطلاحن جي وضاحت لاءِ ڀرپور آهي.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
مالسودا پورٽ: 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. Integer 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ڪلاس استعمال ڪريو .