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

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ 12-ಕಾಲಮ್ ಗ್ರಿಡ್‌ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನಾವು ಆ ವ್ಯವಸ್ಥೆಯನ್ನು ಆಧರಿಸಿ ಸ್ಥಿರ- ಮತ್ತು ದ್ರವ-ಅಗಲ ಲೇಔಟ್‌ಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ.

CSS ರೀಸೆಟ್, ಮುದ್ರಣಕಲೆ ಮತ್ತು ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಜಾಗತಿಕ ಶೈಲಿಗಳು

HTML5 ಡಾಕ್ಟೈಪ್ ಅಗತ್ಯವಿದೆ

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

ಮುದ್ರಣಕಲೆ ಮತ್ತು ಲಿಂಕ್‌ಗಳು

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

  • ದೇಹದ ಮೇಲಿನ ಅಂಚು ತೆಗೆದುಹಾಕಿ
  • background-color: white;ಮೇಲೆ ಹೊಂದಿಸಿbody
  • @baseFontFamily, @baseFontSize, ಮತ್ತು @baseLineHeightಗುಣಲಕ್ಷಣಗಳನ್ನು ನಮ್ಮ ಮುದ್ರಣದ ಆಧಾರವಾಗಿ ಬಳಸಿ
  • ಮೂಲಕ ಜಾಗತಿಕ ಲಿಂಕ್ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಿ @linkColorಮತ್ತು ಲಿಂಕ್ ಅಂಡರ್‌ಲೈನ್‌ಗಳನ್ನು ಮಾತ್ರ ಅನ್ವಯಿಸಿ:hover

ಸಾಮಾನ್ಯೀಕರಣದ ಮೂಲಕ ಮರುಹೊಂದಿಸಿ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 2 ರಂತೆ, ಸಾಂಪ್ರದಾಯಿಕ CSS ಮರುಹೊಂದಿಕೆಯು Normalize.css ನಿಂದ ಅಂಶಗಳನ್ನು ಬಳಸಲು ವಿಕಸನಗೊಂಡಿದೆ , ಇದು ನಿಕೋಲಸ್ ಗಲ್ಲಾಘರ್ ಅವರ ಯೋಜನೆಯಾಗಿದ್ದು ಅದು HTML5 ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್‌ಗೆ ಸಹ ಶಕ್ತಿ ನೀಡುತ್ತದೆ .

ಹೊಸ ಮರುಹೊಂದಿಕೆಯನ್ನು ಇನ್ನೂ reset.less ನಲ್ಲಿ ಕಾಣಬಹುದು , ಆದರೆ ಸಂಕ್ಷಿಪ್ತತೆ ಮತ್ತು ನಿಖರತೆಗಾಗಿ ಅನೇಕ ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ.

ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ 12 ಕಾಲಮ್‌ಗಳು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಟ್ವಿಸ್ಟ್‌ನೊಂದಿಗೆ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಭಾಗವಾಗಿ ಒದಗಿಸಲಾದ ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯು 940px-ಅಗಲ, 12-ಕಾಲಮ್ ಗ್ರಿಡ್ ಆಗಿದೆ .

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

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


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

4
4 ಆಫ್ಸೆಟ್ 4
3 ಆಫ್ಸೆಟ್ 3
3 ಆಫ್ಸೆಟ್ 3
8 ಆಫ್‌ಸೆಟ್ 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಸ್ಥಿರ (ದ್ರವವಲ್ಲದ) ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ, ಗೂಡುಕಟ್ಟುವುದು ಸುಲಭ. ನಿಮ್ಮ ವಿಷಯವನ್ನು ನೆಸ್ಟ್ ಮಾಡಲು, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಲಮ್‌ನಲ್ಲಿ ಹೊಸ .rowಮತ್ತು .span*ಕಾಲಮ್‌ಗಳ ಸೆಟ್ ಅನ್ನು ಸೇರಿಸಿ..span*

ಉದಾಹರಣೆ

ನೆಸ್ಟೆಡ್ ಸಾಲುಗಳು ಅದರ ಪೋಷಕರ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸೇರಿಸುವ ಕಾಲಮ್‌ಗಳ ಗುಂಪನ್ನು ಒಳಗೊಂಡಿರಬೇಕು. ಉದಾಹರಣೆಗೆ, ಎರಡು ನೆಸ್ಟೆಡ್ .span3ಕಾಲಮ್‌ಗಳನ್ನು ಒಂದು ಒಳಗೆ ಇರಿಸಬೇಕು .span6.

ಕಾಲಮ್ನ ಹಂತ 1
ಹಂತ 2
ಹಂತ 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     ಕಾಲಮ್ನ ಹಂತ 1
  4.     <div class = "row" > 
  5.       <div class = "span6" > ಹಂತ 2 </div> 
  6.       <div class = "span6" > ಹಂತ 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ದ್ರವ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆ 12 ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ, ಶೇಕಡಾ-ಆಧಾರಿತ ಕಾಲಮ್‌ಗಳು

ದ್ರವ ಕಾಲಮ್ಗಳು

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

ಶೇಕಡಾವಾರು, ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲ

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

ದ್ರವ ಸಾಲುಗಳು

.rowಗೆ ಬದಲಾಯಿಸುವ ಮೂಲಕ ಯಾವುದೇ ಸಾಲಿನ ದ್ರವವನ್ನು ಸರಳವಾಗಿ ಮಾಡಿ .row-fluid. ಕಾಲಮ್‌ಗಳು ಒಂದೇ ಆಗಿರುತ್ತವೆ, ಸ್ಥಿರ ಮತ್ತು ದ್ರವ ವಿನ್ಯಾಸಗಳ ನಡುವೆ ಫ್ಲಿಪ್ ಮಾಡಲು ಇದು ತುಂಬಾ ಸರಳವಾಗಿದೆ.

ಮಾರ್ಕ್ಅಪ್

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ದ್ರವ ಗೂಡುಕಟ್ಟುವ

ದ್ರವ ಗ್ರಿಡ್‌ಗಳೊಂದಿಗೆ ಗೂಡುಕಟ್ಟುವಿಕೆಯು ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾಗಿದೆ: ನೆಸ್ಟೆಡ್ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯು ಪೋಷಕರಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಅಗತ್ಯವಿಲ್ಲ. ಬದಲಾಗಿ, ನಿಮ್ಮ ಕಾಲಮ್‌ಗಳನ್ನು ಪ್ರತಿ ಹಂತದಲ್ಲಿ ಮರುಹೊಂದಿಸಲಾಗುತ್ತದೆ ಏಕೆಂದರೆ ಪ್ರತಿ ಸಾಲು ಮೂಲ ಕಾಲಮ್‌ನ 100% ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

ದ್ರವ 12
ದ್ರವ 6
ದ್ರವ 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     ಕಾಲಮ್ನ ಹಂತ 1
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > ಹಂತ 2 </div> 
  6.       <div class = "span6" > ಹಂತ 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ಗ್ರಿಡ್ ಗ್ರಾಹಕೀಕರಣ

ವೇರಿಯಬಲ್ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ ವಿವರಣೆ
@gridColumns 12 ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆ
@gridColumnWidth 60px ಪ್ರತಿ ಕಾಲಮ್ನ ಅಗಲ
@gridGutterWidth 20px ಕಾಲಮ್ಗಳ ನಡುವೆ ಋಣಾತ್ಮಕ ಜಾಗ

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಡೀಫಾಲ್ಟ್ 940px ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಬೆರಳೆಣಿಕೆಯ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಮೇಲೆ ದಾಖಲಿಸಲಾಗಿದೆ. ಗ್ರಿಡ್‌ಗಾಗಿ ಎಲ್ಲಾ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ವೇರಿಯೇಬಲ್‌ಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ.less.

ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು ಹೇಗೆ

ಗ್ರಿಡ್ ಅನ್ನು ಮಾರ್ಪಡಿಸುವುದು ಎಂದರೆ ಮೂರು @grid*ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬದಲಾಯಿಸುವುದು ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮರುಸಂಕಲಿಸುವುದು. ಗ್ರಿಡ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು variables.less ನಲ್ಲಿ ಬದಲಾಯಿಸಿ ಮತ್ತು ಮರುಕಂಪೈಲ್ ಮಾಡಲು ದಾಖಲಿಸಲಾದ ನಾಲ್ಕು ವಿಧಾನಗಳಲ್ಲಿ ಒಂದನ್ನು ಬಳಸಿ . ನೀವು ಹೆಚ್ಚು ಕಾಲಮ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತಿದ್ದರೆ, grid.less ನಲ್ಲಿರುವವರಿಗೆ CSS ಅನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ.

ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ

ಗ್ರಿಡ್‌ನ ಗ್ರಾಹಕೀಕರಣವು ಡೀಫಾಲ್ಟ್ ಮಟ್ಟದಲ್ಲಿ, 940px ಗ್ರಿಡ್‌ನಲ್ಲಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಸ್ಪಂದಿಸುವ ಅಂಶಗಳನ್ನು ನಿರ್ವಹಿಸಲು, ನೀವು responsive.less ನಲ್ಲಿ ಗ್ರಿಡ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ.

ವೆಬ್‌ಪುಟಗಳನ್ನು ರಚಿಸಲು ಲೇಔಟ್‌ಗಳು ಮೂಲ ಟೆಂಪ್ಲೇಟ್‌ಗಳು

ಸ್ಥಿರ ಲೇಔಟ್

ಡೀಫಾಲ್ಟ್ ಮತ್ತು ಸರಳವಾದ 940px-ಅಗಲದ, ಕೇಂದ್ರೀಕೃತ ಲೇಔಟ್ ಅನ್ನು ಯಾವುದೇ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಪುಟಕ್ಕಾಗಿ ಒದಗಿಸಲಾಗಿದೆ <div class="container">.

  1. <ದೇಹ>
  2.   <div ವರ್ಗ = "ಧಾರಕ" > 
  3.     ...
  4.   </div>
  5. </body>

ದ್ರವ ವಿನ್ಯಾಸ

<div class="container-fluid">ಹೊಂದಿಕೊಳ್ಳುವ ಪುಟ ರಚನೆ, ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಅಗಲ, ಮತ್ತು ಎಡಗೈ ಸೈಡ್‌ಬಾರ್ ನೀಡುತ್ತದೆ. ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಡಾಕ್ಸ್‌ಗಳಿಗೆ ಇದು ಉತ್ತಮವಾಗಿದ��.

  1. <div ವರ್ಗ = "ಧಾರಕ-ದ್ರವ" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--ಸೈಡ್‌ಬಾರ್ ವಿಷಯ-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--ದೇಹದ ವಿಷಯ-->
  8.     </div>
  9.   </div>
  10. </div>

ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ರೆಸಲ್ಯೂಶನ್‌ಗಳಿಗಾಗಿ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು

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

ಅವರು ಏನು ಮಾಡುತ್ತಾರೆ

ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಹಲವಾರು ಷರತ್ತುಗಳ ಆಧಾರದ ಮೇಲೆ ಕಸ್ಟಮ್ CSS ಗೆ ಅವಕಾಶ ನೀಡುತ್ತವೆ-ಅನುಪಾತಗಳು, ಅಗಲಗಳು, ಪ್ರದರ್ಶನ ಪ್ರಕಾರ, ಇತ್ಯಾದಿ-ಆದರೆ ಸಾಮಾನ್ಯವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ min-widthಮತ್ತು max-width.

  • ನಮ್ಮ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಕಾಲಮ್‌ನ ಅಗಲವನ್ನು ಮಾರ್ಪಡಿಸಿ
  • ಅಗತ್ಯವಿರುವ ಕಡೆ ಫ್ಲೋಟ್ ಬದಲಿಗೆ ಅಂಶಗಳನ್ನು ಸ್ಟ್ಯಾಕ್ ಮಾಡಿ
  • ಸಾಧನಗಳಿಗೆ ಹೆಚ್ಚು ಸೂಕ್ತವಾಗುವಂತೆ ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಪಠ್ಯವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿ

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

ಬೆಂಬಲಿತ ಸಾಧನಗಳು

ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ರೆಸಲ್ಯೂಶನ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಸೂಕ್ತವಾಗಿಸಲು ಸಹಾಯ ಮಾಡಲು ಒಂದೇ ಫೈಲ್‌ನಲ್ಲಿ ಬೆರಳೆಣಿಕೆಯ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬೆಂಬಲಿಸುತ್ತದೆ. ಒಳಗೊಂಡಿರುವುದು ಇಲ್ಲಿದೆ:

ಲೇಬಲ್ ಲೇಔಟ್ ಅಗಲ ಕಾಲಮ್ ಅಗಲ ಗಟರ್ ಅಗಲ
ಸ್ಮಾರ್ಟ್ಫೋನ್ಗಳು 480px ಮತ್ತು ಕೆಳಗೆ ದ್ರವ ಕಾಲಮ್‌ಗಳು, ಯಾವುದೇ ಸ್ಥಿರ ಅಗಲಗಳಿಲ್ಲ
ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳಿಗೆ ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ಗಳು 767px ಮತ್ತು ಕೆಳಗೆ ದ್ರವ ಕಾಲಮ್‌ಗಳು, ಯಾವುದೇ ಸ್ಥಿರ ಅಗಲಗಳಿಲ್ಲ
ಭಾವಚಿತ್ರ ಮಾತ್ರೆಗಳು 768px ಮತ್ತು ಹೆಚ್ಚಿನದು 42px 20px
ಡೀಫಾಲ್ಟ್ 980px ಮತ್ತು ಹೆಚ್ಚಿನದು 60px 20px
ದೊಡ್ಡ ಪ್ರದರ್ಶನ 1200px ಮತ್ತು ಹೆಚ್ಚಿನದು 70px 30px

ಮೆಟಾ ಟ್ಯಾಗ್ ಅಗತ್ಯವಿದೆ

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

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

ಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಗಳನ್ನು ಬಳಸುವುದು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಈ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಒಳಗೊಂಡಿರುವುದಿಲ್ಲ, ಆದರೆ ಅವುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಸೇರಿಸುವುದು ತುಂಬಾ ಸುಲಭ ಮತ್ತು ಕನಿಷ್ಠ ಸೆಟಪ್ ಅಗತ್ಯವಿರುತ್ತದೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಸ್ಪಂದಿಸುವ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಕೆಲವು ಆಯ್ಕೆಗಳಿವೆ:

  1. ಕಂಪೈಲ್ ಮಾಡಿದ ರೆಸ್ಪಾನ್ಸಿವ್ ಆವೃತ್ತಿಯನ್ನು ಬಳಸಿ, bootstrap-responsive.css
  2. @import "responsive.less" ಅನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮರುಸಂಕಲಿಸಿ
  3. responsive.less ಅನ್ನು ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ನಂತೆ ಮಾರ್ಪಡಿಸಿ ಮತ್ತು ಮರುಕಂಪೈಲ್ ಮಾಡಿ

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

  1.   // ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಫೋನ್‌ಗಳು ಮತ್ತು ಕೆಳಗೆ
  2.   @media ( ಗರಿಷ್ಠ - ಅಗಲ : 480px ) { ... }     
  3.  
  4.   // ಪೋಟ್ರೇಟ್ ಟ್ಯಾಬ್ಲೆಟ್‌ಗೆ ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಫೋನ್
  5.   @media ( ಗರಿಷ್ಠ - ಅಗಲ : 767px ) { ... }     
  6.  
  7.   // ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗೆ ಪೋರ್ಟ್ರೇಟ್ ಟ್ಯಾಬ್ಲೆಟ್
  8.   @media ( ನಿಮಿ - ಅಗಲ : 768px ) ಮತ್ತು ( ಗರಿಷ್ಠ - ಅಗಲ : 979px ) { ... }        
  9.  
  10.   // ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್
  11.   @media ( ನಿಮಿ - ಅಗಲ : 1200px ) { ... }

ರೆಸ್ಪಾನ್ಸಿವ್ ಯುಟಿಲಿಟಿ ತರಗತಿಗಳು

ಅವು ಯಾವುವು

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

ಯಾವಾಗ ಬಳಸಬೇಕು

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

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

ಬೆಂಬಲ ತರಗತಿಗಳು

ನಾವು ಬೆಂಬಲಿಸುವ ತರಗತಿಗಳ ಟೇಬಲ್ ಅನ್ನು ಇಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ ಮತ್ತು ನೀಡಲಾದ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯ ಲೇಔಟ್ (ಸಾಧನದ ಮೂಲಕ ಲೇಬಲ್ ಮಾಡಲಾಗಿದೆ) ಮೇಲೆ ಅವುಗಳ ಪರಿಣಾಮವನ್ನು ತೋರಿಸಲಾಗಿದೆ. ಅವುಗಳನ್ನು ಕಾಣಬಹುದು responsive.less.

ವರ್ಗ ಫೋನ್‌ಗಳು480px ಮತ್ತು ಕೆಳಗೆ ಮಾತ್ರೆಗಳು767px ಮತ್ತು ಕೆಳಗೆ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳು768px ಮತ್ತು ಹೆಚ್ಚಿನದು
.visible-phone ಕಾಣುವ
.visible-tablet ಕಾಣುವ
.visible-desktop ಕಾಣುವ
.hidden-phone ಕಾಣುವ ಕಾಣುವ
.hidden-tablet ಕಾಣುವ ಕಾಣುವ
.hidden-desktop ಕಾಣುವ ಕಾಣುವ

ಪರೀಕ್ಷಾ ಪ್ರಕರಣ

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

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

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

  • ದೂರವಾಣಿ✔ ಫೋನ್
  • ಟ್ಯಾಬ್ಲೆಟ್✔ ಟ್ಯಾಬ್ಲೆಟ್
  • ಡೆಸ್ಕ್ಟಾಪ್✔ ಡೆಸ್ಕ್ಟಾಪ್

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

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

  • ದೂರವಾಣಿ✔ ಫೋನ್
  • ಟ್ಯಾಬ್ಲೆಟ್✔ ಟ್ಯಾಬ್ಲೆಟ್
  • ಡೆಸ್ಕ್ಟಾಪ್✔ ಡೆಸ್ಕ್ಟಾಪ್