Source

ਜਾਣ-ਪਛਾਣ

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

ਤੇਜ਼ ਸ਼ੁਰੂਆਤ

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

CSS

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

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

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

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

ਭਾਈਚਾਰਾ

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

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

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