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

ಘಟಕಗಳು

ನ್ಯಾವಿಗೇಶನ್, ಎಚ್ಚರಿಕೆಗಳು, ಪಾಪೋವರ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಒದಗಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಡಜನ್‌ಗಟ್ಟಲೆ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಘಟಕಗಳನ್ನು ನಿರ್ಮಿಸಲಾಗಿದೆ.

ಬಟನ್ ಗುಂಪುಗಳು ಹೆಚ್ಚು ಟೂಲ್‌ಬಾರ್ ತರಹದ ಕಾರ್ಯಕ್ಕಾಗಿ ಬಟನ್‌ಗಳನ್ನು ಸೇರಿಕೊಳ್ಳಿ

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

ಒಂದು ಸಂಯೋಜಿತ ಘಟಕವಾಗಿ ಅನೇಕ ಬಟನ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಸೇರಿಸಲು ಬಟನ್ ಗುಂಪುಗಳನ್ನು ಬಳಸಿ. ಒಂದು ಸರಣಿ <a>ಅಥವಾ <button>ಅಂಶಗಳೊಂದಿಗೆ ಅವುಗಳನ್ನು ನಿರ್ಮಿಸಿ.

ಒಳ್ಳೆಯ ಅಭ್ಯಾಸಗಳು

ಬಟನ್ ಗುಂಪುಗಳು ಮತ್ತು ಟೂಲ್‌ಬಾರ್‌ಗಳನ್ನು ಬಳಸಲು ನಾವು ಈ ಕೆಳಗಿನ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ:

  • ಒಂದೇ ಬಟನ್ ಗುಂಪಿನಲ್ಲಿ ಯಾವಾಗಲೂ ಒಂದೇ ಅಂಶವನ್ನು ಬಳಸಿ, <a>ಅಥವಾ <button>.
  • ಒಂದೇ ಬಟನ್ ಗುಂಪಿನಲ್ಲಿ ವಿವಿಧ ಬಣ್ಣಗಳ ಬಟನ್‌ಗಳನ್ನು ಮಿಶ್ರಣ ಮಾಡಬೇಡಿ.
  • ಪಠ್ಯಕ್ಕೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ಅಥವಾ ಬದಲಿಗೆ ಐಕಾನ್‌ಗಳನ್ನು ಬಳಸಿ, ಆದರೆ ಸೂಕ್ತವಾದಲ್ಲಿ ಆಲ್ಟ್ ಮತ್ತು ಶೀರ್ಷಿಕೆ ಪಠ್ಯವನ್ನು ಸೇರಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

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

ಡೀಫಾಲ್ಟ್ ಉದಾಹರಣೆ

ಆಂಕರ್ ಟ್ಯಾಗ್ ಬಟನ್‌ಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಪ್ರಮಾಣಿತ ಬಟನ್ ಗುಂಪಿಗೆ HTML ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

ಎಡಕ್ಕೆ ಮಧ್ಯಮ ಸರಿ 
  1. <div class = "btn-group" > 
  2.   <a class = "btn" href = "#" > 1 </a>  
  3.   <a class = "btn" href = "#" > 2 </a>  
  4.   <a class = "btn" href = "#" > 3 </a>  
  5. </div>

ಟೂಲ್‌ಬಾರ್ ಉದಾಹರಣೆ

ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಘಟಕಗಳಿಗೆ <div class="btn-group">ಒಂದು ಸೆಟ್ ಅನ್ನು ಸಂಯೋಜಿಸಿ .<div class="btn-toolbar">

1 2 3 4
5 6 7
8 
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     ...
  4.   </div>
  5. </div>

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

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪಡೆಯಿರಿ »

ತಲೆ ಎತ್ತಿದೆ

ಬಟನ್ ಗುಂಪುಗಳಿಗೆ CSS ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ನಲ್ಲಿದೆ, button-groups.less.

ಬಟನ್‌ಗಳ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ಬಟನ್ ಗುಂಪುಗಳಲ್ಲಿ ನಿರ್ಮಿಸಲಾದ ಸಂದರ್ಭೋಚಿತ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳು

ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವನ್ನು ಎ ಒಳಗೆ ಇರಿಸುವ .btn-groupಮೂಲಕ ಮತ್ತು ಸರಿಯಾದ ಮೆನು ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಅದನ್ನು ಪ್ರಚೋದಿಸಲು ಯಾವುದೇ ಬಟನ್ ಅನ್ನು ಬಳಸಿ.

ಕ್ರಿಯೆ
ಕ್ರಿಯೆ
ಅಪಾಯ
ಯಶಸ್ಸು
ಮಾಹಿತಿ

ತಲೆ ಎತ್ತಿ! ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡ್ರಾಪ್‌ಡೌನ್ ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿದೆ .

ಉದಾಹರಣೆ ಮಾರ್ಕ್ಅಪ್

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

  1. <div class = "btn-group" > 
  2.   <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
  3.     ಕ್ರಿಯೆ
  4.     <span class = "caret" ></span> 
  5.   </a>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಲಿಂಕ್‌ಗಳು -->
  8.   </ul>
  9. </div>

ಸ್ಪ್ಲಿಟ್ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಬಟನ್ ಗುಂಪಿನ ಶೈಲಿಗಳು ಮತ್ತು ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ನಿರ್ಮಿಸಿ, ನಾವು ಸುಲಭವಾಗಿ ಸ್ಪ್ಲಿಟ್ ಬಟನ್ ಅನ್ನು ರಚಿಸಬಹುದು. ಸ್ಪ್ಲಿಟ್ ಬಟನ್‌ಗಳು ಎಡಭಾಗದಲ್ಲಿ ಪ್ರಮಾಣಿತ ಕ್ರಿಯೆಯನ್ನು ಮತ್ತು ಸಾಂದರ್ಭಿಕ ಲಿಂಕ್‌ಗಳೊಂದಿಗೆ ಬಲಭಾಗದಲ್ಲಿ ಡ್ರಾಪ್‌ಡೌನ್ ಟಾಗಲ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.

ಕ್ರಿಯೆ
ಕ್ರಿಯೆ
ಅಪಾಯ
ಯಶಸ್ಸು
ಮಾಹಿತಿ

ಉದಾಹರಣೆ ಮಾರ್ಕ್ಅಪ್

ಪ್ರತ್ಯೇಕ ಡ್ರಾಪ್‌ಡೌನ್ ಪ್ರಚೋದಕವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಎರಡನೇ ಬಟನ್ ಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸಲು ನಾವು ಸಾಮಾನ್ಯ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ವಿಸ್ತರಿಸುತ್ತೇವೆ.

  1. <div class = "btn-group" > 
  2.   <a class = "btn" href = "#" > ಕ್ರಿಯೆ </a>  
  3.   <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
  4.     <span class = "caret" ></span> 
  5.   </a>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಲಿಂಕ್‌ಗಳು -->
  8.   </ul>
  9. </div>

ಪೇಜಿನೇಶನ್ ವಿಷಯದ ಮೂಲಕ ಪೇಜಿಂಗ್ ಮಾಡಲು ಎರಡು ಆಯ್ಕೆಗಳು

ಮಲ್ಟಿಕಾನ್-ಪುಟ ವಿನ್ಯಾಸ

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

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

ರಾಜ್ಯಪೂರ್ಣ ಪುಟ ಲಿಂಕ್‌ಗಳು

ಲಿಂಕ್‌ಗಳು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದಾಗಿದೆ ಮತ್ತು ಸರಿಯಾದ ವರ್ಗದೊಂದಿಗೆ ಹಲವಾರು ಸಂದರ್ಭಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. .disabledಕ್ಲಿಕ್ ಮಾಡಲಾಗದ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಮತ್ತು .activeಪ್ರಸ್ತುತ ಪುಟಕ್ಕಾಗಿ.

ಹೊಂದಿಕೊಳ್ಳುವ ಜೋಡಣೆ

ವಿನ್ಯಾಸ ಲಿಂಕ್‌ಗಳ ಜೋಡಣೆಯನ್ನು ಬದಲಾಯಿಸಲು ಎರಡು ಐಚ್ಛಿಕ ತರಗತಿಗಳಲ್ಲಿ ಒಂದನ್ನು ಸೇರಿಸಿ: .pagination-centeredಮತ್ತು .pagination-right.

ಉದಾಹರಣೆಗಳು

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

ಮಾರ್ಕ್ಅಪ್

ಒಂದು ಸುತ್ತಿ <div>, ಪುಟ ವಿನ್ಯಾಸ ಕೇವಲ ಒಂದು <ul>.

  1. <div class = "pagination" > 
  2.   <ul>
  3.     <li><a href = "#" > ಹಿಂದಿನ </a></li> 
  4.     <li class = "ಸಕ್ರಿಯ" > 
  5.       <a href = "#" > 1 </a> 
  6.     </li>
  7.     <li><a href = "#" > 2 </a></li> 
  8.     <li><a href = "#" > 3 </a></li> 
  9.     <li><a href = "#" > 4 ​​</a></li> 
  10.     <li><a href = "#" > ಮುಂದೆ </a></li> 
  11.   </ul>
  12. </div>

ತ್ವರಿತ ಹಿಂದಿನ ಮತ್ತು ಮುಂದಿನ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಪೇಜರ್

ಪೇಜರ್ ಬಗ್ಗೆ

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

ಡೀಫಾಲ್ಟ್ ಉದಾಹರಣೆ

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಪೇಜರ್ ಲಿಂಕ್‌ಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.

  1. <ul class = "ಪೇಜರ್" > 
  2.   <li>
  3.     <a href = "#" > ಹಿಂದಿನ </a> 
  4.   </li>
  5.   <li>
  6.     <a href = "#" > ಮುಂದೆ </a> 
  7.   </li>
  8. </ul>

ಜೋಡಿಸಲಾದ ಲಿಂಕ್‌ಗಳು

ಪರ್ಯಾಯವಾಗಿ, ನೀವು ಪ್ರತಿ ಲಿಂಕ್ ಅನ್ನು ಬದಿಗಳಿಗೆ ಜೋಡಿಸಬಹುದು:

  1. <ul class = "ಪೇಜರ್" > 
  2.   <li class = "ಹಿಂದಿನ" > 
  3.     <a href = "#" > ← ಹಳೆಯದು </a> 
  4.   </li>
  5.   <li class = "ಮುಂದೆ" > 
  6.     <a href = "#" > ಹೊಸದು → </a> 
  7.   </li>
  8. </ul>

ಇನ್‌ಲೈನ್ ಲೇಬಲ್‌ಗಳು ಲೇಬಲ್ ಮತ್ತು ಟಿಪ್ಪಣಿ ಪಠ್ಯ

ಲೇಬಲ್‌ಗಳು ಮಾರ್ಕ್ಅಪ್
ಡೀಫಾಲ್ಟ್ <span class="label">Default</span>
ಯಶಸ್ಸು <span class="label label-success">Success</span>
ಎಚ್ಚರಿಕೆ <span class="label label-warning">Warning</span>
ಪ್ರಮುಖ <span class="label label-important">Important</span>
ಮಾಹಿತಿ <span class="label label-info">Info</span>

ಟೈಪೋಗ್ರಾಫಿಕ್ ಘಟಕಗಳು ಪುಟದ ಹೆಡರ್ ಮತ್ತು ವಿಷಯವನ್ನು ವಿಭಜಿಸಲು ಹೀರೋ ಯೂನಿಟ್

ಹೀರೋ ಘಟಕ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಹೀರೋ ಯೂನಿಟ್ ಎಂಬ ಹಗುರವಾದ, ಹೊಂದಿಕೊಳ್ಳುವ ಘಟಕವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಮಾರ್ಕೆಟಿಂಗ್ ಮತ್ತು ಕಂಟೆಂಟ್-ಹೆವಿ ಸೈಟ್‌ಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಮಾರ್ಕ್ಅಪ್

ನಿಮ್ಮ ವಿಷಯವನ್ನು divಹೀಗೆ ಕಟ್ಟಿಕೊಳ್ಳಿ:

  1. <div class = "hero-unit" > 
  2.   <h1> ಶಿರೋನಾಮೆ </h1>
  3.   <p> ಅಡಿಬರಹ </p>
  4.   <p>
  5.     <a class = "btn btn-primary btn-large" > 
  6.       ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ
  7.     </a>
  8.   </p>
  9. </div>

ಹಲೋ, ವಿಶ್ವ!

ಇದು ಸರಳ ಹೀರೋ ಯೂನಿಟ್ ಆಗಿದೆ, ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಿದ ವಿಷಯ ಅಥವಾ ಮಾಹಿತಿಗೆ ಹೆಚ್ಚಿನ ಗಮನವನ್ನು ಸೆಳೆಯಲು ಸರಳವಾದ ಜಂಬೊಟ್ರಾನ್ ಶೈಲಿಯ ಘಟಕವಾಗಿದೆ.

ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ

ಪುಟದ ಹೆಡರ್

h1ಪುಟದಲ್ಲಿ ವಿಷಯದ ವಿಭಾಗಗಳನ್ನು ಸೂಕ್ತವಾಗಿ ಜಾಗವನ್ನು ಮತ್ತು ವಿಭಾಗಿಸಲು ಸರಳ ಶೆಲ್ . ಇದು h1ಡೀಫಾಲ್ಟ್ small, ಎಲಿಮೆಂಟ್ ಮತ್ತು ಇತರ ಘಟಕಗಳನ್ನು (ಹೆಚ್ಚುವರಿ ಶೈಲಿಗಳೊಂದಿಗೆ) ಬಳಸಿಕೊಳ್ಳಬಹುದು.

  1. <div class = "page-haeder" > 
  2.   <h1> ಉದಾಹರಣೆ ಪುಟದ ಹೆಡರ್ </h1>
  3. </div>

ಚಿತ್ರಗಳು, ವೀಡಿಯೊಗಳು, ಪಠ್ಯ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಥಂಬ್‌ನೇಲ್‌ಗಳ ಗ್ರಿಡ್‌ಗಳು

ಡೀಫಾಲ್ಟ್ ಥಂಬ್‌ನೇಲ್‌ಗಳು

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

ಹೆಚ್ಚು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದಾದ

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

  • ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್

    ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ, ಡ್ಯಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್, ಎಗೆಸ್ಟಾಸ್ ಎಗೆಟ್ ಕ್ವಾಮ್. ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

    ಕ್ರಿಯೆ ಕ್ರಿಯೆ

  • ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್

    ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ, ಡ್ಯಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್, ಎಗೆಸ್ಟಾಸ್ ಎಗೆಟ್ ಕ್ವಾಮ್. ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

    ಕ್ರಿಯೆ ಕ್ರಿಯೆ

ಥಂಬ್‌ನೇಲ್‌ಗಳನ್ನು ಏಕೆ ಬಳಸಬೇಕು

ಥಂಬ್‌ನೇಲ್‌ಗಳು (ಹಿಂದೆ .media-gridv1.4 ರವರೆಗೆ) ಫೋಟೋಗಳು ಅಥವಾ ವೀಡಿಯೊಗಳ ಗ್ರಿಡ್‌ಗಳು, ಇಮೇಜ್ ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳು, ಚಿಲ್ಲರೆ ಉತ್ಪನ್ನಗಳು, ಪೋರ್ಟ್‌ಫೋಲಿಯೊಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಉತ್ತಮವಾಗಿವೆ. ಅವು ಲಿಂಕ್‌ಗಳು ಅಥವಾ ಸ್ಥಿರ ವಿಷಯವಾಗಿರಬಹುದು.

ಸರಳ, ಹೊಂದಿಕೊಳ್ಳುವ ಮಾರ್ಕ್ಅಪ್

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

ಗ್ರಿಡ್ ಕಾಲಮ್ ಗಾತ್ರಗಳನ್ನು ಬಳಸುತ್ತದೆ

.span2ಕೊನೆಯದಾಗಿ , ಥಂಬ್‌ನೇಲ್‌ಗಳ ಘಟಕವು .span3ಥಂಬ್‌ನೇಲ್ ಆಯಾಮಗಳ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ .

ಮಾರ್ಕ್ಅಪ್

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

  1. <ul class = "ಥಂಬ್‌ನೇಲ್‌ಗಳು" > 
  2.   <li class = "span3" > 
  3.     <a href = "#" class = "ಥಂಬ್‌ನೇಲ್" >  
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

ಥಂಬ್‌ನೇಲ್‌ಗಳಲ್ಲಿನ ಕಸ್ಟಮ್ HTML ವಿಷಯಕ್ಕಾಗಿ, ಮಾರ್ಕ್‌ಅಪ್ ಸ್ವಲ್ಪ ಬದಲಾಗುತ್ತದೆ. ಬ್ಲಾಕ್ ಮಟ್ಟದ ವಿಷಯವನ್ನು ಎಲ್ಲಿಯಾದರೂ ಅನುಮತಿಸಲು, ನಾವು ಹೀಗೆ ವಿನಿಮಯ <a>ಮಾಡಿಕೊಳ್ಳುತ್ತೇವೆ <div>:

  1. <ul class = "ಥಂಬ್‌ನೇಲ್‌ಗಳು" > 
  2.   <li class = "span3" > 
  3.     <div class = "ಥಂಬ್‌ನೇಲ್" > 
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.       <h5> ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್ </h5>
  6.       <p> ಥಂಬ್‌ನೇಲ್ ಶೀರ್ಷಿಕೆ ಇಲ್ಲಿದೆ... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

ಹೆಚ್ಚಿನ ಉದಾಹರಣೆಗಳು

ನಿಮಗೆ ಲಭ್ಯವಿರುವ ವಿವಿಧ ಗ್ರಿಡ್ ತರಗತಿಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಎಲ್ಲಾ ಆಯ್ಕೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ. ನೀವು ವಿವಿಧ ಗಾತ್ರಗಳನ್ನು ಮಿಶ್ರಣ ಮಾಡಬಹುದು ಮತ್ತು ಹೊಂದಿಸಬಹುದು.

ಯಶಸ್ಸು, ಎಚ್ಚರಿಕೆ ಮತ್ತು ದೋಷ ಸಂದೇಶಗಳಿಗಾಗಿ ಎಚ್ಚರಿಕೆಯ ಶೈಲಿಗಳು

ಹಗುರವಾದ ಡೀಫಾಲ್ಟ್‌ಗಳು

ಪುನಃ ಬರೆಯಲಾದ ಮೂಲ ವರ್ಗ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 2 ನೊಂದಿಗೆ, ನಾವು ಮೂಲ ವರ್ಗವನ್ನು ಸರಳಗೊಳಿಸಿದ್ದೇವೆ: .alertಬದಲಿಗೆ .alert-message. ನಾವು ಕನಿಷ್ಟ ಅಗತ್ಯವಿರುವ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಸಹ ಕಡಿಮೆ ಮಾಡಿದ್ದೇವೆ- <p>ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಅಗತ್ಯವಿಲ್ಲ, ಕೇವಲ ಹೊರಭಾಗ <div>.

ಏಕ ಎಚ್ಚರಿಕೆ ಸಂದೇಶ

ಕಡಿಮೆ ಕೋಡ್‌ನೊಂದಿಗೆ ಹೆಚ್ಚು ಬಾಳಿಕೆ ಬರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ, ಬ್ಲಾಕ್ ಅಲರ್ಟ್‌ಗಳು, ಹೆಚ್ಚು ಪ್ಯಾಡಿಂಗ್‌ನೊಂದಿಗೆ ಬರುವ ಸಂದೇಶಗಳು ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ಹೆಚ್ಚಿನ ಪಠ್ಯಕ್ಕಾಗಿ ನಾವು ವಿಭಿನ್ನ ನೋಟವನ್ನು ತೆಗೆದುಹಾಕಿದ್ದೇವೆ. ಗೆ ವರ್ಗವೂ ಬದಲಾಗಿದೆ .alert-block.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ ಉತ್ತಮವಾಗಿ ಹೋಗುತ್ತದೆ

ಎಚ್ಚರಿಕೆ ಸಂದೇಶಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಉತ್ತಮ jQuery ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬರುತ್ತದೆ, ಅವುಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಮತ್ತು ಸುಲಭವಾಗಿ ವಜಾಗೊಳಿಸುತ್ತದೆ.

ಪ್ಲಗಿನ್ ಪಡೆಯಿರಿ »

ಉದಾಹರಣೆ ಎಚ್ಚರಿಕೆಗಳು

ನಿಮ್ಮ ಸಂದೇಶ ಮತ್ತು ಐಚ್ಛಿಕ ಕ್ಲೋಸ್ ಐಕಾನ್ ಅನ್ನು ಡಿವಿಯಲ್ಲಿ ಸರಳ ವರ್ಗದೊಂದಿಗೆ ಸುತ್ತಿ.

× ಎಚ್ಚರಿಕೆ! ನೀವೇ ಪರಿಶೀಲಿಸಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ. 
  1. <div class = "ಎಚ್ಚರಿಕೆ" > 
  2.   <a class = "close" data-dismiss = "ಎಚ್ಚರಿಕೆ" > × </a>  
  3.   <strong> ಎಚ್ಚರಿಕೆ! </strong> ನೀವೇ ನೋಡಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ.
  4. </div>

ಎರಡು ಐಚ್ಛಿಕ ತರಗತಿಗಳೊಂದಿಗೆ ಪ್ರಮಾಣಿತ ಎಚ್ಚರಿಕೆ ಸಂದೇಶವನ್ನು ಸುಲಭವಾಗಿ ವಿಸ್ತರಿಸಿ: .alert-blockಹೆಚ್ಚಿನ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಪಠ್ಯ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ ಮತ್ತು .alert-headingಹೊಂದಾಣಿಕೆಯ ಶಿರೋನಾಮೆಗಾಗಿ.

×

ಎಚ್ಚರಿಕೆ!

ನೀವೇ ಪರಿಶೀಲಿಸಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ. ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್. ಪ್ರೆಸೆಂಟ್ ಕಮೊಡೊ ಕರ್ಸಸ್ ಮ್ಯಾಗ್ನಾ, ಅಥವಾ ಸ್ಕೆಲೆರಿಸ್ಕ್ ನಿಸ್ಲ್ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಟ್.

  1. <div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ನಿರ್ಬಂಧ" > 
  2.   <a class = "close" data-dismiss = "ಎಚ್ಚರಿಕೆ" > × </a>  
  3.   <h4 class = "ಎಚ್ಚರಿಕೆ-ಶೀರ್ಷಿಕೆ" > ಎಚ್ಚರಿಕೆ! </h4> 
  4.   ನೀವೇ ಪರಿಶೀಲಿಸಿ, ನೀವು ಅಲ್ಲ ...
  5. </div>

ಸಂದರ್ಭೋಚಿತ ಪರ್ಯಾಯಗಳು ಎಚ್ಚರಿಕೆಯ ಅರ್ಥವನ್ನು ಬದಲಾಯಿಸಲು ಐಚ್ಛಿಕ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ

ದೋಷ ಅಥವಾ ಅಪಾಯ

× ಓಹ್ ಸ್ನ್ಯಾಪ್! ಕೆಲವು ವಿಷಯಗಳನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ಮತ್ತೆ ಸಲ್ಲಿಸಲು ಪ್ರಯತ್ನಿಸಿ. 
  1. <div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ದೋಷ" > 
  2.   ...
  3. </div>

ಯಶಸ್ಸು

× ಚೆನ್ನಾಗಿದೆ! ಈ ಪ್ರಮುಖ ಎಚ್ಚರಿಕೆ ಸಂದೇಶವನ್ನು ನೀವು ಯಶಸ್ವಿಯಾಗಿ ಓದಿದ್ದೀರಿ. 
  1. <div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ಯಶಸ್ಸು" > 
  2.   ...
  3. </div>

ಮಾಹಿತಿ

× ತಲೆ ಎತ್ತಿ! ಈ ಎಚ್ಚರಿಕೆಗೆ ನಿಮ್ಮ ಗಮನ ಬೇಕು, ಆದರೆ ಇದು ಮುಖ್ಯವಲ್ಲ. 
  1. <div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ಮಾಹಿತಿ" > 
  2.   ...
  3. </div>

ಲೋಡ್ ಮಾಡಲು, ಮರುನಿರ್ದೇಶಿಸಲು ಅಥವಾ ಕ್ರಿಯೆಯ ಸ್ಥಿತಿಗಾಗಿ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳು

ಉದಾಹರಣೆಗಳು ಮತ್ತು ಮಾರ್ಕ್ಅಪ್

ಮೂಲಭೂತ

ಲಂಬ ಗ್ರೇಡಿಯಂಟ್‌ನೊಂದಿಗೆ ಡೀಫಾಲ್ಟ್ ಪ್ರಗತಿ ಪಟ್ಟಿ.

  1. <div class = "ಪ್ರಗತಿ" > 
  2.   <div ವರ್ಗ = "ಬಾರ್" 
  3.        ಶೈಲಿ = " ಅಗಲ : 60 %; " ></div> 
  4. </div>

ಪಟ್ಟೆಯುಳ್ಳ

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

  1. <div ವರ್ಗ = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಮಾಹಿತಿ 
  2.      ಪ್ರಗತಿ ಪಟ್ಟೆ" >
  3.   <div ವರ್ಗ = "ಬಾರ್" 
  4.        ಶೈಲಿ = " ಅಗಲ : 20 %; " ></div> 
  5. </div>

ಅನಿಮೇಟೆಡ್

ಪಟ್ಟೆ ಉದಾಹರಣೆಯನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ.

  1. <div ವರ್ಗ = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಅಪಾಯ 
  2.      ಪ್ರಗತಿ ಪಟ್ಟೆ ಸಕ್ರಿಯ" >
  3.   <div ವರ್ಗ = "ಬಾರ್" 
  4.        ಶೈಲಿ = " ಅಗಲ : 40 %; " ></div> 
  5. </div>

ಆಯ್ಕೆಗಳು ಮತ್ತು ಬ್ರೌಸರ್ ಬೆಂಬಲ

ಹೆಚ್ಚುವರಿ ಬಣ್ಣಗಳು

ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳು ಒಂದೇ ರೀತಿಯ ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ಬಟನ್‌ಗಳು ಮತ್ತು ಎಚ್ಚರಿಕೆಗಳಂತಹ ಕೆಲವು ವರ್ಗದ ಹೆಸರುಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತವೆ.

  • .progress-info
  • .progress-success
  • .progress-danger

ಪರ್ಯಾಯವಾಗಿ, ನೀವು ಕಡಿಮೆ ಫೈಲ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಸ್ವಂತ ಬಣ್ಣಗಳು ಮತ್ತು ಗಾತ್ರಗಳನ್ನು ರೋಲ್ ಮಾಡಬಹುದು.

ನಡವಳಿಕೆ

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

ನೀವು .activeವರ್ಗವನ್ನು ಬಳಸಿದರೆ, ನಿಮ್ಮ .progress-stripedಪ್ರಗತಿ ಪಟ್ಟಿಗಳು ಎಡದಿಂದ ಬಲಕ್ಕೆ ಪಟ್ಟೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ

ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳು ತಮ್ಮ ಎಲ್ಲಾ ಪರಿಣಾಮಗಳನ್ನು ಸಾಧಿಸಲು CSS3 ಗ್ರೇಡಿಯಂಟ್‌ಗಳು, ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು IE7-8 ಅಥವಾ Firefox ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.

ಒಪೇರಾ ಈ ಸಮಯದಲ್ಲಿ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.

ವಿವಿಧ ಬಾವಿಗಳು, ಬ್ಯಾಡ್ಜ್‌ಗಳು ಮತ್ತು ನಿಕಟ ಐಕಾನ್

ಬಾವಿಗಳು

ಒಂದು ಅಂಶಕ್ಕೆ ಒಳಹರಿವಿನ ಪರಿಣಾಮವನ್ನು ನೀಡಲು ಬಾವಿಯನ್ನು ಸರಳ ಪರಿಣಾಮದಂತೆ ಬಳಸಿ.

ನೋಡು, ನಾನು ಬಾವಿಯಲ್ಲಿದ್ದೇನೆ! 
  1. <div ವರ್ಗ = "ಚೆನ್ನಾಗಿ" > 
  2.   ...
  3. </div>

ಐಕಾನ್ ಮುಚ್ಚಿ

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

×

  1. <a class = "close" > × </a>