Source

تعارف

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

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

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

سی ایس ایس

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

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

جے ایس

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

ہم jQuery کی سلم بلڈ استعمال کرتے ہیں ، لیکن مکمل ورژن بھی سپورٹ ہے۔

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

جاوا اسکرپٹ کی ضرورت والے اجزاء دکھائیں۔
  • برخاست کرنے کے لیے الرٹس
  • ٹوگلنگ اسٹیٹس اور چیک باکس/ریڈیو فعالیت کے لیے بٹن
  • تمام سلائیڈ رویوں، کنٹرولز اور اشارے کے لیے کیروسل
  • مواد کی مرئیت کو ٹوگل کرنے کے لیے سمیٹیں۔
  • ڈسپلے اور پوزیشننگ کے لیے ڈراپ ڈاؤنز ( Popper.js کی بھی ضرورت ہے )
  • ڈسپلے، پوزیشننگ، اور سکرول رویے کے لیے ماڈلز
  • جوابی رویے کو نافذ کرنے کے لیے ہمارے کولپس پلگ ان کو بڑھانے کے لیے Navbar
  • ڈسپلے اور پوزیشننگ کے لیے ٹول ٹپس اور پاپ اوور ( Popper.js کی بھی ضرورت ہے )
  • سکرول رویے اور نیویگیشن اپ ڈیٹس کے لیے 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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 عناصر کو قدرے زیادہ رائے والے ری سیٹ فراہم کرتے ہیں۔

برادری

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

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

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