ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಕ್ತಿಯುತ, ವೈಶಿಷ್ಟ್ಯ-ಪ್ಯಾಕ್ಡ್ ಫ್ರಂಟ್‌ಎಂಡ್ ಟೂಲ್‌ಕಿಟ್ ಆಗಿದೆ. ಮೂಲಮಾದರಿಯಿಂದ ಉತ್ಪಾದನೆಯವರೆಗೆ-ನಿಮಿಷಗಳಲ್ಲಿ ಏನನ್ನೂ ನಿರ್ಮಿಸಿ.

ಈ ಪುಟದಲ್ಲಿ

ತ್ವರಿತ ಆರಂಭ

ಯಾವುದೇ ನಿರ್ಮಾಣ ಹಂತಗಳ ಅಗತ್ಯವಿಲ್ಲದೇ CDN ಮೂಲಕ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಉತ್ಪಾದನೆ-ಸಿದ್ಧ CSS ಮತ್ತು JavaScript ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಪ್ರಾರಂಭಿಸಿ. ಈ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕೋಡ್‌ಪೆನ್ ಡೆಮೊದೊಂದಿಗೆ ಇದನ್ನು ಆಚರಣೆಯಲ್ಲಿ ನೋಡಿ .

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 ಅನ್ನು ಸೇರಿಸಿ. ಮುಚ್ಚುವ ಮೊದಲು ನಮ್ಮ CSS ಗಾಗಿ ಟ್ಯಾಗ್ ಅನ್ನು ಮತ್ತು ನಮ್ಮ JavaScript ಬಂಡಲ್‌ಗಾಗಿ ಟ್ಯಾಗ್ ಅನ್ನು ಇರಿಸಿ (ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು, ಪಾಪ್ಪರ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಇರಿಸಲು ಪಾಪ್ಪರ್ <link>ಸೇರಿದಂತೆ ) . ನಮ್ಮ CDN ಲಿಂಕ್‌ಗಳ ಕುರಿತು ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ .<head><script></body>
```
<!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>
```
ನೀವು ಪಾಪ್ಪರ್ ಮತ್ತು ನಮ್ಮ JS ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸೇರಿಸಬಹುದು. ನೀವು ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು, ಪಾಪೋವರ್‌ಗಳು ಅಥವಾ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಬಳಸಲು ಯೋಜಿಸದಿದ್ದರೆ, ಪಾಪ್ಪರ್ ಅನ್ನು ಸೇರಿಸದೆ ಕೆಲವು ಕಿಲೋಬೈಟ್‌ಗಳನ್ನು ಉಳಿಸಿ.
```
<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`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

ಪರಿವಿಡಿ ಪುಟದಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ನಮ್ಮ ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಬಿಲ್ಡ್‌ಗಳನ್ನು ಪಡೆಯಲು ನೀವು CDN ಅನ್ನು ಸಹ ಬಳಸಬಹುದು .

ಮುಂದಿನ ಹೆಜ್ಜೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಸುವ ಕೆಲವು ಪ್ರಮುಖ ಜಾಗತಿಕ ಪರಿಸರ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಕುರಿತು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಓದಿ .
ನಮ್ಮ ವಿಷಯಗಳ ವಿಭಾಗದಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಏನನ್ನು ಸೇರಿಸಲಾಗಿದೆ ಮತ್ತು ಕೆಳಗಿನ JavaScript ಅಗತ್ಯವಿರುವ ಘಟಕಗಳ ಪಟ್ಟಿಯನ್ನು ಓದಿ.
ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಶಕ್ತಿ ಬೇಕೇ? ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಮೂಲಕ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ .
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮಾಡ್ಯೂಲ್ ಆಗಿ ಬಳಸಲು ನೋಡುತ್ತಿರುವಿರಾ <script type="module">? ದಯವಿಟ್ಟು ನಮ್ಮ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮಾಡ್ಯೂಲ್ ವಿಭಾಗವಾಗಿ ಬಳಸುವುದನ್ನು ನೋಡಿ.

JS ಘಟಕಗಳು

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

JavaScript ಅಗತ್ಯವಿರುವ ಘಟಕಗಳನ್ನು ತೋರಿಸಿ

ವಜಾಗೊಳಿಸುವುದಕ್ಕಾಗಿ ಎಚ್ಚರಿಕೆಗಳು
ಟಾಗಲ್ ಸ್ಟೇಟ್ಸ್ ಮತ್ತು ಚೆಕ್‌ಬಾಕ್ಸ್/ರೇಡಿಯೋ ಕಾರ್ಯನಿರ್ವಹಣೆಗಾಗಿ ಬಟನ್‌ಗಳು
ಎಲ್ಲಾ ಸ್ಲೈಡ್ ನಡವಳಿಕೆಗಳು, ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸೂಚಕಗಳಿಗೆ ಏರಿಳಿಕೆ
ವಿಷಯದ ಗೋಚರತೆಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಸಂಕುಚಿಸಿ
ಪ್ರದರ್ಶನ ಮತ್ತು ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ( ಪಾಪ್ಪರ್ ಸಹ ಅಗತ್ಯವಿದೆ )
ಪ್ರದರ್ಶನ, ಸ್ಥಾನೀಕರಣ ಮತ್ತು ಸ್ಕ್ರಾಲ್ ನಡವಳಿಕೆಗಾಗಿ ಮಾದರಿಗಳು
ಸ್ಪಂದಿಸುವ ನಡವಳಿಕೆಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಮ್ಮ ಸಂಕುಚಿಸಿ ಮತ್ತು ಆಫ್‌ಕ್ಯಾನ್‌ವಾಸ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ವಿಸ್ತರಿಸಲು Navbar
ಕಂಟೆಂಟ್ ಪೇನ್‌ಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಟ್ಯಾಬ್ ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ Navs
ಪ್ರದರ್ಶನ, ಸ್ಥಾನೀಕರಣ ಮತ್ತು ಸ್ಕ್ರಾಲ್ ನಡವಳಿಕೆಗಾಗಿ ಆಫ್‌ಕ್ಯಾನ್‌ವಾಸ್‌ಗಳು
ಸ್ಕ್ರಾಲ್ ನಡವಳಿಕೆ ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್ ನವೀಕರಣಗಳಿಗಾಗಿ Scrollspy
ಪ್ರದರ್ಶಿಸಲು ಮತ್ತು ವಜಾಗೊಳಿಸಲು ಟೋಸ್ಟ್‌ಗಳು
ಡಿಸ್‌ಪ್ಲೇ ಮಾಡಲು ಮತ್ತು ಪೊಸಿಷನಿಂಗ್‌ಗಾಗಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪ್‌ಓವರ್‌ಗಳು (ಸಹ ಪಾಪ್ಪರ್ ಅಗತ್ಯವಿದೆ )

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

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

HTML5 ಡಾಕ್ಟಿಪ್

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

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

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

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

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

ತ್ವರಿತ ಪ್ರಾರಂಭದಲ್ಲಿ ನೀವು ಇದರ ಉದಾಹರಣೆಯನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಬಹುದು .

ಬಾಕ್ಸ್ ಗಾತ್ರ

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

ಸಮುದಾಯ

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

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

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