ಉದಾಹರಣೆ

ಲಿಂಕ್‌ಗಳ ಪಟ್ಟಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಟಾಗಲ್ ಮಾಡಬಹುದಾದ, ಸಂದರ್ಭೋಚಿತ ಮೆನು. ಡ್ರಾಪ್‌ಡೌನ್ JavaScript ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಸಂವಾದಾತ್ಮಕವಾಗಿ ಮಾಡಲಾಗಿದೆ .

<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-righta ಗೆ ಸೇರಿಸಿ ..dropdown-menu

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಮೆನು ಆಯ್ಕೆಗಳು

ಲಿಂಕ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಡ್ರಾಪ್‌ಡೌನ್‌ನಲ್ಲಿ .disableda ಗೆ ಸೇರಿಸಿ .<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > ನಿಯಮಿತ ಲಿಂಕ್ </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಲಿಂಕ್ </a></li>   
  <li><a tabindex = "-1" href = "#" > ಇನ್ನೊಂದು ಲಿಂಕ್ </a></li>  
</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>

ಉದಾಹರಣೆಗಳು

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

ಏಕ ಬಟನ್ ಗುಂಪು

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

<div class = "btn-group" > 
  <button class = "btn" > ಎಡಕ್ಕೆ </button> 
  <button class = "btn" > ಮಧ್ಯಮ </button> 
  <button class = "btn" > ಬಲ </button> 
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ಗಾತ್ರಗಳು

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

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

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

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

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

ಹಗುರವಾದ ಡೀಫಾಲ್ಟ್‌ಗಳು ಒಂದೇ ಮಾರ್ಕ್‌ಅಪ್, ವಿಭಿನ್ನ ವರ್ಗಗಳು

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

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

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

<ul class = "nav nav-pills" > 
  ...
  <li class = "ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ" ><a href = "#" > ಮುಖಪುಟ </a></li>  
  ...
</ul>

ಘಟಕ ಜೋಡಣೆ

ನ್ಯಾವ್ ಲಿಂಕ್‌ಗಳನ್ನು ಜೋಡಿಸಲು, .pull-leftಅಥವಾ .pull-rightಯುಟಿಲಿಟಿ ತರಗತಿಗಳನ್ನು ಬಳಸಿ. ಎರಡೂ ವರ್ಗಗಳು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ದಿಕ್ಕಿನಲ್ಲಿ CSS ಫ್ಲೋಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತವೆ.

ಸ್ಟ್ಯಾಕ್ ಮಾಡಬಹುದಾದ

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

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

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

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

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

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

ಸ್ವಲ್ಪ ಹೆಚ್ಚುವರಿ HTML ಮತ್ತು ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳ JavaScript ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳನ್ನು ಸೇರಿಸಿ .

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

<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 ಲಿಂಕ್‌ಗಳ ಗುಂಪುಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸರಳ ಮತ್ತು ಸುಲಭವಾದ ಮಾರ್ಗ. OS X ನಲ್ಲಿ ಫೈಂಡರ್‌ನಂತಹ ಸೈಡ್‌ಬಾರ್‌ಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಉತ್ತಮವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ 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>

ಸೂಚನೆNAV ಪಟ್ಟಿಯಲ್ಲಿ ಗೂಡುಕಟ್ಟಲು, class="nav nav-list"ಯಾವುದೇ ನೆಸ್ಟೆಡ್‌ನಲ್ಲಿ ಸೇರಿಸಿ <ul>.

ಸಮತಲ ವಿಭಾಜಕಗಳು

ವರ್ಗದೊಂದಿಗೆ ಖಾಲಿ ಪಟ್ಟಿಯ ಐಟಂ ಅನ್ನು ರಚಿಸುವ ಮೂಲಕ ಸಮತಲವಾದ ವಿಭಾಜಕವನ್ನು ಸೇರಿಸಿ .divider, ಹಾಗೆ:

<ul class = "nav nav-list" > 
  ...
  <li class = "ವಿಭಾಜಕ" ></li> 
  ...
</ul>

ಟ್ಯಾಬ್ಬಬಲ್ ನ್ಯಾವ್

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

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

ಟ್ಯಾಬ್‌ಗಳನ್ನು ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದಂತೆ ಮಾಡಲು .tab-pane, ಪ್ರತಿ ಟ್ಯಾಬ್‌ಗೆ ಅನನ್ಯ ID ಯೊಂದಿಗೆ ರಚಿಸಿ ಮತ್ತು ಅವುಗಳನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ .tab-content.

<div class = "tabbable" > <!-- ಎಡ/ಬಲ ಟ್ಯಾಬ್‌ಗಳಿಗೆ ಮಾತ್ರ ಅಗತ್ಯವಿದೆ -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > ವಿಭಾಗ 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > ವಿಭಾಗ 2 </a></li>  
  </ul>
  <div class = "ಟ್ಯಾಬ್-ವಿಷಯ" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> ನಾನು ವಿಭಾಗ 1 ರಲ್ಲಿ ಇದ್ದೇನೆ. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> ಶುಭವಾಗಲಿ, ನಾನು ವಿಭಾಗ 2 ರಲ್ಲಿ ಇದ್ದೇನೆ. </p>
    </div>
  </div>
</div>

ಟ್ಯಾಬ್‌ಗಳಲ್ಲಿ ಫೇಡ್

ಟ್ಯಾಬ್‌ಗಳು ಮಸುಕಾಗುವಂತೆ ಮಾಡಲು, .fadeಪ್ರತಿಯೊಂದಕ್ಕೂ ಸೇರಿಸಿ .tab-pane.

jQuery ಪ್ಲಗಿನ್ ಅಗತ್ಯವಿದೆ

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

ಯಾವುದೇ ದಿಕ್ಕಿನಲ್ಲಿ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾಗಿದೆ

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

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>

ಮೂಲ ನ್ಯಾವ್ಬಾರ್

ಪ್ರಾರಂಭಿಸಲು, ನ್ಯಾವ್‌ಬಾರ್‌ಗಳು ಸ್ಥಿರವಾಗಿರುತ್ತವೆ (ಮೇಲ್ಭಾಗಕ್ಕೆ ಸ್ಥಿರವಾಗಿಲ್ಲ) ಮತ್ತು ಯೋಜನೆಯ ಹೆಸರು ಮತ್ತು ಮೂಲ ನ್ಯಾವಿಗೇಷನ್‌ಗೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. .containerನಿಮ್ಮ ಸೈಟ್ ಮತ್ತು ವಿಷಯದ ಅಗಲವನ್ನು ಹೊಂದಿಸುವ ಒಂದು ಒಳಗೆ ಎಲ್ಲಿಯಾದರೂ ಒಂದನ್ನು ಇರಿಸಿ .

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > ಶೀರ್ಷಿಕೆ </a>  
    <ul class = "nav" > 
      <li class = "ಸಕ್ರಿಯ" ><a href = "#" > ಮುಖಪುಟ </a></li>  
      <li><a href = "#" > ಲಿಂಕ್ </a></li> 
      <li><a href = "#" > ಲಿಂಕ್ </a></li> 
    </ul>
  </div>
</div>

Navbar ಘಟಕಗಳು

ಬ್ರಾಂಡ್

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

<a class = "brand" href = "#" > ಯೋಜನೆಯ ಹೆಸರು </a>  

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

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

<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 = "divider-vertical" ></li> 
  ...
</ul>

ರೂಪಗಳು

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

<form class = "navbar-form pull-left" > 
  <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ವರ್ಗ = "span2" >  
  <button type = "submit" class = "btn" > ಸಲ್ಲಿಸು </button>  
</form>

ಹುಡುಕಾಟ ರೂಪ

ಹೆಚ್ಚು ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ಹುಡುಕಾಟ ಫಾರ್ಮ್‌ಗಾಗಿ, ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ವಿಶೇಷ ಶೈಲಿಗಳಿಗಾಗಿ ಇನ್‌ಪುಟ್‌ಗೆ ಸೇರಿಸಿ .navbar-search.form.search-query

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

ಘಟಕ ಜೋಡಣೆ

ನ್ಯಾವ್ ಲಿಂಕ್‌ಗಳು, ಹುಡುಕಾಟ ಫಾರ್ಮ್ ಅಥವಾ ಪಠ್ಯವನ್ನು ಹೊಂದಿಸಿ, .pull-leftಅಥವಾ .pull-rightಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳನ್ನು ಬಳಸಿ. ಎರಡೂ ವರ್ಗಗಳು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ದಿಕ್ಕಿನಲ್ಲಿ CSS ಫ್ಲೋಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತವೆ.

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಬಳಸುವುದು

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

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      ಖಾತೆ
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

ಹೆಚ್ಚಿನ ಮಾರ್ಕ್‌ಅಪ್ ಮತ್ತು ಕರೆ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳ ಮಾಹಿತಿಗಾಗಿ JavaScript ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳ ದಸ್ತಾವೇಜನ್ನು ಭೇಟಿ ಮಾಡಿ .

ಪಠ್ಯ

ನೊಂದಿಗೆ ಅಂಶದಲ್ಲಿ ಪಠ್ಯದ ತಂತಿಗಳನ್ನು ಸುತ್ತಿ .navbar-text, ಸಾಮಾನ್ಯವಾಗಿ <p>ಸರಿಯಾದ ಪ್ರಮುಖ ಮತ್ತು ಬಣ್ಣಕ್ಕಾಗಿ ಟ್ಯಾಗ್‌ನಲ್ಲಿ.

ಐಚ್ಛಿಕ ಪ್ರದರ್ಶನ ವ್ಯತ್ಯಾಸಗಳು

ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗ ಅಥವಾ ಕೆಳಭಾಗದಲ್ಲಿ ಹೆಚ್ಚುವರಿ ವರ್ಗದ ಹೊರಭಾಗದ ಡಿವಿಯಲ್ಲಿ ಸರಿಪಡಿಸಿ, .navbar.

ಮೇಲಕ್ಕೆ ಸ್ಥಿರವಾಗಿದೆ

.navbar-fixed-topಗೆ ಕನಿಷ್ಠ 40px ಸೇರಿಸುವ ಮೂಲಕ ಅದರ ಕೆಳಗಿರುವ ಗುಪ್ತ ಪ್ರದೇಶವನ್ನು ಸೇರಿಸಿ ಮತ್ತು paddingಖಾತೆಗೆ ಮರೆಯದಿರಿ <body>. ಕೋರ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ CSS ನಂತರ ಮತ್ತು ಐಚ್ಛಿಕ ಸ್ಪಂದಿಸುವ CSS ಮೊದಲು ಇದನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ.

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

ಕೆಳಕ್ಕೆ ಸ್ಥಿರವಾಗಿದೆ

.navbar-fixed-bottomಬದಲಿಗೆ ಸೇರಿಸಿ .

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

ಸ್ಟ್ಯಾಟಿಕ್ ಟಾಪ್ ನ್ಯಾವ್‌ಬಾರ್

ಸೇರಿಸುವ ಮೂಲಕ ಪುಟದೊಂದಿಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವ ಪೂರ್ಣ-ಅಗಲ ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ರಚಿಸಿ .navbar-static-top. ವರ್ಗದಂತೆ .navbar-fixed-top, ನೀವು ಯಾವುದೇ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಬದಲಾಯಿಸುವ ಅಗತ್ಯವಿಲ್ಲ body.

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

ರೆಸ್ಪಾನ್ಸಿವ್ navbar

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

ತಲೆಕೆಳಗಾದ ವ್ಯತ್ಯಾಸ

ಸೇರಿಸುವ ಮೂಲಕ ನ್ಯಾವ್‌ಬಾರ್‌ನ ನೋಟವನ್ನು ಮಾರ್ಪಡಿಸಿ .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

ಉದಾಹರಣೆಗಳು

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

<ul class = "breadcrumb" > 
  <li><a href = "#" > ಮುಖಪುಟ </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > ಲೈಬ್ರರಿ </a> <span class = "divider" > / </span></li>   
  <li class = "ಸಕ್ರಿಯ" > ಡೇಟಾ </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 = "#" > 5 </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-large, .pagination-smallಅಥವಾ .pagination-miniಹೆಚ್ಚುವರಿ ಗಾತ್ರಗಳಿಗೆ ಸೇರಿಸಿ .

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "ಪೇಜಿನೇಶನ್ ಪೇಜಿನೇಶನ್-ಸ್ಮಾಲ್" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </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>

ಲೇಬಲ್‌ಗಳು

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

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

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

ಹೀರೋ ಘಟಕ

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

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

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

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

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

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

ಮಾರ್ಕ್ಅಪ್

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ಆಯ್ಕೆಗಳು

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

<div class = "ಎಚ್ಚರಿಕೆ ಎಚ್ಚರಿಕೆ-ನಿರ್ಬಂಧ" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </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-stripedIE ಯ ಎಲ್ಲಾ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ.

<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 ವರ್ಗ = "ಮಾಧ್ಯಮ" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಆಬ್ಜೆಕ್ಟ್ -->
    <div ವರ್ಗ = "ಮಾಧ್ಯಮ" > 
      ...
    </div>
  </div>
</div>

ಮಾಧ್ಯಮ ಪಟ್ಟಿ

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

<ul class = "media-list" > 
  <ಲಿ ವರ್ಗ = "ಮಾಧ್ಯಮ" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- ನೆಸ್ಟೆಡ್ ಮೀಡಿಯಾ ಆಬ್ಜೆಕ್ಟ್ -->
      <div ವರ್ಗ = "ಮಾಧ್ಯಮ" > 
        ...
     </div>
    </div>
  </li>
</ul>

ಬಾವಿಗಳು

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

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

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

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

<div class = "ಚೆನ್ನಾಗಿ-ದೊಡ್ಡದು" > 
  ...
</div>

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

ಐಕಾನ್ ಮುಚ್ಚಿ

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

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

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

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

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

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

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

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

ವರ್ಗ = "ಪುಲ್-ಎಡ"

. ಎಳೆಯಿರಿ - ಎಡಕ್ಕೆ {
  ತೇಲು : ಎಡ ;
}

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

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

ವರ್ಗ = "ಬಲಕ್ಕೆ ಎಳೆಯಿರಿ"

. ಎಳೆಯಿರಿ - ಬಲಕ್ಕೆ {
  ತೇಲು : ಬಲ ;
}

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

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

ವರ್ಗ = "ಮ್ಯೂಟ್"

. ಮ್ಯೂಟ್ ಮಾಡಲಾಗಿದೆ {
  ಬಣ್ಣ : #999; 
}

.clearfix

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

ವರ್ಗ = "ಕ್ಲಿಯರ್ಫಿಕ್ಸ್"

. ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ {
  * ಜೂಮ್ : 1 ; 
  &: ಮೊದಲು ,
  &: { ನಂತರ
    ಪ್ರದರ್ಶನ : ಟೇಬಲ್ ;
    ವಿಷಯ : "" ; 
  }
  &: { ನಂತರ
    ಸ್ಪಷ್ಟ : ಎರಡೂ ;
  }
}