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

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ರೆಸ್ಪಾನ್ಸಿವ್ 12-ಕಾಲಮ್ ಗ್ರಿಡ್‌ಗಳು, ಲೇಔಟ್‌ಗಳು ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ.

ಜಾಗತಿಕ ಸೆಟ್ಟಿಂಗ್‌ಗಳು

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

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

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

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

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

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

ಈ ಶೈಲಿಗಳನ್ನು ಸ್ಕ್ಯಾಫೋಲ್ಡಿಂಗ್‌ನಲ್ಲಿ ಕಾಣಬಹುದು. less .

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

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

ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್

ಲೈವ್ ಗ್ರಿಡ್ ಉದಾಹರಣೆ

ಡೀಫಾಲ್ಟ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ 12 ಕಾಲಮ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ , ಇದು 940px ವೈಡ್ ಕಂಟೈನರ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆಯ ವೈಶಿಷ್ಟ್ಯಗಳಿಲ್ಲದೆ ಮಾಡುತ್ತದೆ. ಪ್ರತಿಕ್ರಿಯಿಸುವ CSS ಫೈಲ್ ಅನ್ನು ಸೇರಿಸುವುದರೊಂದಿಗೆ, ಗ್ರಿಡ್ ನಿಮ್ಮ ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ಅವಲಂಬಿಸಿ 724px ಮತ್ತು 1170px ಅಗಲಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. 767px ವ್ಯೂಪೋರ್ಟ್‌ಗಳ ಕೆಳಗೆ, ಕಾಲಮ್‌ಗಳು ದ್ರವವಾಗುತ್ತವೆ ಮತ್ತು ಲಂಬವಾಗಿ ಸ್ಟ್ಯಾಕ್ ಆಗುತ್ತವೆ.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

ಮೂಲ ಗ್ರಿಡ್ HTML

ಸರಳವಾದ ಎರಡು ಕಾಲಮ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ, a ಅನ್ನು ರಚಿಸಿ .rowಮತ್ತು ಸೂಕ್ತವಾದ ಸಂಖ್ಯೆಯ .span*ಕಾಲಮ್‌ಗಳನ್ನು ಸೇರಿಸಿ. ಇದು 12-ಕಾಲಮ್ ಗ್ರಿಡ್ ಆಗಿರುವುದರಿಂದ, ಪ್ರತಿಯೊಂದೂ .span*ಆ 12 ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ವ್ಯಾಪಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಸಾಲಿಗೆ (ಅಥವಾ ಪೋಷಕರಲ್ಲಿರುವ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆ) ಯಾವಾಗಲೂ 12 ವರೆಗೆ ಸೇರಿಸಬೇಕು.

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

ಈ ಉದಾಹರಣೆಯನ್ನು ನೀಡಿದರೆ, ನಾವು ಹೊಂದಿದ್ದೇವೆ .span4ಮತ್ತು .span812 ಒಟ್ಟು ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಸಂಪೂರ್ಣ ಸಾಲನ್ನು ತಯಾರಿಸುತ್ತೇವೆ.

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

.offset*ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕಾಲಮ್‌ಗಳನ್ನು ಬಲಕ್ಕೆ ಸರಿಸಿ . ಪ್ರತಿಯೊಂದು ವರ್ಗವು ಒಂದು ಕಾಲಮ್‌ನ ಎಡ ಅಂಚನ್ನು ಸಂಪೂರ್ಣ ಕಾಲಮ್‌ನಿಂದ ಹೆಚ್ಚಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಾಲ್ಕು ಕಾಲಮ್‌ಗಳ ಮೇಲೆ .offset4ಚಲಿಸುತ್ತದೆ ..span4

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

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

ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ವಿಷಯವನ್ನು ನೆಸ್ಟ್ ಮಾಡಲು, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಲಮ್‌ನಲ್ಲಿ ಹೊಸ .rowಮತ್ತು .span*ಕಾಲಮ್‌ಗಳ ಸೆಟ್ ಅನ್ನು ಸೇರಿಸಿ. .span*ನೆಸ್ಟೆಡ್ ಸಾಲುಗಳು ಅದರ ಪೋಷಕರ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸೇರಿಸುವ ಕಾಲಮ್‌ಗಳ ಗುಂಪನ್ನು ಒಳಗೊಂಡಿರಬೇಕು.

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

ದ್ರವ ಜಾಲರಿ ವ್ಯವಸ್ಥೆ

ಲೈವ್ ದ್ರವ ಗ್ರಿಡ್ ಉದಾಹರಣೆ

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

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

ಮೂಲ ದ್ರವ ಗ್ರಿಡ್ HTML

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

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

ದ್ರವ ಆಫ್ಸೆಟ್ಟಿಂಗ್

ಸ್ಥಿರ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಆಫ್‌ಸೆಟ್ ಮಾಡುವ ರೀತಿಯಲ್ಲಿಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ: ಅಷ್ಟು .offset*ಕಾಲಮ್‌ಗಳಿಂದ ಸರಿದೂಗಿಸಲು ಯಾವುದೇ ಕಾಲಮ್‌ಗೆ ಸೇರಿಸಿ.

4
4 ಆಫ್ಸೆಟ್ 4
3 ಆಫ್ಸೆಟ್ 3
3 ಆಫ್ಸೆಟ್ 3
6 ಆಫ್ಸೆಟ್ 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

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

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

ದ್ರವ 12
ದ್ರವ 6
ದ್ರವ 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     ದ್ರವ 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > ದ್ರವ 6 </div> 
  6.       <div class = "span6" > ದ್ರವ 6 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ಲೇಔಟ್‌ಗಳು

ಸ್ಥಿರ ಲೇಔಟ್

ಅಗತ್ಯವಿರುವ ಮಾತ್ರದೊಂದಿಗೆ ಸಾಮಾನ್ಯ ಸ್ಥಿರ-ಅಗಲ (ಮತ್ತು ಐಚ್ಛಿಕವಾಗಿ ಸ್ಪಂದಿಸುವ) ವಿನ್ಯಾಸವನ್ನು ಒದಗಿಸುತ್ತದೆ <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>

ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ

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

<head>ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಸರಿಯಾದ ಮೆಟಾ ಟ್ಯಾಗ್ ಮತ್ತು ಹೆಚ್ಚುವರಿ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಸ್ಪಂದಿಸುವ CSS ಅನ್ನು ಆನ್ ಮಾಡಿ . ನೀವು ಕಸ್ಟಮೈಸ್ ಪುಟದಿಂದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡಿದ್ದರೆ, ನೀವು ಮೆಟಾ ಟ್ಯಾಗ್ ಅನ್ನು ಮಾತ್ರ ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "ಸ್ಟೈಲ್ಶೀಟ್" >

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

ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಬಗ್ಗೆ

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

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

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

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

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

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

ಲೇಬಲ್ ಲೇಔಟ್ ಅಗಲ ಕಾಲಮ್ ಅಗಲ ಗಟರ್ ಅಗಲ
ದೊಡ್ಡ ಪ್ರದರ್ಶನ 1200px ಮತ್ತು ಹೆಚ್ಚಿನದು 70px 30px
ಡೀಫಾಲ್ಟ್ 980px ಮತ್ತು ಹೆಚ್ಚಿನದು 60px 20px
ಭಾವಚಿತ್ರ ಮಾತ್ರೆಗಳು 768px ಮತ್ತು ಹೆಚ್ಚಿನದು 42px 20px
ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳಿಗೆ ಫೋನ್‌ಗಳು 767px ಮತ್ತು ಕೆಳಗೆ ದ್ರವ ಕಾಲಮ್‌ಗಳು, ಯಾವುದೇ ಸ್ಥಿರ ಅಗಲಗಳಿಲ್ಲ
ಫೋನ್‌ಗಳು 480px ಮತ್ತು ಕೆಳಗೆ ದ್ರವ ಕಾಲಮ್‌ಗಳು, ಯಾವುದೇ ಸ್ಥಿರ ಅಗಲಗಳಿಲ್ಲ 
  1. /* ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್ */
  2. @media ( ನಿಮಿ - ಅಗಲ : 1200px ) { ... }     
  3.  
  4. /* ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗೆ ಪೋರ್ಟ್ರೇಟ್ ಟ್ಯಾಬ್ಲೆಟ್ */
  5. @media ( ನಿಮಿ - ಅಗಲ : 768px ) ಮತ್ತು ( ಗರಿಷ್ಠ - ಅಗಲ : 979px ) { ... }        
  6.  
  7. /* ಪೋಟ್ರೇಟ್ ಟ್ಯಾಬ್ಲೆಟ್‌ಗೆ ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಫೋನ್ */
  8. @media ( ಗರಿಷ್ಠ - ಅಗಲ : 767px ) { ... }     
  9.  
  10. /* ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಫೋನ್‌ಗಳು ಮತ್ತು ಕೆಳಗೆ */
  11. @media ( ಗರಿಷ್ಠ - ಅಗಲ : 480px ) { ... }

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

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

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

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

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

ರೆಸ್ಪಾನ್ಸಿವ್ ಯುಟಿಲಿಟೀಸ್ ಟೆಸ್ಟ್ ಕೇಸ್

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

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

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

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

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

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

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