ಘಟಕಗಳು

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

ಉದಾಹರಣೆಗಳು

ಎರಡು ಮೂಲಭೂತ ಆಯ್ಕೆಗಳು, ಜೊತೆಗೆ ಎರಡು ನಿರ್ದಿಷ್ಟ ವ್ಯತ್ಯಾಸಗಳು.

ಏಕ ಬಟನ್ ಗುಂಪು

.btnರಲ್ಲಿ ಬಟನ್‌ಗಳ ಸರಣಿಯನ್ನು ಕಟ್ಟಿಕೊಳ್ಳಿ .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > ಎಡಕ್ಕೆ </button>
  3. <button class = "btn" > ಮಧ್ಯಮ </button>
  4. <button class = "btn" > ಬಲ </button>
  5. </div>

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

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

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

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

ಬಟನ್‌ಗಳ ಸೆಟ್ ಅನ್ನು ಅಡ್ಡಲಾಗಿ ಬದಲಾಗಿ ಲಂಬವಾಗಿ ಜೋಡಿಸಿದಂತೆ ಮಾಡಿ.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

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

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

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

ತಲೆ ಎತ್ತಿ!ಸರಿಯಾದ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಬಟನ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ತಮ್ಮದೇ ಆದ .btn-groupಮೇಲೆ ಸುತ್ತಿಡಬೇಕು ..btn-toolbar

ಅವಲೋಕನ ಮತ್ತು ಉದಾಹರಣೆಗಳು

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

  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>

ಎಲ್ಲಾ ಬಟನ್ ಗಾತ್ರಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ

ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ಯಾವುದೇ ಗಾತ್ರದಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ: .btn-large, .btn-small, ಅಥವಾ .btn-mini.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿದೆ

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

ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ-ಮೊಬೈಲ್‌ನಂತಹ-ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳು ವ್ಯೂಪೋರ್ಟ್‌ನ ಹೊರಗೆ ವಿಸ್ತರಿಸುತ್ತವೆ. ನೀವು ಹಸ್ತಚಾಲಿತವಾಗಿ ಅಥವಾ ಕಸ್ಟಮ್ JavaScript ನೊಂದಿಗೆ ಜೋಡಣೆಯನ್ನು ಪರಿಹರಿಸಬೇಕಾಗಿದೆ.


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

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

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

ಗಾತ್ರಗಳು

ಹೆಚ್ಚುವರಿ ಬಟನ್ ವರ್ಗಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಿ .btn-mini, .btn-smallಅಥವಾ .btn-largeಗಾತ್ರಕ್ಕಾಗಿ.

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

ಡ್ರಾಪ್ಅಪ್ ಮೆನುಗಳು

ನ ತಕ್ಷಣದ ಪೋಷಕರಿಗೆ ಒಂದೇ ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳನ್ನು ಕೆಳಗಿನಿಂದ ಮೇಲಕ್ಕೆ ಟಾಗಲ್ ಮಾಡಬಹುದು .dropdown-menu. ಇದು ದಿಕ್ಕನ್ನು ತಿರುಗಿಸುತ್ತದೆ .caretಮತ್ತು ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಬದಲಾಗಿ ಕೆಳಗಿನಿಂದ ಮೇಲಕ್ಕೆ ಸರಿಸಲು ಮೆನುವನ್ನು ಮರುಸ್ಥಾಪಿಸುತ್ತದೆ.

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

ಪ್ರಮಾಣಿತ ವಿನ್ಯಾಸ

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

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

ಆಯ್ಕೆಗಳು

ಅಂಗವಿಕಲ ಮತ್ತು ಸಕ್ರಿಯ ರಾಜ್ಯಗಳು

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ" ><a href = "#" > « </a></li>
  4. <li class = "ಸಕ್ರಿಯ" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

ಉದ್ದೇಶಿತ ಶೈಲಿಗಳನ್ನು ಉಳಿಸಿಕೊಂಡು ಕ್ಲಿಕ್ ಕಾರ್ಯವನ್ನು ತೆಗೆದುಹಾಕಲು ನೀವು ಐಚ್ಛಿಕವಾಗಿ ಸಕ್ರಿಯ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಆಂಕರ್‌ಗಳನ್ನು ಸ್ಪ್ಯಾನ್‌ಗಳಿಗಾಗಿ ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಬಹುದು.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ" ><span> « </span></li>
  4. <li class = "ಸಕ್ರಿಯ" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

ಗಾತ್ರಗಳು

ದೊಡ್ಡದಾದ ಅಥವಾ ಚಿಕ್ಕದಾದ ವಿನ್ಯಾಸವನ್ನು ಬಯಸುತ್ತೀರಾ? .pagination-large, .pagination-smallಅಥವಾ .pagination-miniಹೆಚ್ಚುವರಿ ಗಾತ್ರಗಳಿಗೆ ಸೇರಿಸಿ .

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "ಪೇಜಿನೇಶನ್ ಪೇಜಿನೇಶನ್-ಸ್ಮಾಲ್" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

ಜೋಡಣೆ

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

  1. <div class = "ಪೇಜಿನೇಶನ್ ವಿನ್ಯಾಸ-ಕೇಂದ್ರಿತ" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

ಪೇಜರ್

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

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

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

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

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

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

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

ಐಚ್ಛಿಕ ನಿಷ್ಕ್ರಿಯ ಸ್ಥಿತಿ

ಪೇಜರ್ ಲಿಂಕ್‌ಗಳು ಪೇಜಿನೇಶನ್‌ನಿಂದ ಸಾಮಾನ್ಯ .disabledಉಪಯುಕ್ತತೆಯ ವರ್ಗವನ್ನು ಸಹ ಬಳಸುತ್ತವೆ.

  1. <ul class = "ಪೇಜರ್" >
  2. <li class = "ಹಿಂದಿನ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ" >
  3. <a href = "#" > ಹಳೆಯದು </a>
  4. </li>
  5. ...
  6. </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>
ವಿಲೋಮ <span class="label label-inverse">Inverse</span>

ಬ್ಯಾಡ್ಜ್‌ಗಳು

ಹೆಸರು ಉದಾಹರಣೆ ಮಾರ್ಕ್ಅಪ್
ಡೀಫಾಲ್ಟ್ 1 <span class="badge">1</span>
ಯಶಸ್ಸು 2 <span class="badge badge-success">2</span>
ಎಚ್ಚರಿಕೆ 4 <span class="badge badge-warning">4</span>
ಪ್ರಮುಖ 6 <span class="badge badge-important">6</span>
ಮಾಹಿತಿ 8 <span class="badge badge-info">8</span>
ವಿಲೋಮ 10 <span class="badge badge-inverse">10</span>

ಸುಲಭವಾಗಿ ಬಾಗಿಕೊಳ್ಳಬಹುದು

:emptyಸುಲಭವಾದ ಅನುಷ್ಠಾನಕ್ಕಾಗಿ, ಯಾವುದೇ ವಿಷಯವು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದಾಗ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಬ್ಯಾಡ್ಜ್‌ಗಳು ಸರಳವಾಗಿ ಕುಸಿಯುತ್ತವೆ (CSS ನ ಆಯ್ಕೆಯ ಮೂಲಕ ).

ಹೀರೋ ಘಟಕ

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

ಹಲೋ, ವಿಶ್ವ!

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

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

  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-header" >
  2. <h1> ಉದಾಹರಣೆ ಪುಟದ ಶಿರೋಲೇಖ <small> ಶೀರ್ಷಿಕೆಗಾಗಿ ಉಪಪಠ್ಯ </small></h1>
  3. </div>

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

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

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

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

  • 300x200

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

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

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

  • 300x200

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

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

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

  • 300x200

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

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

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

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

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

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

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

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

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

ಮಾರ್ಕ್ಅಪ್

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

  1. <ul class = "ಥಂಬ್‌ನೇಲ್‌ಗಳು" >
  2. <li class = "span4" >
  3. <a href = "#" class = "ಥಂಬ್‌ನೇಲ್" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "ಥಂಬ್‌ನೇಲ್‌ಗಳು" >
  2. <li class = "span4" >
  3. <div class = "ಥಂಬ್‌ನೇಲ್" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್ </h3>
  6. <p> ಥಂಬ್‌ನೇಲ್ ಶೀರ್ಷಿಕೆ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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

ಡೀಫಾಲ್ಟ್ ಎಚ್ಚರಿಕೆ

.alertಮೂಲಭೂತ ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ ಸಂದೇಶಕ್ಕಾಗಿ ಯಾವುದೇ ಪಠ್ಯ ಮತ್ತು ಐಚ್ಛಿಕ ವಜಾ ಬಟನ್ ಅನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ .

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

ಗುಂಡಿಗಳನ್ನು ವಜಾಗೊಳಿಸಿ

ಮೊಬೈಲ್ ಸಫಾರಿ ಮತ್ತು ಮೊಬೈಲ್ ಒಪೇರಾ ಬ್ರೌಸರ್‌ಗಳು, ಗುಣಲಕ್ಷಣದ ಜೊತೆಗೆ , ಟ್ಯಾಗ್ ಬಳಸುವಾಗ ಎಚ್ಚರಿಕೆಗಳನ್ನು ವಜಾಗೊಳಿಸುವ data-dismiss="alert"ಅಗತ್ಯವಿರುತ್ತದೆ .href="#"<a>

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

ಪರ್ಯಾಯವಾಗಿ, ನೀವು <button>ಡೇಟಾ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಒಂದು ಅಂಶವನ್ನು ಬಳಸಬಹುದು, ಅದನ್ನು ನಾವು ನಮ್ಮ ಡಾಕ್ಸ್‌ಗಾಗಿ ಮಾಡಲು ಆಯ್ಕೆ ಮಾಡಿಕೊಂಡಿದ್ದೇವೆ. ಬಳಸುವಾಗ <button>, ನೀವು ಸೇರಿಸಬೇಕು type="button"ಅಥವಾ ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳನ್ನು ಸಲ್ಲಿಸದಿರಬಹುದು.

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

JavaScript ಮೂಲಕ ಎಚ್ಚರಿಕೆಗಳನ್ನು ವಜಾಗೊಳಿಸಿ

ಎಚ್ಚರಿಕೆಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಮತ್ತು ಸುಲಭವಾಗಿ ವಜಾಗೊಳಿಸಲು ಎಚ್ಚರಿಕೆಗಳನ್ನು jQuery ಪ್ಲಗಿನ್ ಬಳಸಿ .


ಆಯ್ಕೆಗಳು

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

ಎಚ್ಚರಿಕೆ!

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

  1. <div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ನಿರ್ಬಂಧ" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <h4> ಎಚ್ಚರಿಕೆ! </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 class = "bar" style = " width : 60 %; " ></div>
  3. </div>

ಪಟ್ಟೆಯುಳ್ಳ

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

  1. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ ಪಟ್ಟೆ" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

ಅನಿಮೇಟೆಡ್

ಬಲದಿಂದ ಎಡಕ್ಕೆ ಪಟ್ಟೆಗಳನ್ನು ಅನಿಮೇಟ್ .activeಮಾಡಲು ಗೆ ಸೇರಿಸಿ . .progress-stripedIE ಯ ಎಲ್ಲಾ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ.

  1. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಪಟ್ಟೆಯ ಸಕ್ರಿಯ" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

ಸ್ಟ್ಯಾಕ್ ಮಾಡಲಾಗಿದೆ

ಅವುಗಳನ್ನು ಪೇರಿಸಲು ಅನೇಕ ಬಾರ್‌ಗಳನ್ನು ಒಂದೇ ರೀತಿಯಲ್ಲಿ ಇರಿಸಿ .progress.

  1. <div class = "ಪ್ರಗತಿ" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

ಆಯ್ಕೆಗಳು

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

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

  1. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಮಾಹಿತಿ" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಯಶಸ್ಸು" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಎಚ್ಚರಿಕೆ" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಅಪಾಯ" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

ಪಟ್ಟೆ ಬಾರ್ಗಳು

ಘನ ಬಣ್ಣಗಳಂತೆಯೇ, ನಾವು ವಿವಿಧ ಪಟ್ಟೆ ಪ್ರಗತಿ ಬಾರ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ.

  1. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಮಾಹಿತಿ ಪ್ರಗತಿ-ಪಟ್ಟೆ" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಯಶಸ್ಸು ಪ್ರಗತಿ-ಪಟ್ಟೆ" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಎಚ್ಚರಿಕೆ ಪ್ರಗತಿ-ಪಟ್ಟೆ" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಅಪಾಯ ಪ್ರಗತಿ-ಪಟ್ಟೆ" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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

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

ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 10 ಮತ್ತು ಒಪೇರಾ 12 ಗಿಂತ ಹಿಂದಿನ ಆವೃತ್ತಿಗಳು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.

ಪಠ್ಯದ ವಿಷಯದ ಜೊತೆಗೆ ಎಡ ಅಥವಾ ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾದ ಚಿತ್ರವನ್ನು ಒಳಗೊಂಡಿರುವ ವಿವಿಧ ರೀತಿಯ ಘಟಕಗಳನ್ನು (ಬ್ಲಾಗ್ ಕಾಮೆಂಟ್‌ಗಳು, ಟ್ವೀಟ್‌ಗಳು, ಇತ್ಯಾದಿ) ನಿರ್ಮಿಸಲು ಅಮೂರ್ತ ವಸ್ತು ಶೈಲಿಗಳು.

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

ಡೀಫಾಲ್ಟ್ ಮಾಧ್ಯಮವು ಕಂಟೆಂಟ್ ಬ್ಲಾಕ್‌ನ ಎಡ ಅಥವಾ ಬಲಕ್ಕೆ ಮಾಧ್ಯಮ ವಸ್ತುವನ್ನು (ಚಿತ್ರಗಳು, ವೀಡಿಯೋ, ಆಡಿಯೋ) ಫ್ಲೋಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.

64x64

ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್‌ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.
64x64

ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್‌ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.
64x64

ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್‌ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.
  1. <div ವರ್ಗ = "ಮಾಧ್ಯಮ" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Media heading </h4>
  7. ...
  8.  
  9. <!-- ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಆಬ್ಜೆಕ್ಟ್ -->
  10. <div ವರ್ಗ = "ಮಾಧ್ಯಮ" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

ಮಾಧ್ಯಮ ಪಟ್ಟಿ

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

  • 64x64

    ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

    ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.

    64x64

    ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಶಿರೋನಾಮೆ

    ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.
    64x64

    ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಶಿರೋನಾಮೆ

    ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.
    64x64

    ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಶಿರೋನಾಮೆ

    ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.
  • 64x64

    ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ

    ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸ್ಕ್ಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್ ಕೊಮೊಡೊ. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್.
  1. <ul class = "media-list" >
  2. <ಲಿ ವರ್ಗ = "ಮಾಧ್ಯಮ" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Media heading </h4>
  8. ...
  9.  
  10. <!-- ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಆಬ್ಜೆಕ್ಟ್ -->
  11. <div ವರ್ಗ = "ಮಾಧ್ಯಮ" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

ಬಾವಿಗಳು

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

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

ಐಚ್ಛಿಕ ತರಗತಿಗಳು

ಎರಡು ಐಚ್ಛಿಕ ಪರಿವರ್ತಕ ವರ್ಗಗಳೊಂದಿಗೆ ಕಂಟ್ರೋಲ್ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳು.

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

ಐಕಾನ್ ಮುಚ್ಚಿ

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

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

href="#"ನೀವು ಆಂಕರ್ ಅನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ iOS ಸಾಧನಗಳಿಗೆ ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗಳ ಅಗತ್ಯವಿರುತ್ತದೆ .

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

ಸಹಾಯಕ ತರಗತಿಗಳು

ಸಣ್ಣ ಪ್ರದರ್ಶನ ಅಥವಾ ನಡವಳಿಕೆಯ ಟ್ವೀಕ್‌ಗಳಿಗಾಗಿ ಸರಳವಾದ, ಕೇಂದ್ರೀಕೃತ ತರಗತಿಗಳು.

.ಎಡಕ್ಕೆ ಎಳೆಯಿರಿ

ಎಡಕ್ಕೆ ಒಂದು ಅಂಶವನ್ನು ಫ್ಲೋಟ್ ಮಾಡಿ

  1. ವರ್ಗ = "ಪುಲ್-ಎಡ"
  1. . ಎಳೆಯಿರಿ - ಎಡಕ್ಕೆ {
  2. ತೇಲು : ಎಡ ;
  3. }

.ಬಲಕ್ಕೆ ಎಳೆಯಿರಿ

ಒಂದು ಅಂಶವನ್ನು ಬಲಕ್ಕೆ ಫ್ಲೋಟ್ ಮಾಡಿ

  1. ವರ್ಗ = "ಬಲಕ್ಕೆ ಎಳೆಯಿರಿ"
  1. . ಎಳೆಯಿರಿ - ಬಲಕ್ಕೆ {
  2. ತೇಲು : ಬಲ ;
  3. }

.ಮ್ಯೂಟ್ ಮಾಡಲಾಗಿದೆ

ಒಂದು ಅಂಶದ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಿ#999

  1. ವರ್ಗ = "ಮ್ಯೂಟ್"
  1. . ಮ್ಯೂಟ್ ಮಾಡಲಾಗಿದೆ {
  2. ಬಣ್ಣ : #999;
  3. }

.clearfix

floatಯಾವುದೇ ಅಂಶದ ಮೇಲೆ ತೆರವುಗೊಳಿಸಿ

  1. ವರ್ಗ = "ಕ್ಲಿಯರ್ಫಿಕ್ಸ್"
  1. . ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ {
  2. * ಜೂಮ್ : 1 ;
  3. &: ಮೊದಲು ,
  4. &: { ನಂತರ
  5. ಪ್ರದರ್ಶನ : ಟೇಬಲ್ ;
  6. ವಿಷಯ : "" ;
  7. }
  8. &: { ನಂತರ
  9. ಸ್ಪಷ್ಟ : ಎರಡೂ ;
  10. }
  11. }