دوبارہ شروع کریں۔
ریبوٹ، ایک فائل میں عنصر سے متعلق مخصوص CSS تبدیلیوں کا مجموعہ، بوٹسٹریپ کو کِک اسٹارٹ کریں تاکہ ایک خوبصورت، مستقل اور سادہ بیس لائن فراہم کی جا سکے۔
نقطہ نظر
ریبوٹ نارملائز پر بناتا ہے، صرف عنصر سلیکٹرز کا استعمال کرتے ہوئے بہت سے HTML عناصر کو کسی حد تک رائے دینے والے انداز کے ساتھ فراہم کرتا ہے۔ اضافی اسٹائل صرف کلاسوں کے ساتھ کیا جاتا ہے۔ مثال کے طور پر، ہم کچھ <table>
اسٹائلز کو ایک آسان بیس لائن کے لیے ریبوٹ کرتے ہیں اور بعد میں فراہم کرتے ہیں .table
، .table-bordered
اور مزید۔
ریبوٹ میں کس چیز کو اوور رائڈ کرنا ہے اس کا انتخاب کرنے کی ہماری رہنما خطوط اور وجوہات یہ ہیں:
- کچھ براؤزر کی ڈیفالٹ قدروں کو اپ ڈیٹ کریں تاکہ توسیع پذیر اجزاء کی جگہ کے لیے
rem
s کی بجائے s استعمال کریں۔em
- اجتناب
margin-top
کریں۔ عمودی مارجن گر سکتے ہیں، غیر متوقع نتائج برآمد کر سکتے ہیں۔ اگرچہ زیادہ اہم بات یہ ہے کہ، کی ایک سمتmargin
ایک آسان ذہنی ماڈل ہے۔ - آلے کے سائز میں آسانی سے اسکیلنگ کے لیے، بلاک عناصر کو
rem
s کے لیےmargin
s استعمال کرنا چاہیے۔ - جب بھی ممکن ہو
font
استعمال کرتے ہوئے، متعلقہ خصوصیات کے اعلانات کو کم سے کم رکھیں ۔inherit
صفحہ ڈیفالٹس
اور عناصر کو صفحہ بھر میں بہتر ڈیفالٹس فراہم کرنے کے لیے اپ ڈیٹ کیا جاتا ہے <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
عنوانات اور پیراگراف
تمام سرخی والے عناصر — جیسے، <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>
عناصر کو بھی دوبارہ ترتیب دیا ہے۔
- تمام فہرستوں کا سب سے اوپر مارجن ہٹا دیا گیا ہے۔
- اور ان کا نچلا مارجن نارمل ہوگیا۔
- نیسٹڈ لسٹوں کا کوئی نیچے مارجن نہیں ہے۔
- اس طرح ان کی ظاہری شکل بھی زیادہ ہے۔
- خاص طور پر جب مزید فہرست آئٹمز کے بعد
- بائیں پیڈنگ کو بھی ری سیٹ کر دیا گیا ہے۔
- یہاں ایک ترتیب شدہ فہرست ہے۔
- چند فہرست اشیاء کے ساتھ
- اس کی مجموعی شکل ایک جیسی ہے۔
- پچھلی غیر ترتیب شدہ فہرست کے طور پر
آسان اسٹائل، واضح درجہ بندی، اور بہتر وقفہ کاری کے لیے، تفصیل کی فہرستوں نے margin
s کو اپ ڈیٹ کر دیا ہے۔ <dd>
s پر دوبارہ ترتیب margin-left
دیں 0
اور شامل کریں margin-bottom: .5rem
۔ <dt>
s بولڈ ہیں .
- تفصیل کی فہرستیں۔
- وضاحت کی فہرست اصطلاحات کی وضاحت کے لیے بہترین ہے۔
- مدت
- اصطلاح کی تعریف۔
- اسی اصطلاح کی دوسری تعریف۔
- ایک اور اصطلاح
- اس دوسری اصطلاح کی تعریف۔
ان لائن کوڈ
کوڈ کے ان لائن ٹکڑوں کو کے ساتھ لپیٹیں <code>
۔ HTML زاویہ بریکٹ سے بچنا یقینی بنائیں۔
<section>
ان لائن کے طور پر لپیٹ ہونا چاہئے.
For example, <code><section></code> should be wrapped as inline.
کوڈ بلاکس
<pre>
کوڈ کی متعدد لائنوں کے لیے s کا استعمال کریں ۔ ایک بار پھر، مناسب رینڈرنگ کے لیے کوڈ میں کسی بھی زاویہ بریکٹ سے بچنا یقینی بنائیں۔ <pre>
عنصر کو اسے ہٹانے اور اس کے لیے یونٹس استعمال کرنے کے لیے دوبارہ ترتیب دیا گیا margin-top
ہے ۔rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
متغیرات
متغیرات کی نشاندہی کرنے کے لیے <var>
ٹیگ کا استعمال کریں۔
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
صارف کا ان پٹ
<kbd>
ان پٹ کی نشاندہی کرنے کے لیے استعمال کریں جو عام طور پر کی بورڈ کے ذریعے داخل کیا جاتا ہے۔
سیٹنگز میں ترمیم کرنے کے لیے، دبائیں۔ 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)
ہے۔
یہ تبدیلیاں، اور مزید، ذیل میں دکھایا گیا ہے۔
تاریخ اور رنگ ان پٹ سپورٹ
ذہن میں رکھیں کہ تاریخ کے ان پٹ تمام براؤزرز، یعنی سفاری کے ذریعے مکمل طور پر تعاون یافتہ نہیں ہیں۔
بٹنوں پر پوائنٹرز
ریبوٹ میں 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>
۔
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 پورا نام
[email protected]
بلاک کوٹ
margin
بلاک کوٹس پر پہلے سے طے شدہ ہے 1em 40px
، لہذا ہم اسے 0 0 1rem
دوسرے عناصر کے ساتھ زیادہ مطابقت رکھنے کے لیے دوبارہ ترتیب دیتے ہیں۔
ایک معروف اقتباس، بلاک کوٹ عنصر میں شامل ہے۔
ماخذ کے عنوان میں مشہور کوئی
ان لائن عناصر
عنصر کو <abbr>
بنیادی اسٹائل حاصل ہوتا ہے تاکہ اسے پیراگراف کے متن میں نمایاں کیا جاسکے۔
خلاصہ
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