Source

تعارف

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

جلدي شروع

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

سي ايس ايس

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

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

جي ايس

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

اسان jQuery جي پتلي تعمير استعمال ڪندا آهيون ، پر مڪمل نسخو پڻ سپورٽ آهي.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

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

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

پڪ ڪريو ته توهان جا صفحا جديد ڊيزائن ۽ ترقي جي معيار سان ترتيب ڏنل آهن. ان جو مطلب آهي هڪ 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 جي ترقي تي تازه ترين رهو ۽ انهن مددگار وسيلن سان ڪميونٽي تائين پهچ.

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

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