بوٽ اسٽراپ سان شروع ڪريو

بوٽ اسٽريپ هڪ طاقتور، خصوصيت سان ڀريل فرنٽ اينڊ ٽول ڪٽ آهي. ڪجھ به ٺاھيو- پروٽوٽائپ کان پيداوار تائين- منٽن ۾.

هن صفحي تي

جلدي شروع

شروع ڪريو بوٽ اسٽريپ جي پيداوار لاءِ تيار ڪيل CSS ۽ JavaScript کي CDN ذريعي بغير ڪنهن تعميراتي قدم جي. ان کي عملي طور تي ڏسو Bootstrap CodePen ڊيمو سان .

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>

Bootstrap جي CSS ۽ JS شامل ڪريو. بند ٿيڻ کان اڳ ۾ اسان جي CSS لاءِ <link>ٽيگ <head>، ۽ <script>اسان جي جاوا اسڪرپٽ بنڊل لاءِ ٽيگ (جنهن ۾ پوپر پوزيشن لاءِ ڊراپ ڊائونز، پاپرز، ۽ ٽول ٽِپس شامل آهن) رکو </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 اسان جي مواد جي صفحي ۾ ڏنل اضافي بلڊز مان حاصل ڪرڻ لاءِ .

ايندڙ قدم

ڪجھ اهم عالمي ماحول جي سيٽنگن بابت ڪجھ وڌيڪ پڙھو جيڪي بوٽ اسٽراپ استعمال ڪن ٿا.
اسان جي مواد جي سيڪشن ۾ Bootstrap ۾ ڇا شامل ڪيو ويو آهي ان بابت پڙهو ۽ هيٺ ڏنل جاوا اسڪرپٽ جي ضرورت رکندڙ اجزاء جي فهرست .
ٿورڙي وڌيڪ طاقت جي ضرورت آهي؟ پئڪيج مئنيجر ذريعي سورس فائلون شامل ڪندي بوٽ اسٽريپ سان تعمير ڪرڻ تي غور ڪريو .
بوٽ اسٽريپ کي ماڊل طور استعمال ڪرڻ لاءِ ڳولي رهيا آهيو <script type="module">؟ مھرباني ڪري اسان جو حوالو ڏيو Bootstrap کي ماڊل سيڪشن طور استعمال ڪندي.

جي ايس اجزاء

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

جاوا اسڪرپٽ جي ضرورت جا حصا ڏيکاريو

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

اهم عالمي

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

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 جي ترقي تي تازه ترين رهو ۽ انهن مددگار وسيلن سان ڪميونٽي تائين پهچ.

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

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