in English

ਜਾਣ-ਪਛਾਣ

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

ਤੇਜ਼ ਸ਼ੁਰੂਆਤ

ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ? jsDelivr ਦੀ ਵਰਤੋਂ ਕਰੋ, ਇੱਕ ਮੁਫਤ ਓਪਨ ਸੋਰਸ CDN। ਇੱਕ ਪੈਕੇਜ ਮੈਨੇਜਰ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਹੈ? ਡਾਉਨਲੋਡਸ ਪੰਨੇ 'ਤੇ ਜਾਓ ।

CSS

ਸਾਡੀ 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 , ਅਤੇ ਸਾਡੇ ਆਪਣੇ JavaScript ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਅਸੀਂ jQuery ਦੇ ਪਤਲੇ ਬਿਲਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ , ਪਰ ਪੂਰਾ ਸੰਸਕਰਣ ਵੀ ਸਮਰਥਿਤ ਹੈ।

ਇਹਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਨੂੰ<script> ਆਪਣੇ ਪੰਨਿਆਂ ਦੇ ਅੰਤ ਦੇ ਨੇੜੇ, ਬੰਦ ਕਰਨ ਵਾਲੇ ਟੈਗ ਤੋਂ ਠੀਕ ਪਹਿਲਾਂ ,</body> ਉਹਨਾਂ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਰੱਖੋ । jQuery ਪਹਿਲਾਂ ਆਉਣੀ ਚਾਹੀਦੀ ਹੈ, ਫਿਰ ਪੌਪਰ, ਅਤੇ ਫਿਰ ਸਾਡੇ JavaScript ਪਲੱਗਇਨ।

ਬੰਡਲ

ਸਾਡੇ ਦੋ ਬੰਡਲਾਂ ਵਿੱਚੋਂ ਇੱਕ ਨਾਲ ਹਰੇਕ ਬੂਟਸਟਰੈਪ JavaScript ਪਲੱਗਇਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ। ਦੋਵੇਂ bootstrap.bundle.jsਅਤੇ ਸਾਡੇ ਟੂਲਟਿਪਸ ਅਤੇ ਪੋਪੋਵਰਾਂ ਲਈ ਪੋਪਰbootstrap.bundle.min.js ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ , ਪਰ jQuery ਨਹੀਂ । ਪਹਿਲਾਂ jQuery, ਫਿਰ ਇੱਕ Bootstrap 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/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, ਸਾਡੀ JavaScript, ਅਤੇ Popper ਦੀ ਲੋੜ ਹੈ? ਹੇਠਾਂ ਸ਼ੋਅ ਕੰਪੋਨੈਂਟ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਪੰਨੇ ਦੀ ਬਣਤਰ ਬਾਰੇ ਯਕੀਨੀ ਨਹੀਂ ਹੋ, ਤਾਂ ਇੱਕ ਉਦਾਹਰਨ ਪੰਨਾ ਟੈਮਪਲੇਟ ਲਈ ਪੜ੍ਹਦੇ ਰਹੋ।

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

ਸਟਾਰਟਰ ਟੈਮਪਲੇਟ

ਆਪਣੇ ਪੰਨਿਆਂ ਨੂੰ ਨਵੀਨਤਮ ਡਿਜ਼ਾਈਨ ਅਤੇ ਵਿਕਾਸ ਮਾਪਦੰਡਾਂ ਨਾਲ ਸਥਾਪਤ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇੱਕ 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>

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

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

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

ਤੁਸੀਂ ਸਟਾਰਟਰ ਟੈਂਪਲੇਟ ਵਿੱਚ ਇਸਦੀ ਇੱਕ ਉਦਾਹਰਨ ਦੇਖ ਸਕਦੇ ਹੋ ।

ਬਾਕਸ-ਆਕਾਰ

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 ਤੱਤਾਂ ਨੂੰ ਥੋੜ੍ਹੇ ਜ਼ਿਆਦਾ ਵਿਚਾਰ ਵਾਲੇ ਰੀਸੈੱਟ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਅਸੰਗਤਤਾਵਾਂ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ ਰੀਬੂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।

ਭਾਈਚਾਰਾ

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

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

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

CSPs ਅਤੇ ਏਮਬੈਡਡ SVGs

ਕਈ ਬੂਟਸਟਰੈਪ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਲਗਾਤਾਰ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਸਟਾਈਲ ਕੰਪੋਨੈਂਟਾਂ ਲਈ ਸਾਡੇ CSS ਵਿੱਚ ਏਮਬੈਡ ਕੀਤੇ SVG ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ। ਵਧੇਰੇ ਸਖ਼ਤ CSP ਸੰਰਚਨਾਵਾਂ ਵਾਲੇ ਸੰਗਠਨਾਂ ਲਈ , ਅਸੀਂ ਸਾਡੇ ਏਮਬੇਡ ਕੀਤੇ SVGs ਦੀਆਂ ਸਾਰੀਆਂ ਉਦਾਹਰਣਾਂ ਦਾ ਦਸਤਾਵੇਜ਼ੀਕਰਨ ਕੀਤਾ ਹੈ (ਜਿਨ੍ਹਾਂ ਵਿੱਚੋਂ ਸਾਰੀਆਂ ਨੂੰ ਦੁਆਰਾ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ background-image) ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਵਿਕਲਪਾਂ ਦੀ ਹੋਰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਮੀਖਿਆ ਕਰ ਸਕੋ।

ਕਮਿਊਨਿਟੀ ਗੱਲਬਾਤ ਦੇ ਆਧਾਰ 'ਤੇ , ਤੁਹਾਡੇ ਆਪਣੇ ਕੋਡਬੇਸ ਵਿੱਚ ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਕੁਝ ਵਿਕਲਪਾਂ ਵਿੱਚ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਹੋਸਟ ਕੀਤੀਆਂ ਸੰਪਤੀਆਂ ਨਾਲ URL ਨੂੰ ਬਦਲਣਾ, ਚਿੱਤਰਾਂ ਨੂੰ ਹਟਾਉਣਾ ਅਤੇ ਇਨਲਾਈਨ ਚਿੱਤਰਾਂ (ਸਾਰੇ ਭਾਗਾਂ ਵਿੱਚ ਸੰਭਵ ਨਹੀਂ) ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਅਤੇ ਤੁਹਾਡੇ CSP ਨੂੰ ਸੋਧਣਾ ਸ਼ਾਮਲ ਹੈ। ਸਾਡੀ ਸਿਫ਼ਾਰਸ਼ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੀਆਂ ਸੁਰੱਖਿਆ ਨੀਤੀਆਂ ਦੀ ਸਾਵਧਾਨੀ ਨਾਲ ਸਮੀਖਿਆ ਕਰੋ ਅਤੇ ਲੋੜ ਪੈਣ 'ਤੇ ਅੱਗੇ ਵਧਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਮਾਰਗ ਤੈਅ ਕਰੋ।