ಅವಲೋಕನ

ಉತ್ತಮ, ವೇಗವಾದ, ಬಲವಾದ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ನಮ್ಮ ವಿಧಾನವನ್ನು ಒಳಗೊಂಡಂತೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲಸೌಕರ್ಯದ ಪ್ರಮುಖ ಭಾಗಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ.

HTML5 ಡಾಕ್ಟಿಪ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕೆಲವು HTML ಅಂಶಗಳು ಮತ್ತು HTML5 ಡಾಕ್ಟೈಪ್‌ನ ಬಳಕೆಯ ಅಗತ್ಯವಿರುವ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುತ್ತದೆ. ನಿಮ್ಮ ಎಲ್ಲಾ ಯೋಜನೆಗಳ ಆರಂಭದಲ್ಲಿ ಅದನ್ನು ಸೇರಿಸಿ.

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

ಮೊದಲು ಮೊಬೈಲ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 2 ನೊಂದಿಗೆ, ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ಪ್ರಮುಖ ಅಂಶಗಳಿಗಾಗಿ ನಾವು ಐಚ್ಛಿಕ ಮೊಬೈಲ್ ಸ್ನೇಹಿ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 3 ನೊಂದಿಗೆ, ನಾವು ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಮೊದಲಿನಿಂದಲೂ ಮೊಬೈಲ್ ಸ್ನೇಹಿಯಾಗುವಂತೆ ಪುನಃ ಬರೆದಿದ್ದೇವೆ. ಐಚ್ಛಿಕ ಮೊಬೈಲ್ ಶೈಲಿಗಳಲ್ಲಿ ಸೇರಿಸುವ ಬದಲು, ಅವುಗಳನ್ನು ನೇರವಾಗಿ ಕೋರ್ಗೆ ಬೇಯಿಸಲಾಗುತ್ತದೆ. ವಾಸ್ತವವಾಗಿ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮೊದಲು ಮೊಬೈಲ್ ಆಗಿದೆ . ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ಗಳ ಬದಲಿಗೆ ಸಂಪೂರ್ಣ ಲೈಬ್ರರಿಯಾದ್ಯಂತ ಮೊಬೈಲ್ ಮೊದಲ ಶೈಲಿಗಳನ್ನು ಕಾಣಬಹುದು.

ಸರಿಯಾದ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಟಚ್ ಝೂಮಿಂಗ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು , ವ್ಯೂಪೋರ್ಟ್ ಮೆಟಾ ಟ್ಯಾಗ್ ಅನ್ನು ನಿಮ್ಮ ಗೆ ಸೇರಿಸಿ <head>.

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

user-scalable=noವ್ಯೂಪೋರ್ಟ್ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗೆ ಸೇರಿಸುವ ಮೂಲಕ ನೀವು ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಜೂಮ್ ಮಾಡುವ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು . ಇದು ಜೂಮ್ ಮಾಡುವಿಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಅಂದರೆ ಬಳಕೆದಾರರು ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಮಾತ್ರ ಸಾಧ್ಯವಾಗುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಸೈಟ್ ಸ್ಥಳೀಯ ಅಪ್ಲಿಕೇಶನ್‌ನಂತೆ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಭಾಸವಾಗುತ್ತದೆ. ಒಟ್ಟಾರೆಯಾಗಿ, ನಾವು ಇದನ್ನು ಪ್ರತಿ ಸೈಟ್‌ನಲ್ಲಿ ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮೂಲಭೂತ ಜಾಗತಿಕ ಪ್ರದರ್ಶನ, ಮುದ್ರಣಕಲೆ ಮತ್ತು ಲಿಂಕ್ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ನಿರ್ದಿಷ್ಟವಾಗಿ, ನಾವು:

  • background-color: #fff;ಮೇಲೆ ಹೊಂದಿಸಿbody
  • @font-family-base, @font-size-base, ಮತ್ತು @line-height-baseಗುಣಲಕ್ಷಣಗಳನ್ನು ನಮ್ಮ ಮುದ್ರಣದ ಆಧಾರವಾಗಿ ಬಳಸಿ
  • ಮೂಲಕ ಜಾಗತಿಕ ಲಿಂಕ್ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಿ @link-colorಮತ್ತು ಲಿಂಕ್ ಅಂಡರ್‌ಲೈನ್‌ಗಳನ್ನು ಮಾತ್ರ ಅನ್ವಯಿಸಿ:hover

ಈ ಶೈಲಿಗಳನ್ನು ಒಳಗೆ ಕಾಣಬಹುದು scaffolding.less.

Normalize.css

ಸುಧಾರಿತ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ, ನಾವು Normalize.css ಅನ್ನು ಬಳಸುತ್ತೇವೆ, ಇದು Nicolas Gallagher ಮತ್ತು Jonathan Neal ಅವರ ಯೋಜನೆಯಾಗಿದೆ .

ಕಂಟೈನರ್ಗಳು

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

.containerಸ್ಪಂದಿಸುವ ಸ್ಥಿರ ಅಗಲದ ಕಂಟೇನರ್‌ಗಾಗಿ ಬಳಸಿ .

<div class="container">
  ...
</div>

.container-fluidನಿಮ್ಮ ವ್ಯೂಪೋರ್ಟ್‌ನ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ವ್ಯಾಪಿಸಿರುವ ಪೂರ್ಣ ಅಗಲದ ಕಂಟೇನರ್‌ಗಾಗಿ ಬಳಸಿ .

<div class="container-fluid">
  ...
</div>

ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸ್ಪಂದಿಸುವ, ಮೊಬೈಲ್ ಫಸ್ಟ್ ಫ್ಲೂಯಿಡ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಅದು ಸಾಧನ ಅಥವಾ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರ ಹೆಚ್ಚಾದಂತೆ 12 ಕಾಲಮ್‌ಗಳವರೆಗೆ ಸೂಕ್ತವಾಗಿ ಅಳೆಯುತ್ತದೆ. ಇದು ಸುಲಭವಾದ ಲೇಔಟ್ ಆಯ್ಕೆಗಳಿಗಾಗಿ ಪೂರ್ವನಿರ್ಧರಿತ ತರಗತಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ , ಜೊತೆಗೆ ಹೆಚ್ಚು ಲಾಕ್ಷಣಿಕ ಲೇಔಟ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸಲು ಶಕ್ತಿಯುತ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ .

ಪರಿಚಯ

ನಿಮ್ಮ ವಿಷಯವನ್ನು ಹೊಂದಿರುವ ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳ ಸರಣಿಯ ಮೂಲಕ ಪುಟ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

  • ಸರಿಯಾದ ಜೋಡಣೆ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್‌ಗಾಗಿ ಸಾಲುಗಳನ್ನು .container(ಸ್ಥಿರ-ಅಗಲ) ಅಥವಾ (ಪೂರ್ಣ-ಅಗಲ) ಒಳಗೆ ಇರಿಸಬೇಕು ..container-fluid
  • ಕಾಲಮ್‌ಗಳ ಸಮತಲ ಗುಂಪುಗಳನ್ನು ರಚಿಸಲು ಸಾಲುಗಳನ್ನು ಬಳಸಿ.
  • ವಿಷಯವನ್ನು ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಇರಿಸಬೇಕು ಮತ್ತು ಕಾಲಮ್‌ಗಳು ಮಾತ್ರ ಸಾಲುಗಳ ತಕ್ಷಣದ ಮಕ್ಕಳಾಗಿರಬಹುದು.
  • ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಮಾಡಲು ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳು .rowಮತ್ತು .col-xs-4ಲಭ್ಯವಿವೆ. ಹೆಚ್ಚು ಲಾಕ್ಷಣಿಕ ಲೇಔಟ್‌ಗಳಿಗೆ ಕಡಿಮೆ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು.
  • ಕಾಲಮ್‌ಗಳು ಗಟರ್‌ಗಳನ್ನು (ಕಾಲಮ್ ವಿಷಯದ ನಡುವಿನ ಅಂತರ) ಮೂಲಕ ರಚಿಸುತ್ತವೆ padding. ಆ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಮೊದಲ ಮತ್ತು ಕೊನೆಯ ಕಾಲಮ್‌ಗೆ ಋಣಾತ್ಮಕ ಅಂಚುಗಳ ಮೂಲಕ ಸಾಲುಗಳಲ್ಲಿ ಸರಿದೂಗಿಸಲಾಗುತ್ತದೆ .row.
  • ಋಣಾತ್ಮಕ ಅಂಚು ಏಕೆ ಕೆಳಗಿನ ಉದಾಹರಣೆಗಳನ್ನು ಮೀರಿದೆ. ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳೊಳಗಿನ ವಿಷಯವನ್ನು ಗ್ರಿಡ್ ಅಲ್ಲದ ವಿಷಯದೊಂದಿಗೆ ಜೋಡಿಸಲಾಗಿದೆ.
  • ನೀವು ವ್ಯಾಪಿಸಲು ಬಯಸುವ ಲಭ್ಯವಿರುವ ಹನ್ನೆರಡು ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ಮೂರು ಸಮಾನ ಕಾಲಮ್‌ಗಳು ಮೂರು ಬಳಸುತ್ತವೆ .col-xs-4.
  • ಒಂದೇ ಸಾಲಿನಲ್ಲಿ 12 ಕ್ಕೂ ಹೆಚ್ಚು ಕಾಲಮ್‌ಗಳನ್ನು ಇರಿಸಿದರೆ, ಹೆಚ್ಚುವರಿ ಕಾಲಮ್‌ಗಳ ಪ್ರತಿಯೊಂದು ಗುಂಪು, ಒಂದು ಘಟಕದಂತೆ, ಹೊಸ ಸಾಲಿನ ಮೇಲೆ ಸುತ್ತುತ್ತದೆ.
  • ಗ್ರಿಡ್ ತರಗತಿಗಳು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಗಾತ್ರಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ ಅಥವಾ ಸಮಾನವಾದ ಪರದೆಯ ಅಗಲವನ್ನು ಹೊಂದಿರುವ ಸಾಧನಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತವೆ ಮತ್ತು ಸಣ್ಣ ಸಾಧನಗಳನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡು ಗ್ರಿಡ್ ತರಗತಿಗಳನ್ನು ಅತಿಕ್ರಮಿಸಿ. ಆದ್ದರಿಂದ, ಉದಾ ಯಾವುದೇ ವರ್ಗವನ್ನು ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸುವುದರಿಂದ ಮಧ್ಯಮ ಸಾಧನಗಳಲ್ಲಿ ಅದರ ಸ್ಟೈಲಿಂಗ್‌ನ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ಆದರೆ ವರ್ಗವು .col-md-*ಇಲ್ಲದಿದ್ದಲ್ಲಿ ದೊಡ್ಡ ಸಾಧನಗಳಲ್ಲಿಯೂ ಸಹ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ..col-lg-*

ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ಈ ತತ್ವಗಳನ್ನು ಅನ್ವಯಿಸಲು ಉದಾಹರಣೆಗಳನ್ನು ನೋಡಿ.

ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು

ನಮ್ಮ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನಲ್ಲಿ ಪ್ರಮುಖ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಮ್ಮ ಕಡಿಮೆ ಫೈಲ್‌ಗಳಲ್ಲಿ ನಾವು ಈ ಕೆಳಗಿನ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಬಳಸುತ್ತೇವೆ.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

max-widthCSS ಅನ್ನು ಕಿರಿದಾದ ಸಾಧನಗಳಿಗೆ ಸೀಮಿತಗೊಳಿಸಲು ನಾವು ಈ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಸಾಂದರ್ಭಿಕವಾಗಿ ವಿಸ್ತರಿಸುತ್ತೇವೆ .

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ಗ್ರಿಡ್ ಆಯ್ಕೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನ ಅಂಶಗಳು ಹ್ಯಾಂಡಿ ಟೇಬಲ್‌ನೊಂದಿಗೆ ಬಹು ಸಾಧನಗಳಲ್ಲಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ನೋಡಿ.

ಹೆಚ್ಚುವರಿ ಸಣ್ಣ ಸಾಧನಗಳ ಫೋನ್‌ಗಳು (<768px) ಸಣ್ಣ ಸಾಧನಗಳು ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳು (≥768px) ಮಧ್ಯಮ ಸಾಧನಗಳ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳು (≥992px) ದೊಡ್ಡ ಸಾಧನಗಳ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳು (≥1200px)
ಗ್ರಿಡ್ ನಡವಳಿಕೆ ಎಲ್ಲಾ ಸಮಯದಲ್ಲೂ ಅಡ್ಡಲಾಗಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳ ಮೇಲಿನ ಅಡ್ಡಲಾಗಿ, ಪ್ರಾರಂಭಿಸಲು ಕುಗ್ಗಿಸಲಾಗಿದೆ
ಕಂಟೇನರ್ ಅಗಲ ಯಾವುದೂ ಇಲ್ಲ (ಸ್ವಯಂ) 750px 970px 1170px
ವರ್ಗ ಪೂರ್ವಪ್ರತ್ಯಯ .col-xs- .col-sm- .col-md- .col-lg-
# ಕಾಲಮ್‌ಗಳು 12
ಕಾಲಮ್ ಅಗಲ ಆಟೋ ~62px ~81px ~97px
ಗಟರ್ ಅಗಲ 30px (ಕಾಲಮ್‌ನ ಪ್ರತಿ ಬದಿಯಲ್ಲಿ 15px)
ನೆಸ್ಟೆಬಲ್ ಹೌದು
ಆಫ್‌ಸೆಟ್‌ಗಳು ಹೌದು
ಕಾಲಮ್ ಆದೇಶ ಹೌದು

ಉದಾಹರಣೆ: ಸ್ಟ್ಯಾಕ್ಡ್-ಟು-ಅಡ್ಡ

ಗ್ರಿಡ್ ತರಗತಿಗಳ ಒಂದು ಸೆಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು .col-md-*, ನೀವು ಡೆಸ್ಕ್‌ಟಾಪ್ (ಮಧ್ಯಮ) ಸಾಧನಗಳಲ್ಲಿ ಅಡ್ಡಲಾಗಿರುವ ಮೊದಲು ಮೊಬೈಲ್ ಸಾಧನಗಳು ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್ ಸಾಧನಗಳಲ್ಲಿ (ಹೆಚ್ಚುವರಿ ಚಿಕ್ಕದರಿಂದ ಸಣ್ಣ ವ್ಯಾಪ್ತಿಯ) ಜೋಡಿಸಲಾದ ಮೂಲ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಬಹುದು. ಯಾವುದೇ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳನ್ನು ಇರಿಸಿ .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6 
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

ಉದಾಹರಣೆ: ದ್ರವ ಧಾರಕ

ನಿಮ್ಮ ಹೊರಭಾಗವನ್ನು .containerಗೆ ಬದಲಾಯಿಸುವ ಮೂಲಕ ಯಾವುದೇ ಸ್ಥಿರ-ಅಗಲ ಗ್ರಿಡ್ ವಿನ್ಯಾಸವನ್ನು ಪೂರ್ಣ-ಅಗಲ ಲೇಔಟ್ ಆಗಿ ಪರಿವರ್ತಿಸಿ .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

ಉದಾಹರಣೆ: ಮೊಬೈಲ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್

ನಿಮ್ಮ ಕಾಲಮ್‌ಗಳನ್ನು ಚಿಕ್ಕ ಸಾಧನಗಳಲ್ಲಿ ಸರಳವಾಗಿ ಜೋಡಿಸಲು ಬಯಸುವುದಿಲ್ಲವೇ? .col-xs-* .col-md-*ನಿಮ್ಮ ಕಾಲಮ್‌ಗಳಿಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಹೆಚ್ಚುವರಿ ಸಣ್ಣ ಮತ್ತು ಮಧ್ಯಮ ಸಾಧನ ಗ್ರಿಡ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿ . ಅದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದರ ಉತ್ತಮ ಕಲ್ಪನೆಗಾಗಿ ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

ಉದಾಹರಣೆ: ಮೊಬೈಲ್, ಟ್ಯಾಬ್ಲೆಟ್, ಡೆಸ್ಕ್‌ಟಾಪ್

.col-sm-*ಟ್ಯಾಬ್ಲೆಟ್ ತರಗತಿಗಳೊಂದಿಗೆ ಇನ್ನಷ್ಟು ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಶಕ್ತಿಯುತ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವ ಮೂಲಕ ಹಿಂದಿನ ಉದಾಹರಣೆಯನ್ನು ನಿರ್ಮಿಸಿ .

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4 
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ಉದಾಹರಣೆ: ಕಾಲಮ್ ಸುತ್ತುವುದು

ಒಂದೇ ಸಾಲಿನಲ್ಲಿ 12 ಕ್ಕೂ ಹೆಚ್ಚು ಕಾಲಮ್‌ಗಳನ್ನು ಇರಿಸಿದರೆ, ಹೆಚ್ಚುವರಿ ಕಾಲಮ್‌ಗಳ ಪ್ರತಿಯೊಂದು ಗುಂಪು, ಒಂದು ಘಟಕದಂತೆ, ಹೊಸ ಸಾಲಿನ ಮೇಲೆ ಸುತ್ತುತ್ತದೆ.

.col-xs-9
.col-xs-4
9 + 4 = 13 > 12 ರಿಂದ, ಈ 4-ಕಾಲಮ್-ಅಗಲದ ಡಿವ್ ಒಂದು ಹೊಸ ಸಾಲಿನ ಮೇಲೆ ಒಂದು ಪಕ್ಕದ ಘಟಕವಾಗಿ ಸುತ್ತುತ್ತದೆ.
.col-xs-6
ನಂತರದ ಕಾಲಮ್‌ಗಳು ಹೊಸ ಸಾಲಿನಲ್ಲಿ ಮುಂದುವರಿಯುತ್ತವೆ. 
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ರೆಸ್ಪಾನ್ಸಿವ್ ಕಾಲಮ್ ಮರುಹೊಂದಿಸುತ್ತದೆ

ಲಭ್ಯವಿರುವ ನಾಲ್ಕು ಹಂತದ ಗ್ರಿಡ್‌ಗಳೊಂದಿಗೆ ನೀವು ಕೆಲವು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ, ನಿಮ್ಮ ಕಾಲಮ್‌ಗಳು ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ಎತ್ತರವಾಗಿರುವುದರಿಂದ ಸರಿಯಾಗಿ ತೆರವುಗೊಳಿಸದಿರುವ ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸಬೇಕಾಗುತ್ತದೆ. ಅದನ್ನು ಸರಿಪಡಿಸಲು, a .clearfixಮತ್ತು ನಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ ಯುಟಿಲಿಟಿ ತರಗತಿಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಿ .

.col-xs-6 .col-sm-3
ನಿಮ್ಮ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿ ಅಥವಾ ಉದಾಹರಣೆಗಾಗಿ ನಿಮ್ಮ ಫೋನ್‌ನಲ್ಲಿ ಅದನ್ನು ಪರಿಶೀಲಿಸಿ.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

ಕಾಲಮ್‌ಗಳನ್ನು ಸರಿದೂಗಿಸುವುದು

.col-md-offset-*ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕಾಲಮ್‌ಗಳನ್ನು ಬಲಕ್ಕೆ ಸರಿಸಿ . ಈ ವರ್ಗಗಳು ಕಾಲಮ್‌ನ ಎಡ ಅಂಚನ್ನು *ಕಾಲಮ್‌ಗಳಿಂದ ಹೆಚ್ಚಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ನಾಲ್ಕು ಕಾಲಮ್‌ಗಳ ಮೇಲೆ .col-md-offset-4ಚಲಿಸುತ್ತದೆ ..col-md-4

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3 
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0ತರಗತಿಗಳೊಂದಿಗೆ ಕಡಿಮೆ ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಳಿಂದ ನೀವು ಆಫ್‌ಸೆಟ್‌ಗಳನ್ನು ಸಹ ಅತಿಕ್ರಮಿಸಬಹುದು .

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

ಗೂಡುಕಟ್ಟುವ ಕಾಲಮ್‌ಗಳು

ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ವಿಷಯವನ್ನು ನೆಸ್ಟ್ ಮಾಡಲು, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಲಮ್‌ನಲ್ಲಿ ಹೊಸ .rowಮತ್ತು .col-sm-*ಕಾಲಮ್‌ಗಳ ಸೆಟ್ ಅನ್ನು ಸೇರಿಸಿ. .col-sm-*ನೆಸ್ಟೆಡ್ ಸಾಲುಗಳು 12 ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಇರುವ ಕಾಲಮ್‌ಗಳ ಗುಂಪನ್ನು ಒಳಗೊಂಡಿರಬೇಕು (ನೀವು ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ 12 ಕಾಲಮ್‌ಗಳನ್ನು ಬಳಸುವ ಅಗತ್ಯವಿಲ್ಲ).

ಹಂತ 1: .col-sm-9
ಹಂತ 2: .col-xs-8 .col-sm-6
ಹಂತ 2: .col-xs-4 .col-sm-6 
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

ಕಾಲಮ್ ಆದೇಶ

ನಮ್ಮ ಅಂತರ್ನಿರ್ಮಿತ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳ ಕ್ರಮವನ್ನು .col-md-push-*ಮತ್ತು .col-md-pull-*ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಿ.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9 
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

ಕಡಿಮೆ ಮಿಕ್ಸಿನ್ಸ್ ಮತ್ತು ವೇರಿಯಬಲ್‌ಗಳು

ವೇಗದ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ ಪೂರ್ವನಿರ್ಮಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳ ಜೊತೆಗೆ , ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನಿಮ್ಮ ಸ್ವಂತ ಸರಳ, ಲಾಕ್ಷಣಿಕ ಲೇಔಟ್‌ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಉತ್ಪಾದಿಸಲು ಕಡಿಮೆ ವೇರಿಯಬಲ್‌ಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಅಸ್ಥಿರ

ವೇರಿಯೇಬಲ್‌ಗಳು ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆ, ಗಟರ್ ಅಗಲ ಮತ್ತು ಫ್ಲೋಟಿಂಗ್ ಕಾಲಮ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆ ಬಿಂದುವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಮೇಲೆ ದಾಖಲಿಸಲಾದ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ವರ್ಗಗಳನ್ನು ಮತ್ತು ಕೆಳಗೆ ಪಟ್ಟಿ ಮಾಡಲಾದ ಕಸ್ಟಮ್ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ರಚಿಸಲು ನಾವು ಇವುಗಳನ್ನು ಬಳಸುತ್ತೇವೆ.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

ಮಿಕ್ಸಿನ್ಸ್

ಪ್ರತ್ಯೇಕ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳಿಗೆ ಲಾಕ್ಷಣಿಕ CSS ಅನ್ನು ರಚಿಸಲು ಗ್ರಿಡ್ ವೇರಿಯಬಲ್‌ಗಳ ಜೊತೆಯಲ್ಲಿ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

ಉದಾಹರಣೆ ಬಳಕೆ

ನೀವು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಮೌಲ್ಯಗಳಿಗೆ ಮಾರ್ಪಡಿಸಬಹುದು ಅಥವಾ ಅವುಗಳ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ನಡುವೆ ಅಂತರವಿರುವ ಎರಡು-ಕಾಲಮ್ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸಲು ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬಳಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

ಮುದ್ರಣಕಲೆ

ಶೀರ್ಷಿಕೆಗಳು

<h1>ಮೂಲಕ ಎಲ್ಲಾ HTML ಶೀರ್ಷಿಕೆಗಳು <h6>ಲಭ್ಯವಿದೆ. .h1ತರಗತಿಗಳ ಮೂಲಕವೂ .h6ಸಹ ಲಭ್ಯವಿದೆ, ನೀವು ಶಿರೋನಾಮೆಯ ಫಾಂಟ್ ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಲು ಬಯಸಿದಾಗ ಆದರೆ ನಿಮ್ಮ ಪಠ್ಯವನ್ನು ಇನ್‌ಲೈನ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಬಯಸಿದಾಗ.

h1. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ

 ಸೆಮಿಬೋಲ್ಡ್ 36px

h2. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ

 ಸೆಮಿಬೋಲ್ಡ್ 30px

h3. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ

 ಸೆಮಿಬೋಲ್ಡ್ 24px

h4. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ

 ಸೆಮಿಬೋಲ್ಡ್ 18px
h5. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ
 ಸೆಮಿಬೋಲ್ಡ್ 14px
h6. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ
 ಸೆಮಿಬೋಲ್ಡ್ 12px 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>ಜೆನೆರಿಕ್ ಟ್ಯಾಗ್ ಅಥವಾ .smallವರ್ಗದೊಂದಿಗೆ ಯಾವುದೇ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಹಗುರವಾದ, ದ್ವಿತೀಯಕ ಪಠ್ಯವನ್ನು ರಚಿಸಿ .

h1. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ ದ್ವಿತೀಯ ಪಠ್ಯ

h2. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ ದ್ವಿತೀಯ ಪಠ್ಯ

h3. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ ದ್ವಿತೀಯ ಪಠ್ಯ

h4. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ ದ್ವಿತೀಯ ಪಠ್ಯ
h5. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ ದ್ವಿತೀಯ ಪಠ್ಯ
h6. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ ದ್ವಿತೀಯ ಪಠ್ಯ
 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

ದೇಹದ ನಕಲು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಜಾಗತಿಕ ಡೀಫಾಲ್ಟ್ 14pxfont-size ಆಗಿದೆ , ಜೊತೆಗೆ 1.428 . ಮತ್ತು ಎಲ್ಲಾ ಪ್ಯಾರಾಗಳಿಗೆ ಇದನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ . ಹೆಚ್ಚುವರಿಯಾಗಿ, (ಪ್ಯಾರಾಗ್ರಾಫ್‌ಗಳು) ಅವುಗಳ ಕಂಪ್ಯೂಟೆಡ್ ಲೈನ್-ಎತ್ತರದ ಅರ್ಧದಷ್ಟು ಕೆಳಭಾಗದ ಅಂಚುಗಳನ್ನು ಪಡೆಯುತ್ತವೆ (ಡೀಫಾಲ್ಟ್ ಆಗಿ 10px).line-height<body><p>

ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಈಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಒರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ.

ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್. ಡೊನೆಕ್ ಉಲ್ಲಮ್ಕಾರ್ಪರ್ ನಲ್ ನಾನ್ ಮೆಟಸ್ ಆಕ್ಟರ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ಈಸ್ಟ್ ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ, ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್. ಡೊನೆಕ್ ಉಲ್ಲಮ್ಕಾರ್ಪರ್ ನಲ್ ನಾನ್ ಮೆಟಸ್ ಆಕ್ಟರ್ ಫ್ರಿಂಗಿಲ್ಲಾ.

ಮೆಸೆನಾಸ್ ಸೆಡ್ ಡೈಮ್ ಎಗೆಟ್ ರಿಸಸ್ ವೇರಿಯಸ್ ಬ್ಲಾಂಡಿಟ್ ಸಿಟ್ ಅಮೆಟ್ ನಾನ್ ಮ್ಯಾಗ್ನಾ. ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ಈಸ್ಟ್ ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ, ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್.

<p>...</p>

ಲೀಡ್ ದೇಹದ ನಕಲು

ಸೇರಿಸುವ ಮೂಲಕ ಪ್ಯಾರಾಗ್ರಾಫ್ ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡಿ .lead.

ವಿವಾಮಸ್ ಸಗಿಟಿಸ್ ಲ್ಯಾಕಸ್ ವೆಲ್ ಆಗ್ ಲಾರೆಟ್ ರುಟ್ರಮ್ ಫೌಸಿಬಸ್ ಡೋಲರ್ ಆಕ್ಟರ್. ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್.

<p class="lead">...</p>

ಕಡಿಮೆಯಿಂದ ನಿರ್ಮಿಸಲಾಗಿದೆ

ಟೈಪೋಗ್ರಾಫಿಕ್ ಸ್ಕೇಲ್ ವೇರಿಯೇಬಲ್‌ಗಳಲ್ಲಿ ಎರಡು ಕಡಿಮೆ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಆಧರಿಸಿದೆ.less : @font-size-baseಮತ್ತು @line-height-base. ಮೊದಲನೆಯದು ಬೇಸ್ ಫಾಂಟ್-ಗಾತ್ರವನ್ನು ಉದ್ದಕ್ಕೂ ಬಳಸಲಾಗುತ್ತದೆ ಮತ್ತು ಎರಡನೆಯದು ಬೇಸ್ ಲೈನ್-ಎತ್ತರವಾಗಿದೆ. ನಮ್ಮ ಎಲ್ಲಾ ಪ್ರಕಾರಗಳ ಅಂಚುಗಳು, ಪ್ಯಾಡಿಂಗ್‌ಗಳು ಮತ್ತು ಲೈನ್-ಹೈಟ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ರಚಿಸಲು ನಾವು ಆ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಕೆಲವು ಸರಳ ಗಣಿತವನ್ನು ಬಳಸುತ್ತೇವೆ. ಅವುಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅಳವಡಿಸಿಕೊಳ್ಳುತ್ತದೆ.

ಇನ್ಲೈನ್ ​​ಪಠ್ಯ ಅಂಶಗಳು

ಗುರುತು ಪಠ್ಯ

ಮತ್ತೊಂದು ಸಂದರ್ಭದಲ್ಲಿ ಅದರ ಪ್ರಸ್ತುತತೆಯಿಂದಾಗಿ ಪಠ್ಯದ ರನ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು, <mark>ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಿ.

ನೀವು ಮಾರ್ಕ್ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಬಹುದುಹೈಲೈಟ್ಪಠ್ಯ.

You can use the mark tag to <mark>highlight</mark> text.

ಅಳಿಸಿದ ಪಠ್ಯ

ಅಳಿಸಲಾದ ಪಠ್ಯದ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಸೂಚಿಸಲು <del>ಟ್ಯಾಗ್ ಬಳಸಿ.

ಪಠ್ಯದ ಈ ಸಾಲನ್ನು ಅಳಿಸಿದ ಪಠ್ಯವೆಂದು ಪರಿಗಣಿಸಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ.

<del>This line of text is meant to be treated as deleted text.</del>

ಸ್ಟ್ರೈಕ್ಥ್ರೂ ಪಠ್ಯ

ಇನ್ನು ಮುಂದೆ ಸಂಬಂಧಿಸದ ಪಠ್ಯದ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಸೂಚಿಸಲು <s>ಟ್ಯಾಗ್ ಬಳಸಿ.

ಪಠ್ಯದ ಈ ಸಾಲು ಇನ್ನು ಮುಂದೆ ನಿಖರವಾಗಿಲ್ಲ ಎಂದು ಪರಿಗಣಿಸಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ.

<s>This line of text is meant to be treated as no longer accurate.</s>

ಪಠ್ಯವನ್ನು ಸೇರಿಸಲಾಗಿದೆ

ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಸೇರ್ಪಡೆಗಳನ್ನು ಸೂಚಿಸಲು <ins>ಟ್ಯಾಗ್ ಬಳಸಿ.

ಈ ಪಠ್ಯದ ಸಾಲನ್ನು ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ಪರಿಗಣಿಸಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

ಅಂಡರ್ಲೈನ್ ​​ಮಾಡಿದ ಪಠ್ಯ

ಪಠ್ಯವನ್ನು ಅಂಡರ್ಲೈನ್ ​​ಮಾಡಲು <u>ಟ್ಯಾಗ್ ಬಳಸಿ.

ಈ ಪಠ್ಯದ ಸಾಲು ಅಂಡರ್‌ಲೈನ್ ಮಾಡಿದಂತೆ ನಿರೂಪಿಸುತ್ತದೆ

<u>This line of text will render as underlined</u>

ಹಗುರವಾದ ಶೈಲಿಗಳೊಂದಿಗೆ HTML ನ ಡೀಫಾಲ್ಟ್ ಒತ್ತು ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸಿ.

ಸಣ್ಣ ಪಠ್ಯ

ಇನ್‌ಲೈನ್ ಅಥವಾ ಪಠ್ಯದ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಒತ್ತಿಹೇಳಲು <small>, ಪೋಷಕರ ಗಾತ್ರದ 85% ರಷ್ಟು ಪಠ್ಯವನ್ನು ಹೊಂದಿಸಲು ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಿ. font-sizeನೆಸ್ಟೆಡ್ ಅಂಶಗಳಿಗಾಗಿ ಶಿರೋನಾಮೆ ಅಂಶಗಳು ತಮ್ಮದೇ ಆದದನ್ನು ಪಡೆಯುತ್ತವೆ <small>.

ನೀವು ಪರ್ಯಾಯವಾಗಿ .smallಯಾವುದಾದರೂ ಬದಲಿಗೆ ಇನ್‌ಲೈನ್ ಅಂಶವನ್ನು ಬಳಸಬಹುದು <small>.

ಪಠ್ಯದ ಈ ಸಾಲನ್ನು ಉತ್ತಮ ಮುದ್ರಣ ಎಂದು ಪರಿಗಣಿಸಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ.

<small>This line of text is meant to be treated as fine print.</small>

ದಪ್ಪ

ಭಾರೀ ಫಾಂಟ್-ತೂಕದೊಂದಿಗೆ ಪಠ್ಯದ ತುಣುಕನ್ನು ಒತ್ತಿಹೇಳಲು.

ಕೆಳಗಿನ ಪಠ್ಯದ ತುಣುಕನ್ನು ದಪ್ಪ ಪಠ್ಯವಾಗಿ ನಿರೂಪಿಸಲಾಗಿದೆ .

<strong>rendered as bold text</strong>

ಇಟಾಲಿಕ್ಸ್

ಇಟಾಲಿಕ್ಸ್‌ನೊಂದಿಗೆ ಪಠ್ಯದ ತುಣುಕನ್ನು ಒತ್ತಿಹೇಳಲು.

ಕೆಳಗಿನ ಪಠ್ಯದ ತುಣುಕನ್ನು ಇಟಾಲಿಕ್ ಪಠ್ಯವಾಗಿ ನಿರೂಪಿಸಲಾಗಿದೆ .

<em>rendered as italicized text</em>

ಪರ್ಯಾಯ ಅಂಶಗಳು

<b>ಬಳಸಲು ಮತ್ತು <i>HTML5 ನಲ್ಲಿ ಮುಕ್ತವಾಗಿರಿ . ಧ್ವನಿ, ತಾಂತ್ರಿಕ ಪದಗಳು ಇತ್ಯಾದಿಗಳಿಗೆ <b>ಹೆಚ್ಚಿನ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ನೀಡದೆಯೇ ಪದಗಳು ಅಥವಾ ಪದಗುಚ್ಛಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ .<i>

ಜೋಡಣೆ ತರಗತಿಗಳು

ಪಠ್ಯ ಜೋಡಣೆ ತರಗತಿಗಳೊಂದಿಗೆ ಘಟಕಗಳಿಗೆ ಪಠ್ಯವನ್ನು ಸುಲಭವಾಗಿ ಮರುಹೊಂದಿಸಿ.

ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾದ ಪಠ್ಯ.

ಪಠ್ಯವನ್ನು ಮಧ್ಯಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ.

ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾದ ಪಠ್ಯ.

ಸಮರ್ಥನೀಯ ಪಠ್ಯ.

ಯಾವುದೇ ಸುತ್ತು ಪಠ್ಯವಿಲ್ಲ.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ರೂಪಾಂತರ ತರಗತಿಗಳು

ಪಠ್ಯ ಕ್ಯಾಪಿಟಲೈಸೇಶನ್ ತರಗತಿಗಳೊಂದಿಗೆ ಘಟಕಗಳಲ್ಲಿ ಪಠ್ಯವನ್ನು ಪರಿವರ್ತಿಸಿ.

ಚಿಕ್ಕ ಅಕ್ಷರದ ಪಠ್ಯ.

ದೊಡ್ಡಕ್ಷರ ಪಠ್ಯ.

ದೊಡ್ಡಕ್ಷರ ಪಠ್ಯ.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

ಸಂಕ್ಷೇಪಣಗಳು

<abbr>ವಿಸ್ತರಿತ ಆವೃತ್ತಿಯನ್ನು ಹೋವರ್‌ನಲ್ಲಿ ತೋರಿಸಲು ಸಂಕ್ಷೇಪಣಗಳು ಮತ್ತು ಪ್ರಥಮಾಕ್ಷರಗಳಿಗಾಗಿ HTML ನ ಅಂಶದ ಶೈಲೀಕೃತ ಅನುಷ್ಠಾನ . ಗುಣಲಕ್ಷಣದೊಂದಿಗಿನ ಸಂಕ್ಷೇಪಣಗಳು titleಹಗುರವಾದ ಚುಕ್ಕೆಗಳ ಕೆಳಭಾಗದ ಅಂಚು ಮತ್ತು ಹೋವರ್‌ನಲ್ಲಿ ಸಹಾಯ ಕರ್ಸರ್ ಅನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಇದು ಹೋವರ್‌ನಲ್ಲಿ ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚುವರಿ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಮೂಲ ಸಂಕ್ಷೇಪಣ

ಗುಣಲಕ್ಷಣ ಪದದ ಸಂಕ್ಷೇಪಣವು attr ಆಗಿದೆ .

<abbr title="attribute">attr</abbr>

ಪ್ರಾರಂಭಿಕತೆ

.initialismಸ್ವಲ್ಪ ಚಿಕ್ಕದಾದ ಫಾಂಟ್-ಗಾತ್ರಕ್ಕೆ ಸಂಕ್ಷೇಪಣವನ್ನು ಸೇರಿಸಿ .

ಸ್ಲೈಸ್ಡ್ ಬ್ರೆಡ್‌ನಿಂದ HTML ಅತ್ಯುತ್ತಮ ವಿಷಯವಾಗಿದೆ.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

ವಿಳಾಸಗಳು

ಹತ್ತಿರದ ಪೂರ್ವಜರಿಗೆ ಅಥವಾ ಕೆಲಸದ ಸಂಪೂರ್ಣ ದೇಹಕ್ಕೆ ಸಂಪರ್ಕ ಮಾಹಿತಿಯನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಿ. ಎಲ್ಲಾ ಸಾಲುಗಳನ್ನು ಕೊನೆಗೊಳಿಸುವ ಮೂಲಕ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸಂರಕ್ಷಿಸಿ <br>.

Twitter, Inc.
1355 ಮಾರ್ಕೆಟ್ ಸ್ಟ್ರೀಟ್, ಸೂಟ್ 900
ಸ್ಯಾನ್ ಫ್ರಾನ್ಸಿಸ್ಕೋ, CA 94103
P: (123) 456-7890
ಪೂರ್ಣ ಹೆಸರು
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ಬ್ಲಾಕ್‌ಕೋಟ್‌ಗಳು

ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಮತ್ತೊಂದು ಮೂಲದಿಂದ ವಿಷಯದ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಉಲ್ಲೇಖಿಸಲು.

ಡೀಫಾಲ್ಟ್ ಬ್ಲಾಕ್ ಕೋಟ್

ಉಲ್ಲೇಖದಂತೆ <blockquote>ಯಾವುದೇ HTML ಅನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ. ನೇರ ಉಲ್ಲೇಖಗಳಿಗಾಗಿ, ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ a <p>.

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಸಂಖ್ಯೆಯು ಹಿಂದಿನದು.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ಬ್ಲಾಕ್ ಕೋಟ್ ಆಯ್ಕೆಗಳು

ಸ್ಟ್ಯಾಂಡರ್ಡ್‌ನಲ್ಲಿ ಸರಳವಾದ ವ್ಯತ್ಯಾಸಗಳಿಗಾಗಿ ಶೈಲಿ ಮತ್ತು ವಿಷಯ ಬದಲಾವಣೆಗಳು <blockquote>.

ಮೂಲವನ್ನು ಹೆಸರಿಸುವುದು

<footer>ಮೂಲವನ್ನು ಗುರುತಿಸಲು a ಸೇರಿಸಿ . ಮೂಲ ಕೆಲಸದ ಹೆಸರನ್ನು ಸುತ್ತಿ <cite>.

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಸಂಖ್ಯೆಯು ಹಿಂದಿನದು.

ಮೂಲ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಯಾರೋ ಪ್ರಸಿದ್ಧರು 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ಪರ್ಯಾಯ ಪ್ರದರ್ಶನಗಳು

.blockquote-reverseಬಲಕ್ಕೆ ಜೋಡಿಸಲಾದ ವಿಷಯದೊಂದಿಗೆ ಬ್ಲಾಕ್‌ಕೋಟ್‌ಗಾಗಿ ಸೇರಿಸಿ .

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಸಂಖ್ಯೆಯು ಹಿಂದಿನದು.

ಮೂಲ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಯಾರೋ ಪ್ರಸಿದ್ಧರು 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

ಪಟ್ಟಿಗಳು

ಆದೇಶವಿಲ್ಲ

ಆದೇಶವು ಸ್ಪಷ್ಟವಾಗಿ ವಿಷಯವಲ್ಲದ ಐಟಂಗಳ ಪಟ್ಟಿ .

  • ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
  • ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
  • ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
  • ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
  • ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
    • ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್ ನೆಕ್ವೆ
    • ಪುರುಸ್ ಸೋಡೇಲ್ಸ್ ಅಲ್ಟ್ರಿಸಿಸ್
    • ವೆಸ್ಟಿಬುಲಮ್ ಲಾರೆಟ್ ಪೋರ್ಟಿಟರ್ ಸೆಮ್
    • ಎಸಿ ಟ್ರಿಸ್ಟಿಕ್ ಲಿಬೆರೊ ವಾಲ್ಟ್ಪಾಟ್ ನಲ್ಲಿ
  • ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
  • ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
  • ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್
<ul>
  <li>...</li>
</ul>

ಆದೇಶಿಸಿದರು

ಆದೇಶವು ಸ್ಪಷ್ಟವಾಗಿ ಮುಖ್ಯವಾದ ಐಟಂಗಳ ಪಟ್ಟಿ .

  1. ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
  2. ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
  3. ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
  4. ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
  5. ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
  6. ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
  7. ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
  8. ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್
<ol>
  <li>...</li>
</ol>

ಶೈಲಿಯಿಲ್ಲದ

ಪಟ್ಟಿಯ ಐಟಂಗಳಲ್ಲಿ ಡೀಫಾಲ್ಟ್ list-styleಮತ್ತು ಎಡ ಅಂಚನ್ನು ತೆಗೆದುಹಾಕಿ (ತಕ್ಷಣದ ಮಕ್ಕಳಿಗೆ ಮಾತ್ರ). ಇದು ತಕ್ಷಣದ ಮಕ್ಕಳ ಪಟ್ಟಿ ಐಟಂಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ , ಅಂದರೆ ನೀವು ಯಾವುದೇ ನೆಸ್ಟೆಡ್ ಪಟ್ಟಿಗಳಿಗೆ ವರ್ಗವನ್ನು ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ.

  • ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
  • ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
  • ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
  • ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
  • ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
    • ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್ ನೆಕ್ವೆ
    • ಪುರುಸ್ ಸೋಡೇಲ್ಸ್ ಅಲ್ಟ್ರಿಸಿಸ್
    • ವೆಸ್ಟಿಬುಲಮ್ ಲಾರೆಟ್ ಪೋರ್ಟಿಟರ್ ಸೆಮ್
    • ಎಸಿ ಟ್ರಿಸ್ಟಿಕ್ ಲಿಬೆರೊ ವಾಲ್ಟ್ಪಾಟ್ ನಲ್ಲಿ
  • ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
  • ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
  • ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್
<ul class="list-unstyled">
  <li>...</li>
</ul>

ಸಾಲಿನಲ್ಲಿ

ಎಲ್ಲಾ ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ಒಂದೇ ಸಾಲಿನಲ್ಲಿ display: inline-block;ಮತ್ತು ಕೆಲವು ಲೈಟ್ ಪ್ಯಾಡಿಂಗ್‌ನಲ್ಲಿ ಇರಿಸಿ.

  • ಲೋರೆಮ್ ಇಪ್ಸಮ್
  • ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್
  • ನುಲ್ಲಾ ವೋಲ್ಟ್ಪಟ್
<ul class="list-inline">
  <li>...</li>
</ul>

ವಿವರಣೆ

ಅವುಗಳ ಸಂಬಂಧಿತ ವಿವರಣೆಗಳೊಂದಿಗೆ ಪದಗಳ ಪಟ್ಟಿ.

ವಿವರಣೆ ಪಟ್ಟಿಗಳು
ಪದಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ವಿವರಣೆ ಪಟ್ಟಿಯು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಯುಯಿಸ್ಮೋಡ್
ವೆಸ್ಟಿಬುಲಮ್ ಐಡಿ ಲಿಗುಲಾ ಪೋರ್ಟಾ ಫೆಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್ ಸೆಂಪರ್ ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್.
ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್.
ಮಲೆಸುವಾದ ಪೋರ್ಟಾ
ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್. 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

ಸಮತಲ ವಿವರಣೆ

ನಿಯಮಗಳು ಮತ್ತು ವಿವರಣೆಗಳನ್ನು <dl>ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಸಾಲಿನಲ್ಲಿ ಮಾಡಿ. ಡೀಫಾಲ್ಟ್ s ನಂತೆ ಪೇರಿಸಿದಂತೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ <dl>, ಆದರೆ navbar ವಿಸ್ತರಿಸಿದಾಗ, ಇವುಗಳನ್ನು ಮಾಡಿ.

ವಿವರಣೆ ಪಟ್ಟಿಗಳು
ಪದಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ವಿವರಣೆ ಪಟ್ಟಿಯು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಯುಯಿಸ್ಮೋಡ್
ವೆಸ್ಟಿಬುಲಮ್ ಐಡಿ ಲಿಗುಲಾ ಪೋರ್ಟಾ ಫೆಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್ ಸೆಂಪರ್ ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್.
ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್.
ಮಲೆಸುವಾದ ಪೋರ್ಟಾ
ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್.
ಫೆಲಿಸ್ ಯುಯಿಸ್ಮಾಡ್ ಸೆಂಪರ್ ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ
ಫ್ಯೂಸ್ ಡ್ಯಾಪಿಬಸ್, ಟೆಲ್ಲಸ್ ಎಸಿ ಕರ್ಸಸ್ ಕಮೊಡೊ, ಟಾರ್ಟರ್ ಮಾರಿಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಿಬ್, ಯುಟ್ ಫರ್ಮೆಂಟಮ್ ಮಸ್ಸಾ ಜಸ್ಟೊ ಸಿಟ್ ಅಮೆಟ್ ರಿಸಸ್. 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ಸ್ವಯಂ ಮೊಟಕುಗೊಳಿಸುವಿಕೆ

ಸಮತಲ ವಿವರಣೆ ಪಟ್ಟಿಗಳು ಎಡ ಕಾಲಮ್‌ನಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳಲು ತುಂಬಾ ಉದ್ದವಾಗಿರುವ ಪದಗಳನ್ನು ಮೊಟಕುಗೊಳಿಸುತ್ತವೆ text-overflow. ಕಿರಿದಾದ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಲ್ಲಿ, ಅವು ಡಿಫಾಲ್ಟ್ ಸ್ಟ್ಯಾಕ್ ಮಾಡಿದ ಲೇಔಟ್‌ಗೆ ಬದಲಾಗುತ್ತವೆ.

ಕೋಡ್

ಸಾಲಿನಲ್ಲಿ

ನೊಂದಿಗೆ ಕೋಡ್‌ನ ಇನ್‌ಲೈನ್ ತುಣುಕುಗಳನ್ನು ಸುತ್ತಿ <code>.

ಉದಾಹರಣೆಗೆ, <section>ಇನ್ಲೈನ್ನಂತೆ ಸುತ್ತಿಡಬೇಕು. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ಬಳಕೆದಾರರ ಇನ್ಪುಟ್

<kbd>ಕೀಬೋರ್ಡ್ ಮೂಲಕ ಸಾಮಾನ್ಯವಾಗಿ ನಮೂದಿಸಲಾದ ಇನ್‌ಪುಟ್ ಅನ್ನು ಸೂಚಿಸಲು ಬಳಸಿ .

cdಡೈರೆಕ್ಟರಿಗಳನ್ನು ಬದಲಾಯಿಸಲು, ಡೈರೆಕ್ಟರಿಯ ಹೆಸರನ್ನು ಟೈಪ್ ಮಾಡಿ.
ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಎಡಿಟ್ ಮಾಡಲು, ಒತ್ತಿರಿ ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

ಮೂಲ ಬ್ಲಾಕ್

<pre>ಕೋಡ್‌ನ ಬಹು ಸಾಲುಗಳಿಗಾಗಿ ಬಳಸಿ . ಸರಿಯಾದ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಕೋಡ್‌ನಲ್ಲಿನ ಯಾವುದೇ ಕೋನ ಬ್ರಾಕೆಟ್‌ಗಳಿಂದ ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ.

<p>ಮಾದರಿ ಪಠ್ಯ ಇಲ್ಲಿದೆ...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

ನೀವು ಐಚ್ಛಿಕವಾಗಿ ಸೇರಿಸಬಹುದು.pre-scrollable ವರ್ಗವನ್ನು ಸೇರಿಸಬಹುದು, ಇದು 350px ಗರಿಷ್ಠ ಎತ್ತರವನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಮತ್ತು y-ಆಕ್ಸಿಸ್ ಸ್ಕ್ರಾಲ್‌ಬಾರ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಅಸ್ಥಿರ

ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಸೂಚಿಸಲು <var>ಟ್ಯಾಗ್ ಬಳಸಿ.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ಮಾದರಿ ಔಟ್ಪುಟ್

ಪ್ರೋಗ್ರಾಂನಿಂದ ಬ್ಲಾಕ್ಗಳ ಮಾದರಿ ಔಟ್ಪುಟ್ ಅನ್ನು ಸೂಚಿಸಲು <samp>ಟ್ಯಾಗ್ ಬಳಸಿ.

ಈ ಪಠ್ಯವನ್ನು ಕಂಪ್ಯೂಟರ್ ಪ್ರೋಗ್ರಾಂನಿಂದ ಮಾದರಿ ಔಟ್ಪುಟ್ ಎಂದು ಪರಿಗಣಿಸಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

ಕೋಷ್ಟಕಗಳು

ಮೂಲ ಉದಾಹರಣೆ

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

ಐಚ್ಛಿಕ ಟೇಬಲ್ ಶೀರ್ಷಿಕೆ.
# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<table class="table">
  ...
</table>

ಪಟ್ಟೆ ಸಾಲುಗಳು

.table-stripedಒಳಗೆ ಯಾವುದೇ ಟೇಬಲ್ ಸಾಲಿಗೆ ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪಿಂಗ್ ಅನ್ನು ಸೇರಿಸಲು ಬಳಸಿ <tbody>.

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

:nth-childಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 8 ರಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲದ CSS ಸೆಲೆಕ್ಟರ್ ಮೂಲಕ ಪಟ್ಟೆ ಕೋಷ್ಟಕಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ .

# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<table class="table table-striped">
  ...
</table>

ಬಾರ್ಡರ್ ಟೇಬಲ್

.table-borderedಟೇಬಲ್ ಮತ್ತು ಕೋಶಗಳ ಎಲ್ಲಾ ಬದಿಗಳಲ್ಲಿ ಗಡಿಗಳಿಗಾಗಿ ಸೇರಿಸಿ .

# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<table class="table table-bordered">
  ...
</table>

ಸಾಲುಗಳನ್ನು ಹೋವರ್ ಮಾಡಿ

.table-hoverಒಂದು ಒಳಗೆ ಟೇಬಲ್ ಸಾಲುಗಳಲ್ಲಿ ಹೋವರ್ ಸ್ಥಿತಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಸೇರಿಸಿ <tbody>.

# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<table class="table table-hover">
  ...
</table>

ಮಂದಗೊಳಿಸಿದ ಟೇಬಲ್

.table-condensedಸೆಲ್ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಅರ್ಧದಷ್ಟು ಕತ್ತರಿಸುವ ಮೂಲಕ ಕೋಷ್ಟಕಗಳನ್ನು ಹೆಚ್ಚು ಸಾಂದ್ರವಾಗಿಸಲು ಸೇರಿಸಿ .

# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter 
<table class="table table-condensed">
  ...
</table>

ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳು

ಟೇಬಲ್ ಸಾಲುಗಳು ಅಥವಾ ಪ್ರತ್ಯೇಕ ಕೋಶಗಳನ್ನು ಬಣ್ಣ ಮಾಡಲು ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.

ವರ್ಗ ವಿವರಣೆ
.active ನಿರ್ದಿಷ್ಟ ಸಾಲು ಅಥವಾ ಕೋಶಕ್ಕೆ ಹೂವರ್ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ
.success ಯಶಸ್ವಿ ಅಥವಾ ಧನಾತ್ಮಕ ಕ್ರಿಯೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ
.info ತಟಸ್ಥ ಮಾಹಿತಿ ಬದಲಾವಣೆ ಅಥವಾ ಕ್ರಿಯೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ
.warning ಗಮನ ಅಗತ್ಯವಿರುವ ಎಚ್ಚರಿಕೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ
.danger ಅಪಾಯಕಾರಿ ಅಥವಾ ಸಂಭಾವ್ಯ ನಕಾರಾತ್ಮಕ ಕ್ರಿಯೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ
# ಕಾಲಮ್ ಶಿರೋನಾಮೆ ಕಾಲಮ್ ಶಿರೋನಾಮೆ ಕಾಲಮ್ ಶಿರೋನಾಮೆ
1 ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ
2 ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ
3 ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ
4 ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ
5 ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ
6 ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ
7 ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ
8 ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ
9 ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ ಕಾಲಮ್ ವಿಷಯ 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು

ಟೇಬಲ್ ಸಾಲು ಅಥವಾ ಪ್ರತ್ಯೇಕ ಕೋಶಕ್ಕೆ ಅರ್ಥವನ್ನು ಸೇರಿಸಲು ಬಣ್ಣವನ್ನು ಬಳಸುವುದು ಕೇವಲ ದೃಶ್ಯ ಸೂಚನೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ರವಾನೆಯಾಗುವುದಿಲ್ಲ. ಬಣ್ಣದಿಂದ ಸೂಚಿಸಲಾದ ಮಾಹಿತಿಯು ವಿಷಯದಿಂದಲೇ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಸಂಬಂಧಿತ ಟೇಬಲ್ ಸಾಲು/ಸೆಲ್‌ನಲ್ಲಿ ಗೋಚರಿಸುವ ಪಠ್ಯ), ಅಥವಾ .sr-onlyವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಲಾಗಿರುವ ಹೆಚ್ಚುವರಿ ಪಠ್ಯದಂತಹ ಪರ್ಯಾಯ ವಿಧಾನಗಳ ಮೂಲಕ ಸೇರಿಸಲಾಗಿದೆ.

ರೆಸ್ಪಾನ್ಸಿವ್ ಕೋಷ್ಟಕಗಳು

ಸಣ್ಣ ಸಾಧನಗಳಲ್ಲಿ (768px ಅಡಿಯಲ್ಲಿ) ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರಾಲ್ ಮಾಡಲು .tableಯಾವುದನ್ನಾದರೂ ಸುತ್ತುವ ಮೂಲಕ ಸ್ಪಂದಿಸುವ ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸಿ . .table-responsive768px ಅಗಲಕ್ಕಿಂತ ದೊಡ್ಡದನ್ನು ವೀಕ್ಷಿಸುವಾಗ, ಈ ಕೋಷ್ಟಕಗಳಲ್ಲಿ ನೀವು ಯಾವುದೇ ವ್ಯತ್ಯಾಸವನ್ನು ಕಾಣುವುದಿಲ್ಲ.

ಲಂಬ ಕ್ಲಿಪ್ಪಿಂಗ್ / ಮೊಟಕುಗೊಳಿಸುವಿಕೆ

ರೆಸ್ಪಾನ್ಸಿವ್ ಕೋಷ್ಟಕಗಳು ಬಳಸುತ್ತವೆ overflow-y: hidden, ಇದು ಟೇಬಲ್‌ನ ಕೆಳಗಿನ ಅಥವಾ ಮೇಲಿನ ಅಂಚುಗಳನ್ನು ಮೀರಿದ ಯಾವುದೇ ವಿಷಯವನ್ನು ಕ್ಲಿಪ್ ಮಾಡುತ್ತದೆ. ನಿರ್ದಿಷ್ಟವಾಗಿ, ಇದು ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳು ಮತ್ತು ಇತರ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ವಿಜೆಟ್‌ಗಳನ್ನು ಕ್ಲಿಪ್ ಮಾಡಬಹುದು.

ಫೈರ್‌ಫಾಕ್ಸ್ ಮತ್ತು ಫೀಲ್ಡ್‌ಸೆಟ್‌ಗಳು

ಫೈರ್‌ಫಾಕ್ಸ್ ಕೆಲವು ವಿಚಿತ್ರವಾದ ಫೀಲ್ಡ್‌ಸೆಟ್ ಸ್ಟೈಲಿಂಗ್ widthಅನ್ನು ಹೊಂದಿದ್ದು ಅದು ಸ್ಪಂದಿಸುವ ಟೇಬಲ್‌ಗೆ ಅಡ್ಡಿಪಡಿಸುತ್ತದೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ನಾವು ಒದಗಿಸದ Firefox-ನಿರ್ದಿಷ್ಟ ಹ್ಯಾಕ್ ಇಲ್ಲದೆ ಇದನ್ನು ಅತಿಕ್ರಮಿಸಲಾಗುವುದಿಲ್ಲ :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ, ಈ ಸ್ಟ್ಯಾಕ್ ಓವರ್‌ಫ್ಲೋ ಉತ್ತರವನ್ನು ಓದಿ .

# ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ
1 ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್
2 ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್
3 ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್
# ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ ಟೇಬಲ್ ಶಿರೋನಾಮೆ
1 ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್
2 ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್
3 ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ ಟೇಬಲ್ ಸೆಲ್ 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ರೂಪಗಳು

ಮೂಲ ಉದಾಹರಣೆ

ವೈಯಕ್ತಿಕ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕೆಲವು ಜಾಗತಿಕ ಶೈಲಿಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತವೆ. ಎಲ್ಲಾ ಪಠ್ಯ <input>, <textarea>ಮತ್ತು <select>ಅಂಶಗಳನ್ನು ಡೀಫಾಲ್ಟ್ .form-controlಆಗಿ ಹೊಂದಿಸಲಾಗಿದೆ . width: 100%;ಗರಿಷ್ಠ ಅಂತರಕ್ಕಾಗಿ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ನಿಯಂತ್ರಣಗಳನ್ನು .form-groupಸುತ್ತಿ.

ಉದಾಹರಣೆ ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಸಹಾಯ ಪಠ್ಯ ಇಲ್ಲಿದೆ.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳೊಂದಿಗೆ ಫಾರ್ಮ್ ಗುಂಪುಗಳನ್ನು ಮಿಶ್ರಣ ಮಾಡಬೇಡಿ

ಫಾರ್ಮ್ ಗುಂಪುಗಳನ್ನು ನೇರವಾಗಿ ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳೊಂದಿಗೆ ಬೆರೆಸಬೇಡಿ . ಬದಲಿಗೆ, ಫಾರ್ಮ್ ಗುಂಪಿನ ಒಳಗೆ ಇನ್‌ಪುಟ್ ಗುಂಪನ್ನು ನೆಸ್ಟ್ ಮಾಡಿ.

ಇನ್ಲೈನ್ ​​ರೂಪ

ಎಡ-ಜೋಡಣೆ ಮತ್ತು ಇನ್‌ಲೈನ್-ಬ್ಲಾಕ್ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗೆ ಸೇರಿಸಿ .form-inline(ಇದು a ಆಗಿರಬೇಕಾಗಿಲ್ಲ ). ಇದು ಕನಿಷ್ಟ 768px ಅಗಲವಿರುವ ವ್ಯೂಪೋರ್ಟ್‌ಗಳೊಳಗಿನ ಫಾರ್ಮ್‌ಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ.<form>

ಕಸ್ಟಮ್ ಅಗಲಗಳು ಬೇಕಾಗಬಹುದು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಇನ್‌ಪುಟ್‌ಗಳು ಮತ್ತು ಆಯ್ಕೆಗಳು width: 100%;ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಅನ್ವಯಿಸಲ್ಪಟ್ಟಿವೆ. ಇನ್‌ಲೈನ್ ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ, width: auto;ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಬಹು ನಿಯಂತ್ರಣಗಳು ಇರುವಂತೆ ನಾವು ಮರುಹೊಂದಿಸುತ್ತೇವೆ. ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಅವಲಂಬಿಸಿ, ಹೆಚ್ಚುವರಿ ಕಸ್ಟಮ್ ಅಗಲಗಳು ಬೇಕಾಗಬಹುದು.

ಯಾವಾಗಲೂ ಲೇಬಲ್‌ಗಳನ್ನು ಸೇರಿಸಿ

ನೀವು ಪ್ರತಿ ಇನ್‌ಪುಟ್‌ಗೆ ಲೇಬಲ್ ಅನ್ನು ಸೇರಿಸದಿದ್ದರೆ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳೊಂದಿಗೆ ತೊಂದರೆಯನ್ನು ಹೊಂದಿರುತ್ತಾರೆ. .sr-onlyಈ ಇನ್‌ಲೈನ್ ಫಾರ್ಮ್‌ಗಳಿಗಾಗಿ, ನೀವು ವರ್ಗವನ್ನು ಬಳಸಿಕೊಂಡು ಲೇಬಲ್‌ಗಳನ್ನು ಮರೆಮಾಡಬಹುದು . ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಲೇಬಲ್ ಅನ್ನು ಒದಗಿಸುವ ಪರ್ಯಾಯ ವಿಧಾನಗಳಿವೆ, ಉದಾಹರಣೆಗೆ aria-label, aria-labelledbyಅಥವಾ titleಗುಣಲಕ್ಷಣ. ಇವುಗಳಲ್ಲಿ ಯಾವುದೂ ಇಲ್ಲದಿದ್ದರೆ, ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು placeholderಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿದರೆ, ಆದರೆ placeholderಇತರ ಲೇಬಲಿಂಗ್ ವಿಧಾನಗಳಿಗೆ ಬದಲಿಯಾಗಿ ಬಳಸಲು ಸಲಹೆ ನೀಡಲಾಗುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00 
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

ಸಮತಲ ರೂಪ

ಫಾರ್ಮ್‌ಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳ ಗುಂಪುಗಳನ್ನು ಸಮತಲ ಲೇಔಟ್‌ನಲ್ಲಿ ಜೋಡಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿ .form-horizontal(ಇದು a ಆಗಿರಬೇಕಾಗಿಲ್ಲ <form>). ಹಾಗೆ ಮಾಡುವುದರಿಂದ ಗಳು ಗ್ರಿಡ್ ಸಾಲುಗಳಂತೆ ವರ್ತಿಸುವಂತೆ ಬದಲಾಗುತ್ತದೆ .form-group, ಆದ್ದರಿಂದ ಅಗತ್ಯವಿಲ್ಲ .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

ಬೆಂಬಲಿತ ನಿಯಂತ್ರಣಗಳು

ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳ ಉದಾಹರಣೆಗಳು ಉದಾಹರಣೆ ಫಾರ್ಮ್ ಲೇಔಟ್‌ನಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆ.

ಒಳಹರಿವು

ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣ, ಪಠ್ಯ-ಆಧಾರಿತ ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳು. ಎಲ್ಲಾ HTML5 ಪ್ರಕಾರಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿದೆ: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telಮತ್ತು color.

ಪ್ರಕಾರದ ಘೋಷಣೆ ಅಗತ್ಯವಿದೆ

typeಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಡಿಕ್ಲೇರ್ ಮಾಡಿದರೆ ಮಾತ್ರ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಟೈಲ್ ಮಾಡಲಾಗುತ್ತದೆ .

<input type="text" class="form-control" placeholder="Text input">

ಇನ್ಪುಟ್ ಗುಂಪುಗಳು

ಯಾವುದೇ ಪಠ್ಯ ಆಧಾರಿತ ಮೊದಲು ಮತ್ತು/ಅಥವಾ ನಂತರ ಸಂಯೋಜಿತ ಪಠ್ಯ ಅಥವಾ ಬಟನ್‌ಗಳನ್ನು ಸೇರಿಸಲು <input>, ಇನ್‌ಪುಟ್ ಗುಂಪಿನ ಘಟಕವನ್ನು ಪರಿಶೀಲಿಸಿ .

ಟೆಕ್ಸ್ಟೇರಿಯಾ

ಪಠ್ಯದ ಬಹು ಸಾಲುಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣ. rowsಅಗತ್ಯವಿರುವಂತೆ ಗುಣಲಕ್ಷಣವನ್ನು ಬದಲಾಯಿಸಿ .

<textarea class="form-control" rows="3"></textarea>

ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೋಗಳು

ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಪಟ್ಟಿಯಲ್ಲಿ ಒಂದು ಅಥವಾ ಹಲವಾರು ಆಯ್ಕೆಗಳನ್ನು ಆಯ್ಕೆಮಾಡಲು, ರೇಡಿಯೋಗಳು ಅನೇಕದಿಂದ ಒಂದು ಆಯ್ಕೆಯನ್ನು ಆರಿಸಲು.

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳನ್ನು ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಪೋಷಕರ ಹೋವರ್‌ನಲ್ಲಿ "ಅನುಮತಿಸದ" ಕರ್ಸರ್ ಅನ್ನು ಒದಗಿಸಲು , ನೀವು ಪೋಷಕರಿಗೆ ವರ್ಗವನ್ನು <label>ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ , , , ಅಥವಾ ..disabled.radio.radio-inline.checkbox.checkbox-inline

ಡೀಫಾಲ್ಟ್ (ಸ್ಟ್ಯಾಕ್ ಮಾಡಲಾಗಿದೆ)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ಇನ್ಲೈನ್ ​​ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೋಗಳು

ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಗೋಚರಿಸುವ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಅಥವಾ ರೇಡಿಯೊಗಳ ಸರಣಿಯಲ್ಲಿ .checkbox-inlineಅಥವಾ ತರಗತಿಗಳನ್ನು ಬಳಸಿ ..radio-inline


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

ಲೇಬಲ್ ಪಠ್ಯವಿಲ್ಲದ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೋಗಳು

ನೀವು ಒಳಗೆ ಯಾವುದೇ ಪಠ್ಯವನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ <label>, ನೀವು ನಿರೀಕ್ಷಿಸಿದಂತೆ ಇನ್‌ಪುಟ್ ಅನ್ನು ಇರಿಸಲಾಗುತ್ತದೆ. ಪ್ರಸ್ತುತ ಇನ್‌ಲೈನ್ ಅಲ್ಲದ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳಲ್ಲಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗಾಗಿ ಇನ್ನೂ ಕೆಲವು ರೀತಿಯ ಲೇಬಲ್ ಅನ್ನು ಒದಗಿಸಲು ಮರೆಯದಿರಿ (ಉದಾಹರಣೆಗೆ, ಬಳಸಿ aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

ಆಯ್ಕೆಮಾಡುತ್ತದೆ

ಅನೇಕ ಸ್ಥಳೀಯ ಆಯ್ದ ಮೆನುಗಳು-ಅಂದರೆ Safari ಮತ್ತು Chrome ನಲ್ಲಿ ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ಹೊಂದಿದ್ದು ಅದನ್ನು border-radiusಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಮಾರ್ಪಡಿಸಲಾಗುವುದಿಲ್ಲ.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ , multipleಬಹು ಆಯ್ಕೆಗಳನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ತೋರಿಸಲಾಗುತ್ತದೆ.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ಸ್ಥಿರ ನಿಯಂತ್ರಣ

ಫಾರ್ಮ್‌ನೊಳಗೆ ಫಾರ್ಮ್ ಲೇಬಲ್‌ನ ಪಕ್ಕದಲ್ಲಿ ನೀವು ಸರಳ ಪಠ್ಯವನ್ನು ಇರಿಸಬೇಕಾದಾಗ, a ನಲ್ಲಿ .form-control-staticವರ್ಗವನ್ನು ಬಳಸಿ <p>.

[email protected]

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

[email protected]

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ಕೇಂದ್ರೀಕೃತ ಸ್ಥಿತಿ

outlineನಾವು ಕೆಲವು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತೇವೆ ಮತ್ತು box-shadowಗಾಗಿ ಅದರ ಸ್ಥಳದಲ್ಲಿ a ಅನ್ನು ಅನ್ವಯಿಸುತ್ತೇವೆ :focus.

ಡೆಮೊ :focusರಾಜ್ಯ

:focusಮೇಲಿನ ಉದಾಹರಣೆ ಇನ್‌ಪುಟ್ ನಮ್ಮ ದಾಖಲಾತಿಯಲ್ಲಿ ಸ್ಥಿತಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಕಸ್ಟಮ್ ಶೈಲಿಗಳನ್ನು ಬಳಸುತ್ತದೆ .form-control.

ಅಂಗವಿಕಲ ಸ್ಥಿತಿ

disabledಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ತಡೆಯಲು ಇನ್‌ಪುಟ್‌ನಲ್ಲಿ ಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ . ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಇನ್‌ಪುಟ್‌ಗಳು ಹಗುರವಾಗಿ ಗೋಚರಿಸುತ್ತವೆ ಮತ್ತು not-allowedಕರ್ಸರ್ ಅನ್ನು ಸೇರಿಸುತ್ತವೆ.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಕ್ಷೇತ್ರಗಳು

ಎಲ್ಲಾ ನಿಯಂತ್ರಣಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು disableda ಗೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .<fieldset><fieldset>

ನ ಲಿಂಕ್ ಕ್ರಿಯಾತ್ಮಕತೆಯ ಬಗ್ಗೆ ಎಚ್ಚರಿಕೆ<a>

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಬ್ರೌಸರ್‌ಗಳು ಎಲ್ಲಾ ಸ್ಥಳೀಯ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ( <input>, <select>ಮತ್ತು <button>ಅಂಶಗಳು) <fieldset disabled>ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ ಎಂದು ಪರಿಗಣಿಸುತ್ತದೆ, ಅವುಗಳ ಮೇಲೆ ಕೀಬೋರ್ಡ್ ಮತ್ತು ಮೌಸ್ ಸಂವಹನಗಳನ್ನು ತಡೆಯುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಫಾರ್ಮ್ <a ... class="btn btn-*">ಅಂಶಗಳನ್ನೂ ಒಳಗೊಂಡಿದ್ದರೆ, ಇವುಗಳಿಗೆ ಶೈಲಿಯನ್ನು ಮಾತ್ರ ನೀಡಲಾಗುತ್ತದೆ pointer-events: none. ಬಟನ್‌ಗಳಿಗಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಸ್ಥಿತಿಯ ವಿಭಾಗದಲ್ಲಿ ಗಮನಿಸಿದಂತೆ (ಮತ್ತು ನಿರ್ದಿಷ್ಟವಾಗಿ ಆಂಕರ್ ಅಂಶಗಳಿಗಾಗಿ ಉಪ-ವಿಭಾಗದಲ್ಲಿ), ಈ CSS ಆಸ್ತಿಯನ್ನು ಇನ್ನೂ ಪ್ರಮಾಣೀಕರಿಸಲಾಗಿಲ್ಲ ಮತ್ತು ಒಪೇರಾ 18 ಮತ್ತು ಕೆಳಗಿನವುಗಳಲ್ಲಿ ಅಥವಾ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 11 ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ ಮತ್ತು ಗೆದ್ದಿದೆ ಈ ಲಿಂಕ್‌ಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಅಥವಾ ಸಕ್ರಿಯಗೊಳಿಸಲು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರನ್ನು ತಡೆಯುವುದಿಲ್ಲ. ಆದ್ದರಿಂದ ಸುರಕ್ಷಿತವಾಗಿರಲು, ಅಂತಹ ಲಿಂಕ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

disabledಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಈ ಶೈಲಿಗಳನ್ನು ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅನ್ವಯಿಸುತ್ತದೆ, Internet Explorer 11 ಮತ್ತು ಕೆಳಗಿನವುಗಳು a ನಲ್ಲಿ ಗುಣಲಕ್ಷಣವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ <fieldset>. ಈ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಫೀಲ್ಡ್‌ಸೆಟ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ಓದಲು ಮಾತ್ರ ರಾಜ್ಯ

readonlyಇನ್‌ಪುಟ್‌ನ ಮೌಲ್ಯವನ್ನು ಮಾರ್ಪಡಿಸುವುದನ್ನು ತಡೆಯಲು ಇನ್‌ಪುಟ್‌ನಲ್ಲಿ ಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ . ಓದಲು-ಮಾತ್ರ ಇನ್‌ಪುಟ್‌ಗಳು ಹಗುರವಾಗಿ ಕಾಣಿಸುತ್ತವೆ (ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಇನ್‌ಪುಟ್‌ಗಳಂತೆಯೇ), ಆದರೆ ಪ್ರಮಾಣಿತ ಕರ್ಸರ್ ಅನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

ಸಹಾಯ ಪಠ್ಯ

ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ ಬ್ಲಾಕ್ ಮಟ್ಟದ ಸಹಾಯ ಪಠ್ಯ.

ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಸಂಯೋಜಿಸುವುದು

ಸಹಾಯ ಪಠ್ಯವು ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವುದಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಸಂಬಂಧಿಸಿರಬೇಕು aria-describedby. ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು - ಬಳಕೆದಾರರು ಗಮನಹರಿಸಿದಾಗ ಅಥವಾ ನಿಯಂತ್ರಣವನ್ನು ಪ್ರವೇಶಿಸಿದಾಗ ಈ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಪ್ರಕಟಿಸುತ್ತದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಸಹಾಯ ಪಠ್ಯದ ಬ್ಲಾಕ್ ಹೊಸ ಸಾಲಿಗೆ ಒಡೆಯುತ್ತದೆ ಮತ್ತು ಒಂದು ಸಾಲನ್ನು ಮೀರಿ ವಿಸ್ತರಿಸಬಹುದು. 
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

ಮಾನ್ಯತೆ ಹೇಳುತ್ತದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಲ್ಲಿನ ದೋಷ, ಎಚ್ಚರಿಕೆ ಮತ್ತು ಯಶಸ್ಸಿನ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ಮೌಲ್ಯೀಕರಣ ಶೈಲಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಬಳಸಲು, ಸೇರಿಸಲು .has-warning, .has-errorಅಥವಾ .has-successಮೂಲ ಅಂಶಕ್ಕೆ. ಯಾವುದೇ .control-label, .form-controlಮತ್ತು .help-blockಆ ಅಂಶದ ಒಳಗೆ ಮೌಲ್ಯೀಕರಣ ಶೈಲಿಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ.

ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು ಮತ್ತು ಕಲರ್‌ಬ್ಲೈಂಡ್ ಬಳಕೆದಾರರಿಗೆ ಮೌಲ್ಯೀಕರಣ ಸ್ಥಿತಿಯನ್ನು ತಿಳಿಸುವುದು

ಫಾರ್ಮ್ ನಿಯಂತ್ರಣದ ಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸಲು ಈ ಮೌಲ್ಯೀಕರಣ ಶೈಲಿಗಳನ್ನು ಬಳಸುವುದು ದೃಷ್ಟಿಗೋಚರ, ಬಣ್ಣ-ಆಧಾರಿತ ಸೂಚನೆಯನ್ನು ಮಾತ್ರ ಒದಗಿಸುತ್ತದೆ, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ಅಥವಾ ಬಣ್ಣ ಕುರುಡು ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಸಲಾಗುವುದಿಲ್ಲ.

ರಾಜ್ಯದ ಪರ್ಯಾಯ ಸೂಚನೆಯನ್ನು ಸಹ ಒದಗಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಉದಾಹರಣೆಗೆ, ನೀವು ಫಾರ್ಮ್ ಕಂಟ್ರೋಲ್ <label>ಪಠ್ಯದಲ್ಲಿಯೇ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ಸುಳಿವನ್ನು ಸೇರಿಸಬಹುದು (ಕೆಳಗಿನ ಕೋಡ್ ಉದಾಹರಣೆಯಲ್ಲಿರುವಂತೆ), ಗ್ಲಿಫಿಕಾನ್.sr-only ಅನ್ನು ಸೇರಿಸಿ ( ಕ್ಲಾಸ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸೂಕ್ತವಾದ ಪರ್ಯಾಯ ಪಠ್ಯದೊಂದಿಗೆ - ಗ್ಲಿಫಿಕಾನ್ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡಿ ) ಅಥವಾ ಒದಗಿಸುವ ಮೂಲಕ ಹೆಚ್ಚುವರಿ ಸಹಾಯ ಪಠ್ಯ ಬ್ಲಾಕ್. ನಿರ್ದಿಷ್ಟವಾಗಿ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗಾಗಿ, ಅಮಾನ್ಯವಾದ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಸಹ aria-invalid="true"ಗುಣಲಕ್ಷಣವನ್ನು ನಿಯೋಜಿಸಬಹುದು.

ಸಹಾಯ ಪಠ್ಯದ ಬ್ಲಾಕ್ ಹೊಸ ಸಾಲಿಗೆ ಒಡೆಯುತ್ತದೆ ಮತ್ತು ಒಂದು ಸಾಲನ್ನು ಮೀರಿ ವಿಸ್ತರಿಸಬಹುದು. 
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

ಐಚ್ಛಿಕ ಐಕಾನ್‌ಗಳೊಂದಿಗೆ

.has-feedbackನೀವು ಸೇರ್ಪಡೆ ಮತ್ತು ಬಲ ಐಕಾನ್ ಜೊತೆಗೆ ಐಚ್ಛಿಕ ಪ್ರತಿಕ್ರಿಯೆ ಐಕಾನ್‌ಗಳನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು .

ಪ್ರತಿಕ್ರಿಯೆ ಐಕಾನ್‌ಗಳು ಪಠ್ಯ <input class="form-control">ಅಂಶಗಳೊಂದಿಗೆ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.

ಐಕಾನ್‌ಗಳು, ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳು

ಲೇಬಲ್ ಇಲ್ಲದ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಮತ್ತು ಬಲಭಾಗದಲ್ಲಿ ಆಡ್- ಆನ್‌ನೊಂದಿಗೆ ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆ ಐಕಾನ್‌ಗಳ ಹಸ್ತಚಾಲಿತ ಸ್ಥಾನೀಕರಣದ ಅಗತ್ಯವಿದೆ. ಪ್ರವೇಶಿಸುವಿಕೆ ಕಾರಣಗಳಿಗಾಗಿ ಎಲ್ಲಾ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಲೇಬಲ್‌ಗಳನ್ನು ಒದಗಿಸಲು ನಿಮ್ಮನ್ನು ಬಲವಾಗಿ ಪ್ರೋತ್ಸಾಹಿಸಲಾಗುತ್ತದೆ. ಲೇಬಲ್‌ಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದನ್ನು ತಡೆಯಲು ನೀವು ಬಯಸಿದರೆ, ಅವುಗಳನ್ನು .sr-onlyವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಿ. ನೀವು ಲೇಬಲ್‌ಗಳಿಲ್ಲದೆಯೇ ಮಾಡಬೇಕಾದರೆ top, ಪ್ರತಿಕ್ರಿಯೆ ಐಕಾನ್‌ನ ಮೌಲ್ಯವನ್ನು ಸರಿಹೊಂದಿಸಿ. ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳಿಗಾಗಿ, rightನಿಮ್ಮ ಆಡ್‌ಆನ್‌ನ ಅಗಲವನ್ನು ಅವಲಂಬಿಸಿ ಮೌಲ್ಯವನ್ನು ಸೂಕ್ತವಾದ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸಿ.

ಐಕಾನ್‌ನ ಅರ್ಥವನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ತಿಳಿಸುವುದು

ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು ಐಕಾನ್‌ನ ಅರ್ಥವನ್ನು ಸರಿಯಾಗಿ ತಿಳಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಹೆಚ್ಚುವರಿ ಗುಪ್ತ ಪಠ್ಯವನ್ನು ವರ್ಗದೊಂದಿಗೆ ಸೇರಿಸಬೇಕು ಮತ್ತು .sr-onlyಅದನ್ನು ಬಳಸುವುದಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಸಂಯೋಜಿಸಬೇಕು aria-describedby. <label>ಪರ್ಯಾಯವಾಗಿ, ಅರ್ಥವನ್ನು (ಉದಾಹರಣೆಗೆ, ನಿರ್ದಿಷ್ಟ ಪಠ್ಯ ಪ್ರವೇಶ ಕ್ಷೇತ್ರಕ್ಕೆ ಎಚ್ಚರಿಕೆ ಇದೆ ಎಂಬ ಅಂಶ) ಫಾರ್ಮ್ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ ವಾಸ್ತವದ ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸುವಂತಹ ಇತರ ರೂಪದಲ್ಲಿ ತಿಳಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ .

ಕೆಳಗಿನ ಉದಾಹರಣೆಗಳು ಈಗಾಗಲೇ ಪಠ್ಯದಲ್ಲಿಯೇ ತಮ್ಮ ಸ್ವರೂಪದ ನಿಯಂತ್ರಣಗಳ ಮೌಲ್ಯೀಕರಣ ಸ್ಥಿತಿಯನ್ನು ಉಲ್ಲೇಖಿಸಿದ್ದರೂ, <label>ಮೇಲಿನ ತಂತ್ರವನ್ನು ( .sr-onlyಪಠ್ಯ ಮತ್ತು ಬಳಸಿ aria-describedby) ವಿವರಣಾತ್ಮಕ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಸೇರಿಸಲಾಗಿದೆ.

(ಯಶಸ್ಸು)
(ಎಚ್ಚರಿಕೆ)
(ದೋಷ)
@
(ಯಶಸ್ಸು) 
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

ಸಮತಲ ಮತ್ತು ಇನ್‌ಲೈನ್ ರೂಪಗಳಲ್ಲಿ ಐಚ್ಛಿಕ ಐಕಾನ್‌ಗಳು

(ಯಶಸ್ಸು)
@
(ಯಶಸ್ಸು) 
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(ಯಶಸ್ಸು)

@
(ಯಶಸ್ಸು) 
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

.sr-onlyಗುಪ್ತ ಲೇಬಲ್‌ಗಳೊಂದಿಗೆ ಐಚ್ಛಿಕ ಐಕಾನ್‌ಗಳು

.sr-onlyಫಾರ್ಮ್ ನಿಯಂತ್ರಣವನ್ನು ಮರೆಮಾಡಲು ನೀವು ವರ್ಗವನ್ನು ಬಳಸಿದರೆ <label>(ಗುಣಲಕ್ಷಣದಂತಹ ಇತರ ಲೇಬಲಿಂಗ್ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ aria-label), ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಐಕಾನ್ ಅನ್ನು ಒಮ್ಮೆ ಸೇರಿಸಿದ ನಂತರ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಸುತ್ತದೆ.

(ಯಶಸ್ಸು)
@
(ಯಶಸ್ಸು) 
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

ಗಾತ್ರವನ್ನು ನಿಯಂತ್ರಿಸಿ

ನಂತಹ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿ .input-lgಮತ್ತು ಗ್ರಿಡ್ ಕಾಲಮ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅಗಲಗಳನ್ನು ಹೊಂದಿಸಿ .col-lg-*.

ಎತ್ತರದ ಗಾತ್ರ

ಬಟನ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಎತ್ತರದ ಅಥವಾ ಚಿಕ್ಕದಾದ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ರಚಿಸಿ.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

ಸಮತಲ ರೂಪ ಗುಂಪು ಗಾತ್ರಗಳು

ತ್ವರಿತವಾಗಿ ಗಾತ್ರದ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು .form-horizontalಸೇರಿಸುವ ಮೂಲಕ .form-group-lgಅಥವಾ .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

ಕಾಲಮ್ ಗಾತ್ರ

ಅಪೇಕ್ಷಿತ ಅಗಲಗಳನ್ನು ಸುಲಭವಾಗಿ ಜಾರಿಗೊಳಿಸಲು ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳು ಅಥವಾ ಯಾವುದೇ ಕಸ್ಟಮ್ ಮೂಲ ಅಂಶದಲ್ಲಿ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಸುತ್ತಿ.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

ಗುಂಡಿಗಳು

ಬಟನ್ ಟ್ಯಾಗ್ಗಳು

ಮೇಲೆ ಬಟನ್ ವರ್ಗಗಳನ್ನು ಬಳಸಿ<a>, <button>, ಅಥವಾ <input>ಅಂಶದ

ಲಿಂಕ್ 
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

ಸಂದರ್ಭ-ನಿರ್ದಿಷ್ಟ ಬಳಕೆ

<a>ಬಟನ್ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಮತ್ತು <button>ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದಾದರೂ , <button>ನಮ್ಮ ನ್ಯಾವ್ ಮತ್ತು ನ್ಯಾವ್‌ಬಾರ್ ಘಟಕಗಳಲ್ಲಿ ಅಂಶಗಳನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ.

ಲಿಂಕ್‌ಗಳು ಬಟನ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ

ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಬಟನ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಬಳಸಿದರೆ <a>- ಪ್ರಸ್ತುತ ಪುಟದಲ್ಲಿ ಮತ್ತೊಂದು ಡಾಕ್ಯುಮೆಂಟ್ ಅಥವಾ ವಿಭಾಗಕ್ಕೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವ ಬದಲು ಪುಟದಲ್ಲಿನ ಕಾರ್ಯವನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ - ಅವುಗಳಿಗೆ ಸೂಕ್ತವಾದದನ್ನು ಸಹ ನೀಡಬೇಕು role="button".

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ರೆಂಡರಿಂಗ್

ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿ, ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಅಂಶವನ್ನು ಬಳಸಲು ನಾವು ಹೆಚ್ಚು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ<button> ಹೊಂದಾಣಿಕೆಯ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು

ಇತರ ವಿಷಯಗಳ ಜೊತೆಗೆ, ಫೈರ್‌ಫಾಕ್ಸ್ <30 ನಲ್ಲಿ ಒಂದುline-height ದೋಷವಿದೆ, ಅದು -ಆಧಾರಿತ ಬಟನ್‌ಗಳನ್ನು ಹೊಂದಿಸುವುದರಿಂದ ನಮ್ಮನ್ನು ತಡೆಯುತ್ತದೆ <input>, ಇದು ಫೈರ್‌ಫಾಕ್ಸ್‌ನಲ್ಲಿನ ಇತರ ಬಟನ್‌ಗಳ ಎತ್ತರಕ್ಕೆ ನಿಖರವಾಗಿ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ.

ಆಯ್ಕೆಗಳು

ಶೈಲಿಯ ಬಟನ್ ಅನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಲು ಲಭ್ಯವಿರುವ ಯಾವುದೇ ಬಟನ್ ವರ್ಗಗಳನ್ನು ಬಳಸಿ.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು

ಬಟನ್‌ಗೆ ಅರ್ಥವನ್ನು ಸೇರಿಸಲು ಬಣ್ಣವನ್ನು ಬಳಸುವುದು ದೃಷ್ಟಿಗೋಚರ ಸೂಚನೆಯನ್ನು ಮಾತ್ರ ಒದಗಿಸುತ್ತದೆ, ಇದನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಸಲಾಗುವುದಿಲ್ಲ. ಬಣ್ಣದಿಂದ ಸೂಚಿಸಲಾದ ಮಾಹಿತಿಯು ವಿಷಯದಿಂದಲೇ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಬಟನ್‌ನ ಗೋಚರ ಪಠ್ಯ), ಅಥವಾ .sr-onlyವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಲಾಗಿರುವ ಹೆಚ್ಚುವರಿ ಪಠ್ಯದಂತಹ ಪರ್ಯಾಯ ವಿಧಾನಗಳ ಮೂಲಕ ಸೇರಿಸಲಾಗಿದೆ.

ಗಾತ್ರಗಳು

ದೊಡ್ಡ ಅಥವಾ ಚಿಕ್ಕ ಬಟನ್‌ಗಳನ್ನು ಇಷ್ಟಪಡುತ್ತೀರಾ? .btn-lg, .btn-smಅಥವಾ .btn-xsಹೆಚ್ಚುವರಿ ಗಾತ್ರಗಳಿಗೆ ಸೇರಿಸಿ .

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

ಸೇರಿಸುವ ಮೂಲಕ-ಪೋಷಕರ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ವ್ಯಾಪಿಸಿರುವ ಬ್ಲಾಕ್ ಮಟ್ಟದ ಬಟನ್‌ಗಳನ್ನು ರಚಿಸಿ .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

ಸಕ್ರಿಯ ಸ್ಥಿತಿ

ಸಕ್ರಿಯವಾಗಿರುವಾಗ ಬಟನ್‌ಗಳು ಒತ್ತಿದರೆ (ಗಾಢವಾದ ಹಿನ್ನೆಲೆ, ಗಾಢವಾದ ಅಂಚು ಮತ್ತು ಒಳಸೇರಿಸಿದ ನೆರಳಿನೊಂದಿಗೆ) ಗೋಚರಿಸುತ್ತವೆ. ಅಂಶಗಳಿಗಾಗಿ , <button>ಇದನ್ನು ಮೂಲಕ ಮಾಡಲಾಗುತ್ತದೆ :active. ಅಂಶಗಳಿಗಾಗಿ , <a>ಇದನ್ನು ಮಾಡಲಾಗುತ್ತದೆ . .activeಆದಾಗ್ಯೂ, ನೀವು s .activeನಲ್ಲಿ ಬಳಸಬಹುದು <button>(ಮತ್ತು ಸೇರಿವೆaria-pressed="true" ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ).

ಬಟನ್ ಅಂಶ

ಇದು ಹುಸಿ-ವರ್ಗವಾಗಿರುವುದರಿಂದ ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ :active, ಆದರೆ ನೀವು ಅದೇ ನೋಟವನ್ನು ಒತ್ತಾಯಿಸಬೇಕಾದರೆ, ಮುಂದುವರಿಯಿರಿ ಮತ್ತು ಸೇರಿಸಿ .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

ಆಂಕರ್ ಅಂಶ

ಬಟನ್‌ಗಳಿಗೆ .activeವರ್ಗವನ್ನು ಸೇರಿಸಿ .<a>

ಪ್ರಾಥಮಿಕ ಲಿಂಕ್ ಲಿಂಕ್ 

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

ಅಂಗವಿಕಲ ಸ್ಥಿತಿ

ಬಟನ್‌ಗಳನ್ನು ಮತ್ತೆ ಮರೆಯಾಗುವ ಮೂಲಕ ಕ್ಲಿಕ್ ಮಾಡದಂತೆ ಕಾಣುವಂತೆ ಮಾಡಿ opacity.

ಬಟನ್ ಅಂಶ

ಬಟನ್‌ಗಳಿಗೆ disabledಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .<button>

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

ನೀವು disableda ಗೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿದರೆ <button>, Internet Explorer 9 ಮತ್ತು ಕೆಳಗಿನವುಗಳು ನಮಗೆ ಸರಿಪಡಿಸಲು ಸಾಧ್ಯವಾಗದ ಅಸಹ್ಯ ಪಠ್ಯ-ನೆರಳಿನೊಂದಿಗೆ ಪಠ್ಯ ಬೂದು ಬಣ್ಣವನ್ನು ನೀಡುತ್ತದೆ.

ಆಂಕರ್ ಅಂಶ

ಬಟನ್‌ಗಳಿಗೆ .disabledವರ್ಗವನ್ನು ಸೇರಿಸಿ .<a>

ಪ್ರಾಥಮಿಕ ಲಿಂಕ್ ಲಿಂಕ್ 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

.disabledಸಾಮಾನ್ಯ ವರ್ಗದಂತೆಯೇ ನಾವು ಇಲ್ಲಿ ಉಪಯುಕ್ತತೆಯ ವರ್ಗವಾಗಿ ಬಳಸುತ್ತೇವೆ .active, ಆದ್ದರಿಂದ ಯಾವುದೇ ಪೂರ್ವಪ್ರತ್ಯಯ ಅಗತ್ಯವಿಲ್ಲ.

ಲಿಂಕ್ ಕ್ರಿಯಾತ್ಮಕತೆಯ ಎಚ್ಚರಿಕೆ

pointer-events: nones ನ ಲಿಂಕ್ ಕಾರ್ಯವನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸಲು ಈ ವರ್ಗವು ಬಳಸುತ್ತದೆ <a>, ಆದರೆ ಆ CSS ಆಸ್ತಿಯನ್ನು ಇನ್ನೂ ಪ್ರಮಾಣೀಕರಿಸಲಾಗಿಲ್ಲ ಮತ್ತು Opera 18 ಮತ್ತು ಕೆಳಗಿನ ಅಥವಾ Internet Explorer 11 ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಜೊತೆಗೆ, ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಹ pointer-events: none, ಕೀಬೋರ್ಡ್ ಸಂಚರಣೆಯು ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ, ಅಂದರೆ ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರು ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರು ಇನ್ನೂ ಈ ಲಿಂಕ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಆದ್ದರಿಂದ ಸುರಕ್ಷಿತವಾಗಿರಲು, ಅಂತಹ ಲಿಂಕ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.

ಚಿತ್ರಗಳು

ರೆಸ್ಪಾನ್ಸಿವ್ ಚಿತ್ರಗಳು

.img-responsiveಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 3 ರಲ್ಲಿನ ಚಿತ್ರಗಳನ್ನು ವರ್ಗದ ಸೇರ್ಪಡೆಯ ಮೂಲಕ ಸ್ಪಂದಿಸುವ ಸ್ನೇಹಿಯಾಗಿ ಮಾಡಬಹುದು . ಇದು ಅನ್ವಯಿಸುತ್ತದೆ max-width: 100%;, height: auto;ಮತ್ತು display: block;ಚಿತ್ರಕ್ಕೆ ಇದು ಮೂಲ ಅಂಶಕ್ಕೆ ಚೆನ್ನಾಗಿ ಮಾಪಕವಾಗುತ್ತದೆ.

.img-responsiveವರ್ಗವನ್ನು ಬಳಸುವ ಚಿತ್ರಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು , .center-blockಬದಲಿಗೆ ಬಳಸಿ .text-center. ಬಳಕೆಯ ಕುರಿತು ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ ಸಹಾಯಕ ತರಗತಿಗಳ ವಿಭಾಗವನ್ನು ನೋಡಿ.center-block .

SVG ಚಿತ್ರಗಳು ಮತ್ತು IE 8-10

ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 8-10 ರಲ್ಲಿ, SVG ಚಿತ್ರಗಳು .img-responsiveಅಸಮಾನವಾಗಿ ಗಾತ್ರದಲ್ಲಿವೆ. ಇದನ್ನು ಸರಿಪಡಿಸಲು, width: 100% \9;ಅಗತ್ಯವಿರುವಲ್ಲಿ ಸೇರಿಸಿ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಇದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನ್ವಯಿಸುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಇದು ಇತರ ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಿಗೆ ತೊಡಕುಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ.

<img src="..." class="img-responsive" alt="Responsive image">

ಚಿತ್ರದ ಆಕಾರಗಳು

<img>ಯಾವುದೇ ಯೋಜನೆಯಲ್ಲಿ ಸುಲಭವಾಗಿ ಶೈಲಿಯ ಚಿತ್ರಗಳಿಗೆ ಒಂದು ಅಂಶಕ್ಕೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ .

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

ದುಂಡಾದ ಮೂಲೆಗಳಿಗೆ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 8 ಬೆಂಬಲವನ್ನು ಹೊಂದಿಲ್ಲ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ.

140x140 140x140 140x140 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

ಸಹಾಯಕ ತರಗತಿಗಳು

ಸಂದರ್ಭೋಚಿತ ಬಣ್ಣಗಳು

ಬೆರಳೆಣಿಕೆಯಷ್ಟು ಒತ್ತು ನೀಡುವ ಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳೊಂದಿಗೆ ಬಣ್ಣದ ಮೂಲಕ ಅರ್ಥವನ್ನು ತಿಳಿಸಿ. ಇವುಗಳನ್ನು ಲಿಂಕ್‌ಗಳಿಗೂ ಅನ್ವಯಿಸಬಹುದು ಮತ್ತು ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಲಿಂಕ್ ಶೈಲಿಗಳಂತೆಯೇ ಹೋವರ್‌ನಲ್ಲಿ ಗಾಢವಾಗುತ್ತವೆ.

ಫ್ಯೂಸ್ ಡ್ಯಾಪಿಬಸ್, ಟೆಲ್ಲಸ್ ಎಸಿ ಕರ್ಸಸ್ ಕಮೊಡೊ, ಟಾರ್ಟರ್ ಮಾರಿಸ್ ನಿಭ್.

Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ.

ಮೆಸೆನಾಸ್ ಸೆಡ್ ಡೈಮ್ ಎಗೆಟ್ ರಿಸಸ್ ವೇರಿಯಸ್ ಬ್ಲಾಂಡಿಟ್ ಸಿಟ್ ಅಮೆಟ್ ನಾನ್ ಮ್ಯಾಗ್ನಾ.

ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್.

ಡೊನೆಕ್ ಉಲ್ಲಮ್ಕಾರ್ಪರ್ ನಲ್ ನಾನ್ ಮೆಟಸ್ ಆಕ್ಟರ್ ಫ್ರಿಂಗಿಲ್ಲಾ.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

ನಿರ್ದಿಷ್ಟತೆಯೊಂದಿಗೆ ವ್ಯವಹರಿಸುವುದು

ಕೆಲವೊಮ್ಮೆ ಮತ್ತೊಂದು ಸೆಲೆಕ್ಟರ್‌ನ ನಿರ್ದಿಷ್ಟತೆಯಿಂದಾಗಿ ಒತ್ತು ತರಗತಿಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗುವುದಿಲ್ಲ. <span>ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ತರಗತಿಯೊಂದಿಗೆ ನಿಮ್ಮ ಪಠ್ಯವನ್ನು ಸುತ್ತಿಕೊಳ್ಳುವುದು ಸಾಕಷ್ಟು ಪರಿಹಾರವಾಗಿದೆ .

ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು

ಅರ್ಥವನ್ನು ಸೇರಿಸಲು ಬಣ್ಣವನ್ನು ಬಳಸುವುದು ದೃಶ್ಯ ಸೂಚನೆಯನ್ನು ಮಾತ್ರ ಒದಗಿಸುತ್ತದೆ, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ರವಾನೆಯಾಗುವುದಿಲ್ಲ. ಬಣ್ಣದಿಂದ ಸೂಚಿಸಲಾದ ಮಾಹಿತಿಯು ವಿಷಯದಿಂದಲೇ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಸಾಂದರ್ಭಿಕ ಬಣ್ಣಗಳನ್ನು ಪಠ್ಯ/ಮಾರ್ಕ್‌ಅಪ್‌ನಲ್ಲಿ ಈಗಾಗಲೇ ಇರುವ ಅರ್ಥವನ್ನು ಬಲಪಡಿಸಲು ಮಾತ್ರ ಬಳಸಲಾಗುತ್ತದೆ), ಅಥವಾ .sr-onlyವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಲಾಗಿರುವ ಹೆಚ್ಚುವರಿ ಪಠ್ಯದಂತಹ ಪರ್ಯಾಯ ವಿಧಾನಗಳ ಮೂಲಕ ಸೇರಿಸಲಾಗಿದೆ. .

ಸಂದರ್ಭೋಚಿತ ಹಿನ್ನೆಲೆಗಳು

ಸಾಂದರ್ಭಿಕ ಪಠ್ಯದ ಬಣ್ಣ ವರ್ಗಗಳಂತೆಯೇ, ಯಾವುದೇ ಸಂದರ್ಭೋಚಿತ ವರ್ಗಕ್ಕೆ ಅಂಶದ ಹಿನ್ನೆಲೆಯನ್ನು ಸುಲಭವಾಗಿ ಹೊಂದಿಸಿ. ಪಠ್ಯ ತರಗತಿಗಳಂತೆಯೇ ಆಂಕರ್ ಘಟಕಗಳು ಹೋವರ್‌ನಲ್ಲಿ ಗಾಢವಾಗುತ್ತವೆ.

Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ.

ಮೆಸೆನಾಸ್ ಸೆಡ್ ಡೈಮ್ ಎಗೆಟ್ ರಿಸಸ್ ವೇರಿಯಸ್ ಬ್ಲಾಂಡಿಟ್ ಸಿಟ್ ಅಮೆಟ್ ನಾನ್ ಮ್ಯಾಗ್ನಾ.

ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್.

ಡೊನೆಕ್ ಉಲ್ಲಮ್ಕಾರ್ಪರ್ ನಲ್ ನಾನ್ ಮೆಟಸ್ ಆಕ್ಟರ್ ಫ್ರಿಂಗಿಲ್ಲಾ.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

ನಿರ್ದಿಷ್ಟತೆಯೊಂದಿಗೆ ವ್ಯವಹರಿಸುವುದು

ಕೆಲವೊಮ್ಮೆ ಸಂದರ್ಭೋಚಿತ ಹಿನ್ನೆಲೆ ತರಗತಿಗಳನ್ನು ಮತ್ತೊಂದು ಆಯ್ಕೆಯ ನಿರ್ದಿಷ್ಟತೆಯ ಕಾರಣದಿಂದಾಗಿ ಅನ್ವಯಿಸಲಾಗುವುದಿಲ್ಲ. <div>ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ನಿಮ್ಮ ಅಂಶದ ವಿಷಯವನ್ನು ವರ್ಗದೊಂದಿಗೆ ಸುತ್ತಿಕೊಳ್ಳುವುದು ಸಾಕಷ್ಟು ಪರಿಹಾರವಾಗಿದೆ .

ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು

ಸಾಂದರ್ಭಿಕ ಬಣ್ಣಗಳಂತೆ , ಬಣ್ಣದ ಮೂಲಕ ತಿಳಿಸುವ ಯಾವುದೇ ಅರ್ಥವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಸ್ತುತಪಡಿಸದ ಸ್ವರೂಪದಲ್ಲಿ ತಿಳಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಐಕಾನ್ ಮುಚ್ಚಿ

ಮಾದರಿಗಳು ಮತ್ತು ಎಚ್ಚರಿಕೆಗಳಂತಹ ವಿಷಯವನ್ನು ವಜಾಗೊಳಿಸಲು ಜೆನೆರಿಕ್ ಕ್ಲೋಸ್ ಐಕಾನ್ ಬಳಸಿ.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

ಕ್ಯಾರೆಟ್ಸ್

ಡ್ರಾಪ್‌ಡೌನ್ ಕ್ರಿಯಾತ್ಮಕತೆ ಮತ್ತು ದಿಕ್ಕನ್ನು ಸೂಚಿಸಲು ಕ್ಯಾರೆಟ್‌ಗಳನ್ನು ಬಳಸಿ. ಡ್ರಾಪ್‌ಅಪ್ ಮೆನುಗಳಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಕ್ಯಾರೆಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹಿಮ್ಮುಖವಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ .

<span class="caret"></span>

ತ್ವರಿತ ತೇಲುತ್ತದೆ

ಒಂದು ವರ್ಗದೊಂದಿಗೆ ಎಡಕ್ಕೆ ಅಥವಾ ಬಲಕ್ಕೆ ಒಂದು ಅಂಶವನ್ನು ಫ್ಲೋಟ್ ಮಾಡಿ. !importantನಿರ್ದಿಷ್ಟ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು ಸೇರಿಸಲಾಗಿದೆ. ತರಗತಿಗಳನ್ನು ಮಿಕ್ಸಿನ್‌ಗಳಾಗಿಯೂ ಬಳಸಬಹುದು.

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

ನವಬಾರ್‌ಗಳಲ್ಲಿ ಬಳಕೆಗೆ ಅಲ್ಲ

ಯುಟಿಲಿಟಿ ತರಗತಿಗಳೊಂದಿಗೆ ನ್ಯಾವ್‌ಬಾರ್‌ಗಳಲ್ಲಿನ ಘಟಕಗಳನ್ನು ಜೋಡಿಸಲು, ಬಳಸಿ .navbar-leftಅಥವಾ .navbar-rightಬದಲಿಗೆ. ವಿವರಗಳಿಗಾಗಿ navbar ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ.

ಕೇಂದ್ರ ವಿಷಯ ಬ್ಲಾಕ್‌ಗಳು

ಒಂದು ಅಂಶವನ್ನು ಹೊಂದಿಸಿ display: blockಮತ್ತು ಅದರ ಮೂಲಕ ಕೇಂದ್ರೀಕರಿಸಿ margin. ಮಿಕ್ಸಿನ್ ಮತ್ತು ವರ್ಗವಾಗಿ ಲಭ್ಯವಿದೆ.

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

ಕ್ಲಿಯರ್ಫಿಕ್ಸ್

ಮೂಲ ಅಂಶಕ್ಕೆfloat ಸೇರಿಸುವ ಮೂಲಕ s ಅನ್ನು ಸುಲಭವಾಗಿ ತೆರವುಗೊಳಿಸಿ . ನಿಕೋಲಸ್ ಗಲ್ಲಾಘರ್ ಜನಪ್ರಿಯಗೊಳಿಸಿದ ಮೈಕ್ರೋ ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ ಅನ್ನು ಬಳಸುತ್ತದೆ . ಮಿಕ್ಸಿನ್ ಆಗಿಯೂ ಬಳಸಬಹುದು..clearfix 

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

ವಿಷಯವನ್ನು ತೋರಿಸುವುದು ಮತ್ತು ಮರೆಮಾಡುವುದು

ಒಂದು ಅಂಶವನ್ನು ತೋರಿಸಲು ಅಥವಾ ಮರೆಮಾಡಲು ( ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ಸೇರಿದಂತೆ.show ) ಮತ್ತು .hiddenತರಗತಿಗಳ ಬಳಕೆಯನ್ನು ಒತ್ತಾಯಿಸಿ. ತ್ವರಿತ ಫ್ಲೋಟ್‌ಗಳಂತೆಯೇ!important ನಿರ್ದಿಷ್ಟ ಸಂಘರ್ಷಗಳನ್ನು ತಪ್ಪಿಸಲು ಈ ವರ್ಗಗಳು ಬಳಸುತ್ತವೆ . ಬ್ಲಾಕ್ ಮಟ್ಟದ ಟಾಗಲ್ ಮಾಡಲು ಮಾತ್ರ ಅವು ಲಭ್ಯವಿವೆ. ಅವುಗಳನ್ನು ಮಿಶ್ರಣಗಳಾಗಿಯೂ ಬಳಸಬಹುದು.

.hideಲಭ್ಯವಿದೆ, ಆದರೆ ಇದು ಯಾವಾಗಲೂ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ ಮತ್ತು v3.0.1 ರಂತೆ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ . ಬಳಸಿ .hiddenಅಥವಾ .sr-onlyಬದಲಿಗೆ.

ಇದಲ್ಲದೆ, .invisibleಒಂದು ಅಂಶದ ಗೋಚರತೆಯನ್ನು ಮಾತ್ರ ಟಾಗಲ್ ಮಾಡಲು ಬಳಸಬಹುದು, ಅಂದರೆ ಅದನ್ನು displayಮಾರ್ಪಡಿಸಲಾಗಿಲ್ಲ ಮತ್ತು ಅಂಶವು ಇನ್ನೂ ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಹರಿವಿನ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಮತ್ತು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ವಿಷಯ

ಜೊತೆಗೆ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಎಲ್ಲಾ ಸಾಧನಗಳಿಗೆ ಅಂಶವನ್ನು ಮರೆಮಾಡಿ .sr-only. ಅಂಶವನ್ನು ಕೇಂದ್ರೀಕರಿಸಿದಾಗ ಅದನ್ನು ಮತ್ತೆ ತೋರಿಸಲು .sr-onlyಜೊತೆಗೂಡಿಸಿ (ಉದಾಹರಣೆಗೆ ಕೀಬೋರ್ಡ್-ಮಾತ್ರ ಬಳಕೆದಾರರಿಂದ). ಪ್ರವೇಶಿಸುವಿಕೆ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು.sr-only-focusable ಅನುಸರಿಸಲು ಅವಶ್ಯಕ . ಮಿಕ್ಸಿನ್ ಆಗಿಯೂ ಬಳಸಬಹುದು.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

ಚಿತ್ರ ಬದಲಿ

.text-hideಹಿನ್ನೆಲೆ ಚಿತ್ರದೊಂದಿಗೆ ಅಂಶದ ಪಠ್ಯ ವಿಷಯವನ್ನು ಬದಲಿಸಲು ಸಹಾಯ ಮಾಡಲು ವರ್ಗ ಅಥವಾ ಮಿಕ್ಸಿನ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಿ .

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

ರೆಸ್ಪಾನ್ಸಿವ್ ಉಪಯುಕ್ತತೆಗಳು

ವೇಗವಾದ ಮೊಬೈಲ್-ಸ್ನೇಹಿ ಅಭಿವೃದ್ಧಿಗಾಗಿ, ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯ ಮೂಲಕ ಸಾಧನದ ಮೂಲಕ ವಿಷಯವನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ಈ ಉಪಯುಕ್ತತೆ ತರಗತಿಗಳನ್ನು ಬಳಸಿ. ಮುದ್ರಿಸಿದಾಗ ವಿಷಯವನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳನ್ನು ಸಹ ಸೇರಿಸಲಾಗಿದೆ.

ಇವುಗಳನ್ನು ಸೀಮಿತ ಆಧಾರದ ಮೇಲೆ ಬಳಸಲು ಪ್ರಯತ್ನಿಸಿ ಮತ್ತು ಒಂದೇ ಸೈಟ್‌ನ ಸಂಪೂರ್ಣ ವಿಭಿನ್ನ ಆವೃತ್ತಿಗಳನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಬದಲಾಗಿ, ಪ್ರತಿ ಸಾಧನದ ಪ್ರಸ್ತುತಿಗೆ ಪೂರಕವಾಗಿ ಅವುಗಳನ್ನು ಬಳಸಿ.

ಲಭ್ಯವಿರುವ ತರಗತಿಗಳು

ವ್ಯೂಪೋರ್ಟ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಾದ್ಯಂತ ವಿಷಯವನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಲಭ್ಯವಿರುವ ತರಗತಿಗಳ ಏಕ ಅಥವಾ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಿ.

ಹೆಚ್ಚುವರಿ ಸಣ್ಣ ಸಾಧನಗಳುಫೋನ್‌ಗಳು (<768px) ಸಣ್ಣ ಸಾಧನಗಳುಮಾತ್ರೆಗಳು (≥768px) ಮಧ್ಯಮ ಸಾಧನಗಳುಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳು (≥992px) ದೊಡ್ಡ ಸಾಧನಗಳುಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳು (≥1200px)
.visible-xs-* ಕಾಣುವ
.visible-sm-* ಕಾಣುವ
.visible-md-* ಕಾಣುವ
.visible-lg-* ಕಾಣುವ
.hidden-xs ಕಾಣುವ ಕಾಣುವ ಕಾಣುವ
.hidden-sm ಕಾಣುವ ಕಾಣುವ ಕಾಣುವ
.hidden-md ಕಾಣುವ ಕಾಣುವ ಕಾಣುವ
.hidden-lg ಕಾಣುವ ಕಾಣುವ ಕಾಣುವ

v3.2.0 ರಂತೆ, .visible-*-*ಪ್ರತಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನ ತರಗತಿಗಳು ಮೂರು ಮಾರ್ಪಾಡುಗಳಲ್ಲಿ ಬರುತ್ತವೆ, ಕೆಳಗೆ ಪಟ್ಟಿ ಮಾಡಲಾದ ಪ್ರತಿಯೊಂದು CSS displayಆಸ್ತಿ ಮೌಲ್ಯಕ್ಕೆ ಒಂದು.

ತರಗತಿಗಳ ಗುಂಪು CSSdisplay
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

ಆದ್ದರಿಂದ, ಹೆಚ್ಚುವರಿ ಸಣ್ಣ ( xs) ಪರದೆಗಳಿಗೆ ಉದಾಹರಣೆಗೆ, ಲಭ್ಯವಿರುವ .visible-*-*ತರಗತಿಗಳು: .visible-xs-block, .visible-xs-inline, ಮತ್ತು .visible-xs-inline-block.

ತರಗತಿಗಳು .visible-xs, .visible-sm, .visible-md, ಮತ್ತು .visible-lgಸಹ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ, ಆದರೆ v3.2.0 ನಂತೆ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ . ಟಾಗಲ್ -ಸಂಬಂಧಿತ ಅಂಶಗಳಿಗೆ .visible-*-blockಹೆಚ್ಚುವರಿ ವಿಶೇಷ ಸಂದರ್ಭಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಅವು ಸರಿಸುಮಾರು ಸಮಾನವಾಗಿರುತ್ತದೆ .<table>

ಮುದ್ರಣ ತರಗತಿಗಳು

ರೆಗ್ಯುಲರ್ ರೆಸ್ಪಾನ್ಸಿವ್ ತರಗತಿಗಳಂತೆಯೇ, ಮುದ್ರಣಕ್ಕಾಗಿ ವಿಷಯವನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಇವುಗಳನ್ನು ಬಳಸಿ.

ತರಗತಿಗಳು ಬ್ರೌಸರ್ ಮುದ್ರಿಸಿ
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		ಕಾಣುವ
.hidden-print ಕಾಣುವ

ವರ್ಗವು .visible-printಸಹ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ ಆದರೆ v3.2.0 ನಂತೆ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ . -ಸಂಬಂಧಿತ ಅಂಶಗಳಿಗೆ .visible-print-blockಹೆಚ್ಚುವರಿ ವಿಶೇಷ ಸಂದರ್ಭಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಇದು ಸರಿಸುಮಾರು ಸಮನಾಗಿರುತ್ತದೆ .<table>

ಪರೀಕ್ಷಾ ಪ್ರಕರಣಗಳು

ನಿಮ್ಮ ಬ್ರೌಸರ್ ಅನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿ ಅಥವಾ ಸ್ಪಂದಿಸುವ ಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಲೋಡ್ ಮಾಡಿ.

ಇದರಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ...

ನಿಮ್ಮ ಪ್ರಸ್ತುತ ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ಅಂಶವು ಗೋಚರಿಸುತ್ತದೆ ಎಂದು ಹಸಿರು ಚೆಕ್‌ಮಾರ್ಕ್‌ಗಳು ಸೂಚಿಸುತ್ತವೆ .

✔ x-ಸ್ಮಾಲ್‌ನಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ
✔ ಚಿಕ್ಕದರಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ
ಮಾಧ್ಯಮ ✔ ಮಧ್ಯಮದಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ
✔ ದೊಡ್ಡದಾಗಿ ಗೋಚರಿಸುತ್ತದೆ
✔ x-ಸಣ್ಣ ಮತ್ತು ಚಿಕ್ಕದರಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ
✔ ಮಧ್ಯಮ ಮತ್ತು ದೊಡ್ಡದರಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ
✔ x-ಸಣ್ಣ ಮತ್ತು ಮಧ್ಯಮದಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ
✔ ಸಣ್ಣ ಮತ್ತು ದೊಡ್ಡ ಮೇಲೆ ಗೋಚರಿಸುತ್ತದೆ
✔ x-ಸಣ್ಣ ಮತ್ತು ದೊಡ್ಡದರಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ
✔ ಸಣ್ಣ ಮತ್ತು ಮಧ್ಯಮದಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ

ಮರೆಮಾಡಲಾಗಿದೆ...

ಇಲ್ಲಿ, ನಿಮ್ಮ ಪ್ರಸ್ತುತ ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ಅಂಶವನ್ನು ಮರೆಮಾಡಲಾಗಿದೆ ಎಂದು ಹಸಿರು ಚೆಕ್‌ಮಾರ್ಕ್‌ಗಳು ಸೂಚಿಸುತ್ತವೆ .

✔ x-ಸ್ಮಾಲ್‌ನಲ್ಲಿ ಮರೆಮಾಡಲಾಗಿದೆ
✔ ಚಿಕ್ಕದರಲ್ಲಿ ಮರೆಮಾಡಲಾಗಿದೆ
ಮಾಧ್ಯಮ ✔ ಮಧ್ಯಮದಲ್ಲಿ ಮರೆಮಾಡಲಾಗಿದೆ
✔ ದೊಡ್ಡದರಲ್ಲಿ ಮರೆಮಾಡಲಾಗಿದೆ
✔ x-ಸಣ್ಣ ಮತ್ತು ಚಿಕ್ಕದರಲ್ಲಿ ಮರೆಮಾಡಲಾಗಿದೆ
✔ ಮಧ್ಯಮ ಮತ್ತು ದೊಡ್ಡದರಲ್ಲಿ ಮರೆಮಾಡಲಾಗಿದೆ
✔ Hidden on x-small and medium
✔ ಸಣ್ಣ ಮತ್ತು ದೊಡ್ಡ ಮೇಲೆ ಮರೆಮಾಡಲಾಗಿದೆ
✔ x-ಸಣ್ಣ ಮತ್ತು ದೊಡ್ಡದರಲ್ಲಿ ಮರೆಮಾಡಲಾಗಿದೆ
✔ Hidden on small and medium

ಕಡಿಮೆ ಬಳಸುವುದು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಅನ್ನು ಲೆಸ್‌ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಇದು ವೇರಿಯೇಬಲ್‌ಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು CSS ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡಲು ಫಂಕ್ಷನ್‌ಗಳಂತಹ ಹೆಚ್ಚುವರಿ ಕಾರ್ಯವನ್ನು ಹೊಂದಿರುವ ಪ್ರಿಪ್ರೊಸೆಸರ್ ಆಗಿದೆ. ನಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಫೈಲ್‌ಗಳ ಬದಲಿಗೆ ಮೂಲ ಕಡಿಮೆ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಲು ಬಯಸುವವರು ಫ್ರೇಮ್‌ವರ್ಕ್‌ನಾದ್ಯಂತ ನಾವು ಬಳಸುವ ಹಲವಾರು ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.

ಗ್ರಿಡ್ ವೇರಿಯಬಲ್‌ಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ವಿಭಾಗದಲ್ಲಿ ಒಳಗೊಂಡಿದೆ .

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕನಿಷ್ಠ ಎರಡು ರೀತಿಯಲ್ಲಿ ಬಳಸಬಹುದು: ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಅಥವಾ ಮೂಲ ಕಡಿಮೆ ಫೈಲ್‌ಗಳೊಂದಿಗೆ. ಕಡಿಮೆ ಫೈಲ್‌ಗಳನ್ನು ಕಂಪೈಲ್ ಮಾಡಲು , ಅಗತ್ಯ ಆಜ್ಞೆಗಳನ್ನು ಚಲಾಯಿಸಲು ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಪರಿಸರವನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ಗೆಟ್ಟಿಂಗ್ ಸ್ಟಾರ್ಟ್ ವಿಭಾಗವನ್ನು ಸಂಪರ್ಕಿಸಿ .

ಥರ್ಡ್ ಪಾರ್ಟಿ ಸಂಕಲನ ಪರಿಕರಗಳು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಬಹುದು, ಆದರೆ ಅವು ನಮ್ಮ ಪ್ರಮುಖ ತಂಡದಿಂದ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.

ಅಸ್ಥಿರ

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

ಬಣ್ಣಗಳು

ಎರಡು ಬಣ್ಣದ ಯೋಜನೆಗಳನ್ನು ಸುಲಭವಾಗಿ ಬಳಸಿಕೊಳ್ಳಿ: ಗ್ರೇಸ್ಕೇಲ್ ಮತ್ತು ಲಾಕ್ಷಣಿಕ. ಗ್ರೇಸ್ಕೇಲ್ ಬಣ್ಣಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಕಪ್ಪು ಛಾಯೆಗಳಿಗೆ ತ್ವರಿತ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತವೆ ಆದರೆ ಶಬ್ದಾರ್ಥವು ಅರ್ಥಪೂರ್ಣ ಸಂದರ್ಭೋಚಿತ ಮೌಲ್ಯಗಳಿಗೆ ನಿಯೋಜಿಸಲಾದ ವಿವಿಧ ಬಣ್ಣಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

ಈ ಯಾವುದೇ ಬಣ್ಣ ಅಸ್ಥಿರಗಳನ್ನು ಬಳಸಿ ಅಥವಾ ಅವುಗಳನ್ನು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಾಗಿ ಹೆಚ್ಚು ಅರ್ಥಪೂರ್ಣ ವೇರಿಯೇಬಲ್‌ಗಳಿಗೆ ಮರುಹೊಂದಿಸಿ.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

ಸ್ಕ್ಯಾಫೋಲ್ಡಿಂಗ್

ನಿಮ್ಮ ಸೈಟ್‌ನ ಅಸ್ಥಿಪಂಜರದ ಪ್ರಮುಖ ಅಂಶಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಕೆಲವು ಅಸ್ಥಿರಗಳು.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

ಒಂದೇ ಮೌಲ್ಯದೊಂದಿಗೆ ಸರಿಯಾದ ಬಣ್ಣದೊಂದಿಗೆ ನಿಮ್ಮ ಲಿಂಕ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ಸ್ಟೈಲ್ ಮಾಡಿ.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

@link-hover-colorಸರಿಯಾದ ಹೂವರ್ ಬಣ್ಣವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರಚಿಸಲು ಕಡಿಮೆಯಿಂದ ಮತ್ತೊಂದು ಅದ್ಭುತ ಸಾಧನವಾದ ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ . ನೀವು ಬಳಸಬಹುದು darken, lighten, saturateಮತ್ತು desaturate.

ಮುದ್ರಣಕಲೆ

ಕೆಲವು ತ್ವರಿತ ವೇರಿಯೇಬಲ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಟೈಪ್‌ಫೇಸ್, ಪಠ್ಯ ಗಾತ್ರ, ಪ್ರಮುಖ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಸುಲಭವಾಗಿ ಹೊಂದಿಸಿ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸುಲಭವಾದ ಟೈಪೋಗ್ರಾಫಿಕ್ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಒದಗಿಸಲು ಇವುಗಳನ್ನು ಬಳಸುತ್ತದೆ.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

ಚಿಹ್ನೆಗಳು

ನಿಮ್ಮ ಐಕಾನ್‌ಗಳ ಸ್ಥಳ ಮತ್ತು ಫೈಲ್ ಹೆಸರನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಎರಡು ತ್ವರಿತ ವೇರಿಯೇಬಲ್‌ಗಳು.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

ಘಟಕಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಾದ್ಯಂತ ಇರುವ ಘಟಕಗಳು ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸಲು ಕೆಲವು ಡೀಫಾಲ್ಟ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. ಹೆಚ್ಚು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವವುಗಳು ಇಲ್ಲಿವೆ.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

ಮಾರಾಟಗಾರರ ಮಿಶ್ರಣಗಳು

ನಿಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ನಲ್ಲಿ ಎಲ್ಲಾ ಸಂಬಂಧಿತ ಮಾರಾಟಗಾರರ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬಹು ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಲು ವೆಂಡರ್ ಮಿಕ್ಸಿನ್‌ಗಳು ಮಿಕ್ಸಿನ್‌ಗಳಾಗಿವೆ.

ಬಾಕ್ಸ್ ಗಾತ್ರ

ಒಂದೇ ಮಿಕ್ಸಿನ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಘಟಕಗಳ ಬಾಕ್ಸ್ ಮಾದರಿಯನ್ನು ಮರುಹೊಂದಿಸಿ. ಸಂದರ್ಭಕ್ಕಾಗಿ, Mozilla ನಿಂದ ಈ ಉಪಯುಕ್ತ ಲೇಖನವನ್ನು ನೋಡಿ .

ಆಟೋಪ್ರಿಫಿಕ್ಸರ್‌ನ ಪರಿಚಯದೊಂದಿಗೆ ಮಿಕ್ಸಿನ್ ಅನ್ನು v3.2.0 ನಂತೆ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ . ಹಿಮ್ಮುಖ-ಹೊಂದಾಣಿಕೆಯನ್ನು ಸಂರಕ್ಷಿಸಲು, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ v4 ರವರೆಗೆ ಆಂತರಿಕವಾಗಿ ಮಿಕ್ಸಿನ್ ಅನ್ನು ಬಳಸುವುದನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮುಂದುವರಿಸುತ್ತದೆ.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

ದುಂಡಾದ ಮೂಲೆಗಳು

ಇಂದು ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಪೂರ್ವಪ್ರತ್ಯಯವಿಲ್ಲದ border-radiusಆಸ್ತಿಯನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ. ಅಂತೆಯೇ, ಯಾವುದೇ .border-radius()ಮಿಕ್ಸಿನ್ ಇಲ್ಲ, ಆದರೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ವಸ್ತುವಿನ ನಿರ್ದಿಷ್ಟ ಭಾಗದಲ್ಲಿ ಎರಡು ಮೂಲೆಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಸುತ್ತುವ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ಬಾಕ್ಸ್ (ಡ್ರಾಪ್) ನೆರಳುಗಳು

box-shadowನಿಮ್ಮ ಗುರಿ ಪ್ರೇಕ್ಷಕರು ಇತ್ತೀಚಿನ ಮತ್ತು ಅತ್ಯುತ್ತಮ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಆಸ್ತಿಯನ್ನು ಸ್ವಂತವಾಗಿ ಬಳಸಲು ಮರೆಯದಿರಿ . ಹಳೆಯ Android (ಪೂರ್ವ-v4) ಮತ್ತು iOS ಸಾಧನಗಳಿಗೆ (ಪೂರ್ವ-iOS 5) ನಿಮಗೆ ಬೆಂಬಲ ಬೇಕಾದರೆ , ಅಗತ್ಯವಿರುವ ಪೂರ್ವಪ್ರತ್ಯಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಅಸಮ್ಮತಿಸಿದ ಮಿಕ್ಸಿನ್ ಅನ್ನು ಬಳಸಿ.-webkit

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ರಮಾಣಿತ ಆಸ್ತಿಯನ್ನು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳನ್ನು ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿಸದ ಕಾರಣ ಮಿಕ್ಸಿನ್ ಅನ್ನು v3.1.0 ನಂತೆ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ . ಹಿಮ್ಮುಖ-ಹೊಂದಾಣಿಕೆಯನ್ನು ಸಂರಕ್ಷಿಸಲು, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ v4 ರವರೆಗೆ ಆಂತರಿಕವಾಗಿ ಮಿಕ್ಸಿನ್ ಅನ್ನು ಬಳಸುವುದನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮುಂದುವರಿಸುತ್ತದೆ.

ನಿಮ್ಮ ಬಾಕ್ಸ್ ನೆರಳುಗಳಲ್ಲಿ ಬಣ್ಣಗಳನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ rgba()ಆದ್ದರಿಂದ ಅವರು ಹಿನ್ನೆಲೆಗಳೊಂದಿಗೆ ಮನಬಂದಂತೆ ಸಾಧ್ಯವಾದಷ್ಟು ಮಿಶ್ರಣ ಮಾಡುತ್ತಾರೆ.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

ಪರಿವರ್ತನೆಗಳು

ನಮ್ಯತೆಗಾಗಿ ಬಹು ಮಿಶ್ರಣಗಳು. ಎಲ್ಲಾ ಪರಿವರ್ತನೆಯ ಮಾಹಿತಿಯನ್ನು ಒಂದರ ಜೊತೆಗೆ ಹೊಂದಿಸಿ ಅಥವಾ ಅಗತ್ಯವಿರುವಂತೆ ಪ್ರತ್ಯೇಕ ವಿಳಂಬ ಮತ್ತು ಅವಧಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ.

ಆಟೊಪ್ರಿಫಿಕ್ಸರ್‌ನ ಪರಿಚಯದೊಂದಿಗೆ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು v3.2.0 ನಂತೆ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ . ಹಿಮ್ಮುಖ-ಹೊಂದಾಣಿಕೆಯನ್ನು ಸಂರಕ್ಷಿಸಲು, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ v4 ರವರೆಗೆ ಆಂತರಿಕವಾಗಿ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮುಂದುವರಿಸುತ್ತದೆ.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

ರೂಪಾಂತರಗಳು

ಯಾವುದೇ ವಸ್ತುವನ್ನು ತಿರುಗಿಸಿ, ಅಳೆಯಿರಿ, ಅನುವಾದಿಸಿ (ಚಲಿಸಿ) ಅಥವಾ ಓರೆಯಾಗಿಸಿ.

ಆಟೊಪ್ರಿಫಿಕ್ಸರ್‌ನ ಪರಿಚಯದೊಂದಿಗೆ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು v3.2.0 ನಂತೆ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ . ಹಿಮ್ಮುಖ-ಹೊಂದಾಣಿಕೆಯನ್ನು ಸಂರಕ್ಷಿಸಲು, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ v4 ರವರೆಗೆ ಆಂತರಿಕವಾಗಿ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮುಂದುವರಿಸುತ್ತದೆ.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

ಅನಿಮೇಷನ್‌ಗಳು

ಒಂದು ಘೋಷಣೆಯಲ್ಲಿ CSS3 ನ ಎಲ್ಲಾ ಅನಿಮೇಷನ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮತ್ತು ಪ್ರತ್ಯೇಕ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ ಇತರ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸಲು ಒಂದೇ ಮಿಕ್ಸಿನ್.

ಆಟೊಪ್ರಿಫಿಕ್ಸರ್‌ನ ಪರಿಚಯದೊಂದಿಗೆ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು v3.2.0 ನಂತೆ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ . ಹಿಮ್ಮುಖ-ಹೊಂದಾಣಿಕೆಯನ್ನು ಸಂರಕ್ಷಿಸಲು, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ v4 ರವರೆಗೆ ಆಂತರಿಕವಾಗಿ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮುಂದುವರಿಸುತ್ತದೆ.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

ಅಪಾರದರ್ಶಕತೆ

ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಅಪಾರದರ್ಶಕತೆಯನ್ನು ಹೊಂದಿಸಿ ಮತ್ತು filterIE8 ಗಾಗಿ ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಒದಗಿಸಿ.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯ

ಪ್ರತಿ ಕ್ಷೇತ್ರದೊಳಗೆ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಿಗೆ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸಿ.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

ಕಾಲಮ್ಗಳು

ಒಂದೇ ಅಂಶದೊಳಗೆ CSS ಮೂಲಕ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸಿ.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

ಗ್ರೇಡಿಯಂಟ್ಸ್

ಯಾವುದೇ ಎರಡು ಬಣ್ಣಗಳನ್ನು ಸುಲಭವಾಗಿ ಹಿನ್ನೆಲೆ ಗ್ರೇಡಿಯಂಟ್ ಆಗಿ ಪರಿವರ್ತಿಸಿ. ಹೆಚ್ಚು ಸುಧಾರಿತ ಮತ್ತು ದಿಕ್ಕನ್ನು ಹೊಂದಿಸಿ, ಮೂರು ಬಣ್ಣಗಳನ್ನು ಬಳಸಿ ಅಥವಾ ರೇಡಿಯಲ್ ಗ್ರೇಡಿಯಂಟ್ ಬಳಸಿ. ಒಂದೇ ಮಿಕ್ಸಿನ್‌ನೊಂದಿಗೆ ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ ಪೂರ್ವಪ್ರತ್ಯಯ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಳನ್ನು ನೀವು ಪಡೆಯುತ್ತೀರಿ.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

ನೀವು ಪ್ರಮಾಣಿತ ಎರಡು-ಬಣ್ಣದ, ರೇಖೀಯ ಗ್ರೇಡಿಯಂಟ್‌ನ ಕೋನವನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು:

#gradient > .directional(#333; #000; 45deg);

ನಿಮಗೆ ಬಾರ್ಬರ್-ಸ್ಟ್ರೈಪ್ ಶೈಲಿಯ ಗ್ರೇಡಿಯಂಟ್ ಅಗತ್ಯವಿದ್ದರೆ, ಅದು ತುಂಬಾ ಸುಲಭ. ಒಂದೇ ಬಣ್ಣವನ್ನು ಸೂಚಿಸಿ ಮತ್ತು ನಾವು ಅರೆಪಾರದರ್ಶಕ ಬಿಳಿ ಪಟ್ಟಿಯನ್ನು ಒವರ್ಲೇ ಮಾಡುತ್ತೇವೆ.

#gradient > .striped(#333; 45deg);

ಅದರ ಬದಲಾಗಿ ಮೂರು ಬಣ್ಣಗಳನ್ನು ಬಳಸಿ. ಮೊದಲ ಬಣ್ಣ, ಎರಡನೇ ಬಣ್ಣ, ಎರಡನೇ ಬಣ್ಣದ ಬಣ್ಣದ ಸ್ಟಾಪ್ (25% ನಂತಹ ಶೇಕಡಾವಾರು ಮೌಲ್ಯ) ಮತ್ತು ಈ ಮಿಕ್ಸಿನ್‌ಗಳೊಂದಿಗೆ ಮೂರನೇ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಿ:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

ತಲೆ ಎತ್ತಿ! ನೀವು ಎಂದಾದರೂ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಬೇಕಾದರೆ, filterನೀವು ಸೇರಿಸಿರುವ ಯಾವುದೇ IE-ನಿರ್ದಿಷ್ಟವನ್ನು ತೆಗೆದುಹಾಕಲು ಮರೆಯದಿರಿ. .reset-filter()ಮಿಕ್ಸಿನ್ ಅನ್ನು ಪಕ್ಕದಲ್ಲಿ ಬಳಸುವ ಮೂಲಕ ನೀವು ಅದನ್ನು ಮಾಡಬಹುದು background-image: none;.

ಯುಟಿಲಿಟಿ ಮಿಕ್ಸಿನ್ಸ್

ಯುಟಿಲಿಟಿ ಮಿಕ್ಸಿನ್‌ಗಳು ನಿರ್ದಿಷ್ಟ ಗುರಿ ಅಥವಾ ಕಾರ್ಯವನ್ನು ಸಾಧಿಸಲು ಸಂಬಂಧವಿಲ್ಲದ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಮಿಕ್ಸಿನ್‌ಗಳಾಗಿವೆ.

ಕ್ಲಿಯರ್ಫಿಕ್ಸ್

class="clearfix"ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಸೇರಿಸುವುದನ್ನು ಮರೆತುಬಿಡಿ ಮತ್ತು ಬದಲಿಗೆ .clearfix()ಸೂಕ್ತವಾದಲ್ಲಿ ಮಿಕ್ಸಿನ್ ಸೇರಿಸಿ. Nicolas Gallagher ನಿಂದ ಮೈಕ್ರೋ ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ ಅನ್ನು ಬಳಸುತ್ತದೆ .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

ಸಮತಲ ಕೇಂದ್ರೀಕರಣ

ಯಾವುದೇ ಅಂಶವನ್ನು ಅದರ ಮೂಲದಲ್ಲಿ ತ್ವರಿತವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಿ. ಅಗತ್ಯವಿದೆ widthಅಥವಾ max-widthಹೊಂದಿಸಬೇಕಾಗಿದೆ.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

ಗಾತ್ರದ ಸಹಾಯಕರು

ವಸ್ತುವಿನ ಆಯಾಮಗಳನ್ನು ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಸೂಚಿಸಿ.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

ಮರುಗಾತ್ರಗೊಳಿಸಬಹುದಾದ ಪಠ್ಯ ಪ್ರದೇಶಗಳು

ಯಾವುದೇ textarea, ಅಥವಾ ಯಾವುದೇ ಇತರ ಅಂಶಕ್ಕಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸುವ ಆಯ್ಕೆಗಳನ್ನು ಸುಲಭವಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಿ. ಸಾಮಾನ್ಯ ಬ್ರೌಸರ್ ವರ್ತನೆಗೆ ಡಿಫಾಲ್ಟ್ ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

ಪಠ್ಯವನ್ನು ಮೊಟಕುಗೊಳಿಸಲಾಗುತ್ತಿದೆ

ಒಂದೇ ಮಿಕ್ಸಿನ್‌ನೊಂದಿಗೆ ಎಲಿಪ್ಸಿಸ್‌ನೊಂದಿಗೆ ಪಠ್ಯವನ್ನು ಸುಲಭವಾಗಿ ಮೊಟಕುಗೊಳಿಸಿ. ಅಂಶದ ಅಗತ್ಯವಿದೆ blockಅಥವಾ inline-blockಮಟ್ಟವಾಗಿರುತ್ತದೆ.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

ರೆಟಿನಾ ಚಿತ್ರಗಳು

ಎರಡು ಚಿತ್ರ ಮಾರ್ಗಗಳು ಮತ್ತು @1x ಚಿತ್ರದ ಆಯಾಮಗಳನ್ನು ಸೂಚಿಸಿ, ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ @2x ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ನೀವು ಸೇವೆ ಮಾಡಲು ಹಲವು ಚಿತ್ರಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಒಂದೇ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯಲ್ಲಿ ನಿಮ್ಮ ರೆಟಿನಾ ಇಮೇಜ್ CSS ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಬರೆಯುವುದನ್ನು ಪರಿಗಣಿಸಿ.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

ಸಾಸ್ ಬಳಸುವುದು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕಡಿಮೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಇದು ಅಧಿಕೃತ ಸಾಸ್ ಪೋರ್ಟ್ ಅನ್ನು ಸಹ ಹೊಂದಿದೆ . ನಾವು ಅದನ್ನು ಪ್ರತ್ಯೇಕ GitHub ರೆಪೊಸಿಟರಿಯಲ್ಲಿ ನಿರ್ವಹಿಸುತ್ತೇವೆ ಮತ್ತು ಪರಿವರ್ತನೆ ಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ನವೀಕರಣಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತೇವೆ.

ಏನು ಒಳಗೊಂಡಿದೆ

ಸಾಸ್ ಪೋರ್ಟ್ ಪ್ರತ್ಯೇಕ ರೆಪೊವನ್ನು ಹೊಂದಿರುವುದರಿಂದ ಮತ್ತು ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ಪ್ರೇಕ್ಷಕರಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವುದರಿಂದ, ಯೋಜನೆಯ ವಿಷಯಗಳು ಮುಖ್ಯ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಯೋಜನೆಗಿಂತ ಹೆಚ್ಚು ಭಿನ್ನವಾಗಿವೆ. ಇದು ಸಾಸ್ ಪೋರ್ಟ್ ಎಷ್ಟು ಸಾಧ್ಯವೋ ಅಷ್ಟು ಸಾಸ್-ಆಧಾರಿತ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಮಾರ್ಗ ವಿವರಣೆ
lib/ ರೂಬಿ ಜೆಮ್ ಕೋಡ್ (ಸಾಸ್ ಕಾನ್ಫಿಗರೇಶನ್, ರೈಲ್ಸ್ ಮತ್ತು ಕಂಪಾಸ್ ಏಕೀಕರಣ)
tasks/ ಪರಿವರ್ತಕ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು (ಅಪ್‌ಸ್ಟ್ರೀಮ್ ಕಡಿಮೆ ಸಾಸ್‌ಗೆ ತಿರುಗುವುದು)
test/ ಸಂಕಲನ ಪರೀಕ್ಷೆಗಳು
templates/ ಕಂಪಾಸ್ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನಿಫೆಸ್ಟ್
vendor/assets/ ಸಾಸ್, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಫಾಂಟ್ ಫೈಲ್‌ಗಳು
Rakefile ಕುಂಟೆ ಮತ್ತು ಪರಿವರ್ತನೆಯಂತಹ ಆಂತರಿಕ ಕಾರ್ಯಗಳು

ಈ ಫೈಲ್‌ಗಳನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಲು Sass ಪೋರ್ಟ್‌ನ GitHub ರೆಪೊಸಿಟರಿಯನ್ನು ಭೇಟಿ ಮಾಡಿ .

ಅನುಸ್ಥಾಪನ

Sass ಗಾಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಹೇಗೆ ಸ್ಥಾಪಿಸುವುದು ಮತ್ತು ಬಳಸುವುದು ಎಂಬುದರ ಕುರಿತು ಮಾಹಿತಿಗಾಗಿ, GitHub ರೆಪೊಸಿಟರಿ readme ಅನ್ನು ಸಂಪರ್ಕಿಸಿ . ಇದು ಅತ್ಯಂತ ನವೀಕೃತ ಮೂಲವಾಗಿದೆ ಮತ್ತು ರೈಲ್ಸ್, ಕಂಪಾಸ್ ಮತ್ತು ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಸಾಸ್ ಯೋಜನೆಗಳೊಂದಿಗೆ ಬಳಸಲು ಮಾಹಿತಿಯನ್ನು ಒಳಗೊಂಡಿದೆ.

ಸಾಸ್‌ಗಾಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್