ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ 12-ಕಾಲಮ್ ಗ್ರಿಡ್ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನಾವು ಆ ವ್ಯವಸ್ಥೆಯನ್ನು ಆಧರಿಸಿ ಸ್ಥಿರ- ಮತ್ತು ದ್ರವ-ಅಗಲ ಲೇಔಟ್ಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಭಾಗವಾಗಿ ಒದಗಿಸಲಾದ ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯು 940px-ಅಗಲ, 12-ಕಾಲಮ್ ಗ್ರಿಡ್ ಆಗಿದೆ .
ಇದು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ರೆಸಲ್ಯೂಶನ್ಗಳಿಗೆ ನಾಲ್ಕು ಸ್ಪಂದಿಸುವ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಹೊಂದಿದೆ: ಫೋನ್, ಟ್ಯಾಬ್ಲೆಟ್ ಭಾವಚಿತ್ರ, ಟೇಬಲ್ ಲ್ಯಾಂಡ್ಸ್ಕೇಪ್ ಮತ್ತು ಸಣ್ಣ ಡೆಸ್ಕ್ಟಾಪ್ಗಳು ಮತ್ತು ದೊಡ್ಡ ವೈಡ್ಸ್ಕ್ರೀನ್ ಡೆಸ್ಕ್ಟಾಪ್ಗಳು.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ಇಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ, ಎರಡು "ಕಾಲಮ್ಗಳೊಂದಿಗೆ" ಮೂಲ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸಬಹುದು, ಪ್ರತಿಯೊಂದೂ ನಮ್ಮ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ನ ಭಾಗವಾಗಿ ನಾವು ವ್ಯಾಖ್ಯಾನಿಸಿದ 12 ಅಡಿಪಾಯದ ಕಾಲಮ್ಗಳನ್ನು ವ್ಯಾಪಿಸಿದೆ.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಸ್ಥಿರ (ದ್ರವವಲ್ಲದ) ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ, ಗೂಡುಕಟ್ಟುವುದು ಸುಲಭ. ನಿಮ್ಮ ವಿಷಯವನ್ನು ನೆಸ್ಟ್ ಮಾಡಲು, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಲಮ್ನಲ್ಲಿ ಹೊಸ .row
ಮತ್ತು .span*
ಕಾಲಮ್ಗಳ ಸೆಟ್ ಅನ್ನು ಸೇರಿಸಿ..span*
ನೆಸ್ಟೆಡ್ ಸಾಲುಗಳು ಅದರ ಪೋಷಕರ ಕಾಲಮ್ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸೇರಿಸುವ ಕಾಲಮ್ಗಳ ಗುಂಪನ್ನು ಒಳಗೊಂಡಿರಬೇಕು. ಉದಾಹರಣೆಗೆ, ಎರಡು ನೆಸ್ಟೆಡ್ .span3
ಕಾಲಮ್ಗಳನ್ನು ಒಂದು ಒಳಗೆ ಇರಿಸಬೇಕು .span6
.
- <div class = "row" >
- <div class = "span12" >
- ಕಾಲಮ್ನ ಹಂತ 1
- <div class = "row" >
- <div class = "span6" > ಹಂತ 2 </div>
- <div class = "span6" > ಹಂತ 2 </div>
- </div>
- </div>
- </div>
ದ್ರವ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯು ಸ್ಥಿರ ಪಿಕ್ಸೆಲ್ಗಳ ಬದಲಿಗೆ ಕಾಲಮ್ ಅಗಲಗಳಿಗೆ ಶೇಕಡಾಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ನಮ್ಮ ಸ್ಥಿರ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ನಂತೆಯೇ ಅದೇ ರೀತಿಯ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಬದಲಾವಣೆಗಳನ್ನು ಹೊಂದಿದೆ, ಪ್ರಮುಖ ಸ್ಕ್ರೀನ್ ರೆಸಲ್ಯೂಶನ್ಗಳು ಮತ್ತು ಸಾಧನಗಳಿಗೆ ಸರಿಯಾದ ಅನುಪಾತವನ್ನು ಖಾತ್ರಿಪಡಿಸುತ್ತದೆ.
.row
ಗೆ ಬದಲಾಯಿಸುವ ಮೂಲಕ ಯಾವುದೇ ಸಾಲಿನ ದ್ರವವನ್ನು ಸರಳವಾಗಿ ಮಾಡಿ .row-fluid
. ಕಾಲಮ್ಗಳು ಒಂದೇ ಆಗಿರುತ್ತವೆ, ಸ್ಥಿರ ಮತ್ತು ದ್ರವ ವಿನ್ಯಾಸಗಳ ನಡುವೆ ಫ್ಲಿಪ್ ಮಾಡಲು ಇದು ತುಂಬಾ ಸರಳವಾಗಿದೆ.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ದ್ರವ ಗ್ರಿಡ್ಗಳೊಂದಿಗೆ ಗೂಡುಕಟ್ಟುವಿಕೆಯು ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾಗಿದೆ: ನೆಸ್ಟೆಡ್ ಕಾಲಮ್ಗಳ ಸಂಖ್ಯೆಯು ಪೋಷಕರಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಅಗತ್ಯವಿಲ್ಲ. ಬದಲಾಗಿ, ನಿಮ್ಮ ಕಾಲಮ್ಗಳನ್ನು ಪ್ರತಿ ಹಂತದಲ್ಲಿ ಮರುಹೊಂದಿಸಲಾಗುತ್ತದೆ ಏಕೆಂದರೆ ಪ್ರತಿ ಸಾಲು ಮೂಲ ಕಾಲಮ್ನ 100% ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
- <div class = "row-fluid" >
- <div class = "span12" >
- ಕಾಲಮ್ನ ಹಂತ 1
- <div class = "row-fluid" >
- <div class = "span6" > ಹಂತ 2 </div>
- <div class = "span6" > ಹಂತ 2 </div>
- </div>
- </div>
- </div>
ವೇರಿಯಬಲ್ | ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ | ವಿವರಣೆ |
---|---|---|
@gridColumns |
12 | ಕಾಲಮ್ಗಳ ಸಂಖ್ಯೆ |
@gridColumnWidth |
60px | ಪ್ರತಿ ಕಾಲಮ್ನ ಅಗಲ |
@gridGutterWidth |
20px | ಕಾಲಮ್ಗಳ ನಡುವೆ ಋಣಾತ್ಮಕ ಜಾಗ |
@siteWidth |
ಎಲ್ಲಾ ಕಾಲಮ್ಗಳು ಮತ್ತು ಗಟರ್ಗಳ ಕಂಪ್ಯೂಟೆಡ್ ಮೊತ್ತ | .container-fixed() ಮಿಕ್ಸಿನ್ನ ಅಗಲವನ್ನು ಹೊಂದಿಸಲು ಕಾಲಮ್ಗಳು ಮತ್ತು ಗಟರ್ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಎಣಿಸುತ್ತದೆ |
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಡೀಫಾಲ್ಟ್ 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>
ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ರೆಸಲ್ಯೂಶನ್ಗಳಲ್ಲಿ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗಳನ್ನು ಹೆಚ್ಚು ಸೂಕ್ತವಾಗಿಸಲು ಸಹಾಯ ಮಾಡಲು ಒಂದೇ ಫೈಲ್ನಲ್ಲಿ ಬೆರಳೆಣಿಕೆಯ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಬೆಂಬಲಿಸುತ್ತದೆ. ಒಳಗೊಂಡಿರುವುದು ಇಲ್ಲಿದೆ:
ಲೇಬಲ್ | ಲೇಔಟ್ ಅಗಲ | ಕಾಲಮ್ ಅಗಲ | ಗಟರ್ ಅಗಲ |
---|---|---|---|
ಸ್ಮಾರ್ಟ್ಫೋನ್ಗಳು | 480px ಮತ್ತು ಕೆಳಗೆ | ದ್ರವ ಕಾಲಮ್ಗಳು, ಯಾವುದೇ ಸ್ಥಿರ ಅಗಲಗಳಿಲ್ಲ | |
ಭಾವಚಿತ್ರ ಮಾತ್ರೆಗಳು | 480px ನಿಂದ 768px | ದ್ರವ ಕಾಲಮ್ಗಳು, ಯಾವುದೇ ಸ್ಥಿರ ಅಗಲಗಳಿಲ್ಲ | |
ಲ್ಯಾಂಡ್ಸ್ಕೇಪ್ ಮಾತ್ರೆಗಳು | 768px ನಿಂದ 979px | 42px | 20px |
ಡೀಫಾಲ್ಟ್ | 980px ಮತ್ತು ಹೆಚ್ಚಿನದು | 60px | 20px |
ದೊಡ್ಡ ಪ್ರದರ್ಶನ | 1210px ಮತ್ತು ಹೆಚ್ಚಿನದು | 70px | 30px |
ಸಾಧನಗಳು ಸ್ಪಂದಿಸುವ ಪುಟಗಳನ್ನು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ವ್ಯೂಪೋರ್ಟ್ ಮೆಟಾ ಟ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸಿ.
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಹಲವಾರು ಷರತ್ತುಗಳ ಆಧಾರದ ಮೇಲೆ ಕಸ್ಟಮ್ CSS ಗೆ ಅವಕಾಶ ನೀಡುತ್ತವೆ-ಅನುಪಾತಗಳು, ಅಗಲಗಳು, ಪ್ರದರ್ಶನ ಪ್ರಕಾರ, ಇತ್ಯಾದಿ-ಆದರೆ ಸಾಮಾನ್ಯವಾಗಿ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ min-width
ಮತ್ತು max-width
.
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಈ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಒಳಗೊಂಡಿರುವುದಿಲ್ಲ, ಆದರೆ ಅವುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಸೇರಿಸುವುದು ತುಂಬಾ ಸುಲಭ ಮತ್ತು ಕನಿಷ್ಠ ಸೆಟಪ್ ಅಗತ್ಯವಿರುತ್ತದೆ. ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಸ್ಪಂದಿಸುವ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಕೆಲವು ಆಯ್ಕೆಗಳಿವೆ:
ಅದನ್ನು ಏಕೆ ಸೇರಿಸಬಾರದು? ನಿಜ ಹೇಳಬೇಕೆಂದರೆ, ಪ್ರತಿಯೊಂದಕ್ಕೂ ಸ್ಪಂದಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ತೆಗೆದುಹಾಕಲು ಡೆವಲಪರ್ಗಳನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುವ ಬದಲು, ಅದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಉತ್ತಮ ಎಂದು ನಾವು ಭಾವಿಸುತ್ತೇವೆ.
- // ಲ್ಯಾಂಡ್ಸ್ಕೇಪ್ ಫೋನ್ಗಳು ಮತ್ತು ಕೆಳಗೆ
- @media ( ಗರಿಷ್ಠ - ಅಗಲ : 480px ) { ... }
- // ಪೋಟ್ರೇಟ್ ಟ್ಯಾಬ್ಲೆಟ್ಗೆ ಲ್ಯಾಂಡ್ಸ್ಕೇಪ್ ಫೋನ್
- @media ( ಗರಿಷ್ಠ - ಅಗಲ : 768px ) { ... }
- // ಲ್ಯಾಂಡ್ಸ್ಕೇಪ್ ಮತ್ತು ಡೆಸ್ಕ್ಟಾಪ್ಗೆ ಪೋರ್ಟ್ರೇಟ್ ಟ್ಯಾಬ್ಲೆಟ್
- @media ( ನಿಮಿ - ಅಗಲ : 768px ) ಮತ್ತು ( ಗರಿಷ್ಠ - ಅಗಲ : 980px ) { ... }
- // ದೊಡ್ಡ ಡೆಸ್ಕ್ಟಾಪ್
- @media ( ನಿಮಿ - ಅಗಲ : 1200px ) { .. }