مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
in English

تعارف

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

اس صفحہ پر

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

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

سی ایس ایس

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

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

جے ایس

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

بنڈل

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

الگ

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

ماڈیولز

اگر آپ استعمال کرتے ہیں <script type="module">تو براہ کرم ہمارے بوٹسٹریپ کو ماڈیول سیکشن کے طور پر استعمال کرنے کا حوالہ دیں۔

اجزاء

متجسس ہیں کہ کون سے اجزاء کو واضح طور پر ہمارے 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">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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">

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

باکس سائزنگ

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

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

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

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

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

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

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

برادری

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

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

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