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

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

ಮತ್ತು ಬಹು ಗುಂಪುಗಳಿಗೆ ಟೂಲ್‌ಬಾರ್‌ನೊಂದಿಗೆ:

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

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

ತಲೆ ಎತ್ತಿದೆ

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

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    ಕ್ರಿಯೆ
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಲಿಂಕ್‌ಗಳು -->
  </ul>
</div>

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > ಕ್ರಿಯೆ </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಲಿಂಕ್‌ಗಳು -->
  </ul>
</div>

ಶಕ್ತಿಯುತ ಮೂಲ ವರ್ಗ

ಇಲ್ಲಿರುವ ಎಲ್ಲಾ nav ಘಟಕಗಳು-ಟ್ಯಾಬ್‌ಗಳು, ಮಾತ್ರೆಗಳು ಮತ್ತು ಪಟ್ಟಿಗಳು- ವರ್ಗದ ಮೂಲಕ ಒಂದೇ ಮೂಲ ಮಾರ್ಕ್‌ಅಪ್ ಮತ್ತು ಶೈಲಿಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ ..nav

ಏಕೆ ಟ್ಯಾಬ್ಗಳು ಮತ್ತು ಮಾತ್ರೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿನ ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಮಾತ್ರೆಗಳನ್ನು <ul>ಅದೇ ಕೋರ್ HTML, ಲಿಂಕ್‌ಗಳ ಪಟ್ಟಿಯೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಕೇವಲ ಒಂದು ವರ್ಗದೊಂದಿಗೆ ಟ್ಯಾಬ್‌ಗಳು ಅಥವಾ ಮಾತ್ರೆಗಳ ನಡುವೆ ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಿ.

ವಿಷಯದ ಉಪ-ವಿಭಾಗಗಳಿಗೆ ಅಥವಾ ಸಂಬಂಧಿತ ವಿಷಯದ ಪುಟಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಎರಡೂ ಆಯ್ಕೆಗಳು ಉತ್ತಮವಾಗಿವೆ.

ಮೂಲ ಟ್ಯಾಬ್‌ಗಳು

ನಿಯಮಿತ <ul>ಲಿಂಕ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ ಮತ್ತು ಸೇರಿಸಿ .nav-tabs:

• ಮುಖಪುಟ
• ಪ್ರೊಫೈಲ್
• ಸಂದೇಶಗಳು

<ul class = "nav nav-tabs" > 
  <li class = "ಸಕ್ರಿಯ" > 
    <a href = "#" > ಮುಖಪುಟ </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ಮೂಲ ಮಾತ್ರೆಗಳು

ಅದೇ HTML ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ, ಆದರೆ .nav-pillsಬದಲಿಗೆ ಬಳಸಿ:

• ಮುಖಪುಟ
• ಪ್ರೊಫೈಲ್
• ಸಂದೇಶಗಳು

<ul class = "nav nav-pills" > 
  <li class = "ಸಕ್ರಿಯ" > 
    <a href = "#" > ಮುಖಪುಟ </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ಅವುಗಳನ್ನು ಹೇಗೆ ಜೋಡಿಸುವುದು

ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಮಾತ್ರೆಗಳು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಸಮತಲವಾಗಿರುವುದರಿಂದ, .nav-stackedಅವುಗಳನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲಾಗಿರುವಂತೆ ಮಾಡಲು ಎರಡನೇ ವರ್ಗವನ್ನು ಸೇರಿಸಿ.

ಜೋಡಿಸಲಾದ ಟ್ಯಾಬ್‌ಗಳು

• ಮುಖಪುಟ
• ಪ್ರೊಫೈಲ್
• ಸಂದೇಶಗಳು

<ul class = "nav nav-tabs nav-stated" > 
  ...
</ul>

ಪೇರಿಸಿದ ಮಾತ್ರೆಗಳು

• ಮುಖಪುಟ
• ಪ್ರೊಫೈಲ್
• ಸಂದೇಶಗಳು

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

ಶ್ರೀಮಂತ ಮೆನುಗಳನ್ನು ಸುಲಭಗೊಳಿಸಲಾಗಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಮಾತ್ರೆಗಳಲ್ಲಿನ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳು ತುಂಬಾ ಸುಲಭ ಮತ್ತು ಸ್ವಲ್ಪ ಹೆಚ್ಚುವರಿ HTML ಮತ್ತು ಹಗುರವಾದ jQuery ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿರುತ್ತದೆ.

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

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳೊಂದಿಗೆ ಟ್ಯಾಬ್‌ಗಳು

• ಮುಖಪುಟ
• ಪ್ರೊಫೈಲ್
• ಡ್ರಾಪ್‌ಡೌನ್
  • ಕ್ರಿಯೆ
  • ಮತ್ತೊಂದು ಕ್ರಮ
  • ಇಲ್ಲಿ ಬೇರೆ ಏನೋ
  • ಬೇರ್ಪಡಿಸಿದ ಲಿಂಕ್

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "ಡ್ರಾಪ್‌ಡೌನ್-ಟಾಗಲ್" 
       ಡೇಟಾ-ಟಾಗಲ್ = "ಡ್ರಾಪ್‌ಡೌನ್"
       href = "#" >
        ಡ್ರಾಪ್‌ಡೌನ್
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- ಕೊಂಡಿಗಳು -->
    </ul>
  </li>
</ul>

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳೊಂದಿಗೆ ಮಾತ್ರೆಗಳು

• ಮುಖಪುಟ
• ಪ್ರೊಫೈಲ್
• ಡ್ರಾಪ್‌ಡೌನ್
  • ಕ್ರಿಯೆ
  • ಮತ್ತೊಂದು ಕ್ರಮ
  • ಇಲ್ಲಿ ಬೇರೆ ಏನೋ
  • ಬೇರ್ಪಡಿಸಿದ ಲಿಂಕ್

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "ಡ್ರಾಪ್‌ಡೌನ್-ಟಾಗಲ್" 
       ಡೇಟಾ-ಟಾಗಲ್ = "ಡ್ರಾಪ್‌ಡೌನ್"
       href = "#" >
        ಡ್ರಾಪ್‌ಡೌನ್
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- ಕೊಂಡಿಗಳು -->
    </ul>
  </li>
</ul>

ಅಪ್ಲಿಕೇಶನ್ ಶೈಲಿಯ ನ್ಯಾವಿಗೇಷನ್

Nav ಪಟ್ಟಿಗಳು ಐಚ್ಛಿಕ ಹೆಡರ್‌ಗಳೊಂದಿಗೆ nav ಲಿಂಕ್‌ಗಳ ಗುಂಪುಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸರಳ ಮತ್ತು ಸುಲಭವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ. OS X ನಲ್ಲಿ ಫೈಂಡರ್‌ನಂತಹ ಸೈಡ್‌ಬಾರ್‌ಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಉತ್ತಮವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.

ರಚನಾತ್ಮಕವಾಗಿ, ಅವುಗಳನ್ನು ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಮಾತ್ರೆಗಳಂತೆಯೇ ಅದೇ ಕೋರ್ ನ್ಯಾವ್ ಶೈಲಿಗಳಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ಬಳಕೆ ಮತ್ತು ಗ್ರಾಹಕೀಕರಣವು ನೇರವಾಗಿರುತ್ತದೆ.

ಐಕಾನ್‌ಗಳೊಂದಿಗೆ

ನ್ಯಾವ್ ಪಟ್ಟಿಗಳು ಐಕಾನ್‌ಗಳೊಂದಿಗೆ ಸಜ್ಜುಗೊಳಿಸಲು ಸಹ ಸುಲಭವಾಗಿದೆ. ತರಗತಿಯೊಂದಿಗೆ ಸರಿಯಾದ <i>ಟ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸಿ ಮತ್ತು ನೀವು ಹೊಂದಿಸಿರುವಿರಿ.

ಉದಾಹರಣೆ NAV ಪಟ್ಟಿ

ಲಿಂಕ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ತೆಗೆದುಕೊಂಡು ಸೇರಿಸಿ class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    ಪಟ್ಟಿ ಹೆಡರ್
  </li>
  <li class = "ಸಕ್ರಿಯ" > 
    <a href = "#" > ಮುಖಪುಟ </a> 
  </li>
  <li>
    <a href = "#" > ಲೈಬ್ರರಿ </a> 
  </li>
  ...
</ul>

ಐಕಾನ್‌ಗಳೊಂದಿಗೆ ಉದಾಹರಣೆ

ಅದೇ ಉದಾಹರಣೆ, ಆದರೆ <i>ಐಕಾನ್‌ಗಳಿಗೆ ಟ್ಯಾಗ್‌ಗಳೊಂದಿಗೆ.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      ಗ್ರಂಥಾಲಯ
    </a>
  </li>
  ...
</ul>

ಏನು ಒಳಗೊಂಡಿದೆ

ಟ್ಯಾಬ್‌ಗಳ ಮೂಲಕ ವಿಷಯದ ನಡುವೆ ಟಾಗಲ್ ಮಾಡಲು ಸರಳವಾದ ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಜೀವಂತಗೊಳಿಸಿ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನಾಲ್ಕು ಶೈಲಿಗಳಲ್ಲಿ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ: ಮೇಲಿನ (ಡೀಫಾಲ್ಟ್), ಬಲ, ಕೆಳಗೆ ಮತ್ತು ಎಡ.

ಅವುಗಳ ನಡುವೆ ಬದಲಾಯಿಸುವುದು ಸುಲಭ ಮತ್ತು ಕಡಿಮೆ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಮಾತ್ರ ಬದಲಾಯಿಸುವ ಅಗತ್ಯವಿದೆ.

ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಉದಾಹರಣೆ

.nav-tabsಟ್ಯಾಬ್‌ಗಳನ್ನು ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದಂತೆ ಮಾಡಲು, ವರ್ಗದೊಂದಿಗೆ ಮತ್ತೊಂದು ಡಿವಿಯಲ್ಲಿ ಸುತ್ತಿ .tabbable.

ಕಸ್ಟಮ್ jQuery ಪ್ಲಗಿನ್

ಎಲ್ಲಾ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳು ನಮ್ಮ ಹಗುರವಾದ jQuery ಪ್ಲಗಿನ್‌ನಿಂದ ಚಾಲಿತವಾಗಿವೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡಾಕ್ಸ್ ಪುಟದಲ್ಲಿ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಹೇಗೆ ಜೀವಂತಗೊಳಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ಇನ್ನಷ್ಟು ಓದಿ.

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

ಕೆಳಭಾಗದಲ್ಲಿ ಟ್ಯಾಬ್‌ಗಳು

HTML ನ ಕ್ರಮವನ್ನು ಫ್ಲಿಪ್ ಮಾಡಿ ಮತ್ತು ಕೆಳಭಾಗದಲ್ಲಿ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಹಾಕಲು ವರ್ಗವನ್ನು ಸೇರಿಸಿ.

<div class = "ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳು-ಕೆಳಗೆ" > 
  <div class = "ಟ್ಯಾಬ್-ವಿಷಯ" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ಎಡಭಾಗದಲ್ಲಿ ಟ್ಯಾಬ್‌ಗಳು

ಎಡಭಾಗದಲ್ಲಿ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಹಾಕಲು ವರ್ಗವನ್ನು ಬದಲಿಸಿ.

<div class = "ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳು-ಎಡ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ಟ್ಯಾಬ್-ವಿಷಯ" > 
    ...
  </div>
</div>

ಬಲಭಾಗದಲ್ಲಿ ಟ್ಯಾಬ್‌ಗಳು

ಬಲಭಾಗದಲ್ಲಿ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಹಾಕಲು ವರ್ಗವನ್ನು ಬದಲಾಯಿಸಿ.

<div class = "ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳು-ಬಲ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ಟ್ಯಾಬ್-ವಿಷಯ" > 
    ...
  </div>
</div>

ನವಬಾರ್ ಸ್ಕ್ಯಾಫೋಲ್ಡಿಂಗ್

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

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div ವರ್ಗ = "ಧಾರಕ" > 
      ...
    </div>
  </div>
</div>

ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗಕ್ಕೆ .navbar-fixed-topಹೊಂದಿಸಲು, ಹೊರಗಿನ ಭಾಗಕ್ಕೆ ಸೇರಿಸಿ, .navbar. padding-top: 40px;ನಿಮ್ಮ CSS ನಲ್ಲಿ, ನಿಮ್ಮ ಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಉಂಟಾಗುವ ಅತಿಕ್ರಮಣವನ್ನು ಸಹ ನೀವು ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ <body>.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

ಬ್ರಾಂಡ್ ಹೆಸರು

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

<a class = "ಬ್ರಾಂಡ್" href = "#" >  
  ಯೋಜನೆಯ ಹೆಸರು
</a>

ಹುಡುಕಾಟ ರೂಪ

.navbar-searchವರ್ಗದೊಂದಿಗೆ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ಹುಡುಕಾಟ ಫಾರ್ಮ್‌ಗಳು ಕಸ್ಟಮ್ ಶೈಲಿಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತವೆ . ಅದನ್ನು ಜೋಡಿಸಲು ಸೇರಿಸಿ .pull-leftಅಥವಾ .pull-rightಆನ್ ಮಾಡಿ .form

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

ಐಚ್ಛಿಕ ಸ್ಪಂದಿಸುವ ಬದಲಾವಣೆ

ನಿಮ್ಮ ಟಾಪ್‌ಬಾರ್‌ನಲ್ಲಿರುವ ವಿಷಯದ ಪ್ರಮಾಣವನ್ನು ಅವಲಂಬಿಸಿ, ನೀವು ಸ್ಪಂದಿಸುವ ಆಯ್ಕೆಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಬಯಸಬಹುದು. ಹಾಗೆ ಮಾಡಲು, ನಿಮ್ಮ nav ವಿಷಯವನ್ನು ಒಳಗೊಂಡಿರುವ ಡಿವಿಯಲ್ಲಿ ಸುತ್ತಿ .nav-collapse.collapse, ಮತ್ತು navbar ಟಾಗಲ್ ಬಟನ್ ಸೇರಿಸಿ, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div ವರ್ಗ = "ಧಾರಕ" > 
 
      <!-- .btn-navbar ಅನ್ನು ಕುಸಿದ ನ್ಯಾವ್‌ಬಾರ್ ವಿಷಯಕ್ಕೆ ಟಾಗಲ್ ಆಗಿ ಬಳಸಲಾಗುತ್ತದೆ -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- ಬ್ರ್ಯಾಂಡ್ ಅನ್ನು ತೋರಿಸಲು ನೀವು ಬಯಸಿದರೆ ಅದನ್ನು ಬಿಟ್ಟುಬಿಡಲು ಮರೆಯದಿರಿ -->
      <a class = "brand" href = "#" > ಯೋಜನೆಯ ಹೆಸರು </a>  
 
      <!-- ನೀವು 940px ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಪ್ರಮಾಣದಲ್ಲಿ ಮರೆಮಾಡಲು ಬಯಸುವ ಎಲ್ಲವನ್ನೂ ಇಲ್ಲಿ ಇರಿಸಿ -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

ನ್ಯಾವ್ ಲಿಂಕ್‌ಗಳು

ನ್ಯಾವ್ ಐಟಂಗಳನ್ನು ಆರ್ಡರ್ ಮಾಡದ ಪಟ್ಟಿಗಳ ಮೂಲಕ ಸೇರಿಸಲು ಸರಳವಾಗಿದೆ.

<ul class = "nav" > 
  <li class = "ಸಕ್ರಿಯ" > 
    <a href = "#" > ಮುಖಪುಟ </a> 
  </li>
  <li><a href = "#" > ಲಿಂಕ್ </a></li> 
  <li><a href = "#" > ಲಿಂಕ್ </a></li> 
</ul>

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತಿದೆ

nav ಗೆ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಸೇರಿಸುವುದು ತುಂಬಾ ಸರಳವಾಗಿದೆ, ಆದರೆ ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸುವ ಅಗತ್ಯವಿದೆ .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          ವರ್ಗ = "ಡ್ರಾಪ್‌ಡೌನ್-ಟಾಗಲ್"
          ಡೇಟಾ-ಟಾಗಲ್ = "ಡ್ರಾಪ್‌ಡೌನ್" >
          ಖಾತೆ
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

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

ಅವುಗಳನ್ನು ಏಕೆ ಬಳಸಬೇಕು

ಬ್ರೆಡ್ ಕ್ರಂಬ್ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಬಳಕೆದಾರರು ಅಪ್ಲಿಕೇಶನ್ ಅಥವಾ ಸೈಟ್‌ನಲ್ಲಿ ಎಲ್ಲಿದ್ದಾರೆ ಎಂಬುದನ್ನು ತೋರಿಸಲು ಒಂದು ಮಾರ್ಗವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಪ್ರಾಥಮಿಕ ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ ಅಲ್ಲ. ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿರಲು ಅವುಗಳ ಬಳಕೆಯನ್ನು ವಿರಳವಾಗಿ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಇರಿಸಿ.

ಉದಾಹರಣೆಗಳು

ಒಂದೇ ಉದಾಹರಣೆಯನ್ನು ಬಹು ಪುಟಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸಬಹುದಾದಂತೆ ತೋರಿಸಲಾಗಿದೆ.

• ಮುಖಪುಟ

• ಮುಖಪುಟ /
• ಗ್ರಂಥಾಲಯ

• ಮುಖಪುಟ /
• ಗ್ರಂಥಾಲಯ /
• ಡೇಟಾ

ಮಾರ್ಕ್ಅಪ್

HTML ಲಿಂಕ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಪ್ರಮಾಣಿತ ಅನುಕ್ರಮ ಪಟ್ಟಿಯಾಗಿದೆ.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > ಮುಖಪುಟ </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > ಲೈಬ್ರರಿ </a> <span class = "divider" > / </span>   
  </li>
  <li class = "ಸಕ್ರಿಯ" > 
    <a href = "#" > ಡೇಟಾ </a> 
  </li>
</ul>

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

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

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

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

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

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

ಉದಾಹರಣೆಗಳು

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

ಮಾರ್ಕ್ಅಪ್

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

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > ಹಿಂದಿನ </a></li> 
    <li class = "ಸಕ್ರಿಯ" > 
      <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>

ಪೇಜರ್ ಬಗ್ಗೆ

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

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

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

• ಹಿಂದಿನ
• ಮುಂದೆ

<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>

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

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

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

ಸ್ವಲ್ಪ ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್‌ಅಪ್‌ನೊಂದಿಗೆ, ಶೀರ್ಷಿಕೆಗಳು, ಪ್ಯಾರಾಗಳು ಅಥವಾ ಬಟನ್‌ಗಳಂತಹ ಯಾವುದೇ ರೀತಿಯ 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ಥಂಬ್‌ನೇಲ್ ಆಯಾಮಗಳ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ .

ಮಾರ್ಕ್ಅಪ್

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "ಎಚ್ಚರಿಕೆ" > 
  <a class = "close" > × </a> 
  <strong> ಎಚ್ಚರಿಕೆ! </strong> ನೀವೇ ನೋಡಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ.
</div>

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

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

ದೋಷ ಅಥವಾ ಅಪಾಯ

<div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ದೋಷ" > 
  ...
</div>

ಯಶಸ್ಸು

<div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ಯಶಸ್ಸು" > 
  ...
</div>

ಮಾಹಿತಿ

<div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ಮಾಹಿತಿ" > 
  ...
</div>

ಮೂಲಭೂತ

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

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

ಪಟ್ಟೆಯುಳ್ಳ

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

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

ಅನಿಮೇಟೆಡ್

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

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

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

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

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

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

ನಡವಳಿಕೆ

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

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

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

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

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

ಬಾವಿಗಳು

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

<div ವರ್ಗ = "ಚೆನ್ನಾಗಿ" > 
  ...
</div>

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

ಓದದಿರುವ ಎಣಿಕೆಗಾಗಿ ಅಥವಾ ಸರಳ ಸೂಚಕವಾಗಿ ಅಂಶದ ಮೇಲೆ ಬ್ಯಾಡ್ಜ್ ಅನ್ನು ಬಳಸಿ.

<span class = "badge" > 3 </div> 

ಐಕಾನ್ ಮುಚ್ಚಿ

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

×

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