ਬੂਟਸਟਰੈਪ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰੋ

ਬੂਟਸਟਰੈਪ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ, ਫੀਚਰ-ਪੈਕ ਫਰੰਟਐਂਡ ਟੂਲਕਿੱਟ ਹੈ। ਕੁਝ ਵੀ ਬਣਾਓ — ਪ੍ਰੋਟੋਟਾਈਪ ਤੋਂ ਲੈ ਕੇ ਉਤਪਾਦਨ ਤੱਕ — ਮਿੰਟਾਂ ਵਿੱਚ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਤੇਜ਼ ਸ਼ੁਰੂਆਤ

ਬੂਟਸਟਰੈਪ ਦੇ ਉਤਪਾਦਨ ਲਈ ਤਿਆਰ CSS ਅਤੇ JavaScript ਨੂੰ CDN ਰਾਹੀਂ ਬਿਨਾਂ ਕਿਸੇ ਬਿਲਡ ਸਟੈਪਸ ਦੀ ਲੋੜ ਦੇ ਸ਼ਾਮਲ ਕਰਕੇ ਸ਼ੁਰੂਆਤ ਕਰੋ। ਇਸ ਨੂੰ ਇਸ ਬੂਟਸਟਰੈਪ ਕੋਡਪੇਨ ਡੈਮੋ ਨਾਲ ਅਭਿਆਸ ਵਿੱਚ ਦੇਖੋ ।

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

ਬੂਟਸਟਰੈਪ ਦੇ CSS ਅਤੇ JS ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ। <link>ਬੰਦ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਟੈਗ <head>ਨੂੰ ਸਾਡੇ CSS ਲਈ, ਅਤੇ <script>ਸਾਡੇ JavaScript ਬੰਡਲ ਲਈ ਟੈਗ (ਪੋਜੀਸ਼ਨਿੰਗ ਡ੍ਰੌਪਡਾਉਨ, ਪੌਪਰ ਅਤੇ ਟੂਲਟਿਪਸ ਲਈ ਪੌਪਰ ਸਮੇਤ) ਵਿੱਚ ਰੱਖੋ </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
CSS	`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 ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ ।

ਅਗਲੇ ਕਦਮ

ਕੁਝ ਮਹੱਤਵਪੂਰਨ ਗਲੋਬਲ ਵਾਤਾਵਰਣ ਸੈਟਿੰਗਾਂ ਬਾਰੇ ਥੋੜਾ ਹੋਰ ਪੜ੍ਹੋ ਜੋ ਬੂਟਸਟਰੈਪ ਵਰਤਦਾ ਹੈ।
ਸਾਡੇ ਸਮੱਗਰੀ ਭਾਗ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕੀ ਸ਼ਾਮਲ ਹੈ ਅਤੇ ਹੇਠਾਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਲੋੜ ਵਾਲੇ ਭਾਗਾਂ ਦੀ ਸੂਚੀ ਬਾਰੇ ਪੜ੍ਹੋ।
ਥੋੜੀ ਹੋਰ ਸ਼ਕਤੀ ਦੀ ਲੋੜ ਹੈ? ਪੈਕੇਜ ਮੈਨੇਜਰ ਰਾਹੀਂ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਕੇ ਬੂਟਸਟਰੈਪ ਨਾਲ ਬਣਾਉਣ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ ।
ਨਾਲ ਇੱਕ ਮੋਡੀਊਲ ਵਜੋਂ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ <script type="module">ਹੋ? ਕਿਰਪਾ ਕਰਕੇ ਸਾਡੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਇੱਕ ਮੋਡੀਊਲ ਸੈਕਸ਼ਨ ਵਜੋਂ ਵਰਤਣਾ ਵੇਖੋ।

ਜੇਐਸ ਕੰਪੋਨੈਂਟ

ਉਤਸੁਕ ਹੈ ਕਿ ਕਿਹੜੇ ਭਾਗਾਂ ਨੂੰ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਸਾਡੀ JavaScript ਅਤੇ ਪੌਪਰ ਦੀ ਲੋੜ ਹੈ? ਹੇਠਾਂ ਸ਼ੋਅ ਕੰਪੋਨੈਂਟ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਜੇ ਤੁਸੀਂ ਆਮ ਪੰਨੇ ਦੀ ਬਣਤਰ ਬਾਰੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਨਿਸ਼ਚਿਤ ਹੋ, ਤਾਂ ਇੱਕ ਉਦਾਹਰਨ ਪੰਨਾ ਟੈਮਪਲੇਟ ਲਈ ਪੜ੍ਹਨਾ ਜਾਰੀ ਰੱਖੋ।

JavaScript ਦੀ ਲੋੜ ਵਾਲੇ ਭਾਗ ਦਿਖਾਓ

ਖਾਰਜ ਕਰਨ ਲਈ ਚੇਤਾਵਨੀਆਂ
ਟੌਗਲ ਕਰਨ ਵਾਲੀਆਂ ਸਥਿਤੀਆਂ ਅਤੇ ਚੈਕਬਾਕਸ/ਰੇਡੀਓ ਕਾਰਜਕੁਸ਼ਲਤਾ ਲਈ ਬਟਨ
ਸਾਰੇ ਸਲਾਈਡ ਵਿਹਾਰਾਂ, ਨਿਯੰਤਰਣਾਂ ਅਤੇ ਸੂਚਕਾਂ ਲਈ ਕੈਰੋਜ਼ਲ
ਸਮੱਗਰੀ ਦੀ ਦਿੱਖ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਸਮੇਟੋ
ਡਿਸਪਲੇਅ ਅਤੇ ਪੋਜੀਸ਼ਨਿੰਗ ਲਈ ਡ੍ਰੌਪਡਾਉਨ ( ਪੋਪਰ ਦੀ ਵੀ ਲੋੜ ਹੈ )
ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ, ਸਥਿਤੀ, ਅਤੇ ਸਕ੍ਰੌਲ ਵਿਵਹਾਰ ਲਈ ਮਾਡਲ
ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਸਾਡੇ ਸੰਕੁਚਿਤ ਅਤੇ ਆਫਕੈਨਵਸ ਪਲੱਗਇਨ ਨੂੰ ਵਧਾਉਣ ਲਈ ਨਵਬਾਰ
ਸਮੱਗਰੀ ਪੈਨਾਂ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਟੈਬ ਪਲੱਗਇਨ ਨਾਲ Navs
ਡਿਸਪਲੇ, ਪੋਜੀਸ਼ਨਿੰਗ, ਅਤੇ ਸਕ੍ਰੌਲ ਵਿਵਹਾਰ ਲਈ ਆਫਕੈਨਵੇਸ
ਸਕ੍ਰੌਲ ਵਿਹਾਰ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਅੱਪਡੇਟ ਲਈ Scrollspy
ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਅਤੇ ਖਾਰਜ ਕਰਨ ਲਈ ਟੋਸਟ
ਡਿਸਪਲੇਅ ਅਤੇ ਪੋਜੀਸ਼ਨਿੰਗ ਲਈ ਟੂਲਟਿਪਸ ਅਤੇ ਪੋਪੋਵਰ ( ਪੋਪਰ ਦੀ ਵੀ ਲੋੜ ਹੈ )

ਮਹੱਤਵਪੂਰਨ ਗਲੋਬਲ

ਬੂਟਸਟਰੈਪ ਮੁੱਠੀ ਭਰ ਮਹੱਤਵਪੂਰਨ ਗਲੋਬਲ ਸਟਾਈਲਾਂ ਅਤੇ ਸੈਟਿੰਗਾਂ ਨੂੰ ਨਿਯੁਕਤ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਸਾਰੇ ਲਗਭਗ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਕ੍ਰਾਸ ਬ੍ਰਾਊਜ਼ਰ ਸਟਾਈਲ ਦੇ ਸਧਾਰਣਕਰਨ ਲਈ ਤਿਆਰ ਹਨ। ਆਓ ਅੰਦਰ ਡੁਬਕੀ ਕਰੀਏ।

HTML5 doctype

ਬੂਟਸਟਰੈਪ ਨੂੰ HTML5 doctype ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੈ। ਇਸਦੇ ਬਿਨਾਂ, ਤੁਸੀਂ ਕੁਝ ਮਜ਼ੇਦਾਰ ਅਤੇ ਅਧੂਰੀ ਸਟਾਈਲਿੰਗ ਦੇਖੋਗੇ।

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

ਜਵਾਬਦੇਹ ਮੈਟਾ ਟੈਗ

ਬੂਟਸਟਰੈਪ ਨੂੰ ਮੋਬਾਈਲ ਪਹਿਲਾਂ ਵਿਕਸਤ ਕੀਤਾ ਗਿਆ ਹੈ , ਇੱਕ ਰਣਨੀਤੀ ਜਿਸ ਵਿੱਚ ਅਸੀਂ ਪਹਿਲਾਂ ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ ਲਈ ਕੋਡ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹਾਂ ਅਤੇ ਫਿਰ CSS ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੋੜ ਅਨੁਸਾਰ ਭਾਗਾਂ ਨੂੰ ਸਕੇਲ ਕਰਦੇ ਹਾਂ। ਸਾਰੀਆਂ ਡਿਵਾਈਸਾਂ ਲਈ ਸਹੀ ਰੈਂਡਰਿੰਗ ਅਤੇ ਟਚ ਜ਼ੂਮਿੰਗ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ, ਆਪਣੇ ਵਿੱਚ ਜਵਾਬਦੇਹ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਸ਼ਾਮਲ ਕਰੋ <head>।

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

ਤੁਸੀਂ ਤੁਰੰਤ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਕਾਰਵਾਈ ਵਿੱਚ ਇਸਦਾ ਇੱਕ ਉਦਾਹਰਣ ਦੇਖ ਸਕਦੇ ਹੋ ।

ਬਾਕਸ-ਆਕਾਰ

CSS ਵਿੱਚ ਵਧੇਰੇ ਸਿੱਧੇ ਆਕਾਰ ਲਈ, ਅਸੀਂ ਗਲੋਬਲ box-sizingਮੁੱਲ ਨੂੰ ਤੋਂ content-boxਵਿੱਚ ਬਦਲਦੇ ਹਾਂ border-box। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ paddingਹੈ ਕਿ ਕਿਸੇ ਤੱਤ ਦੀ ਅੰਤਿਮ ਗਣਨਾ ਕੀਤੀ ਚੌੜਾਈ ਨੂੰ ਪ੍ਰਭਾਵਤ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ Google ਨਕਸ਼ੇ ਅਤੇ Google ਕਸਟਮ ਖੋਜ ਇੰਜਣ ਵਰਗੇ ਕੁਝ ਤੀਜੀ-ਧਿਰ ਸੌਫਟਵੇਅਰ ਨਾਲ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ।

ਦੁਰਲੱਭ ਮੌਕੇ 'ਤੇ ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਹੇਠ ਲਿਖੀਆਂ ਚੀਜ਼ਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ:

.selector-for-some-widget {
  box-sizing: content-box;
}

ਉਪਰੋਕਤ ਸਨਿੱਪਟ ਦੇ ਨਾਲ, ਨੇਸਟਡ ਐਲੀਮੈਂਟਸ — ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੀ ਸਮਗਰੀ ਸਮੇਤ — ::beforeਅਤੇ —ਸਭ ਉਸ ਲਈ ::afterਨਿਸ਼ਚਿਤ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਗੇ ।box-sizing.selector-for-some-widget

CSS ਟ੍ਰਿਕਸ 'ਤੇ ਬਾਕਸ ਮਾਡਲ ਅਤੇ ਆਕਾਰ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ।

ਮੁੜ - ਚਾਲੂ

ਸੁਧਾਰੀ ਹੋਈ ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਰੈਂਡਰਿੰਗ ਲਈ, ਅਸੀਂ ਆਮ HTML ਤੱਤਾਂ ਨੂੰ ਥੋੜ੍ਹੇ ਜ਼ਿਆਦਾ ਵਿਚਾਰ ਵਾਲੇ ਰੀਸੈੱਟ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਅਸੰਗਤਤਾਵਾਂ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ ਰੀਬੂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।

ਭਾਈਚਾਰਾ

ਬੂਟਸਟਰੈਪ ਦੇ ਵਿਕਾਸ 'ਤੇ ਅੱਪ-ਟੂ-ਡੇਟ ਰਹੋ ਅਤੇ ਇਹਨਾਂ ਮਦਦਗਾਰ ਸਰੋਤਾਂ ਨਾਲ ਭਾਈਚਾਰੇ ਤੱਕ ਪਹੁੰਚੋ।

ਅਧਿਕਾਰਤ ਬੂਟਸਟਰੈਪ ਬਲੌਗ ਨੂੰ ਪੜ੍ਹੋ ਅਤੇ ਗਾਹਕ ਬਣੋ ।
ਸਾਡੇ GitHub ਚਰਚਾਵਾਂ ਨੂੰ ਪੁੱਛੋ ਅਤੇ ਪੜਚੋਲ ਕਰੋ ।
IRC ਵਿੱਚ ਸਾਥੀ ਬੂਟਸਟਰੈਪਰਾਂ ਨਾਲ ਗੱਲਬਾਤ ਕਰੋ। irc.libera.chatਸਰਵਰ ਉੱਤੇ, ਚੈਨਲ #bootstrapਵਿੱਚ।
ਸਟੈਕ ਓਵਰਫਲੋ (ਟੈਗ ਕੀਤੇ) 'ਤੇ ਲਾਗੂ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲ ਸਕਦੀ ਹੈ bootstrap-5।
ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਪੈਕੇਜਾਂ 'ਤੇ ਕੀਵਰਡ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਜੋ ਵੱਧ ਤੋਂ ਵੱਧ ਖੋਜਯੋਗਤਾ ਲਈ npm ਜਾਂ ਸਮਾਨ ਡਿਲੀਵਰੀ ਵਿਧੀ bootstrapਰਾਹੀਂ ਵੰਡਣ ਵੇਲੇ ਬੂਟਸਟਰੈਪ ਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਜਾਂ ਜੋੜਦੇ ਹਨ ।

ਤੁਸੀਂ ਨਵੀਨਤਮ ਗੱਪਾਂ ਅਤੇ ਸ਼ਾਨਦਾਰ ਸੰਗੀਤ ਵੀਡੀਓਜ਼ ਲਈ ਟਵਿੱਟਰ 'ਤੇ @getbootstrap ਨੂੰ ਵੀ ਫਾਲੋ ਕਰ ਸਕਦੇ ਹੋ ।