in English

تعارف

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

جلدي شروع

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

سي ايس ايس

اسان جي CSS لوڊ ڪرڻ لاءِ اسٽائل شيٽ کي ٻين سڀني اسٽائل شيٽ کان اڳ ۾ ڪاپي پيسٽ <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 ، ۽ اسان جي پنهنجي جاوا اسڪرپٽ پلگ ان جي ضرورت آهي. اسان jQuery جي پتلي تعمير استعمال ڪندا آهيون ، پر مڪمل نسخو پڻ سپورٽ آهي.

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

بنڊل

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

<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>

الڳ

جيڪڏهن توهان الڳ اسڪرپٽ حل سان وڃڻ جو فيصلو ڪيو ٿا، پوپر ضرور اچڻ گهرجي (جيڪڏهن توهان ٽول ٽائپس يا پاپ اوور استعمال ڪري رهيا آهيو)، ۽ پوءِ اسان جا 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، اسان جي جاوا اسڪرپٽ، ۽ پاپپر جي ضرورت آهي؟ ڪلڪ ڪريو اجزاء ڏيکاريو هيٺ ڏنل لنڪ. جيڪڏھن توھان پڪ نه آھيو ته صفحي جي جوڙجڪ بابت، پڙھندا رھو مثال صفحي جي ٽيمپليٽ لاءِ.

جاوا اسڪرپٽ جي ضرورت جا حصا ڏيکاريو
  • برطرف ڪرڻ لاء الرٽ
  • رياستن کي ٽوگل ڪرڻ ۽ چيڪ بڪس/ريڊيو ڪارڪردگي لاءِ بٽڻ
  • ڪارسيل سڀني سلائيڊ رويي، ڪنٽرول، ۽ اشارن لاء
  • ٽوگلنگ مواد جي نمائش لاءِ کوليو
  • ڊسپلي ۽ پوزيشن لاءِ ڊراپ ڊائون ( پوپر جي به ضرورت آهي )
  • ڊسپلي، پوزيشن، ۽ اسڪرول رويي لاء ماڊل
  • جوابي رويي کي لاڳو ڪرڻ لاءِ اسان جي کولڻ واري پلگ ان کي وڌائڻ لاءِ 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, 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 doctype

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

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

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

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

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

توھان ان جو ھڪڙو مثال ڏسي سگھو ٿا عمل ۾ اسٽارٽر ٽيمپليٽ .

دٻي جي ماپ

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-4).
  • ڊولپرز کي پيڪيجز تي لفظ استعمال ڪرڻ گهرجي bootstrapجيڪي بوٽ اسٽريپ جي ڪارڪردگي ۾ ترميم يا شامل ڪن ٿا جڏهن npm ذريعي ورهائي رهيا آهن يا وڌ ۾ وڌ دريافت ڪرڻ لاءِ ساڳي ترسيل ميڪانيزم.

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

CSPs ۽ شامل ڪيل SVGs

بوٽ اسٽريپ جا ڪيترائي حصا شامل آهن شامل ڪيل SVGs اسان جي CSS ۾ اسٽائل اجزاء کي مسلسل ۽ آساني سان برائوزرن ۽ ڊوائيسز تي. وڌيڪ سخت CSP ترتيبن سان تنظيمن لاءِ ، اسان اسان جي ايمبيڊڊ ٿيل SVGs جا سڀ مثال دستاويز ڪيا آهن (جيڪي سڀ استعمال ڪيا ويا آهن background-image) ته جيئن توهان پنهنجي اختيارن جو وڌيڪ چڱيءَ طرح جائزو وٺي سگهو.

ڪميونٽي جي گفتگو جي بنياد تي ، توهان جي پنهنجي ڪوڊ بيس ۾ هن کي حل ڪرڻ لاءِ ڪجهه آپشن شامل آهن URLs کي مقامي طور تي ميزباني ڪيل اثاثن سان تبديل ڪرڻ، تصويرن کي هٽائڻ ۽ ان لائن تصويرون استعمال ڪرڻ (سڀني حصن ۾ ممڪن ناهي)، ۽ توهان جي CSP کي تبديل ڪرڻ. اسان جي سفارش آھي احتياط سان پنھنجي حفاظتي پاليسين جو جائزو وٺو ۽ جيڪڏھن ضروري ھجي ته اڳتي لاءِ بھترين رستو اختيار ڪريو.