مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

تعارف

Bootstrap سان شروع ڪريو، جوابي، موبائل-پهرين سائيٽن جي تعمير لاءِ دنيا جو سڀ کان مشهور فريم ورڪ، jsDelivr ۽ ٽيمپليٽ اسٽارٽر پيج سان.

هن صفحي تي

جلدي شروع

توھان جي پروجيڪٽ ۾ بوٽ اسٽراپ کي جلدي شامل ڪرڻ لاءِ ڳولي رھيا آھيو؟ استعمال ڪريو jsDelivr، هڪ مفت اوپن سورس CDN. هڪ پيڪيج مئنيجر استعمال ڪندي يا ماخذ فائلن کي ڊائون لوڊ ڪرڻ جي ضرورت آهي؟ ڊائون لوڊ صفحي ڏانھن وڃو .

سي ايس ايس

اسان جي CSS لوڊ ڪرڻ لاءِ اسٽائل شيٽ کي ٻين سڀني اسٽائل شيٽ کان اڳ ۾ ڪاپي پيسٽ <link>ڪريو .<head>

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

جي ايس

اسان جا ڪيترائي جزا ڪم ڪرڻ لاءِ JavaScript جي استعمال جي ضرورت آهي. خاص طور تي، انهن کي اسان جي پنهنجي جاوا اسڪرپٽ پلگ ان ۽ پوپر جي ضرورت آهي . ھيٺين مان ھڪڙي کي پنھنجي صفحن <script>جي آخر ۾، بند ڪرڻ واري </body>ٽيگ کان اڳ، انھن کي فعال ڪرڻ لاءِ رکو.

بنڊل

شامل ڪريو هر بوٽ اسٽريپ جاوا اسڪرپٽ پلگ ان ۽ انحصار اسان جي ٻن بنڊلن مان هڪ سان. ٻئي bootstrap.bundle.js۽ اسان جي ٽول ٽائپس ۽ پاپور لاءِ پوپرbootstrap.bundle.min.js شامل آهن . Bootstrap ۾ ڇا شامل آهي بابت وڌيڪ معلومات لاءِ، مهرباني ڪري اسان جو مواد سيڪشن ڏسو.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

الڳ

جيڪڏهن توهان الڳ اسڪرپٽ حل سان وڃڻ جو فيصلو ڪيو ٿا، پوپر ضرور اچڻ گهرجي (جيڪڏهن توهان ٽول ٽائپس يا پاپ اوور استعمال ڪري رهيا آهيو)، ۽ پوءِ اسان جا JavaScript پلگ ان.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

ماڊلز

جيڪڏھن توھان استعمال ڪريو ٿا <script type="module">، مھرباني ڪري اسان جو حوالو ڏيو Bootstrap کي ماڊل سيڪشن طور استعمال ڪندي.

اجزاء

دلچسپ آهي ته ڪهڙا اجزاء واضح طور تي اسان جي جاوا اسڪرپٽ ۽ پاپر جي ضرورت آهي؟ هيٺ ڏنل ڏيکاريو اجزاء لنڪ تي ڪلڪ ڪريو. جيڪڏهن توهان کي مڪمل طور تي پڪ ناهي ته عام صفحي جي جوڙجڪ جي باري ۾، پڙهڻ جاري رکو مثال صفحي جي ٽيمپليٽ لاءِ.

جاوا اسڪرپٽ جي ضرورت جا حصا ڏيکاريو
  • برطرفي لاءِ الرٽ
  • رياستن کي ٽوگل ڪرڻ ۽ چيڪ بڪس/ريڊيو ڪارڪردگي لاءِ بٽڻ
  • ڪارسيل سڀني سلائيڊ رويي، ڪنٽرول، ۽ اشارن لاء
  • ٽوگلنگ مواد جي نمائش لاءِ کوليو
  • ڊسپلي ۽ پوزيشن لاءِ ڊراپ ڊائون ( پوپر جي به ضرورت آهي )
  • ڊسپلي، پوزيشن، ۽ اسڪرول رويي لاء ماڊل
  • جوابي رويي کي لاڳو ڪرڻ لاءِ اسان جي کولڻ واري پلگ ان کي وڌائڻ لاءِ Navbar
  • نمائش، پوزيشن، ۽ اسڪرول جي رويي لاء آفڪينواس
  • ڏيکارڻ ۽ برطرف ڪرڻ لاء ٽوسٽ
  • ڊسپلي ۽ پوزيشن لاءِ ٽول ٽائپس ۽ پاپور ( پوپر جي به ضرورت آهي )
  • اسڪالر جي رويي ۽ نيويگيشن تازه ڪارين لاءِ اسڪرول اسپيس

شروعاتي ٽيمپليٽ

پڪ ڪريو ته توهان جا صفحا جديد ڊيزائن ۽ ترقي جي معيار سان ترتيب ڏنل آهن. ان جو مطلب آهي هڪ HTML5 ڊڪٽيپ استعمال ڪرڻ ۽ مناسب جوابي رويي لاءِ وييو پورٽ ميٽا ٽيگ شامل ڪرڻ. اهو سڀ ڪجهه گڏ ڪريو ۽ توهان جا صفحا هن وانگر ڏسڻ گهرجن:

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

ايندڙ قدمن لاءِ، پنھنجي سائيٽ جي مواد ۽ اجزاء کي ترتيب ڏيڻ شروع ڪرڻ لاءِ لي آئوٽ ڊڪس يا اسان جا سرڪاري مثال ڏسو.

اهم عالمي

بوٽ اسٽريپ چند اھم عالمي اندازن ۽ سيٽنگن کي ملازمت ڏئي ٿو جيڪي توھان کي ان کي استعمال ڪرڻ وقت باخبر رھڻ جي ضرورت پوندي، اھي سڀ تقريبن خاص طور تي ڪراس برائوزر جي طرزن کي عام ڪرڻ لاءِ تيار آھن. اچو ته اندر ۾ ٻڏي.

HTML5 doctype

بوٽ اسٽريپ کي HTML5 doctype جي استعمال جي ضرورت آهي. ان کان سواء، توهان کي ڪجهه عجيب نامڪمل اسٽائل ڏسڻ ۾ ايندي، پر ان کي شامل ڪرڻ ۾ ڪا به وڏي هچڪ نه هجڻ گهرجي.

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

جوابي ميٽا ٽيگ

بوٽ اسٽريپ ترقي ڪئي وئي آهي موبائل پهرين ، هڪ حڪمت عملي جنهن ۾ اسان موبائل ڊوائيسز لاء ڪوڊ کي بهتر بڻائي سگهون ٿا ۽ پوء سي ايس ايس ميڊيا سوالن کي استعمال ڪندي ضروري اجزاء کي وڌايو. سڀني ڊوائيسن لاءِ مناسب رينڊرنگ ۽ ٽچ زومنگ کي يقيني بڻائڻ لاءِ ، جوابي ويوپورٽ ميٽا ٽيگ کي شامل ڪريو <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;
}

مٿي ڏنل ٽڪڙي سان، nested عنصرن-بشمول ٺاهيل مواد ذريعي ::before۽ ::after-سڀني کي ورثي ۾ ملندو ان box-sizingلاءِ بيان ڪيل .selector-for-some-widget.

CSS Tricks تي باڪس ماڊل ۽ سائيز جي باري ۾ وڌيڪ سکو .

ريبوٽ

بهتر ڪراس-براؤزر رينڊرنگ لاءِ، اسان استعمال ڪندا آهيون ريبوٽ کي درست ڪرڻ لاءِ برائوزرن ۽ ڊوائيسز ۾ تضادن کي درست ڪرڻ لاءِ جڏهن ته عام HTML عنصرن کي ٿورو وڌيڪ راءِ رکندڙ ري سيٽ مهيا ڪرڻ.

ڪميونٽي

Bootstrap جي ترقي تي تازه ترين رهو ۽ انهن مددگار وسيلن سان ڪميونٽي تائين پهچ.

  • پڙهو ۽ رڪنيت حاصل ڪريو سرڪاري بوٽ اسٽريپ بلاگ .
  • IRC ۾ ساٿي Bootstrappers سان چيٽ ڪريو. irc.libera.chatسرور تي، چينل #bootstrap۾.
  • لاڳو ڪرڻ ۾ مدد ملي سگھي ٿي Stack Overflow (tagged bootstrap-5).
  • ڊولپرز کي پيڪيجز تي لفظ استعمال ڪرڻ گهرجي bootstrapجيڪي بوٽ اسٽريپ جي ڪارڪردگي ۾ ترميم يا شامل ڪن ٿا جڏهن وڌ ۾ وڌ دريافت ڪرڻ لاءِ npm يا ساڳي ترسيل ميڪانيزم ذريعي ورهائي رهيا آهن.

توهان به فالو ڪري سگهو ٿا @getbootstrap Twitter تي جديد گپ شپ ۽ بهترين ميوزڪ ويڊيوز لاءِ.