ಪರಿಚಯ
JsDelivr ಮತ್ತು ಟೆಂಪ್ಲೇಟ್ ಸ್ಟಾರ್ಟರ್ ಪುಟದೊಂದಿಗೆ ಸ್ಪಂದಿಸುವ, ಮೊಬೈಲ್-ಮೊದಲ ಸೈಟ್ಗಳನ್ನು ನಿರ್ಮಿಸಲು ವಿಶ್ವದ ಅತ್ಯಂತ ಜನಪ್ರಿಯ ಚೌಕಟ್ಟಾದ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ.
ತ್ವರಿತ ಆರಂಭ
ನಿಮ್ಮ ಯೋಜನೆಗೆ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ತ್ವರಿತವಾಗಿ ಸೇರಿಸಲು ನೋಡುತ್ತಿರುವಿರಾ? jsDelivr ಅನ್ನು ಬಳಸಿ, ಒಂದು ಉಚಿತ ತೆರೆದ ಮೂಲ CDN. ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಾ ಅಥವಾ ಮೂಲ ಫೈಲ್ಗಳನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡಬೇಕೆ? ಡೌನ್ಲೋಡ್ಗಳ ಪುಟಕ್ಕೆ ಹೋಗಿ .
CSS
ನಮ್ಮ CSS ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ಎಲ್ಲಾ ಇತರ ಸ್ಟೈಲ್ಶೀಟ್ಗಳ ಮೊದಲು <link>
ನಿಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ನಕಲಿಸಿ-ಅಂಟಿಸಿ .<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
JS
ನಮ್ಮ ಅನೇಕ ಘಟಕಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ನಿರ್ದಿಷ್ಟವಾಗಿ, ಅವರಿಗೆ ನಮ್ಮದೇ ಆದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ಗಳು ಮತ್ತು ಪಾಪ್ಪರ್ ಅಗತ್ಯವಿರುತ್ತದೆ . ಅವುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು, ಮುಚ್ಚುವ ಟ್ಯಾಗ್ನ ಮೊದಲು ನಿಮ್ಮ ಪುಟಗಳ ಕೊನೆಯಲ್ಲಿ ಈ ಕೆಳಗಿನವುಗಳಲ್ಲಿ ಒಂದನ್ನು<script>
ಇರಿಸಿ .</body>
ಬಂಡಲ್
ಪ್ರತಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಮತ್ತು ಅವಲಂಬನೆಯನ್ನು ನಮ್ಮ ಎರಡು ಬಂಡಲ್ಗಳಲ್ಲಿ ಒಂದನ್ನು ಸೇರಿಸಿ. ಎರಡೂ bootstrap.bundle.js
ಮತ್ತು ನಮ್ಮ ಟೂಲ್ಟಿಪ್ಗಳು ಮತ್ತು ಪಾಪೋವರ್ಗಳಿಗಾಗಿ ಪಾಪ್ಪರ್ ಅನ್ನು bootstrap.bundle.min.js
ಸೇರಿಸಿ . ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಏನನ್ನು ಸೇರಿಸಲಾಗಿದೆ ಎಂಬುದರ ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ, ದಯವಿಟ್ಟು ನಮ್ಮ ವಿಷಯಗಳ ವಿಭಾಗವನ್ನು ನೋಡಿ.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
ಪ್ರತ್ಯೇಕಿಸಿ
ಪ್ರತ್ಯೇಕ ಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರದೊಂದಿಗೆ ಹೋಗಲು ನೀವು ನಿರ್ಧರಿಸಿದರೆ, ಪಾಪ್ಪರ್ ಮೊದಲು ಬರಬೇಕು (ನೀವು ಟೂಲ್ಟಿಪ್ಗಳು ಅಥವಾ ಪಾಪೋವರ್ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ), ಮತ್ತು ನಂತರ ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ಗಳು.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
ಮಾಡ್ಯೂಲ್ಗಳು
ನೀವು ಬಳಸಿದರೆ <script type="module">
, ದಯವಿಟ್ಟು ನಮ್ಮ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮಾಡ್ಯೂಲ್ ವಿಭಾಗವಾಗಿ ಬಳಸುವುದನ್ನು ನೋಡಿ.
ಘಟಕಗಳು
ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಪಾಪ್ಪರ್ ಯಾವ ಘಟಕಗಳಿಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಅಗತ್ಯವಿದೆ ಎಂದು ಕುತೂಹಲವಿದೆಯೇ? ಕೆಳಗಿನ ಶೋ ಕಾಂಪೊನೆಂಟ್ಸ್ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ. ಸಾಮಾನ್ಯ ಪುಟ ರಚನೆಯ ಬಗ್ಗೆ ನಿಮಗೆ ಖಚಿತವಿಲ್ಲದಿದ್ದರೆ, ಉದಾಹರಣೆ ಪುಟ ಟೆಂಪ್ಲೇಟ್ಗಾಗಿ ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.
JavaScript ಅಗತ್ಯವಿರುವ ಘಟಕಗಳನ್ನು ತೋರಿಸಿ
- ವಜಾಗೊಳಿಸುವುದಕ್ಕಾಗಿ ಎಚ್ಚರಿಕೆಗಳು
- ಟಾಗಲ್ ಸ್ಟೇಟ್ಸ್ ಮತ್ತು ಚೆಕ್ಬಾಕ್ಸ್/ರೇಡಿಯೋ ಕಾರ್ಯನಿರ್ವಹಣೆಗಾಗಿ ಬಟನ್ಗಳು
- ಎಲ್ಲಾ ಸ್ಲೈಡ್ ನಡವಳಿಕೆಗಳು, ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸೂಚಕಗಳಿಗೆ ಏರಿಳಿಕೆ
- ವಿಷಯದ ಗೋಚರತೆಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಸಂಕುಚಿಸಿ
- ಪ್ರದರ್ಶನ ಮತ್ತು ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ ಡ್ರಾಪ್ಡೌನ್ಗಳು ( ಪಾಪ್ಪರ್ ಸಹ ಅಗತ್ಯವಿದೆ )
- ಪ್ರದರ್ಶನ, ಸ್ಥಾನೀಕರಣ ಮತ್ತು ಸ್ಕ್ರಾಲ್ ನಡವಳಿಕೆಗಾಗಿ ಮಾದರಿಗಳು
- ಸ್ಪಂದಿಸುವ ನಡವಳಿಕೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಮ್ಮ ಸಂಕುಚಿಸಿ ಪ್ಲಗಿನ್ ಅನ್ನು ವಿಸ್ತರಿಸಲು Navbar
- ಪ್ರದರ್ಶಿಸಲು ಮತ್ತು ವಜಾಗೊಳಿಸಲು ಟೋಸ್ಟ್ಗಳು
- ಡಿಸ್ಪ್ಲೇ ಮಾಡಲು ಮತ್ತು ಪೊಸಿಷನಿಂಗ್ಗಾಗಿ ಟೂಲ್ಟಿಪ್ಗಳು ಮತ್ತು ಪಾಪ್ಓವರ್ಗಳು (ಸಹ ಪಾಪ್ಪರ್ ಅಗತ್ಯವಿದೆ )
- ಸ್ಕ್ರಾಲ್ ನಡವಳಿಕೆ ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್ ನವೀಕರಣಗಳಿಗಾಗಿ 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">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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">
ಸ್ಟಾರ್ಟರ್ ಟೆಂಪ್ಲೇಟ್ನಲ್ಲಿ ನೀವು ಇದರ ಉದಾಹರಣೆಯನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಬಹುದು .
ಬಾಕ್ಸ್ ಗಾತ್ರ
box-sizing
CSS ನಲ್ಲಿ ಹೆಚ್ಚು ನೇರವಾದ ಗಾತ್ರಕ್ಕಾಗಿ, ನಾವು ಜಾಗತಿಕ ಮೌಲ್ಯವನ್ನು 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-5
) ನಲ್ಲಿ ಕಾಣಬಹುದು. - ಗರಿಷ್ಠ ಅನ್ವೇಷಣೆಗಾಗಿ npm
bootstrap
ಅಥವಾ ಅಂತಹುದೇ ವಿತರಣಾ ಕಾರ್ಯವಿಧಾನಗಳ ಮೂಲಕ ವಿತರಿಸುವಾಗ ಡೆವಲಪರ್ಗಳು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಕಾರ್ಯವನ್ನು ಮಾರ್ಪಡಿಸುವ ಅಥವಾ ಸೇರಿಸುವ ಪ್ಯಾಕೇಜ್ಗಳಲ್ಲಿ ಕೀವರ್ಡ್ ಅನ್ನು ಬಳಸಬೇಕು .
ನೀವು ಇತ್ತೀಚಿನ ಗಾಸಿಪ್ ಮತ್ತು ಅದ್ಭುತವಾದ ಸಂಗೀತ ವೀಡಿಯೊಗಳಿಗಾಗಿ Twitter ನಲ್ಲಿ @getbootstrap ಅನ್ನು ಸಹ ಅನುಸರಿಸಬಹುದು .