Source

ಪರಿಚಯ

JsDelivr ಮತ್ತು ಟೆಂಪ್ಲೇಟ್ ಸ್ಟಾರ್ಟರ್ ಪುಟದೊಂದಿಗೆ ಸ್ಪಂದಿಸುವ, ಮೊಬೈಲ್-ಮೊದಲ ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ವಿಶ್ವದ ಅತ್ಯಂತ ಜನಪ್ರಿಯ ಚೌಕಟ್ಟಾದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ.

ತ್ವರಿತ ಆರಂಭ

ನಿಮ್ಮ ಯೋಜನೆಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ತ್ವರಿತವಾಗಿ ಸೇರಿಸಲು ನೋಡುತ್ತಿರುವಿರಾ? jsDelivr ನಲ್ಲಿ ಜನರಿಂದ ಉಚಿತವಾಗಿ ಒದಗಿಸಲಾದ jsDelivr ಅನ್ನು ಬಳಸಿ. ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಾ ಅಥವಾ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಬೇಕೆ? ಡೌನ್‌ಲೋಡ್‌ಗಳ ಪುಟಕ್ಕೆ ಹೋಗಿ .

CSS

ನಮ್ಮ CSS ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ಎಲ್ಲಾ ಇತರ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳ ಮೊದಲು <link>ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ನಕಲಿಸಿ-ಅಂಟಿಸಿ .<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

ನಮ್ಮ ಅನೇಕ ಘಟಕಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ನಿರ್ದಿಷ್ಟವಾಗಿ, ಅವರಿಗೆ jQuery , Popper.js , ಮತ್ತು ನಮ್ಮದೇ ಆದ JavaScript ಪ್ಲಗಿನ್‌ಗಳ ಅಗತ್ಯವಿರುತ್ತದೆ. ಅವುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು <script>ಮುಚ್ಚುವ ಟ್ಯಾಗ್‌ನ ಮೊದಲು ನಿಮ್ಮ ಪುಟಗಳ ಕೊನೆಯಲ್ಲಿ ಈ ಕೆಳಗಿನ ಗಳನ್ನು ಇರಿಸಿ . </body>jQuery ಮೊದಲು ಬರಬೇಕು, ನಂತರ Popper.js, ಮತ್ತು ನಂತರ ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ಗಳು.

ನಾವು jQuery ನ ಸ್ಲಿಮ್ ಬಿಲ್ಡ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ , ಆದರೆ ಪೂರ್ಣ ಆವೃತ್ತಿಯನ್ನು ಸಹ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

ಯಾವ ಘಟಕಗಳಿಗೆ ಸ್ಪಷ್ಟವಾಗಿ jQuery, ನಮ್ಮ JS ಮತ್ತು Popper.js ಅಗತ್ಯವಿರುತ್ತದೆ ಎಂಬ ಕುತೂಹಲವಿದೆಯೇ? ಕೆಳಗಿನ ಶೋ ಕಾಂಪೊನೆಂಟ್ಸ್ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ. ಸಾಮಾನ್ಯ ಪುಟ ರಚನೆಯ ಬಗ್ಗೆ ನಿಮಗೆ ಖಚಿತವಿಲ್ಲದಿದ್ದರೆ, ಉದಾಹರಣೆ ಪುಟ ಟೆಂಪ್ಲೇಟ್‌ಗಾಗಿ ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.

ನಮ್ಮ bootstrap.bundle.jsಮತ್ತು ಪಾಪ್ಪರ್ ಅನ್ನುbootstrap.bundle.min.js ಒಳಗೊಂಡಿದೆ , ಆದರೆ jQuery ಅಲ್ಲ . ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಏನನ್ನು ಸೇರಿಸಲಾಗಿದೆ ಎಂಬುದರ ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ, ದಯವಿಟ್ಟು ನಮ್ಮ ವಿಷಯಗಳ ವಿಭಾಗವನ್ನು ನೋಡಿ.

JavaScript ಅಗತ್ಯವಿರುವ ಘಟಕಗಳನ್ನು ತೋರಿಸಿ
  • ವಜಾಗೊಳಿಸುವುದಕ್ಕಾಗಿ ಎಚ್ಚರಿಕೆಗಳು
  • ಟಾಗಲ್ ಸ್ಟೇಟ್ಸ್ ಮತ್ತು ಚೆಕ್‌ಬಾಕ್ಸ್/ರೇಡಿಯೋ ಕಾರ್ಯನಿರ್ವಹಣೆಗಾಗಿ ಬಟನ್‌ಗಳು
  • ಎಲ್ಲಾ ಸ್ಲೈಡ್ ನಡವಳಿಕೆಗಳು, ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸೂಚಕಗಳಿಗೆ ಏರಿಳಿಕೆ
  • ವಿಷಯದ ಗೋಚರತೆಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಸಂಕುಚಿಸಿ
  • ಪ್ರದರ್ಶಿಸಲು ಮತ್ತು ಸ್ಥಾನಕ್ಕಾಗಿ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ( Popper.js ಸಹ ಅಗತ್ಯವಿದೆ )
  • ಪ್ರದರ್ಶನ, ಸ್ಥಾನೀಕರಣ ಮತ್ತು ಸ್ಕ್ರಾಲ್ ನಡವಳಿಕೆಗಾಗಿ ಮಾದರಿಗಳು
  • ಸ್ಪಂದಿಸುವ ನಡವಳಿಕೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಮ್ಮ ಸಂಕುಚಿಸಿ ಪ್ಲಗಿನ್ ಅನ್ನು ವಿಸ್ತರಿಸಲು Navbar
  • ಡಿಸ್‌ಪ್ಲೇ ಮಾಡಲು ಮತ್ತು ಪೊಸಿಷನಿಂಗ್‌ಗಾಗಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪೋವರ್‌ಗಳು (ಸಹ 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-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

ಒಟ್ಟಾರೆ ಪುಟದ ಅವಶ್ಯಕತೆಗಳಿಗಾಗಿ ನಿಮಗೆ ಬೇಕಾಗಿರುವುದು ಅಷ್ಟೆ. ನಿಮ್ಮ ಸೈಟ್‌ನ ವಿಷಯ ಮತ್ತು ಘಟಕಗಳನ್ನು ಲೇಔಟ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಲು ಲೇಔಟ್ ಡಾಕ್ಸ್ ಅಥವಾ ನಮ್ಮ ಅಧಿಕೃತ ಉದಾಹರಣೆಗಳನ್ನು ಭೇಟಿ ಮಾಡಿ .

ಪ್ರಮುಖ ಜಾಗತಿಕಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬೆರಳೆಣಿಕೆಯಷ್ಟು ಪ್ರಮುಖ ಜಾಗತಿಕ ಶೈಲಿಗಳು ಮತ್ತು ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ, ಅದನ್ನು ಬಳಸುವಾಗ ನೀವು ತಿಳಿದಿರಲೇಬೇಕು, ಇವೆಲ್ಲವೂ ಬಹುತೇಕ ಪ್ರತ್ಯೇಕವಾಗಿ ಕ್ರಾಸ್ ಬ್ರೌಸರ್ ಶೈಲಿಗಳ ಸಾಮಾನ್ಯೀಕರಣಕ್ಕೆ ಸಜ್ಜಾಗಿದೆ. ಒಳಗೆ ಧುಮುಕೋಣ.

HTML5 ಡಾಕ್ಟಿಪ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗೆ HTML5 ಡಾಕ್ಟೈಪ್‌ನ ಬಳಕೆಯ ಅಗತ್ಯವಿದೆ. ಇದು ಇಲ್ಲದೆ, ನೀವು ಕೆಲವು ಮೋಜಿನ ಅಪೂರ್ಣ ಶೈಲಿಯನ್ನು ನೋಡುತ್ತೀರಿ, ಆದರೆ ಅದು ಸೇರಿದಂತೆ ಯಾವುದೇ ಗಮನಾರ್ಹವಾದ ಬಿಕ್ಕಳಿಕೆಗಳನ್ನು ಉಂಟುಮಾಡಬಾರದು.

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

ರೆಸ್ಪಾನ್ಸಿವ್ ಮೆಟಾ ಟ್ಯಾಗ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮೊದಲು ಮೊಬೈಲ್ ಅನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲಾಗಿದೆ , ಇದರಲ್ಲಿ ನಾವು ಮೊದಲು ಮೊಬೈಲ್ ಸಾಧನಗಳಿಗೆ ಕೋಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ತಂತ್ರವಾಗಿದೆ ಮತ್ತು ನಂತರ CSS ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅಗತ್ಯವಿರುವ ಘಟಕಗಳನ್ನು ಅಳೆಯುತ್ತೇವೆ. ಎಲ್ಲಾ ಸಾಧನಗಳಿಗೆ ಸರಿಯಾದ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಟಚ್ ಝೂಮ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನಿಮ್ಮ ಗೆ ಸ್ಪಂದಿಸುವ ವ್ಯೂಪೋರ್ಟ್ ಮೆಟಾ ಟ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸಿ <head>.

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

ಸ್ಟಾರ್ಟರ್ ಟೆಂಪ್ಲೇಟ್‌ನಲ್ಲಿ ನೀವು ಇದರ ಉದಾಹರಣೆಯನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಬಹುದು .

ಬಾಕ್ಸ್ ಗಾತ್ರ

box-sizingCSS ನಲ್ಲಿ ಹೆಚ್ಚು ನೇರವಾದ ಗಾತ್ರಕ್ಕಾಗಿ, ನಾವು ಜಾಗತಿಕ ಮೌಲ್ಯವನ್ನು 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 ಅಂಶಗಳಿಗೆ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಅಭಿಪ್ರಾಯದ ಮರುಹೊಂದಿಕೆಗಳನ್ನು ಒದಗಿಸುವಾಗ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಾದ್ಯಂತ ಅಸಂಗತತೆಯನ್ನು ಸರಿಪಡಿಸಲು ನಾವು ರೀಬೂಟ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

ಸಮುದಾಯ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಅಭಿವೃದ್ಧಿಯ ಕುರಿತು ನವೀಕೃತವಾಗಿರಿ ಮತ್ತು ಈ ಸಹಾಯಕ ಸಂಪನ್ಮೂಲಗಳೊಂದಿಗೆ ಸಮುದಾಯವನ್ನು ತಲುಪಿ.

  • Twitter ನಲ್ಲಿ @getbootstrap ಅನ್ನು ಅನುಸರಿಸಿ .
  • ಅಧಿಕೃತ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬ್ಲಾಗ್ ಅನ್ನು ಓದಿ ಮತ್ತು ಚಂದಾದಾರರಾಗಿ .
  • IRC ಯಲ್ಲಿ ಸಹ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪರ್‌ಗಳೊಂದಿಗೆ ಚಾಟ್ ಮಾಡಿ. irc.freenode.netಸರ್ವರ್‌ನಲ್ಲಿ, ಚಾನಲ್‌ನಲ್ಲಿ ##bootstrap.
  • bootstrap-4ಸ್ಟಾಕ್ ಓವರ್‌ಫ್ಲೋ (ಟ್ಯಾಗ್ ಮಾಡಲಾಗಿದೆ ) ನಲ್ಲಿ ಅನುಷ್ಠಾನದ ಸಹಾಯವನ್ನು ಕಾಣಬಹುದು .
  • ಗರಿಷ್ಠ ಅನ್ವೇಷಣೆಗಾಗಿ npmbootstrap ಅಥವಾ ಅಂತಹುದೇ ವಿತರಣಾ ಕಾರ್ಯವಿಧಾನಗಳ ಮೂಲಕ ವಿತರಿಸುವಾಗ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕಾರ್ಯವನ್ನು ಮಾರ್ಪಡಿಸುವ ಅಥವಾ ಸೇರಿಸುವ ಪ್ಯಾಕೇಜ್‌ಗಳಲ್ಲಿ ಡೆವಲಪರ್‌ಗಳು ಕೀವರ್ಡ್ ಅನ್ನು ಬಳಸಬೇಕು .

ನೀವು ಇತ್ತೀಚಿನ ಗಾಸಿಪ್ ಮತ್ತು ಅದ್ಭುತವಾದ ಸಂಗೀತ ವೀಡಿಯೊಗಳಿಗಾಗಿ Twitter ನಲ್ಲಿ @getbootstrap ಅನ್ನು ಸಹ ಅನುಸರಿಸಬಹುದು .