ನ್ಯಾವಿಗೇಶನ್, ಎಚ್ಚರಿಕೆಗಳು, ಪಾಪೋವರ್ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಒದಗಿಸಲು ನಿರ್ಮಿಸಲಾದ ಡಜನ್ಗಟ್ಟಲೆ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಘಟಕಗಳು.
ಲಿಂಕ್ಗಳ ಪಟ್ಟಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಟಾಗಲ್ ಮಾಡಬಹುದಾದ, ಸಂದರ್ಭೋಚಿತ ಮೆನು. ಡ್ರಾಪ್ಡೌನ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ನೊಂದಿಗೆ ಸಂವಾದಾತ್ಮಕವಾಗಿ ಮಾಡಲಾಗಿದೆ .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > ಕ್ರಿಯೆ </a></li>
- <li><a tabindex = "-1" href = "#" > ಇನ್ನೊಂದು ಕ್ರಿಯೆ </a></li>
- <li><a tabindex = "-1" href = "#" > ಬೇರೆ ಯಾವುದೋ ಇಲ್ಲಿದೆ </a></li>
- <li class = "ವಿಭಾಜಕ" ></li>
- <li><a tabindex = "-1" href = "#" > ಬೇರ್ಪಡಿಸಿದ ಲಿಂಕ್ </a></li>
- </ul>
ಕೇವಲ ಡ್ರಾಪ್ಡೌನ್ ಮೆನುವನ್ನು ನೋಡಿದರೆ, ಅಗತ್ಯವಿರುವ HTML ಇಲ್ಲಿದೆ. ನೀವು ಡ್ರಾಪ್ಡೌನ್ನ ಟ್ರಿಗ್ಗರ್ ಮತ್ತು ಡ್ರಾಪ್ಡೌನ್ ಮೆನು ಒಳಗೆ .dropdown
ಅಥವಾ ಘೋಷಿಸುವ ಇನ್ನೊಂದು ಅಂಶವನ್ನು ಸುತ್ತುವ ಅಗತ್ಯವಿದೆ position: relative;
. ನಂತರ ಕೇವಲ ಮೆನು ರಚಿಸಿ.
- <div ವರ್ಗ = "ಡ್ರಾಪ್ಡೌನ್" >
- <!-- ಡ್ರಾಪ್ಡೌನ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಲಿಂಕ್ ಅಥವಾ ಬಟನ್ -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > ಕ್ರಿಯೆ </a></li>
- <li><a tabindex = "-1" href = "#" > ಇನ್ನೊಂದು ಕ್ರಿಯೆ </a></li>
- <li><a tabindex = "-1" href = "#" > ಬೇರೆ ಯಾವುದೋ ಇಲ್ಲಿದೆ </a></li>
- <li class = "ವಿಭಾಜಕ" ></li>
- <li><a tabindex = "-1" href = "#" > ಬೇರ್ಪಡಿಸಿದ ಲಿಂಕ್ </a></li>
- </ul>
- </div>
ಮೆನುಗಳನ್ನು ಬಲಕ್ಕೆ ಹೊಂದಿಸಿ ಮತ್ತು ಡ್ರಾಪ್ಡೌನ್ಗಳ ಹೆಚ್ಚುವರಿ ಹಂತಗಳನ್ನು ಸೇರಿಸಿ.
ಡ್ರಾಪ್ಡೌನ್ ಮೆನುವನ್ನು ಬಲಕ್ಕೆ ಹೊಂದಿಸಲು .pull-right
a ಗೆ ಸೇರಿಸಿ ..dropdown-menu
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
ಕೆಲವು ಸರಳ ಮಾರ್ಕ್ಅಪ್ ಸೇರ್ಪಡೆಗಳೊಂದಿಗೆ OS X ನಂತೆಯೇ ಹೋವರ್ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಹೆಚ್ಚುವರಿ ಮಟ್ಟದ ಡ್ರಾಪ್ಡೌನ್ ಮೆನುಗಳನ್ನು ಸೇರಿಸಿ. ಸ್ವಯಂಚಾಲಿತ ಸ್ಟೈಲಿಂಗ್ಗಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಡ್ರಾಪ್ಡೌನ್ ಮೆನುವಿನಲ್ಲಿ .dropdown-submenu
ಯಾವುದಕ್ಕೂ ಸೇರಿಸಿ .li
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "dropdown-submenu" >
- <a tabindex = "-1" href = "#" > ಹೆಚ್ಚಿನ ಆಯ್ಕೆಗಳು </a>
- <ul class = "dropdown-menu" >
- ...
- </ul>
- </li>
- </ul>
Rdio ನಿಂದ ಸ್ಫೂರ್ತಿ ಪಡೆದ ಸರಳ ವಿನ್ಯಾಸ, ಅಪ್ಲಿಕೇಶನ್ಗಳು ಮತ್ತು ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳಿಗೆ ಉತ್ತಮವಾಗಿದೆ. ದೊಡ್ಡ ಬ್ಲಾಕ್ ಅನ್ನು ತಪ್ಪಿಸಿಕೊಳ್ಳುವುದು ಕಷ್ಟ, ಸುಲಭವಾಗಿ ಸ್ಕೇಲೆಬಲ್ ಮತ್ತು ದೊಡ್ಡ ಕ್ಲಿಕ್ ಪ್ರದೇಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
- <div class = "pagination" >
- <ul>
- <li><a href = "#" > ಹಿಂದಿನ </a></li>
- <li><a href = "#" > 1 </a></li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" > ಮುಂದೆ </a></li>
- </ul>
- </div>
ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಲಿಂಕ್ಗಳನ್ನು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದಾಗಿದೆ. .disabled
ಕ್ಲಿಕ್ ಮಾಡಲಾಗದ ಲಿಂಕ್ಗಳಿಗಾಗಿ ಮತ್ತು .active
ಪ್ರಸ್ತುತ ಪುಟವನ್ನು ಸೂಚಿಸಲು ಬಳಸಿ .
- <div class = "pagination" >
- <ul>
- <li class = "ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ" ><a href = "#" > ಹಿಂದಿನ </a></li>
- <li class = "ಸಕ್ರಿಯ" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
ಉದ್ದೇಶಿತ ಶೈಲಿಗಳನ್ನು ಉಳಿಸಿಕೊಂಡು ಕ್ಲಿಕ್ ಕಾರ್ಯವನ್ನು ತೆಗೆದುಹಾಕಲು ನೀವು ಐಚ್ಛಿಕವಾಗಿ ಸಕ್ರಿಯ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಆಂಕರ್ಗಳನ್ನು ಸ್ಪ್ಯಾನ್ಗಳಿಗಾಗಿ ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಬಹುದು.
- <div class = "pagination" >
- <ul>
- <li class = "ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ" ><span> ಹಿಂದಿನ </span></li>
- <li class = "ಸಕ್ರಿಯ" ><span> 1 </span></li>
- ...
- </ul>
- </div>
ವಿನ್ಯಾಸ ಲಿಂಕ್ಗಳ ಜೋಡಣೆಯನ್ನು ಬದಲಾಯಿಸಲು ಎರಡು ಐಚ್ಛಿಕ ತರಗತಿಗಳಲ್ಲಿ ಒಂದನ್ನು ಸೇರಿಸಿ: .pagination-centered
ಮತ್ತು .pagination-right
.
- <div class = "ಪೇಜಿನೇಶನ್ ವಿನ್ಯಾಸ-ಕೇಂದ್ರಿತ" >
- ...
- </div>
- <div class = "pagination pagination-right" >
- ...
- </div>
ಲೈಟ್ ಮಾರ್ಕ್ಅಪ್ ಮತ್ತು ಶೈಲಿಗಳೊಂದಿಗೆ ಸರಳ ವಿನ್ಯಾಸದ ಅನುಷ್ಠಾನಗಳಿಗಾಗಿ ತ್ವರಿತ ಹಿಂದಿನ ಮತ್ತು ಮುಂದಿನ ಲಿಂಕ್ಗಳು. ಬ್ಲಾಗ್ಗಳು ಅಥವಾ ನಿಯತಕಾಲಿಕೆಗಳಂತಹ ಸರಳ ಸೈಟ್ಗಳಿಗೆ ಇದು ಉತ್ತಮವಾಗಿದೆ.
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಪೇಜರ್ ಲಿಂಕ್ಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
- <ul class = "ಪೇಜರ್" >
- <li><a href = "#" > ಹಿಂದಿನ </a></li>
- <li><a href = "#" > ಮುಂದೆ </a></li>
- </ul>
ಪರ್ಯಾಯವಾಗಿ, ನೀವು ಪ್ರತಿ ಲಿಂಕ್ ಅನ್ನು ಬದಿಗಳಿಗೆ ಜೋಡಿಸಬಹುದು:
- <ul class = "ಪೇಜರ್" >
- <li class = "ಹಿಂದಿನ" >
- <a href = "#" > ← ಹಳೆಯದು </a>
- </li>
- <li class = "ಮುಂದೆ" >
- <a href = "#" > ಹೊಸದು → </a>
- </li>
- </ul>
ಪೇಜರ್ ಲಿಂಕ್ಗಳು ಪೇಜಿನೇಶನ್ನಿಂದ ಸಾಮಾನ್ಯ .disabled
ಉಪಯುಕ್ತತೆಯ ವರ್ಗವನ್ನು ಸಹ ಬಳಸುತ್ತವೆ.
- <ul class = "ಪೇಜರ್" >
- <li class = "ಹಿಂದಿನ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ" >
- <a href = "#" > ← ಹಳೆಯದು </a>
- </li>
- ...
- </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> |
ನಿಮ್ಮ ಸೈಟ್ನಲ್ಲಿ ಪ್ರಮುಖ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಹಗುರವಾದ, ಹೊಂದಿಕೊಳ್ಳುವ ಘಟಕ. ಇದು ಮಾರ್ಕೆಟಿಂಗ್ ಮತ್ತು ಕಂಟೆಂಟ್-ಹೆವಿ ಸೈಟ್ಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
ಇದು ಸರಳ ಹೀರೋ ಯೂನಿಟ್ ಆಗಿದೆ, ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಿದ ವಿಷಯ ಅಥವಾ ಮಾಹಿತಿಗೆ ಹೆಚ್ಚಿನ ಗಮನವನ್ನು ಸೆಳೆಯಲು ಸರಳವಾದ ಜಂಬೊಟ್ರಾನ್ ಶೈಲಿಯ ಘಟಕವಾಗಿದೆ.
- <div class = "hero-unit" >
- <h1> ಶಿರೋನಾಮೆ </h1>
- <p> ಅಡಿಬರಹ </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ
- </a>
- </p>
- </div>
h1
ಪುಟದಲ್ಲಿ ವಿಷಯದ ವಿಭಾಗಗಳನ್ನು ಸೂಕ್ತವಾಗಿ ಮತ್ತು ವಿಭಾಗಿಸಲು ಒಂದು ಸರಳ ಶೆಲ್ . ಇದು h1
ಡೀಫಾಲ್ಟ್ small
, ಎಲಿಮೆಂಟ್ ಮತ್ತು ಇತರ ಘಟಕಗಳನ್ನು (ಹೆಚ್ಚುವರಿ ಶೈಲಿಗಳೊಂದಿಗೆ) ಬಳಸಿಕೊಳ್ಳಬಹುದು.
- <div class = "page-header" >
- <h1> ಉದಾಹರಣೆ ಪುಟದ ಶಿರೋಲೇಖ <small> ಶೀರ್ಷಿಕೆಗಾಗಿ ಉಪಪಠ್ಯ </small></h1>
- </div>
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಥಂಬ್ನೇಲ್ಗಳನ್ನು ಕನಿಷ್ಠ ಅಗತ್ಯವಿರುವ ಮಾರ್ಕ್ಅಪ್ನೊಂದಿಗೆ ಲಿಂಕ್ ಮಾಡಲಾದ ಚಿತ್ರಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.
ಸ್ವಲ್ಪ ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್ಅಪ್ನೊಂದಿಗೆ, ಶೀರ್ಷಿಕೆಗಳು, ಪ್ಯಾರಾಗಳು ಅಥವಾ ಬಟನ್ಗಳಂತಹ ಯಾವುದೇ ರೀತಿಯ HTML ವಿಷಯವನ್ನು ಥಂಬ್ನೇಲ್ಗಳಿಗೆ ಸೇರಿಸಲು ಸಾಧ್ಯವಿದೆ.
ಥಂಬ್ನೇಲ್ಗಳು (ಹಿಂದೆ .media-grid
v1.4 ರವರೆಗೆ) ಫೋಟೋಗಳು ಅಥವಾ ವೀಡಿಯೊಗಳ ಗ್ರಿಡ್ಗಳು, ಇಮೇಜ್ ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳು, ಚಿಲ್ಲರೆ ಉತ್ಪನ್ನಗಳು, ಪೋರ್ಟ್ಫೋಲಿಯೊಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಉತ್ತಮವಾಗಿವೆ. ಅವು ಲಿಂಕ್ಗಳು ಅಥವಾ ಸ್ಥಿರ ವಿಷಯವಾಗಿರಬಹುದು.
ಥಂಬ್ನೇಲ್ ಮಾರ್ಕ್ಅಪ್ ಸರಳವಾಗಿದೆ - ul
ಯಾವುದೇ ಸಂಖ್ಯೆಯ li
ಅಂಶಗಳೊಂದಿಗೆ ಇದು ಅಗತ್ಯವಿದೆ. ಇದು ಸೂಪರ್ ಫ್ಲೆಕ್ಸಿಬಲ್ ಆಗಿದೆ, ನಿಮ್ಮ ವಿಷಯಗಳನ್ನು ಕಟ್ಟಲು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಮಾರ್ಕ್ಅಪ್ನೊಂದಿಗೆ ಯಾವುದೇ ರೀತಿಯ ವಿಷಯವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
.span2
ಕೊನೆಯದಾಗಿ , ಥಂಬ್ನೇಲ್ಗಳ ಘಟಕವು .span3
ಥಂಬ್ನೇಲ್ ಆಯಾಮಗಳ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಕ್ಲಾಸ್ಗಳನ್ನು ಬಳಸುತ್ತದೆ .
ಹಿಂದೆ ಹೇಳಿದಂತೆ, ಥಂಬ್ನೇಲ್ಗಳಿಗೆ ಅಗತ್ಯವಿರುವ ಮಾರ್ಕ್ಅಪ್ ಬೆಳಕು ಮತ್ತು ನೇರವಾಗಿರುತ್ತದೆ. ಲಿಂಕ್ ಮಾಡಲಾದ ಚಿತ್ರಗಳಿಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಸೆಟಪ್ನ ನೋಟ ಇಲ್ಲಿದೆ :
- <ul class = "ಥಂಬ್ನೇಲ್ಗಳು" >
- <li class = "span4" >
- <a href = "#" class = "ಥಂಬ್ನೇಲ್" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
ಥಂಬ್ನೇಲ್ಗಳಲ್ಲಿನ ಕಸ್ಟಮ್ HTML ವಿಷಯಕ್ಕಾಗಿ, ಮಾರ್ಕ್ಅಪ್ ಸ್ವಲ್ಪ ಬದಲಾಗುತ್ತದೆ. ಬ್ಲಾಕ್ ಮಟ್ಟದ ವಿಷಯವನ್ನು ಎಲ್ಲಿಯಾದರೂ ಅನುಮತಿಸಲು, ನಾವು ಹೀಗೆ ವಿನಿಮಯ <a>
ಮಾಡಿಕೊಳ್ಳುತ್ತೇವೆ <div>
:
- <ul class = "ಥಂಬ್ನೇಲ್ಗಳು" >
- <li class = "span4" >
- <div class = "ಥಂಬ್ನೇಲ್" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> ಥಂಬ್ನೇಲ್ ಲೇಬಲ್ </h3>
- <p> ಥಂಬ್ನೇಲ್ ಶೀರ್ಷಿಕೆ... </p>
- </div>
- </li>
- ...
- </ul>
ನಿಮಗೆ ಲಭ್ಯವಿರುವ ವಿವಿಧ ಗ್ರಿಡ್ ತರಗತಿಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಎಲ್ಲಾ ಆಯ್ಕೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ. ನೀವು ವಿವಿಧ ಗಾತ್ರಗಳನ್ನು ಮಿಶ್ರಣ ಮಾಡಬಹುದು ಮತ್ತು ಹೊಂದಿಸಬಹುದು.
.alert
ಮೂಲಭೂತ ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ ಸಂದೇಶಕ್ಕಾಗಿ ಯಾವುದೇ ಪಠ್ಯ ಮತ್ತು ಐಚ್ಛಿಕ ವಜಾ ಬಟನ್ ಅನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ .
- <div class = "ಎಚ್ಚರಿಕೆ" >
- <button type = "button" class = "close" data-dismiss = "ಎಚ್ಚರಿಕೆ" > × </button>
- <strong> ಎಚ್ಚರಿಕೆ! </strong> ನೀವೇ ನೋಡಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ.
- </div>
ಮೊಬೈಲ್ ಸಫಾರಿ ಮತ್ತು ಮೊಬೈಲ್ ಒಪೇರಾ ಬ್ರೌಸರ್ಗಳು, ಗುಣಲಕ್ಷಣದ ಜೊತೆಗೆ , ಟ್ಯಾಗ್ ಬಳಸುವಾಗ ಎಚ್ಚರಿಕೆಗಳನ್ನು ವಜಾಗೊಳಿಸುವ data-dismiss="alert"
ಅಗತ್ಯವಿರುತ್ತದೆ .href="#"
<a>
- <a href = "#" class = "close" data-dismiss = "ಎಚ್ಚರಿಕೆ" > × </a>
ಪರ್ಯಾಯವಾಗಿ, ನೀವು <button>
ಡೇಟಾ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಒಂದು ಅಂಶವನ್ನು ಬಳಸಬಹುದು, ಅದನ್ನು ನಾವು ನಮ್ಮ ಡಾಕ್ಸ್ಗಾಗಿ ಮಾಡಲು ಆಯ್ಕೆ ಮಾಡಿಕೊಂಡಿದ್ದೇವೆ. ಬಳಸುವಾಗ <button>
, ನೀವು ಸೇರಿಸಬೇಕು type="button"
ಅಥವಾ ನಿಮ್ಮ ಫಾರ್ಮ್ಗಳನ್ನು ಸಲ್ಲಿಸದಿರಬಹುದು.
- <button type = "button" class = "close" data-dismiss = "ಎಚ್ಚರಿಕೆ" > × </button>
ಎಚ್ಚರಿಕೆಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಮತ್ತು ಸುಲಭವಾಗಿ ವಜಾಗೊಳಿಸಲು ಎಚ್ಚರಿಕೆಗಳನ್ನು jQuery ಪ್ಲಗಿನ್ ಬಳಸಿ .
ದೀರ್ಘ ಸಂದೇಶಗಳಿಗಾಗಿ, ಸೇರಿಸುವ ಮೂಲಕ ಎಚ್ಚರಿಕೆಯ ಹೊದಿಕೆಯ ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗದಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚಿಸಿ .alert-block
.
ನೀವೇ ಪರಿಶೀಲಿಸಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ. ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್. ಪ್ರೆಸೆಂಟ್ ಕಮೊಡೊ ಕರ್ಸಸ್ ಮ್ಯಾಗ್ನಾ, ಅಥವಾ ಸ್ಕೆಲೆರಿಸ್ಕ್ ನಿಸ್ಲ್ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಟ್.
- <div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ನಿರ್ಬಂಧ" >
- <button type = "button" class = "close" data-dismiss = "ಎಚ್ಚರಿಕೆ" > × </button>
- <h4> ಎಚ್ಚರಿಕೆ! </h4>
- ನೀವೇ ಪರಿಶೀಲಿಸಿ, ನೀವು ಅಲ್ಲ ...
- </div>
ಎಚ್ಚರಿಕೆಯ ಅರ್ಥವನ್ನು ಬದಲಾಯಿಸಲು ಐಚ್ಛಿಕ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ.
- <div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ದೋಷ" >
- ...
- </div>
- <div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ಯಶಸ್ಸು" >
- ...
- </div>
- <div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ಮಾಹಿತಿ" >
- ...
- </div>
ಲಂಬ ಗ್ರೇಡಿಯಂಟ್ನೊಂದಿಗೆ ಡೀಫಾಲ್ಟ್ ಪ್ರಗತಿ ಪಟ್ಟಿ.
- <div class = "ಪ್ರಗತಿ" >
- <div class = "bar" style = " width : 60 %; " ></div>
- </div>
ಪಟ್ಟೆ ಪರಿಣಾಮವನ್ನು ರಚಿಸಲು ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. IE7-8 ನಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ.
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ ಪಟ್ಟೆ" >
- <div class = "bar" style = " width : 20 %; " ></div>
- </div>
ಬಲದಿಂದ ಎಡಕ್ಕೆ ಪಟ್ಟೆಗಳನ್ನು ಅನಿಮೇಟ್ .active
ಮಾಡಲು ಗೆ ಸೇರಿಸಿ . .progress-striped
IE ಯ ಎಲ್ಲಾ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ.
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಪಟ್ಟೆಯ ಸಕ್ರಿಯ" >
- <div class = "bar" style = " width : 40 %; " ></div>
- </div>
ಅವುಗಳನ್ನು ಪೇರಿಸಲು ಅನೇಕ ಬಾರ್ಗಳನ್ನು ಒಂದೇ ರೀತಿಯಲ್ಲಿ ಇರಿಸಿ .progress
.
- <div class = "ಪ್ರಗತಿ" >
- <div class = "bar bar-success" style = " width : 35 %; " ></div>
- <div class = "bar bar-warning" style = " width : 20 %; " ></div>
- <div class = "bar bar-danger" style = " width : 10 %; " ></div>
- </div>
ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್ಗಳು ಸ್ಥಿರವಾದ ಶೈಲಿಗಳಿಗಾಗಿ ಒಂದೇ ರೀತಿಯ ಬಟನ್ ಮತ್ತು ಎಚ್ಚರಿಕೆ ತರಗತಿಗಳನ್ನು ಬಳಸುತ್ತವೆ.
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಮಾಹಿತಿ" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಯಶಸ್ಸು" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಎಚ್ಚರಿಕೆ" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಅಪಾಯ" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
ಘನ ಬಣ್ಣಗಳಂತೆಯೇ, ನಾವು ವಿವಿಧ ಪಟ್ಟೆ ಪ್ರಗತಿ ಬಾರ್ಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ.
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಮಾಹಿತಿ ಪ್ರಗತಿ-ಪಟ್ಟಿ" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಯಶಸ್ಸು ಪ್ರಗತಿ-ಪಟ್ಟೆ" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಎಚ್ಚರಿಕೆ ಪ್ರಗತಿ-ಪಟ್ಟೆ" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "ಪ್ರಗತಿ ಪ್ರಗತಿ-ಅಪಾಯ ಪ್ರಗತಿ-ಪಟ್ಟೆ" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್ಗಳು ತಮ್ಮ ಎಲ್ಲಾ ಪರಿಣಾಮಗಳನ್ನು ಸಾಧಿಸಲು CSS3 ಗ್ರೇಡಿಯಂಟ್ಗಳು, ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ಅನಿಮೇಷನ್ಗಳನ್ನು ಬಳಸುತ್ತವೆ. ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು IE7-9 ಅಥವಾ Firefox ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 10 ಮತ್ತು ಒಪೇರಾ 12 ಗಿಂತ ಹಿಂದಿನ ಆವೃತ್ತಿಗಳು ಅನಿಮೇಷನ್ಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
ಒಂದು ಅಂಶಕ್ಕೆ ಒಳಹರಿವಿನ ಪರಿಣಾಮವನ್ನು ನೀಡಲು ಬಾವಿಯನ್ನು ಸರಳ ಪರಿಣಾಮದಂತೆ ಬಳಸಿ.
- <div ವರ್ಗ = "ಚೆನ್ನಾಗಿ" >
- ...
- </div>
ಎರಡು ಐಚ್ಛಿಕ ಪರಿವರ್ತಕ ವರ್ಗಗಳೊಂದಿಗೆ ಕಂಟ್ರೋಲ್ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳು.
- <div class = "ಚೆನ್ನಾಗಿ-ದೊಡ್ಡದು" >
- ...
- </div>
- <div ವರ್ಗ = "ಚೆನ್ನಾಗಿ ಚೆನ್ನಾಗಿ-ಸಣ್ಣ" >
- ...
- </div>
ಮಾದರಿಗಳು ಮತ್ತು ಎಚ್ಚರಿಕೆಗಳಂತಹ ವಿಷಯವನ್ನು ವಜಾಗೊಳಿಸಲು ಜೆನೆರಿಕ್ ಕ್ಲೋಸ್ ಐಕಾನ್ ಬಳಸಿ.
- <button class = "close" > × </button>
ನೀವು ಆಂಕರ್ ಅನ್ನು ಬಳಸಿದರೆ, ಕ್ಲಿಕ್ ಈವೆಂಟ್ಗಳಿಗಾಗಿ iOS ಸಾಧನಗಳಿಗೆ href="#" ಅಗತ್ಯವಿರುತ್ತದೆ.
- <a class = "close" href = "#" > × </a>
ಸಣ್ಣ ಪ್ರದರ್ಶನ ಅಥವಾ ನಡವಳಿಕೆಯ ಟ್ವೀಕ್ಗಳಿಗಾಗಿ ಸರಳವಾದ, ಕೇಂದ್ರೀಕೃತ ತರಗತಿಗಳು.
ಎಡಕ್ಕೆ ಒಂದು ಅಂಶವನ್ನು ಫ್ಲೋಟ್ ಮಾಡಿ
- ವರ್ಗ = "ಪುಲ್-ಎಡ"
- . ಎಳೆಯಿರಿ - ಎಡಕ್ಕೆ {
- ತೇಲು : ಎಡ ;
- }
ಒಂದು ಅಂಶವನ್ನು ಬಲಕ್ಕೆ ಫ್ಲೋಟ್ ಮಾಡಿ
- ವರ್ಗ = "ಬಲಕ್ಕೆ ಎಳೆಯಿರಿ"
- . ಎಳೆಯಿರಿ - ಬಲಕ್ಕೆ {
- ತೇಲು : ಬಲ ;
- }
ಒಂದು ಅಂಶದ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಿ#999
- ವರ್ಗ = "ಮ್ಯೂಟ್"
- . ಮ್ಯೂಟ್ ಮಾಡಲಾಗಿದೆ {
- ಬಣ್ಣ : #999;
- }
float
ಯಾವುದೇ ಅಂಶದ ಮೇಲೆ ತೆರವುಗೊಳಿಸಿ
- ವರ್ಗ = "ಕ್ಲಿಯರ್ಫಿಕ್ಸ್"
- . ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ {
- * ಜೂಮ್ : 1 ;
- &: ಮೊದಲು ,
- &: { ನಂತರ
- ಪ್ರದರ್ಶನ : ಟೇಬಲ್ ;
- ವಿಷಯ : "" ;
- }
- &: { ನಂತರ
- ಸ್ಪಷ್ಟ : ಎರಡೂ ;
- }
- }