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

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

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

ಉದಾಹರಣೆ

<div class = "row" > 
  <div class = "span12" > 
    ಕಾಲಮ್ನ ಹಂತ 1
    <div class = "row" > 
      <div class = "span6" > ಹಂತ 2 </div> 
      <div class = "span6" > ಹಂತ 2 </div> 
    </div>
  </div>
</div>

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

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

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

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

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

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

ಸ್ಥಿರ ಲೇಔಟ್

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

<ದೇಹ>
  <div ವರ್ಗ = "ಧಾರಕ" > 
    ...
  </div>
</body>

ದ್ರವ ವಿನ್ಯಾಸ

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

<div ವರ್ಗ = "ಧಾರಕ-ದ್ರವ" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--ಸೈಡ್‌ಬಾರ್ ವಿಷಯ-->
    </div>
    <div class = "span10" > 
      <!--ದೇಹದ ವಿಷಯ-->
    </div>
  </div>
</div>

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

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

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

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

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

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

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

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

  // ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಫೋನ್‌ಗಳು ಮತ್ತು ಕೆಳಗೆ
  @media ( ಗರಿಷ್ಠ - ಅಗಲ : 480px ) { ... }     
 
  // ಪೋಟ್ರೇಟ್ ಟ್ಯಾಬ್ಲೆಟ್‌ಗೆ ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಫೋನ್
  @media ( ಗರಿಷ್ಠ - ಅಗಲ : 768px ) { ... }     
 
  // ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗೆ ಪೋರ್ಟ್ರೇಟ್ ಟ್ಯಾಬ್ಲೆಟ್
  @media ( ನಿಮಿ - ಅಗಲ : 768px ) ಮತ್ತು ( ಗರಿಷ್ಠ - ಅಗಲ : 940px ) { ... }        
 
  // ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್
  @media ( ನಿಮಿ - ಅಗಲ : 1200px ) { .. }