in English

تعارف

Bootstrap کے ساتھ شروع کریں، جو دنیا کا سب سے مقبول فریم ورک ہے جو ریسپانسیو، موبائل فرسٹ سائٹس بنانے کے لیے ہے، jsDelivr اور ایک ٹیمپلیٹ اسٹارٹر پیج کے ساتھ۔

فورا شروع کرنا

اپنے پروجیکٹ میں بوٹسٹریپ کو تیزی سے شامل کرنا چاہتے ہیں؟ jsDelivr استعمال کریں، ایک مفت اوپن سورس CDN۔ پیکیج مینیجر کا استعمال کرتے ہوئے یا سورس فائلوں کو ڈاؤن لوڈ کرنے کی ضرورت ہے؟ ڈاؤن لوڈز کے صفحے پر جائیں۔

سی ایس ایس

ہماری سی ایس ایس لوڈ کرنے کے لیے دیگر تمام اسٹائل شیٹس سے پہلے اسٹائل شیٹ کو کاپی پیسٹ <link>کریں ۔<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

جے ایس

ہمارے بہت سے اجزاء کو کام کرنے کے لیے JavaScript کے استعمال کی ضرورت ہوتی ہے۔ خاص طور پر، انہیں jQuery ، Popper ، اور ہمارے اپنے JavaScript پلگ ان کی ضرورت ہوتی ہے۔ ہم jQuery کی سلم بلڈ استعمال کرتے ہیں ، لیکن مکمل ورژن بھی سپورٹ ہے۔

مندرجہ ذیل میں سے کسی ایک کو اپنے صفحات <script>کے آخر میں، اختتامی </body>ٹیگ سے بالکل پہلے، ان کو فعال کرنے کے لیے رکھیں ۔ jQuery پہلے آنا چاہیے، پھر Popper، اور پھر ہمارے JavaScript پلگ ان۔

بنڈل

ہمارے دو بنڈلوں میں سے ایک کے ساتھ ہر بوٹسٹریپ جاوا اسکرپٹ پلگ ان کو شامل کریں۔ دونوں bootstrap.bundle.jsاور ہمارے ٹول ٹپس اور پاپ اوور کے لیے Popperbootstrap.bundle.min.js شامل ہیں ، لیکن jQuery نہیں ۔ پہلے jQuery، پھر بوٹسٹریپ جاوا اسکرپٹ بنڈل شامل کریں۔ بوٹسٹریپ میں کیا شامل ہے اس کے بارے میں مزید معلومات کے لیے، براہ کرم ہمارا مواد کا سیکشن دیکھیں۔

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

الگ

اگر آپ علیحدہ اسکرپٹ حل کے ساتھ جانے کا فیصلہ کرتے ہیں تو، Popper پہلے آنا چاہیے (اگر آپ ٹول ٹپس یا پاپ اوور استعمال کر رہے ہیں)، اور پھر ہمارے JavaScript پلگ ان۔

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

اجزاء

متجسس ہیں کہ کون سے اجزاء کو واضح طور پر jQuery، ہمارے JavaScript، اور Popper کی ضرورت ہے؟ نیچے شو کے اجزاء کے لنک پر کلک کریں۔ اگر آپ کو صفحہ کے ڈھانچے کے بارے میں یقین نہیں ہے تو، مثال کے طور پر صفحہ ٹیمپلیٹ کے لیے پڑھتے رہیں۔

جاوا اسکرپٹ کی ضرورت والے اجزاء دکھائیں۔
  • برخاست کرنے کے لیے الرٹس
  • ٹوگلنگ اسٹیٹس اور چیک باکس/ریڈیو فعالیت کے لیے بٹن
  • تمام سلائیڈ رویوں، کنٹرولز اور اشارے کے لیے کیروسل
  • مواد کی مرئیت کو ٹوگل کرنے کے لیے سمیٹیں۔
  • ڈسپلے اور پوزیشننگ کے لیے ڈراپ ڈاؤنز ( پوپر کی بھی ضرورت ہے )
  • ڈسپلے، پوزیشننگ، اور سکرول رویے کے لیے ماڈلز
  • جوابی رویے کو نافذ کرنے کے لیے ہمارے کولپس پلگ ان کو بڑھانے کے لیے Navbar
  • سکرول رویے اور نیویگیشن اپ ڈیٹس کے لیے Scrollspy
  • ڈسپلے اور پوزیشننگ کے لیے ٹول ٹپس اور پاپ اوور ( پوپر کی بھی ضرورت ہے )

سٹارٹر ٹیمپلیٹ

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

صفحہ کی مجموعی ضروریات کے لیے آپ کو بس اتنا ہی درکار ہے۔ اپنی سائٹ کے مواد اور اجزاء کو ترتیب دینا شروع کرنے کے لیے لے آؤٹ دستاویزات یا ہماری آفیشل مثالیں دیکھیں۔

اہم عالمی

بوٹسٹریپ مٹھی بھر اہم عالمی اسٹائلز اور سیٹنگز کو استعمال کرتا ہے جن کے بارے میں آپ کو اس کا استعمال کرتے وقت آگاہ ہونا پڑے گا، یہ سبھی تقریباً خصوصی طور پر کراس براؤزر کی طرز کو معمول پر لانے کے لیے تیار ہیں۔ آئیے اندر کودیں۔

HTML5 دستاویز کی قسم

بوٹسٹریپ کو HTML5 doctype کے استعمال کی ضرورت ہے۔ اس کے بغیر، آپ کو کچھ فنکی نامکمل اسٹائل نظر آئے گا، لیکن اس میں شامل کرنے سے کوئی خاص ہچکی نہیں ہونی چاہیے۔

<!doctype html>
<html lang="en">
  ...
</html>

ذمہ دار میٹا ٹیگ

بوٹسٹریپ کو موبائل فرسٹ تیار کیا گیا ہے ، ایک حکمت عملی جس میں ہم پہلے موبائل آلات کے لیے کوڈ کو بہتر بناتے ہیں اور پھر CSS میڈیا کے سوالات کا استعمال کرتے ہوئے ضرورت کے مطابق اجزاء کو بڑھاتے ہیں۔ تمام آلات کے لیے مناسب رینڈرنگ اور ٹچ زومنگ کو یقینی بنانے کے لیے، اپنے میں ریسپانسیو ویوپورٹ میٹا ٹیگ شامل کریں <head>۔

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

اس کی مثال آپ اسٹارٹر ٹیمپلیٹ میں دیکھ سکتے ہیں ۔

باکس سائزنگ

CSS میں زیادہ سیدھے سائز کے لیے، ہم عالمی box-sizingقدر کو سے content-boxمیں تبدیل کرتے ہیں border-box۔ یہ یقینی بناتا paddingہے کہ کسی عنصر کی حتمی گنتی کی چوڑائی کو متاثر نہیں کرتا ہے، لیکن یہ Google Maps اور Google Custom Search Engine جیسے تیسرے فریق کے سافٹ ویئر کے ساتھ مسائل پیدا کر سکتا ہے۔

غیر معمولی موقع پر آپ کو اسے اوور رائڈ کرنے کی ضرورت ہے، درج ذیل کی طرح کچھ استعمال کریں:

.selector-for-some-widget {
  box-sizing: content-box;
}

مندرجہ بالا ٹکڑوں کے ساتھ، نیسٹڈ عناصر — بشمول ::beforeاور کے ذریعے تیار کردہ مواد — سبھی اس کے لیے ::afterمخصوص کردہ وراثت میں ہوں گے ۔box-sizing.selector-for-some-widget

سی ایس ایس ٹرکس پر باکس ماڈل اور سائزنگ کے بارے میں مزید جانیں ۔

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

بہتر کراس براؤزر رینڈرنگ کے لیے، ہم براؤزرز اور آلات میں تضادات کو درست کرنے کے لیے ریبوٹ کا استعمال کرتے ہیں جبکہ عام HTML عناصر کو قدرے زیادہ رائے والے ری سیٹ فراہم کرتے ہیں۔

برادری

بوٹسٹریپ کی ترقی پر تازہ ترین رہیں اور ان مددگار وسائل کے ساتھ کمیونٹی تک پہنچیں۔

  • آفیشل بوٹسٹریپ بلاگ کو پڑھیں اور سبسکرائب کریں ۔
  • IRC میں ساتھی بوٹسٹریپرز کے ساتھ چیٹ کریں۔ irc.libera.chatسرور پر ، #bootstrapچینل میں۔
  • اسٹیک اوور فلو (ٹیگ شدہ) پر عمل درآمد میں مدد مل سکتی ہے bootstrap-4۔
  • ڈویلپرز کو پیکیجز پر کلیدی لفظ استعمال کرنا چاہیے جو زیادہ سے زیادہ دریافت کے لیے npmbootstrap یا اسی طرح کے ڈیلیوری میکانزم کے ذریعے تقسیم کرتے وقت بوٹسٹریپ کی فعالیت میں ترمیم یا اضافہ کرتے ہیں ۔

آپ تازہ ترین گپ شپ اور زبردست میوزک ویڈیوز کے لیے ٹویٹر پر @getbootstrap کو بھی فالو کر سکتے ہیں ۔

CSPs اور سرایت شدہ SVGs

بوٹسٹریپ کے متعدد اجزاء میں ہمارے CSS میں ایمبیڈڈ SVGs شامل ہیں تاکہ براؤزرز اور آلات پر مستقل اور آسانی سے اجزاء کو اسٹائل کریں۔ زیادہ سخت CSP کنفیگریشنز والی تنظیموں کے لیے ، ہم نے اپنے ایمبیڈڈ SVGs کی تمام مثالیں دستاویز کی ہیں (جن میں سے سبھی کا اطلاق بذریعہ ہوتا ہے background-image) تاکہ آپ اپنے اختیارات کا مزید اچھی طرح سے جائزہ لے سکیں۔

کمیونٹی کی گفتگو کی بنیاد پر ، آپ کے اپنے کوڈبیس میں اس سے نمٹنے کے لیے کچھ اختیارات میں مقامی طور پر میزبان اثاثوں کے ساتھ URLs کو تبدیل کرنا، تصاویر کو ہٹانا اور ان لائن امیجز کا استعمال کرنا (تمام اجزاء میں ممکن نہیں)، اور اپنے CSP میں ترمیم کرنا شامل ہے۔ ہماری تجویز یہ ہے کہ اپنی حفاظتی پالیسیوں کا بغور جائزہ لیں اور اگر ضروری ہو تو آگے کے بہترین راستے کا فیصلہ کریں۔