بوت اسپرینگ 5 انٹری

ਕੀ Bootstrap ਕੀ ਹੈ?

  • Bootstrap ਇੱਕ ਮੁਫਤ ਫਰੰਟ-ਐਂਡ ਫਰੇਮਵਰਕ ਹੈ ਜੋ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਨੂੰ ਤੇਜ਼ ਅਤੇ ਸਹੂਲਤ ਬਣਾਉਂਦਾ ਹੈ
  • Bootstrap ਹਮੇਸ਼ਾ ਐੱਚਟੀਐੱਮਐੱਲ ਅਤੇ ਸਿਐਸਐੱਸ ਅਧਾਰਿਤ ਡਿਜਾਇਨ ਟੈਮਪਲੇਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਪ੍ਰਿੰਟਿੰਗ, ਫਾਰਮ, ਬਟਨ, ਟੇਬਲ, ਨੇਵੀਗੇਸ਼ਨ, ਮੋਡਲ, ਇੰਗਰੀਜ਼ ਕ੍ਰਾਸਲ ਅਤੇ ਹੋਰਾਂ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ
  • Bootstrap ਨੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨਾਂ ਦਾ ਵਿਸ਼ਾਲ ਸੈਕਟਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਹੈ
  • Bootstrap ਤੁਹਾਨੂੰ ਸਹੂਲਤ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਡਿਜਾਇਨ ਬਣਾਉਣ ਦਾ ਮੌਕਾ ਦਿੰਦਾ ਹੈ

ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਵੈੱਬ ਡਿਜਾਇਨ ਕੀ ਹੈ?

ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਵੈੱਬ ਡਿਜਾਇਨ ਇਕ ਐਜ਼-ਟੂ-ਐਕਸਪੋਰਟ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣ ਦਾ ਇਰਾਦਾ ਹੈ ਜੋ ਸਾਰੇ ਉਪਕਰਣਾਂ 'ਤੇ ਉਪਯੋਗ ਕਰਨ ਦੀ ਅਨੁਭਵ ਨੂੰ ਸਹੂਲਤ ਬਣਾਉਂਦਾ ਹੈ, ਚਾਹੇ ਇੱਕ ਮੋਬਾਈਲ ਫੋਨ ਹੋਵੇ ਜਾਂ ਵੱਡਾ ਮੌਜੂਦਾ ਕੰਪਿਊਟਰ

Bootstrap 5 ਇੱਕ ਮਿਸ਼ਾਲ ਹੈ

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>ਮੇਰਾ ਪਹਿਲਾ ਬੁੱਟਸਟ੍ਰੈਪ ਪੰਨਾ</h1>
</div>


  

    <div class="col-sm-4">
      <h3>ਕੋਲਮ 1: ਸਰਦੀ</h3>
      <p>ਬਹੁਤ ਅਸਾਨੀ ਨਾਲ ਮੌਸਮ ਦੇ ਪਾਣੀ ਦੇ ਕਿਨਾਰੇ ਦੇ ਸਾਹਮਣੇ ਪੁੰਨ ਹੋਇਆ, ਬਿਨਾਂ ਸੀਮਾ ਦੇ ਰੰਗਾਂ ਦਾ ਨਵਾਂ ਸਮਾਂ ਹੈ。</p>
      <p>ਆਸਾਨੀ ਨਾਲ ਪੂਰਬੀ ਰੁਝਾਨ ਦੀ ਜਾਣਕਾਰੀ ਲੈਂਦੇ ਹਨ, ਹਜ਼ਾਰਾਂ ਰੰਗ ਅਤੇ ਸ਼੍ਰੇਸ਼ਠ ਸਰਦੀਆਂ ਹਨ。</p>
    </div>
    <div class="col-sm-4">
      <h3>ਕੋਲਮ 2: ਮੁੰਦਰਾ ਰਿਫਾਈ</h3>
      <p>ਸਾਰੇ ਲਾਲ ਅਤੇ ਪੁਰੂਪ ਪੁੱਰਾ ਧੂੜ ਬਣ ਗਏ ਹਨ, ਗੁਸਾਰੀ ਵਿੱਚ ਗਰਮਾਂ ਦਾ ਨਵਾਂ ਸੀਜਨ ਹੈ।</p>
      <p>ਸਾਲਾਨਾ ਸਾਂਬਰ ਅਤੇ ਮਸ਼ਰੂਮ ਕੁਝ ਨਹੀਂ ਰਹਿ ਜਾਂਦੇ, ਮੈਂ ਸ਼ਾਂਤੀਮਾਨ ਹਾਂ ਵਾਲੇ ਲੋਕ ਹਾਂ。</p>
    </div>
    <div class="col-sm-4">
      <h3>ਕੋਲਮ 3: ਸ਼ਾਨ</h3>
      <p>ਦੂਰ ਸ਼ਿਵਾਲ ਕੇ ਪੱਥਰ ਦਾ ਰਸਤਾ ਚੀਕਡਾ ਹੈ, ਮੇਘ ਦੇ ਜਗ੍ਹ ਨੂੰ ਕੋਈ ਘਰ ਹੈ।</p>
      <p>ਪਾਰਕ ਸਿਟ ਫੰਗ ਲਿਨ ਵਾਲ ਨਾਲ, ਮੌਸਮ ਦੇ ਫੁੱਲਾਂ ਨਾਲ ਰੰਗ ਵੱਧ ਰਹੇ ਹਨ。</p>
    </div>
  </div>
</div>

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

Bootstrap ਸੰਸਕਰਣ

Bootstrap 5 (2021 ਵਿੱਚ ਜਾਰੀ) ਬੋਸਟਰੈਪ ਦੀ ਨਵੀਂਆਂ ਸੰਸਕਰਣ (2013 ਵਿੱਚ ਜਾਰੀ) ਹੈ; ਨਵੇਂ ਕੰਪੋਨੈਂਟਾਂ, ਤੇਜ਼ ਸਟਾਈਲ ਸ਼ੇਅਰਾਂ ਦੇ ਨਾਲ ਤੇਜ਼ ਜਵਾਬਦੇਹੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ。

Bootstrap 5 ਸਾਰੇ ਪ੍ਰਮੁੱਖ ਬਰਾਉਜ਼ਰਾਂ ਅਤੇ ਪਲੇਟਫਾਰਮਾਂ ਦੀਆਂ ਨਵੀਂਆਂ ਸਥਾਈ ਆਈਡੀਜ਼ ਨੂੰ ਸਮਰਥਾਂ ਦਿੰਦਾ ਹੈ। ਪਰ ਉਹ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 11 ਜਾਂ ਉਸ ਤੋਂ ਪੁਰਾਣੇ ਦੀ ਸਮਰੱਥਾ ਨਹੀਂ ਦਿੰਦਾ ਹੈ。

Bootstrap 5 ਅਤੇ Bootstrap 3 & 4 ਦਰਮਿਆਨ ਮੁੱਖ ਅੰਤਰ ਇਹ ਹੈ ਕਿ Bootstrap 5 ਵਾਨਿਲਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਨਾਲ ਹੀ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਨਹੀਂ ਹੈ。

ਟਿੱਪਣੀ:ਉਸ ਦੀ ਟੀਮ ਬੋਸਟਰੈਪ 3 ਅਤੇ ਬੋਸਟਰੈਪ 4 ਦੇ ਕੇਂਦਰੀ ਗਲਤੀ ਸਮਾਧਾਨ ਅਤੇ ਦਸਤਾਵੇਜ਼ ਤਬਦੀਲੀਆਂ ਦੀ ਮਦਦ ਕਰਦੀ ਹੈ, ਉਨ੍ਹਾਂ ਨੂੰ ਜਾਰੀ ਰੱਖਣਾ ਸੁਰੱਖਿਅਤ ਹੈ। ਪਰ ਉਸ ਵਿੱਚ ਕੋਈ ਨਵੀਂ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜੀ ਨਹੀਂ ਜਾਵੇਗੀ。

ਬੋਸਟਰੈਪ ਕਿਉਂ ਵਰਤਣਾ ਹੈ?

Bootstrap ਦੇ ਲਾਭ:

  • ਅਸਾਨ ਵਰਤੋਂ:ਕੋਈ ਵੀ ਹੈਲਪ ਲੈਣ ਨਾਲ ਹੀ ਹੈਲਪ ਦੇ ਪ੍ਰਿੰਟ ਅਤੇ ਸਿਸਟਮ ਨਾਲ ਹੈਲਪ ਲੈਣ ਵਾਲਾ ਕਿਸੇ ਵੀ ਵਿਅਕਤੀ ਨੂੰ ਬੋਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਆਗਿਆ ਹੈ
  • ਰੈਸਪੋਨਸਿਵ ਵਿਸ਼ੇਸ਼ਤਾ:Bootstrap ਦੀ ਰੈਸਪੋਨਸਿਵ ਸੀਐੱਸਐੱਸ ਮੋਬਾਇਲ, ਟੇਬਲੇਟ ਅਤੇ ਡੈਸਕਟਾਪ ਲਈ ਸਬੰਧਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ
  • ਮੋਬਾਇਲ ਪਹਿਲ ਤਰੀਕਾ:Bootstrap ਵਿੱਚ, ਮੋਬਾਇਲ ਪਹਿਲ ਸਟਾਈਲ ਉਸ ਦੇ ਮੁੱਖ ਫਰੇਮਵਰਕ ਦਾ ਹਿੱਸਾ ਹੈ
  • ਬਰਾਉਜ਼ਰ ਸਮਾਯੋਜਨ:Bootstrap 5 ਸਾਰੇ ਆਧੁਨਿਕ ਬਰਾਉਜ਼ਰਾਂ (ਚਰੋਮ, ਫਾਇਰਫਾਕਸ, ਐਜ਼ੀਊਮ, ਸਫਾਰੀ ਅਤੇ ਓਪਰਾ) ਨਾਲ ਸਮਾਯੋਜਨੀ ਕਰਦਾ ਹੈ。

ਧਿਆਨ:ਅਗਰ ਤੁਸੀਂ IE11 ਜਾਂ ਉਸ ਤੋਂ ਘੱਟ ਦੀ ਸਮਰੱਥਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ BS4 ਜਾਂ BS3 ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੋਵੇਗਾ。

Bootstrap 5 ਕਿੱਥੇ ਮਿਲਦਾ ਹੈ?

ਤੁਹਾਡੇ ਆਪਣੇ ਵੈੱਬਸਾਈਟ 'ਤੇ Bootstrap 5 ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਦੋ ਤਰੀਕੇ ਹਨ。

ਤੁਸੀਂ ਇਹ ਕਰ ਸਕਦੇ ਹੋ

  • CDN سے بجلی Bootstrap 5 شامل کیا گیا
  • getbootstrap.com سے Bootstrap 5 ڈاؤن لوڈ کریں

Bootstrap 5 CDN

اگر آپ خود بخود Download اور میزبانی نہیں کرنا چاہئیں تو وہ CDN (محتوائی تحویل نیٹ ورک) سے اس کا حوالہ دیکھ سکتے ہیں.

CodeW3C.com نے Bootstrap کا سی ایس ایس اور جاوا اسکریپٹ کا CDN سپورٹ فراہم کردیا:

MaxCDN:

<!-- نئی طور پر کامپائل اور کمپرس کی گئی سی ایس ایس -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- نئی طور پر کامپائل شدہ جاوا اسکریپٹ -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Bootstrap 5 CDN کا استعمال کریں تو اس کا فائدہ ایک ہے:

بہت سارے استعمال کنندگان جب ان کا ایک دوسرے پتہ پر آنے کی کوشش کرتے ہیں تو پہلے سے jsDelivr سے Bootstrap 5 ڈاؤن لوڈ کردیں گے لہذا جب وہ آپ کا پتہ دیکھتے ہیں تو وہ کچھ سے بچتی ہیں اور لوڈنگ کا وقت کم ہوتا ہے، علاوہ ازیں زیادہ تر CDN آپ کا فائل لوڈ کردیں گے جو ان کے نزدیک سے سب سے قریب سرور سے آئیں گے جس کی وجہ سے لوڈنگ کا وقت کم ہوتا ہے.

جاوا اسکریپٹ؟

Bootstrap 5 جس میں متعدد کامپوننٹ (مثلاً مودل، تیپ، پاپ اپ وغیرہ) کا استعمال کردا ہے جس میں جاوا اسکریپٹ استعمال کیا جاتا ہے لیکن اگر آپ صرف CSS حصہ استعمال کرتے ہیں تو ان کو استعمال نہیں کریں.

Bootstrap 5 کا Download

اگر آپ خود بخود Download اور میزبانی کرنا چاہئیں تو پرسیدار آپ کا لائنک پتہ دیکھیں https://getbootstrap.com/، بعد ازاں وہاں کی نکات کے مطابق کارروائی کریں.

Bootstrap 5 کا استعمال سے اپنے پہلے پیج بنائیں

1. HTML5 دستاویز نوعیت کا شامل کریں

Bootstrap 5 HTML عناصر اور CSS پرزنسیپوں کو استعمال کرتا ہے جو HTML5 doctype کا چاہئیے.

پہلے صفحے میں ہمیشہ HTML5 doctype شامل کریں، اور lang پرزنسیپ اور صحیح عنوان اور نارنجی کا شامل کریں:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 مثال</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 موبائل پر پہلے

Bootstrap 5 کا ڈیزائن کا مقصد ریسپانسیو موبائل ڈیوائسز ہے۔ موبائل پر پہلے کا استایل بجلی فریم ورک کا حصہ ہے.

تقریباً صحیح نمائش اور تاچ زوم کے لئے، مندرج کریں <head> عناصر کے اندر مندرج کریں <meta> تگ:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width صفحه کی چوڑائی کو سے مشابہ کیا جاتا ہے جس کی چوڑائی مشابہ سکرین-ویڈتھ (جس کا پتہ مشابہ سائٹ کی طرح چلے گا) سے ہوگا.

initial-scale=1 صفحه کی شروعاتی زوم کی سطح کو سیٹ کردا ہے جب براوزر پہلی بار پیج لوڈ کردا ہے.

3. کنٹینر

Bootstrap 5 5 کا نیاچارا ایک عناصر کا شامل کرنا چاہئی جس سے سائٹ کا مواد پکھایا جاسکے.

ਦੋ ਕੰਟੇਨਰ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਚੁਣਨਾ ਹੈ:

  1. .container ਕਲਾਸ ਮੁਲਤਵੀ ਚੌਡਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ
  2. .container-fluid ਕਲਾਸ ਇੱਕ ਪੂਰੀ ਚੌਡਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ

ਦੋ ਬੁੱਟਸਟ੍ਰੈਪ 5 ਬੁਨਿਆਦੀ ਪੰਨੇ

container ਮਾਡਲ

ਹੇਠ ਦਿੱਤਾ ਹੈ ਬੁੱਟਸਟ੍ਰੈਪ 5 ਬੁਨਿਆਦੀ ਪੰਨੇ (ਮੁਲਤਵੀ ਚੌਡਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਵਾਲੇ) ਦੇ ਕੋਡ ਦਾ ਪ੍ਰਦਰਸ਼ਨ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap ਮਾਡਲ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>ਮੇਰਾ ਪਹਿਲਾ ਬੁੱਟਸਟ੍ਰੈਪ ਪੰਨਾ</h1>
  <p>ਇਹ ਹਿੱਸਾ .container ਕਲਾਸ ਵਿੱਚ ਹੈ。</p>
  <p>.container ਕਲਾਸ ਮੁਲਤਵੀ ਚੌਡਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ。</p>
</div>
</body>
</html>

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

Container Fluid ਮਾਡਲ

ਹੇਠ ਦਿੱਤਾ ਹੈ ਬੁੱਟਸਟ੍ਰੈਪ 5 ਬੁਨਿਆਦੀ ਪੰਨੇ (ਪੂਰੀ ਚੌਡਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਵਾਲੇ) ਦੇ ਕੋਡ ਦਾ ਪ੍ਰਦਰਸ਼ਨ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap ਮਾਡਲ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>ਮੇਰਾ ਪਹਿਲਾ ਬੁੱਟਸਟ੍ਰੈਪ ਪੰਨਾ</h1>
  <p>ਇਹ ਹਿੱਸਾ .container-fluid ਕਲਾਸ ਵਿੱਚ ਹੈ。</p>
  <p>.container-fluid ਕਲਾਸ ਪੂਰੀ ਚੌਡਾਈ ਵਾਲੇ ਕੰਟੇਨਰ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ, ਜੋ ਦ੍ਰਿਸ਼ ਦੀ ਪੂਰੀ ਚੌਡਾਈ ਨੂੰ ਕਵਰ ਕਰਦੀ ਹੈ。</p>
</div>
</body>
</html>

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ