بوٹسٹریپ کے ساتھ شروع کریں۔

بوٹسٹریپ ایک طاقتور، خصوصیت سے بھرے فرنٹ اینڈ ٹول کٹ ہے۔ کچھ بھی بنائیں — پروٹو ٹائپ سے لے کر پروڈکشن تک — منٹوں میں۔

اس صفحہ پر

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

بوٹسٹریپ کے پروڈکشن کے لیے تیار CSS اور JavaScript کو CDN کے ذریعے بغیر کسی تعمیراتی مراحل کی ضرورت کے شامل کر کے شروع کریں۔ اسے اس بوٹسٹریپ کوڈ پین ڈیمو کے ساتھ عملی طور پر دیکھیں ۔

اپنے پروجیکٹ روٹ میں ایک نئی index.htmlفائل بنائیں۔ موبائل آلات میں مناسب جوابی سلوک<meta name="viewport"> کے لیے ٹیگ بھی شامل کریں ۔

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

بوٹسٹریپ کے سی ایس ایس اور جے ایس کو شامل کریں۔ <link>بند ہونے سے پہلے ٹیگ <head>کو ہمارے CSS کے لیے، اور <script>ہمارے JavaScript بنڈل کے لیے ٹیگ (بشمول Popper برائے پوزیشننگ ڈراپ ڈاؤن، پاپرز، اور ٹول ٹپس) میں رکھیں </body>۔ ہمارے CDN لنکس کے بارے میں مزید جانیں ۔

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

آپ پوپر اور ہمارے جے ایس کو الگ سے بھی شامل کر سکتے ہیں ۔ اگر آپ ڈراپ ڈاؤن، پاپ اوور، یا ٹول ٹپس استعمال کرنے کا ارادہ نہیں رکھتے ہیں، تو پوپر کو شامل نہ کرکے کچھ کلو بائٹس بچائیں۔

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

CDN لنکس

حوالہ کے طور پر، ہمارے بنیادی CDN لنکس یہ ہیں۔

تفصیل	URL
سی ایس ایس	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
جے ایس	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

آپ مواد کے صفحہ میں درج ہماری کسی بھی اضافی تعمیر کو حاصل کرنے کے لیے CDN کا استعمال بھی کر سکتے ہیں ۔

اگلے مراحل

کچھ اہم عالمی ماحول کی ترتیبات کے بارے میں تھوڑا سا مزید پڑھیں جو بوٹسٹریپ استعمال کرتا ہے۔
ہمارے مواد کے سیکشن میں بوٹسٹریپ میں کیا شامل ہے اور ذیل میں جاوا اسکرپٹ کی ضرورت کے اجزاء کی فہرست کے بارے میں پڑھیں۔
تھوڑی زیادہ طاقت کی ضرورت ہے؟ پیکیج مینیجر کے ذریعے سورس فائلوں کو شامل کرکے بوٹسٹریپ کے ساتھ تعمیر کرنے پر غور کریں ۔
بوٹسٹریپ کو بطور ماڈیول استعمال کرنا چاہتے ہیں <script type="module">؟ براہ کرم ہمارے بوٹسٹریپ کو ماڈیول سیکشن کے بطور استعمال کریں۔

جے ایس اجزاء

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

جاوا اسکرپٹ کی ضرورت والے اجزاء دکھائیں۔

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

اہم عالمی

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

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 عناصر کو قدرے زیادہ رائے والے ری سیٹ فراہم کرتے ہیں۔

برادری

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

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

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