ਉਦਾਹਰਨ

ਲਿੰਕਾਂ ਦੀਆਂ ਸੂਚੀਆਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਟੌਗਲ ਕਰਨ ਯੋਗ, ਪ੍ਰਸੰਗਿਕ ਮੀਨੂ। ਡ੍ਰੌਪਡਾਉਨ 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 ਕਲਾਸ = "ਡਿਵਾਈਡਰ" ></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 ਕਲਾਸ = "ਡਿਵਾਈਡਰ" ></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>

ਅਯੋਗ ਮੀਨੂ ਵਿਕਲਪ

ਲਿੰਕ ਨੂੰ ਅਯੋਗ ਕਰਨ ਲਈ ਡ੍ਰੌਪਡਾਉਨ ਵਿੱਚ .disabledਇੱਕ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।<li>

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

ਡ੍ਰੌਪਡਾਊਨ 'ਤੇ ਉਪ ਮੀਨੂ

ਕੁਝ ਸਧਾਰਨ ਮਾਰਕਅੱਪ ਜੋੜਾਂ ਦੇ ਨਾਲ, OS X ਵਾਂਗ ਹੋਵਰ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ, ਡਰਾਪਡਾਉਨ ਮੀਨੂ ਦਾ ਇੱਕ ਵਾਧੂ ਪੱਧਰ ਸ਼ਾਮਲ ਕਰੋ। ਆਟੋਮੈਟਿਕ ਸਟਾਈਲਿੰਗ ਲਈ ਮੌਜੂਦਾ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿੱਚ .dropdown-submenuਕਿਸੇ ਵੀ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।li

ਡਿਫਾਲਟ

ਡਰਾਪਅੱਪ

ਖੱਬਾ ਸਬਮੇਨੂ

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ-ਸਬਮੇਨੂ" > 
    <a tabindex = "-1" href = "#" > ਹੋਰ ਵਿਕਲਪ </a>  
    <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
      ...
    </ul>
  </li>
</ul>

ਉਦਾਹਰਨਾਂ

ਦੋ ਬੁਨਿਆਦੀ ਵਿਕਲਪ, ਦੋ ਹੋਰ ਖਾਸ ਭਿੰਨਤਾਵਾਂ ਦੇ ਨਾਲ।

ਸਿੰਗਲ ਬਟਨ ਸਮੂਹ

.btnਵਿੱਚ ਨਾਲ ਬਟਨਾਂ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਸਮੇਟਣਾ .btn-group।

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  <button class = "btn" > ਖੱਬਾ </button> 
  <button class = "btn" > ਮੱਧ </ ਬਟਨ> 
  <button class = "btn" > ਸੱਜਾ </button> 
</div>

ਕਈ ਬਟਨ ਸਮੂਹ

ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਭਾਗਾਂ ਲਈ <div class="btn-group">a ਵਿੱਚ ਸੈੱਟਾਂ ਨੂੰ ਜੋੜੋ ।<div class="btn-toolbar">

<div ਕਲਾਸ = "btn-ਟੂਲਬਾਰ" > 
  <div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
    ...
  </div>
</div>

ਵਰਟੀਕਲ ਬਟਨ ਸਮੂਹ

ਬਟਨਾਂ ਦਾ ਇੱਕ ਸੈੱਟ ਖਿਤਿਜੀ ਦੀ ਬਜਾਏ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਸਟੈਕਡ ਦਿਖਾਉਂਦਾ ਹੈ।

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

ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਸੁਆਦ

ਬਟਨ ਸਮੂਹ ਰੇਡੀਓ ਦੇ ਤੌਰ 'ਤੇ ਵੀ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ, ਜਿੱਥੇ ਸਿਰਫ਼ ਇੱਕ ਬਟਨ ਸਰਗਰਮ ਹੋ ਸਕਦਾ ਹੈ, ਜਾਂ ਚੈਕਬਾਕਸ, ਜਿੱਥੇ ਕਈ ਬਟਨ ਸਰਗਰਮ ਹੋ ਸਕਦੇ ਹਨ। ਇਸਦੇ ਲਈ JavaScript ਡੌਕਸ ਦੇਖੋ ।

ਬਟਨ ਸਮੂਹਾਂ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ

ਸਿਰ!ਡ੍ਰੌਪਡਾਊਨ ਵਾਲੇ ਬਟਨਾਂ ਨੂੰ ਸਹੀ ਰੈਂਡਰਿੰਗ ਲਈ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਆਪਣੇ ਆਪ .btn-groupਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।.btn-toolbar

ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਅਤੇ ਉਦਾਹਰਣ

ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਇੱਕ ਦੇ ਅੰਦਰ ਰੱਖ ਕੇ .btn-groupਅਤੇ ਉਚਿਤ ਮੀਨੂ ਮਾਰਕਅੱਪ ਪ੍ਰਦਾਨ ਕਰਕੇ ਕਿਸੇ ਵੀ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  <a ਕਲਾਸ = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    ਕਾਰਵਾਈ
    <span class = "caret" ></span> 
  </a>
  <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
    <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  </ul>
</div>

ਸਾਰੇ ਬਟਨ ਅਕਾਰ ਦੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ

ਬਟਨ ਡਰਾਪਡਾਊਨ ਕਿਸੇ ਵੀ ਆਕਾਰ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ: .btn-large, .btn-small, ਜਾਂ .btn-mini.

JavaScript ਦੀ ਲੋੜ ਹੈ

ਬਟਨ ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਕੰਮ ਕਰਨ ਲਈ ਬੂਟਸਟਰੈਪ ਡ੍ਰੌਪਡਾਉਨ ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਕੁਝ ਮਾਮਲਿਆਂ ਵਿੱਚ—ਜਿਵੇਂ ਕਿ ਮੋਬਾਈਲ—ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿਊਪੋਰਟ ਤੋਂ ਬਾਹਰ ਵਿਸਤ੍ਰਿਤ ਹੋਣਗੇ। ਤੁਹਾਨੂੰ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਹੱਥੀਂ ਜਾਂ ਕਸਟਮ JavaScript ਨਾਲ ਹੱਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਸਪਲਿਟ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ

ਬਟਨ ਗਰੁੱਪ ਸਟਾਈਲ ਅਤੇ ਮਾਰਕਅੱਪ 'ਤੇ ਬਣਾਉਂਦੇ ਹੋਏ, ਅਸੀਂ ਆਸਾਨੀ ਨਾਲ ਇੱਕ ਸਪਲਿਟ ਬਟਨ ਬਣਾ ਸਕਦੇ ਹਾਂ। ਸਪਲਿਟ ਬਟਨਾਂ ਵਿੱਚ ਖੱਬੇ ਪਾਸੇ ਇੱਕ ਮਿਆਰੀ ਕਾਰਵਾਈ ਅਤੇ ਪ੍ਰਸੰਗਿਕ ਲਿੰਕਾਂ ਦੇ ਨਾਲ ਸੱਜੇ ਪਾਸੇ ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਟੌਗਲ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ।

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  <button class = "btn" > ਕਾਰਵਾਈ </button> 
  <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >  
    <span class = "caret" ></span> 
  </ ਬਟਨ>
  <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
    <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  </ul>
</div>

ਆਕਾਰ

ਵਾਧੂ ਬਟਨ ਕਲਾਸਾਂ .btn-miniਦੀ ਵਰਤੋਂ ਕਰੋ .btn-small, ਜਾਂ .btn-largeਆਕਾਰ ਦੇਣ ਲਈ।

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  <button class = "btn btn-mini" > ਕਾਰਵਾਈ </button> 
  <ਬਟਨ ਕਲਾਸ = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ ਬਟਨ>
  <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
    <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  </ul>
</div>

ਡ੍ਰੌਪਅੱਪ ਮੇਨੂ

ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਦੇ ਤਤਕਾਲੀ ਮਾਤਾ-ਪਿਤਾ ਵਿੱਚ ਇੱਕ ਸਿੰਗਲ ਕਲਾਸ ਜੋੜ ਕੇ ਹੇਠਾਂ ਤੋਂ ਉੱਪਰ ਤੱਕ ਟੌਗਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ .dropdown-menu। ਇਹ ਦੀ ਦਿਸ਼ਾ ਨੂੰ ਫਲਿਪ ਕਰੇਗਾ .caretਅਤੇ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਦੀ ਬਜਾਏ ਹੇਠਾਂ ਤੋਂ ਉੱਪਰ ਜਾਣ ਲਈ ਮੀਨੂ ਨੂੰ ਆਪਣੇ ਆਪ ਵਿੱਚ ਬਦਲ ਦੇਵੇਗਾ।

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ ਡਰਾਪਅੱਪ" > 
  <button class = "btn" > ਡ੍ਰੌਪਅੱਪ </button> 
  <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >  
    <span class = "caret" ></span> 
  </ ਬਟਨ>
  <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
    <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  </ul>
</div>

ਲਾਈਟਵੇਟ ਡਿਫੌਲਟ ਸਮਾਨ ਮਾਰਕਅੱਪ, ਵੱਖ-ਵੱਖ ਕਲਾਸਾਂ

ਇੱਥੇ ਸਾਰੇ ਨੈਵ ਕੰਪੋਨੈਂਟ—ਟੈਬਾਂ, ਗੋਲੀਆਂ, ਅਤੇ ਸੂਚੀਆਂ— ਕਲਾਸ ਰਾਹੀਂ ਇੱਕੋ ਜਿਹੇ ਬੇਸ ਮਾਰਕਅੱਪ ਅਤੇ ਸ਼ੈਲੀਆਂ.nav ਨੂੰ ਸਾਂਝਾ ਕਰਦੇ ਹਨ ।

ਮੂਲ ਟੈਬਾਂ

ਨਿਯਮਤ <ul>ਲਿੰਕ ਲਓ ਅਤੇ ਸ਼ਾਮਲ ਕਰੋ .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li ਕਲਾਸ = "ਸਰਗਰਮ" > 
    <a href="#" > ਘਰ </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ਬੁਨਿਆਦੀ ਗੋਲੀਆਂ

ਉਹੀ HTML ਲਓ, ਪਰ ਇਸਦੀ .nav-pillsਬਜਾਏ ਵਰਤੋਂ:

<ul class = "nav nav-pills" > 
  <li ਕਲਾਸ = "ਸਰਗਰਮ" > 
    <a href="#" > ਘਰ </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ਅਪਾਹਜ ਸਥਿਤੀ

ਕਿਸੇ ਵੀ ਨੈਵੀ ਕੰਪੋਨੈਂਟ (ਟੈਬਾਂ, ਗੋਲੀਆਂ, ਜਾਂ ਸੂਚੀ) ਲਈ, ਸਲੇਟੀ ਲਿੰਕਾਂ .disabledਲਈ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਕੋਈ ਹੋਵਰ ਪ੍ਰਭਾਵ ਨਹੀਂ । ਲਿੰਕ ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਰਹਿਣਗੇ, ਹਾਲਾਂਕਿ, ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ hrefਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਨਹੀਂ ਹਟਾਉਂਦੇ। ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਉਹਨਾਂ ਕਲਿੱਕਾਂ ਨੂੰ ਰੋਕਣ ਲਈ ਕਸਟਮ JavaScript ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ।

<ul class = "nav nav-pills" > 
  ...
  <li ਕਲਾਸ = "ਅਯੋਗ" ><a href = "#" > ਘਰ </a></li>  
  ...
</ul>

ਕੰਪੋਨੈਂਟ ਅਲਾਈਨਮੈਂਟ

ਨੈਵੀ ਲਿੰਕਸ ਨੂੰ ਅਲਾਈਨ ਕਰਨ ਲਈ, .pull-leftਜਾਂ .pull-rightਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਦੋਵੇਂ ਕਲਾਸਾਂ ਨਿਰਧਾਰਤ ਦਿਸ਼ਾ ਵਿੱਚ ਇੱਕ CSS ਫਲੋਟ ਜੋੜਨਗੀਆਂ।

ਸਟੈਕਬਲ

ਜਿਵੇਂ ਕਿ ਟੈਬਾਂ ਅਤੇ ਗੋਲੀਆਂ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਹਰੀਜੱਟਲ ਹੁੰਦੀਆਂ ਹਨ, .nav-stackedਉਹਨਾਂ ਨੂੰ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਸਟੈਕਡ ਵਿਖਾਈ ਦੇਣ ਲਈ ਸਿਰਫ਼ ਦੂਜੀ ਸ਼੍ਰੇਣੀ, , ਜੋੜੋ।

ਸਟੈਕਡ ਟੈਬਾਂ

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

ਸਟੈਕਡ ਗੋਲੀਆਂ

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

ਡ੍ਰੌਪਡਾਊਨ

ਥੋੜਾ ਜਿਹਾ ਵਾਧੂ HTML ਅਤੇ ਡ੍ਰੌਪਡਾਉਨ JavaScript ਪਲੱਗਇਨ ਦੇ ਨਾਲ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਸ਼ਾਮਲ ਕਰੋ ।

ਡ੍ਰੌਪਡਾਊਨ ਵਾਲੀਆਂ ਟੈਬਾਂ

<ul class = "nav nav-tabs" > 
  <li ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ" > 
    <a ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ-ਟੌਗਲ" 
       ਡਾਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ"
       href = "#" >
        ਡਰਾਪ ਡਾਉਨ
        <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
      </a>
    <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
      <!-- ਲਿੰਕ -->
    </ul>
  </li>
</ul>

ਡਰਾਪਡਾਊਨ ਦੇ ਨਾਲ ਗੋਲੀਆਂ

<ul class = "nav nav-pills" > 
  <li ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ" > 
    <a ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ-ਟੌਗਲ" 
       ਡਾਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ"
       href = "#" >
        ਡਰਾਪ ਡਾਉਨ
        <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
      </a>
    <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
      <!-- ਲਿੰਕ -->
    </ul>
  </li>
</ul>

Nav ਸੂਚੀਆਂ

ਵਿਕਲਪਿਕ ਸਿਰਲੇਖਾਂ ਦੇ ਨਾਲ ਨੇਵੀ ਲਿੰਕਾਂ ਦੇ ਸਮੂਹਾਂ ਨੂੰ ਬਣਾਉਣ ਦਾ ਇੱਕ ਸਧਾਰਨ ਅਤੇ ਆਸਾਨ ਤਰੀਕਾ। ਉਹ OS X ਵਿੱਚ ਫਾਈਂਡਰ ਵਰਗੇ ਸਾਈਡਬਾਰਾਂ ਵਿੱਚ ਸਭ ਤੋਂ ਵਧੀਆ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।

ਉਦਾਹਰਨ nav ਸੂਚੀ

ਲਿੰਕਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਲਓ ਅਤੇ ਸ਼ਾਮਲ ਕਰੋ class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > ਸੂਚੀ ਸਿਰਲੇਖ </li> 
  <li class = "active" ><a href = "#" > ਘਰ </a></li>  
  <li><a href = "#" > ਲਾਇਬ੍ਰੇਰੀ </a></li> 
  ...
</ul>

ਨੋਟ ਕਰੋNAV ਸੂਚੀ ਵਿੱਚ ਆਲ੍ਹਣੇ ਲਈ, class="nav nav-list"ਕਿਸੇ ਵੀ ਨੇਸਟਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ <ul>।

ਹਰੀਜੱਟਲ ਡਿਵਾਈਡਰ

ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਖਾਲੀ ਸੂਚੀ ਆਈਟਮ ਬਣਾ ਕੇ ਇੱਕ ਖਿਤਿਜੀ ਵਿਭਾਜਕ ਸ਼ਾਮਲ ਕਰੋ .divider, ਜਿਵੇਂ ਕਿ:

<ul class = "nav nav-list" > 
  ...
  <li ਕਲਾਸ = "ਡਿਵਾਈਡਰ" ></li> 
  ...
</ul>

Tabbable nav

ਟੈਬਾਂ ਰਾਹੀਂ ਸਮੱਗਰੀ ਦੇ ਵਿਚਕਾਰ ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਸਧਾਰਨ ਪਲੱਗਇਨ ਨਾਲ ਆਪਣੀਆਂ ਟੈਬਾਂ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਲਿਆਓ। ਬੂਟਸਟਰੈਪ ਚਾਰ ਸ਼ੈਲੀਆਂ ਵਿੱਚ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਦਾ ਹੈ: ਸਿਖਰ (ਡਿਫੌਲਟ), ਸੱਜਾ, ਹੇਠਾਂ ਅਤੇ ਖੱਬਾ।

ਟੇਬਲ ਉਦਾਹਰਨ

ਟੈਬਾਂ ਨੂੰ ਟੈਬ ਕਰਨ ਯੋਗ ਬਣਾਉਣ ਲਈ, .tab-paneਹਰੇਕ ਟੈਬ ਲਈ ਇੱਕ ਵਿਲੱਖਣ ID ਨਾਲ ਬਣਾਓ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਵਿੱਚ ਲਪੇਟੋ .tab-content।

ਮੈਂ ਸੈਕਸ਼ਨ 1 ਵਿੱਚ ਹਾਂ।

ਹਾਉਡੀ, ਮੈਂ ਸੈਕਸ਼ਨ 2 ਵਿੱਚ ਹਾਂ।

ਕੀ ਹਾਲ ਹੈ ਕੁੜੀ, ਇਹ ਸੈਕਸ਼ਨ 3 ਹੈ।

<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 ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
    <div ਕਲਾਸ = "ਟੈਬ-ਪੈਨ ਐਕਟਿਵ" ਆਈਡੀ = "ਟੈਬ1" >  
      <p> ਮੈਂ ਸੈਕਸ਼ਨ 1 ਵਿੱਚ ਹਾਂ। </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> ਹਾਉਡੀ, ਮੈਂ ਸੈਕਸ਼ਨ 2 ਵਿੱਚ ਹਾਂ। </p>
    </div>
  </div>
</div>

ਟੈਬਾਂ ਵਿੱਚ ਫੇਡ

ਟੈਬਾਂ ਨੂੰ ਫੇਡ ਇਨ ਬਣਾਉਣ ਲਈ, .fadeਹਰੇਕ ਵਿੱਚ ਜੋੜੋ .tab-pane।

jQuery ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੈ

ਸਾਰੀਆਂ ਟੈਬਬਲ ਟੈਬਾਂ ਸਾਡੇ ਹਲਕੇ jQuery ਪਲੱਗਇਨ ਦੁਆਰਾ ਸੰਚਾਲਿਤ ਹਨ। JavaScript ਡੌਕਸ ਪੰਨੇ 'ਤੇ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਕਿਵੇਂ ਲਿਆਉਣਾ ਹੈ ਇਸ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ।

ਕਿਸੇ ਵੀ ਦਿਸ਼ਾ ਵਿੱਚ ਟੇਬਲ

ਹੇਠਾਂ ਟੈਬਾਂ

HTML ਦੇ ਕ੍ਰਮ ਨੂੰ ਫਲਿੱਪ ਕਰੋ ਅਤੇ ਟੈਬਾਂ ਨੂੰ ਹੇਠਾਂ ਰੱਖਣ ਲਈ ਇੱਕ ਕਲਾਸ ਜੋੜੋ।

ਮੈਂ ਸੈਕਸ਼ਨ ਏ ਵਿੱਚ ਹਾਂ।

ਹਾਉਡੀ, ਮੈਂ ਸੈਕਸ਼ਨ ਬੀ ਵਿੱਚ ਹਾਂ।

ਕੀ ਹਾਲ ਹੈ ਕੁੜੀ, ਇਹ ਸੈਕਸ਼ਨ ਸੀ.

<div ਕਲਾਸ = "ਟੈਬਬਲ ਟੈਬਸ-ਹੇਠਾਂ" > 
  <div ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ਖੱਬੇ ਪਾਸੇ ਟੈਬਾਂ

ਖੱਬੇ ਪਾਸੇ ਟੈਬਾਂ ਲਗਾਉਣ ਲਈ ਕਲਾਸ ਨੂੰ ਸਵੈਪ ਕਰੋ।

ਮੈਂ ਸੈਕਸ਼ਨ ਏ ਵਿੱਚ ਹਾਂ।

ਹਾਉਡੀ, ਮੈਂ ਸੈਕਸ਼ਨ ਬੀ ਵਿੱਚ ਹਾਂ।

ਕੀ ਹਾਲ ਹੈ ਕੁੜੀ, ਇਹ ਸੈਕਸ਼ਨ ਸੀ.

<div ਕਲਾਸ = "ਟੈਬਬਲ ਟੈਬਸ-ਖੱਬੇ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
    ...
  </div>
</div>

ਸੱਜੇ ਪਾਸੇ ਟੈਬਾਂ

ਸੱਜੇ ਪਾਸੇ ਟੈਬਾਂ ਰੱਖਣ ਲਈ ਕਲਾਸ ਨੂੰ ਸਵੈਪ ਕਰੋ।

ਮੈਂ ਸੈਕਸ਼ਨ ਏ ਵਿੱਚ ਹਾਂ।

ਹਾਉਡੀ, ਮੈਂ ਸੈਕਸ਼ਨ ਬੀ ਵਿੱਚ ਹਾਂ।

ਕੀ ਹਾਲ ਹੈ ਕੁੜੀ, ਇਹ ਸੈਕਸ਼ਨ ਸੀ.

<div ਕਲਾਸ = "ਟੈਬਬਲ ਟੈਬਸ-ਸੱਜੇ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
    ...
  </div>
</div>

ਮੂਲ ਨਵਬਾਰ

ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਨੇਵਬਾਰ ਸਥਿਰ ਹਨ (ਸਿਖਰ 'ਤੇ ਸਥਿਰ ਨਹੀਂ) ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਨਾਮ ਅਤੇ ਬੁਨਿਆਦੀ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ। ਇੱਕ ਦੇ ਅੰਦਰ ਕਿਤੇ ਵੀ ਰੱਖੋ .container, ਜੋ ਤੁਹਾਡੀ ਸਾਈਟ ਅਤੇ ਸਮੱਗਰੀ ਦੀ ਚੌੜਾਈ ਨੂੰ ਸੈੱਟ ਕਰਦਾ ਹੈ।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a ਕਲਾਸ = "ਬ੍ਰਾਂਡ" href = "#" > ਸਿਰਲੇਖ </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > ਘਰ </a></li>  
      <li><a href = "#" > ਲਿੰਕ </a></li> 
      <li><a href = "#" > ਲਿੰਕ </a></li> 
    </ul>
  </div>
</div>

ਨਵਬਾਰ ਦੇ ਹਿੱਸੇ

ਬ੍ਰਾਂਡ

ਤੁਹਾਡੇ ਬ੍ਰਾਂਡ ਜਾਂ ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਸਧਾਰਨ ਲਿੰਕ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਐਂਕਰ ਟੈਗ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

<a ਕਲਾਸ = "ਬ੍ਰਾਂਡ" href = "#" > ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ </a>

ਨਵ ਲਿੰਕ

ਨੈਵੀ ਆਈਟਮਾਂ ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ ਸੂਚੀਆਂ ਰਾਹੀਂ ਜੋੜਨ ਲਈ ਸਧਾਰਨ ਹਨ।

<ul class = "nav" > 
  <li ਕਲਾਸ = "ਸਰਗਰਮ" > 
    <a href="#" > ਘਰ </a> _ _ 
  </li>
  <li><a href = "#" > ਲਿੰਕ </a></li> 
  <li><a href = "#" > ਲਿੰਕ </a></li> 
</ul>

ਤੁਸੀਂ ਇੱਕ ਖਾਲੀ ਸੂਚੀ ਆਈਟਮ ਅਤੇ ਇੱਕ ਸਧਾਰਨ ਕਲਾਸ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਆਪਣੇ ਨੈਵੀ ਲਿੰਕਾਂ ਵਿੱਚ ਡਿਵਾਈਡਰ ਜੋੜ ਸਕਦੇ ਹੋ। ਬੱਸ ਇਸਨੂੰ ਲਿੰਕਾਂ ਦੇ ਵਿਚਕਾਰ ਜੋੜੋ:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

ਫਾਰਮ

ਨਵਬਾਰ ਦੇ ਅੰਦਰ ਫਾਰਮ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸਟਾਈਲ ਕਰਨ ਅਤੇ ਸਥਿਤੀ ਦੇਣ ਲਈ, ਹੇਠਾਂ ਦਰਸਾਏ ਅਨੁਸਾਰ ਢੁਕਵੀਆਂ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ। ਇੱਕ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਫਾਰਮ ਲਈ, ਸ਼ਾਮਲ ਕਰੋ .navbar-formਅਤੇ ਜਾਂ ਤਾਂ .pull-leftਜਾਂ .pull-rightਇਸ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਇਕਸਾਰ ਕਰੋ।

<ਫਾਰਮ ਕਲਾਸ = "ਨਵਬਾਰ-ਫਾਰਮ ਪੁੱਲ-ਖੱਬੇ" > 
  <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "span2" >  
  <button type = "submit" class = "btn" > ਸਪੁਰਦ ਕਰੋ </button>  
</form>

ਖੋਜ ਫਾਰਮ

ਵਧੇਰੇ ਅਨੁਕੂਲਿਤ ਖੋਜ ਫਾਰਮ ਲਈ, ਨਵਬਾਰ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਸ਼ੈਲੀਆਂ ਲਈ ਇਨਪੁਟ ਵਿੱਚ .navbar-searchਅਤੇ formਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।.search-query

<ਫਾਰਮ ਕਲਾਸ = "ਨਵਬਾਰ-ਖੋਜ ਪੁੱਲ-ਖੱਬੇ" > 
  <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਖੋਜ-ਕਵੇਰੀ" ਪਲੇਸਹੋਲਡਰ = "ਖੋਜ" >   
</form>

ਕੰਪੋਨੈਂਟ ਅਲਾਈਨਮੈਂਟ

ਨੈਵੀ ਲਿੰਕਸ, ਖੋਜ ਫਾਰਮ, ਜਾਂ ਟੈਕਸਟ ਨੂੰ ਅਲਾਈਨ ਕਰੋ, .pull-leftਜਾਂ .pull-rightਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਦੋਵੇਂ ਕਲਾਸਾਂ ਨਿਰਧਾਰਤ ਦਿਸ਼ਾ ਵਿੱਚ ਇੱਕ CSS ਫਲੋਟ ਜੋੜਨਗੀਆਂ।

ਡ੍ਰੌਪਡਾਊਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਥੋੜ੍ਹੇ ਜਿਹੇ ਮਾਰਕਅੱਪ ਅਤੇ ਡ੍ਰੌਪਡਾਊਨ JavaScript ਪਲੱਗਇਨ ਨਾਲ ਡ੍ਰੌਪਡਾਊਨ ਅਤੇ ਡ੍ਰੌਪਅੱਪਸ ਨੂੰ nav ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।

<ul class = "nav" > 
  <li ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ" > 
    <a href = "#" ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >   
      ਖਾਤਾ
      <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
    </a>
    <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
      ...
    </ul>
  </li>
</ul>

ਹੋਰ ਮਾਰਕਅੱਪ ਅਤੇ ਕਾਲਿੰਗ ਡਰਾਪਡਾਉਨ ਬਾਰੇ ਜਾਣਕਾਰੀ ਲਈ JavaScript ਡ੍ਰੌਪਡਾਉਨ ਦਸਤਾਵੇਜ਼ਾਂ 'ਤੇ ਜਾਓ ।

ਟੈਕਸਟ

ਇੱਕ ਤੱਤ ਵਿੱਚ ਟੈਕਸਟ ਦੀਆਂ ਸਤਰਾਂ ਨੂੰ ਸਮੇਟਣਾ .navbar-text, ਆਮ ਤੌਰ 'ਤੇ <p>ਸਹੀ ਲੀਡਿੰਗ ਅਤੇ ਰੰਗ ਲਈ ਇੱਕ ਟੈਗ 'ਤੇ।

ਵਿਕਲਪਿਕ ਡਿਸਪਲੇ ਭਿੰਨਤਾਵਾਂ

ਸਭ ਤੋਂ ਬਾਹਰੀ div 'ਤੇ ਇੱਕ ਵਾਧੂ ਕਲਾਸ ਦੇ ਨਾਲ ਨੇਵਬਾਰ ਨੂੰ ਵਿਊਪੋਰਟ ਦੇ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਫਿਕਸ ਕਰੋ .navbar।

ਸਿਖਰ 'ਤੇ ਸਥਿਰ

ਵਿੱਚ ਘੱਟੋ-ਘੱਟ 40px ਜੋੜ ਕੇ .navbar-fixed-topਇਸ ਦੇ ਹੇਠਾਂ ਲੁਕੇ ਹੋਏ ਖੇਤਰ ਨੂੰ ਜੋੜੋ ਅਤੇ ਯਾਦ ਰੱਖੋ । ਇਸ ਨੂੰ ਕੋਰ ਬੂਟਸਟਰੈਪ CSS ਤੋਂ ਬਾਅਦ ਅਤੇ ਵਿਕਲਪਿਕ ਜਵਾਬਦੇਹ CSS ਤੋਂ ਪਹਿਲਾਂ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ।padding<body>

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

ਜਵਾਬਦੇਹ ਨਵਬਾਰ

ਇੱਕ ਸਮੇਟਣ ਵਾਲੇ ਜਵਾਬਦੇਹ ਨੇਵੀਬਾਰ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ, ਆਪਣੀ ਨਵਬਾਰ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਰੱਖਣ ਵਾਲੇ div ਵਿੱਚ ਸਮੇਟਣਾ .nav-collapse.collapse, ਅ��ੇ ਨਵਬਾਰ ਟੌਗਲ ਬਟਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ .btn-navbar,।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div ਕਲਾਸ = "ਕੰਟੇਨਰ" > 
 
      <!-- .btn-navbar ਨੂੰ ਸਮੇਟਣ ਵਾਲੀ ਨਵਬਾਰ ਸਮੱਗਰੀ ਲਈ ਟੌਗਲ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ -->
      <a ਕਲਾਸ = "btn btn-navbar" data-toggle = "colapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- ਬ੍ਰਾਂਡ ਨੂੰ ਉੱਥੇ ਛੱਡਣਾ ਯਕੀਨੀ ਬਣਾਓ ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ -->
      <a ਕਲਾਸ = "ਬ੍ਰਾਂਡ" href = "#" > ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ </a>  
 
      <!-- ਹਰ ਚੀਜ਼ ਜੋ ਤੁਸੀਂ 940px ਜਾਂ ਇਸ ਤੋਂ ਘੱਟ 'ਤੇ ਲੁਕਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਇੱਥੇ ਰੱਖੋ -->
      <div class = "nav-collaps colapse" > 
        <!-- .nav, .navbar-ਖੋਜ, .navbar-ਫਾਰਮ, ਆਦਿ -->
      </div>
 
    </div>
  </div>
</div>

ਸਿਰ! ਜਵਾਬਦੇਹ ਨਵਬਾਰ ਨੂੰ ਸਮੇਟਣ ਪਲੱਗਇਨ ਅਤੇ ਜਵਾਬਦੇਹ ਬੂਟਸਟਰੈਪ CSS ਫਾਈਲ ਦੀ ਲੋੜ ਹੈ ।

ਉਲਟੀ ਪਰਿਵਰਤਨ

ਜੋੜ ਕੇ ਨਵਬਾਰ ਦੀ ਦਿੱਖ ਨੂੰ ਸੋਧੋ .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 = "active" > ਡਾਟਾ </li> 
</ul>

ਮਿਆਰੀ ਪੰਨਾ ਨੰਬਰ

Rdio ਦੁਆਰਾ ਪ੍ਰੇਰਿਤ ਸਧਾਰਨ ਪੰਨਾ ਨੰਬਰ, ਐਪਾਂ ਅਤੇ ਖੋਜ ਨਤੀਜਿਆਂ ਲਈ ਵਧੀਆ। ਵੱਡੇ ਬਲਾਕ ਨੂੰ ਮਿਸ ਕਰਨਾ ਔਖਾ ਹੈ, ਆਸਾਨੀ ਨਾਲ ਸਕੇਲੇਬਲ ਹੈ, ਅਤੇ ਵੱਡੇ ਕਲਿਕ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ" > 
  <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 ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ" > 
  <ul>
    <li ਕਲਾਸ = "ਅਯੋਗ" ><a href = "#" > « </a></li>  
    <li ਕਲਾਸ = "ਸਰਗਰਮ" ><a href = "#" > 1   </a></li>
    ...
  </ul>
</div>

ਤੁਸੀਂ ਇੱਛਤ ਸ਼ੈਲੀਆਂ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੇ ਹੋਏ ਕਲਿਕ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਹਟਾਉਣ ਲਈ ਸਪੈਨ ਲਈ ਕਿਰਿਆਸ਼ੀਲ ਜਾਂ ਅਯੋਗ ਐਂਕਰਾਂ ਨੂੰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਸਵੈਪ ਕਰ ਸਕਦੇ ਹੋ।

<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ" > 
  <ul>
    <li ਕਲਾਸ = "ਅਯੋਗ" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

ਆਕਾਰ

ਫੈਨਸੀ ਵੱਡਾ ਜਾਂ ਛੋਟਾ ਪੰਨਾ ਨੰਬਰ? .pagination-large, .pagination-small, ਜਾਂ .pagination-miniਵਾਧੂ ਆਕਾਰਾਂ ਲਈ ਜੋੜੋ ।

<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ ਪੰਨਾ-ਵੱਡਾ" > 
  <ul>
    ...
  </ul>
</div>
<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ" > 
  <ul>
    ...
  </ul>
</div>
<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ ਪੰਨਾ-ਸਮਾਲ" > 
  <ul>
    ...
  </ul>
</div>
<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ ਪੰਨਾ-ਮੰਨੀ" > 
  <ul>
    ...
  </ul>
</div>

ਅਲਾਈਨਮੈਂਟ

ਪੇਜਿਨੇਸ਼ਨ ਲਿੰਕਾਂ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਬਦਲਣ ਲਈ ਦੋ ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਇੱਕ ਸ਼ਾਮਲ ਕਰੋ: .pagination-centeredਅਤੇ .pagination-right.

<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ ਪੰਨਾ-ਕੇਂਦਰਿਤ" > 
  ...
</div>

<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ ਪੰਨਾ-ਸੱਜਾ" > 
  ...
</div>

ਪੇਜਰ

ਹਲਕੇ ਮਾਰਕਅੱਪ ਅਤੇ ਸਟਾਈਲ ਦੇ ਨਾਲ ਸਧਾਰਨ ਪੰਨਾਬੰਦੀ ਲਾਗੂ ਕਰਨ ਲਈ ਤੇਜ਼ ਪਿਛਲੇ ਅਤੇ ਅਗਲੇ ਲਿੰਕ। ਬਲੌਗ ਜਾਂ ਮੈਗਜ਼ੀਨਾਂ ਵਰਗੀਆਂ ਸਧਾਰਨ ਸਾਈਟਾਂ ਲਈ ਇਹ ਬਹੁਤ ਵਧੀਆ ਹੈ।

ਡਿਫੌਲਟ ਉਦਾਹਰਨ

ਮੂਲ ਰੂਪ ਵਿੱਚ, ਪੇਜ਼ਰ ਲਿੰਕਾਂ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।

<ul class = "ਪੇਜਰ" > 
  <li><a href = "#" > ਪਿਛਲਾ </a></li> 
  <li><a href = "#" > ਅੱਗੇ </a></li> 
</ul>

ਇਕਸਾਰ ਲਿੰਕ

ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਹਰੇਕ ਲਿੰਕ ਨੂੰ ਪਾਸਿਆਂ ਨਾਲ ਇਕਸਾਰ ਕਰ ਸਕਦੇ ਹੋ:

<ul class = "ਪੇਜਰ" > 
  <li ਕਲਾਸ = "ਪਿਛਲਾ" > 
    <a href = "#" > ← ਪੁਰਾਣੀ </a> 
  </li>
  <li ਕਲਾਸ = "ਅਗਲਾ" > 
    <a href = "#" > ਨਵੇਂ → </a> 
  </li>
</ul>

ਵਿਕਲਪਿਕ ਅਯੋਗ ਸਥਿਤੀ

ਪੇਜਰ ਲਿੰਕ ਪੰਨਾਬੰਦੀ .disabledਤੋਂ ਆਮ ਉਪਯੋਗਤਾ ਸ਼੍ਰੇਣੀ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰਦੇ ਹਨ।

<ul class = "ਪੇਜਰ" > 
  <li ਕਲਾਸ = "ਪਿਛਲੀ ਅਯੋਗ" > 
    <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>`

ਆਸਾਨੀ ਨਾਲ ਸਮੇਟਣਯੋਗ

ਆਸਾਨ ਲਾਗੂ ਕਰਨ ਲਈ, ਲੇਬਲ ਅਤੇ ਬੈਜ ਸਿਰਫ਼ (CSS ਦੇ :emptyਚੋਣਕਾਰ ਦੁਆਰਾ) ਢਹਿ ਜਾਣਗੇ ਜਦੋਂ ਅੰਦਰ ਕੋਈ ਸਮੱਗਰੀ ਮੌਜੂਦ ਨਹੀਂ ਹੈ।

ਹੀਰੋ ਯੂਨਿਟ

ਤੁਹਾਡੀ ਸਾਈਟ 'ਤੇ ਮੁੱਖ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕ ਹਲਕਾ, ਲਚਕੀਲਾ ਹਿੱਸਾ। ਇਹ ਮਾਰਕੀਟਿੰਗ ਅਤੇ ਸਮੱਗਰੀ-ਭਾਰੀ ਸਾਈਟਾਂ 'ਤੇ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ.

ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ!

ਇਹ ਇੱਕ ਸਧਾਰਨ ਹੀਰੋ ਯੂਨਿਟ ਹੈ, ਵਿਸ਼ੇਸ਼ ਸਮੱਗਰੀ ਜਾਂ ਜਾਣਕਾਰੀ 'ਤੇ ਵਾਧੂ ਧਿਆਨ ਦੇਣ ਲਈ ਇੱਕ ਸਧਾਰਨ ਜੰਬੋਟ੍ਰੋਨ-ਸ਼ੈਲੀ ਦਾ ਹਿੱਸਾ ਹੈ।

ਜਿਆਦਾ ਜਾਣੋ

<div ਕਲਾਸ = "ਹੀਰੋ-ਯੂਨਿਟ" > 
  <h1> ਸਿਰਲੇਖ </h1>
  <p> ਟੈਗਲਾਈਨ </ p>
  <p>
    <a ਕਲਾਸ = "btn btn-ਪ੍ਰਾਇਮਰੀ btn-large" > 
      ਜਿਆਦਾ ਜਾਣੋ
    </a>
  </p>
</div>

ਪੰਨਾ ਸਿਰਲੇਖ

h1ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਮੱਗਰੀ ਦੇ ਭਾਗਾਂ ਨੂੰ ਉਚਿਤ ਤੌਰ 'ਤੇ ਬਾਹਰ ਕੱਢਣ ਅਤੇ ਭਾਗਾਂ ਨੂੰ ਵੰਡਣ ਲਈ ਇੱਕ ਸਧਾਰਨ ਸ਼ੈੱਲ । ਇਹ h1ਦੇ ਡਿਫਾਲਟ small, ਐਲੀਮੈਂਟ ਦੇ ਨਾਲ-ਨਾਲ ਜ਼ਿਆਦਾਤਰ ਹੋਰ ਭਾਗਾਂ (ਵਾਧੂ ਸਟਾਈਲ ਦੇ ਨਾਲ) ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ।

<div ਕਲਾਸ = "ਪੰਨਾ-ਸਿਰਲੇਖ" > 
  <h1> ਉਦਾਹਰਨ ਪੰਨਾ ਸਿਰਲੇਖ <small> ਸਿਰਲੇਖ ਲਈ ਸਬਟੈਕਸਟ </small></h1>
</div>

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਥੰਬਨੇਲ

ਮੂਲ ਰੂਪ ਵਿੱਚ, ਬੂਟਸਟਰੈਪ ਦੇ ਥੰਬਨੇਲ ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੇ ਮਾਰਕਅੱਪ ਨਾਲ ਲਿੰਕ ਕੀਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਤਿਆਰ ਕੀਤੇ ਗਏ ਹਨ।

ਬਹੁਤ ਜ਼ਿਆਦਾ ਅਨੁਕੂਲਿਤ

ਥੋੜ੍ਹੇ ਜਿਹੇ ਵਾਧੂ ਮਾਰਕਅੱਪ ਦੇ ਨਾਲ, ਥੰਬਨੇਲ ਵਿੱਚ ਕਿਸੇ ਵੀ ਕਿਸਮ ਦੀ HTML ਸਮੱਗਰੀ ਜਿਵੇਂ ਸਿਰਲੇਖਾਂ, ਪੈਰਿਆਂ ਜਾਂ ਬਟਨਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਸੰਭਵ ਹੈ।

ਥੰਬਨੇਲ ਲੇਬਲ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ਕਾਰਵਾਈ ਕਾਰਵਾਈ
ਥੰਬਨੇਲ ਲੇਬਲ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ਕਾਰਵਾਈ ਕਾਰਵਾਈ
ਥੰਬਨੇਲ ਲੇਬਲ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ਕਾਰਵਾਈ ਕਾਰਵਾਈ

ਥੰਬਨੇਲ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰੀਏ

ਥੰਬਨੇਲ (ਪਹਿਲਾਂ .media-gridv1.4 ਤੱਕ) ਫੋਟੋਆਂ ਜਾਂ ਵੀਡੀਓਜ਼, ਚਿੱਤਰ ਖੋਜ ਨਤੀਜਿਆਂ, ਪ੍ਰਚੂਨ ਉਤਪਾਦਾਂ, ਪੋਰਟਫੋਲੀਓ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦੇ ਗਰਿੱਡ ਲਈ ਵਧੀਆ ਹਨ। ਉਹ ਲਿੰਕ ਜਾਂ ਸਥਿਰ ਸਮੱਗਰੀ ਹੋ ਸਕਦੇ ਹਨ।

ਸਧਾਰਨ, ਲਚਕਦਾਰ ਮਾਰਕਅੱਪ

ਥੰਬਨੇਲ ਮਾਰਕਅੱਪ ਸਰਲ ਹੈ— ulਕਿਸੇ ਵੀ ਸੰਖਿਆ ਦੇ liਤੱਤਾਂ ਵਾਲਾ ਉਹ ਸਭ ਕੁਝ ਹੈ ਜੋ ਲੋੜੀਂਦਾ ਹੈ। ਇਹ ਬਹੁਤ ਹੀ ਲਚਕਦਾਰ ਵੀ ਹੈ, ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਸਮੇਟਣ ਲਈ ਥੋੜਾ ਹੋਰ ਮਾਰਕਅੱਪ ਦੇ ਨਾਲ ਕਿਸੇ ਵੀ ਕਿਸਮ ਦੀ ਸਮੱਗਰੀ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਗਰਿੱਡ ਕਾਲਮ ਆਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ

ਅੰਤ ਵਿੱਚ, ਥੰਬਨੇਲ ਕੰਪੋਨੈਂਟ ਮੌਜੂਦਾ ਗਰਿੱਡ ਸਿਸਟਮ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ-ਜਿਵੇਂ .span2ਜਾਂ.span3 ਥੰਬਨੇਲ ਮਾਪਾਂ ਦੇ ਨਿਯੰਤਰਣ

ਮਾਰਕਅੱਪ

ਜਿਵੇਂ ਕਿ ਪਹਿਲਾਂ ਦੱਸਿਆ ਗਿਆ ਹੈ, ਥੰਬਨੇਲ ਲਈ ਲੋੜੀਂਦਾ ਮਾਰਕਅੱਪ ਹਲਕਾ ਅਤੇ ਸਿੱਧਾ ਹੈ। ਲਿੰਕਡ ਚਿੱਤਰਾਂ ਲਈ ਡਿਫੌਲਟ ਸੈੱਟਅੱਪ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਹੈ :

<ul class = "ਥੰਬਨੇਲ" > 
  <li ਕਲਾਸ = "span4" > 
    <a href = "#" ਕਲਾਸ = "ਥੰਬਨੇਲ" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

ਥੰਬਨੇਲ ਵਿੱਚ ਕਸਟਮ HTML ਸਮੱਗਰੀ ਲਈ, ਮਾਰਕਅੱਪ ਥੋੜ੍ਹਾ ਬਦਲਦਾ ਹੈ। <a>ਬਲਾਕ ਪੱਧਰ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਕਿਤੇ ਵੀ ਆਗਿਆ ਦੇਣ ਲਈ, ਅਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਦੀ ਪਸੰਦ ਲਈ ਸਵੈਪ ਕਰਦੇ <div>ਹਾਂ:

<ul class = "ਥੰਬਨੇਲ" > 
  <li ਕਲਾਸ = "span4" > 
    <div ਕਲਾਸ = "ਥੰਬਨੇਲ" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> ਥੰਬਨੇਲ ਲੇਬਲ </h3>
      <p> ਥੰਬਨੇਲ ਸੁਰਖੀ... </p>
    </div>
  </li>
  ...
</ul>

ਹੋਰ ਉਦਾਹਰਣਾਂ

ਤੁਹਾਡੇ ਲਈ ਉਪਲਬਧ ਵੱਖ-ਵੱਖ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਆਪਣੇ ਸਾਰੇ ਵਿਕਲਪਾਂ ਦੀ ਪੜਚੋਲ ਕਰੋ। ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਆਕਾਰਾਂ ਨੂੰ ਵੀ ਮਿਕਸ ਅਤੇ ਮੈਚ ਕਰ ਸਕਦੇ ਹੋ।

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਚੇਤਾਵਨੀ

.alertਇੱਕ ਬੁਨਿਆਦੀ ਚੇਤਾਵਨੀ ਚੇਤਾਵਨੀ ਸੁਨੇਹੇ ਲਈ ਕਿਸੇ ਵੀ ਟੈਕਸਟ ਅਤੇ ਇੱਕ ਵਿਕਲਪਿਕ ਖਾਰਜ ਬਟਨ ਨੂੰ ਲਪੇਟੋ ।

ਚੇਤਾਵਨੀ! ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਚੰਗੇ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ।

<div ਕਲਾਸ = "ਅਲਰਟ" > 
  <button type = "button" class = "close" data- dismisss = "alert" > × </ ਬਟਨ>   
  <strong> ਚੇਤਾਵਨੀ! </strong> ਸਭ ਤੋਂ ਵਧੀਆ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਵਧੀਆ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ।
</div>

ਖਾਰਜ ਬਟਨ

ਮੋਬਾਈਲ ਸਫਾਰੀ ਅਤੇ ਮੋਬਾਈਲ ਓਪੇਰਾ ਬ੍ਰਾਊਜ਼ਰ, data-dismiss="alert"ਵਿਸ਼ੇਸ਼ਤਾ ਤੋਂ ਇਲਾਵਾ, ਇੱਕ ਟੈਗ href="#"ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਚੇਤਾਵਨੀਆਂ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਇੱਕ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।<a>

<a href = "#" ਕਲਾਸ = "close" data-dismiss = "alert" > × </a>

ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ <button>ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਸ ਨੂੰ ਅਸੀਂ ਆਪਣੇ ਡੌਕਸ ਲਈ ਚੁਣਿਆ ਹੈ। ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ <button>, ਤੁਹਾਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ type="button"ਹੈ ਜਾਂ ਤੁਹਾਡੇ ਫਾਰਮ ਜਮ੍ਹਾਂ ਨਹੀਂ ਹੋ ਸਕਦੇ।

<button type = "button" class = "close" data- dismisss = "alert" > × </ ਬਟਨ>

JavaScript ਰਾਹੀਂ ਚੇਤਾਵਨੀਆਂ ਨੂੰ ਖਾਰਜ ਕਰੋ

ਚੇਤਾਵਨੀਆਂ ਨੂੰ ਤੁਰੰਤ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਬਰਖਾਸਤ ਕਰਨ ਲਈ ਚੇਤਾਵਨੀਆਂ jQuery ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

ਵਿਕਲਪ

ਲੰਬੇ ਸੁਨੇਹਿਆਂ ਲਈ, ਅਲਰਟ ਰੈਪਰ ਦੇ ਉੱਪਰ ਅਤੇ ਹੇਠਾਂ ਪੈਡਿੰਗ ਨੂੰ ਜੋੜ ਕੇ ਵਧਾਓ .alert-block।

ਚੇਤਾਵਨੀ!

ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਚੰਗੇ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ। ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ। Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div ਕਲਾਸ = "ਅਲਰਟ ਅਲਰਟ-ਬਲਾਕ" > 
  <button type = "button" class = "close" data- dismisss = "alert" > × </ ਬਟਨ>   
  <h4> ਚੇਤਾਵਨੀ! </h4>
  ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਨਹੀਂ ਹੋ ...
</div>

ਸੰਦਰਭੀ ਵਿਕਲਪ

ਚੇਤਾਵਨੀ ਦੇ ਅਰਥ ਬਦਲਣ ਲਈ ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ।

ਗਲਤੀ ਜਾਂ ਖ਼ਤਰਾ

ਓ ਸਨੈਪ! ਕੁਝ ਚੀਜ਼ਾਂ ਨੂੰ ਬਦਲੋ ਅਤੇ ਦੁਬਾਰਾ ਸਪੁਰਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

<div ਕਲਾਸ = "ਅਲਰਟ ਚੇਤਾਵਨੀ-ਗਲਤੀ" > 
  ...
</div>

ਸਫਲਤਾ

ਬਹੁਤ ਖੂਬ! ਤੁਸੀਂ ਇਸ ਮਹੱਤਵਪੂਰਨ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਪੜ੍ਹ ਲਿਆ ਹੈ।

<div ਕਲਾਸ = "ਅਲਰਟ ਚੇਤਾਵਨੀ-ਸਫਲਤਾ" > 
  ...
</div>

ਜਾਣਕਾਰੀ

ਸਿਰ! ਇਸ ਚੇਤਾਵਨੀ ਨੂੰ ਤੁਹਾਡੇ ਧਿਆਨ ਦੀ ਲੋੜ ਹੈ, ਪਰ ਇਹ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹੈ।

<div ਕਲਾਸ = "ਸੂਚਨਾ ਚੇਤਾਵਨੀ-ਜਾਣਕਾਰੀ" > 
  ...
</div>

ਉਦਾਹਰਨਾਂ ਅਤੇ ਮਾਰਕਅੱਪ

ਮੂਲ

ਇੱਕ ਲੰਬਕਾਰੀ ਗਰੇਡੀਐਂਟ ਨਾਲ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤਰੱਕੀ ਪੱਟੀ।

<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 60 %; " ></div>   
</div>

ਧਾਰੀਦਾਰ

ਇੱਕ ਧਾਰੀਦਾਰ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਇੱਕ ਗਰੇਡੀਐਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। IE7-8 ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।

<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ ਤਰੱਕੀ-ਧਾਰੀਦਾਰ" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 20 %; " ></div>   
</div>

ਐਨੀਮੇਟਡ

ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਪੱਟੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਵਿੱਚ .activeਸ਼ਾਮਲ ਕਰੋ । .progress-stripedIE ਦੇ ਸਾਰੇ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।

<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ ਪ੍ਰਗਤੀ-ਧਾਰੀਦਾਰ ਕਿਰਿਆਸ਼ੀਲ" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 40 %; " ></div>   
</div>

ਸਟੈਕਡ

.progressਉਹਨਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਲਈ ਕਈ ਬਾਰਾਂ ਨੂੰ ਇੱਕੋ ਵਿੱਚ ਰੱਖੋ ।

<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ" > 
  <div ਕਲਾਸ = "ਬਾਰ ਬਾਰ-ਸਫਲਤਾ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 35 %; " ></div>   
  <div ਕਲਾਸ = "ਬਾਰ ਬਾਰ-ਵਾਰਨਿੰਗ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 20 %; " ></div>   
  <div ਕਲਾਸ = "ਬਾਰ ਬਾਰ-ਖਤਰਾ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 10 %; " ></div>   
</div>

ਵਿਕਲਪ

ਵਾਧੂ ਰੰਗ

ਪ੍ਰਗਤੀ ਬਾਰ ਇਕਸਾਰ ਸਟਾਈਲ ਲਈ ਕੁਝ ਸਮਾਨ ਬਟਨ ਅਤੇ ਚੇਤਾਵਨੀ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ ਪ੍ਰਗਤੀ-ਜਾਣਕਾਰੀ" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 20 % " ></div>   
</div>
<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ ਤਰੱਕੀ-ਸਫਲਤਾ" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 40 % " ></div>   
</div>
<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ ਪ੍ਰਗਤੀ-ਚੇਤਾਵਨੀ" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 60 % " ></div>   
</div>
<div ਕਲਾਸ = "ਤਰੱਕੀ ਤਰੱਕੀ-ਖ਼ਤਰਾ" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 80 % " ></div>   
</div>

ਧਾਰੀਦਾਰ ਬਾਰ

ਠੋਸ ਰੰਗਾਂ ਦੇ ਸਮਾਨ, ਸਾਡੇ ਕੋਲ ਵੱਖੋ-ਵੱਖਰੇ ਸਟ੍ਰਿਪਡ ਪ੍ਰੋਗਰੈਸ ਬਾਰ ਹਨ।

<div class = "progress progress-info progress-striped" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 60 % " ></div>   
</div>
<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ ਤਰੱਕੀ-ਖਤਰੇ ਦੀ ਤਰੱਕੀ-ਧਾਰੀ" > 
  <div ਕਲਾਸ = "ਬਾਰ" ਸ਼ੈਲੀ = " ਚੌੜਾਈ : 80 % " ></div>   
</div>

ਬਰਾਊਜ਼ਰ ਸਹਿਯੋਗ

ਪ੍ਰੋਗਰੈਸ ਬਾਰ ਆਪਣੇ ਸਾਰੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ CSS3 ਗਰੇਡੀਐਂਟ, ਪਰਿਵਰਤਨ, ਅਤੇ ਐਨੀਮੇਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ IE7-9 ਜਾਂ ਫਾਇਰਫਾਕਸ ਦੇ ਪੁਰਾਣੇ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 10 ਅਤੇ ਓਪੇਰਾ 12 ਤੋਂ ਪਹਿਲਾਂ ਵਾਲੇ ਸੰਸਕਰਣ ਐਨੀਮੇਸ਼ਨਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ।

ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਭਾਗਾਂ (ਜਿਵੇਂ ਕਿ ਬਲੌਗ ਟਿੱਪਣੀਆਂ, ਟਵੀਟਸ, ਆਦਿ) ਨੂੰ ਬਣਾਉਣ ਲਈ ਐਬਸਟ੍ਰੈਕਟ ਆਬਜੈਕਟ ਸ਼ੈਲੀਆਂ ਜੋ ਪਾਠ ਸਮੱਗਰੀ ਦੇ ਨਾਲ-ਨਾਲ ਇੱਕ ਖੱਬੇ- ਜਾਂ ਸੱਜੇ-ਸੰਗਠਿਤ ਚਿੱਤਰ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਕਰਦੀਆਂ ਹਨ।

ਡਿਫੌਲਟ ਉਦਾਹਰਨ

ਡਿਫੌਲਟ ਮੀਡੀਆ ਇੱਕ ਮੀਡੀਆ ਆਬਜੈਕਟ (ਚਿੱਤਰਾਂ, ਵੀਡੀਓ, ਆਡੀਓ) ਨੂੰ ਇੱਕ ਸਮੱਗਰੀ ਬਲਾਕ ਦੇ ਖੱਬੇ ਜਾਂ ਸੱਜੇ ਪਾਸੇ ਫਲੋਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਮੀਡੀਆ ਸਿਰਲੇਖ

ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ। Fusce condimentum nunc ac nisi vulputate fringilla. ਫੌਸੀਬਸ ਵਿੱਚ ਡੋਨੇਕ ਲੈਸੀਨੀਆ ਕੋਂਗੂ ਫੈਲਿਸ।

ਮੀਡੀਆ ਸਿਰਲੇਖ

<div ਕਲਾਸ = "ਮੀਡੀਆ" > 
  <a ਕਲਾਸ = "ਖਿੱਚੋ-ਖੱਬੇ" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div ਕਲਾਸ = "ਮੀਡੀਆ-ਬਾਡੀ" > 
    <h4 ਕਲਾਸ = "ਮੀਡੀਆ-ਸਿਰਲੇਖ" > ਮੀਡੀਆ ਸਿਰਲੇਖ </h4> 
    ...
 
    <!-- ਨੇਸਟਡ ਮੀਡੀਆ ਆਬਜੈਕਟ -->
    <div ਕਲਾਸ = "ਮੀਡੀਆ" > 
      ...
    </div>
  </div>
</div>

ਮੀਡੀਆ ਸੂਚੀ

ਥੋੜ੍ਹੇ ਜਿਹੇ ਵਾਧੂ ਮਾਰਕਅੱਪ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਸੂਚੀ ਦੇ ਅੰਦਰ ਮੀਡੀਆ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ (ਟਿੱਪਣੀ ਥ੍ਰੈਡਾਂ ਜਾਂ ਲੇਖ ਸੂਚੀਆਂ ਲਈ ਉਪਯੋਗੀ)।

ਮੀਡੀਆ ਸਿਰਲੇਖ

ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।

ਨੇਸਟਡ ਮੀਡੀਆ ਸਿਰਲੇਖ
ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।

ਨੇਸਟਡ ਮੀਡੀਆ ਸਿਰਲੇਖ
ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।

ਨੇਸਟਡ ਮੀਡੀਆ ਸਿਰਲੇਖ
ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।
ਮੀਡੀਆ ਸਿਰਲੇਖ
ਕ੍ਰਾਸ ਬੈਠ ਅਮੇਤ ਨਿਭ ਲਿਬੇਰੋ, ਗਰਵਿਡਾ ਨੱਲਾ ਵਿੱਚ। Nulla vel metus scelerisque ante sollicitudin commodo. ਕ੍ਰਾਸ ਪਰਸ ਓਡੀਓ, ਵੈਸਟੀਬੁਲਮ ਇਨ ਵੁਲਪੁਟੇਟ ਐਟ, ਟੈਂਪਸ ਵਿਵੇਰਾ ਟਰਪੀਸ।

<ul class = "ਮੀਡੀਆ-ਸੂਚੀ" > 
  <li ਕਲਾਸ = "ਮੀਡੀਆ" > 
    <a ਕਲਾਸ = "ਖਿੱਚੋ-ਖੱਬੇ" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div ਕਲਾਸ = "ਮੀਡੀਆ-ਬਾਡੀ" > 
      <h4 ਕਲਾਸ = "ਮੀਡੀਆ-ਸਿਰਲੇਖ" > ਮੀਡੀਆ ਸਿਰਲੇਖ </h4> 
      ...
 
      <!-- ਨੇਸਟਡ ਮੀਡੀਆ ਆਬਜੈਕਟ -->
      <div ਕਲਾਸ = "ਮੀਡੀਆ" > 
        ...
     </div>
    </div>
  </li>
</ul>

ਖੂਹ

ਇਸ ਨੂੰ ਇੱਕ ਇਨਸੈੱਟ ਪ੍ਰਭਾਵ ਦੇਣ ਲਈ ਇੱਕ ਤੱਤ 'ਤੇ ਇੱਕ ਸਧਾਰਨ ਪ੍ਰਭਾਵ ਦੇ ਰੂਪ ਵਿੱਚ ਖੂਹ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਦੇਖੋ, ਮੈਂ ਇੱਕ ਖੂਹ ਵਿੱਚ ਹਾਂ!

<div ਕਲਾਸ = "ਚੰਗੀ" > 
  ...
</div>

ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ

ਦੋ ਵਿਕਲਪਿਕ ਸੋਧਕ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਪੈਡਿੰਗ ਅਤੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਕੰਟਰੋਲ ਕਰੋ।

ਦੇਖੋ, ਮੈਂ ਇੱਕ ਖੂਹ ਵਿੱਚ ਹਾਂ!

<div ਕਲਾਸ = "ਚੰਗੀ ਤਰ੍ਹਾਂ ਨਾਲ-ਵੱਡਾ" > 
  ...
</div>

ਦੇਖੋ, ਮੈਂ ਇੱਕ ਖੂਹ ਵਿੱਚ ਹਾਂ!

<div class = " well well-small " > 
  ...
</div>

ਬੰਦ ਕਰੋ ਆਈਕਨ

ਮਾਡਲਾਂ ਅਤੇ ਚੇਤਾਵਨੀਆਂ ਵਰਗੀ ਸਮੱਗਰੀ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਆਮ ਬੰਦ ਆਈਕਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।

<button class = "close" > × </ ਬਟਨ>

ਆਈਓਐਸ ਡਿਵਾਈਸਾਂ ਨੂੰ href="#"ਕਲਿੱਕ ਇਵੈਂਟਾਂ ਲਈ ਇੱਕ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਐਂਕਰ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ।

<a ਕਲਾਸ = "close" href = "#" > × </a>

ਸਹਾਇਕ ਕਲਾਸਾਂ

ਛੋਟੇ ਡਿਸਪਲੇ ਜਾਂ ਵਿਵਹਾਰ ਟਵੀਕਸ ਲਈ ਸਧਾਰਨ, ਫੋਕਸਡ ਕਲਾਸਾਂ।

.ਖਿੱਚੋ-ਖੱਬੇ

ਇੱਕ ਤੱਤ ਖੱਬੇ ਫਲੋਟ ਕਰੋ

ਕਲਾਸ = "ਖੱਬੇ ਪਾਸੇ ਖਿੱਚੋ"

. ਖਿੱਚੋ - ਖੱਬੇ {
  ਫਲੋਟ : ਖੱਬੇ ;
}

.ਸੱਜਾ ਖਿੱਚੋ

ਕਿਸੇ ਤੱਤ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਫਲੋਟ ਕਰੋ

ਕਲਾਸ = "ਸੱਜਾ ਖਿੱਚੋ"

. ਖਿੱਚੋ - ਸੱਜੇ {
  ਫਲੋਟ : ਸੱਜਾ ;
}

.ਮਿਊਟ

ਕਿਸੇ ਤੱਤ ਦਾ ਰੰਗ ਇਸ ਵਿੱਚ ਬਦਲੋ#999

ਕਲਾਸ = "ਮਿਊਟ"

. ਚੁੱਪ {
  ਰੰਗ : #999; 
}

.clearfix

floatਕਿਸੇ ਵੀ ਤੱਤ 'ਤੇ ਸਾਫ਼ ਕਰੋ

ਕਲਾਸ = "ਕਲੀਅਰਫਿਕਸ"

. ਕਲੀਅਰਫਿਕਸ {
  * ਜ਼ੂਮ : 1 ; 
  &: ਪਹਿਲਾਂ ,
  &: ਬਾਅਦ {
    ਡਿਸਪਲੇ : ਟੇਬਲ ;
    ਸਮੱਗਰੀ : "" ; 
  }
  &: ਬਾਅਦ {
    ਸਪਸ਼ਟ : ਦੋਵੇਂ ;
  }
}

ਡ੍ਰੌਪਡਾਊਨ ਮੀਨੂ

ਉਦਾਹਰਨ

ਮਾਰਕਅੱਪ

ਵਿਕਲਪ

ਮੇਨੂ ਨੂੰ ਇਕਸਾਰ ਕਰਨਾ

ਅਯੋਗ ਮੀਨੂ ਵਿਕਲਪ

ਡ੍ਰੌਪਡਾਊਨ 'ਤੇ ਉਪ ਮੀਨੂ

ਬਟਨ ਸਮੂਹ

ਉਦਾਹਰਨਾਂ

ਸਿੰਗਲ ਬਟਨ ਸਮੂਹ

ਕਈ ਬਟਨ ਸਮੂਹ

ਵਰਟੀਕਲ ਬਟਨ ਸਮੂਹ

ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਸੁਆਦ

ਬਟਨ ਸਮੂਹਾਂ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ

ਬਟਨ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ

ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਅਤੇ ਉਦਾਹਰਣ

ਸਾਰੇ ਬਟਨ ਅਕਾਰ ਦੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ

JavaScript ਦੀ ਲੋੜ ਹੈ

ਸਪਲਿਟ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ

ਆਕਾਰ

ਡ੍ਰੌਪਅੱਪ ਮੇਨੂ

Nav: ਟੈਬਾਂ, ਗੋਲੀਆਂ, ਅਤੇ ਸੂਚੀਆਂ

ਲਾਈਟਵੇਟ ਡਿਫੌਲਟ ਸਮਾਨ ਮਾਰਕਅੱਪ, ਵੱਖ-ਵੱਖ ਕਲਾਸਾਂ

ਮੂਲ ਟੈਬਾਂ

ਬੁਨਿਆਦੀ ਗੋਲੀਆਂ

ਅਪਾਹਜ ਸਥਿਤੀ

ਕੰਪੋਨੈਂਟ ਅਲਾਈਨਮੈਂਟ

ਸਟੈਕਬਲ

ਸਟੈਕਡ ਟੈਬਾਂ

ਸਟੈਕਡ ਗੋਲੀਆਂ

ਡ੍ਰੌਪਡਾਊਨ

ਡ੍ਰੌਪਡਾਊਨ ਵਾਲੀਆਂ ਟੈਬਾਂ

ਡਰਾਪਡਾਊਨ ਦੇ ਨਾਲ ਗੋਲੀਆਂ

Nav ਸੂਚੀਆਂ

ਉਦਾਹਰਨ nav ਸੂਚੀ

ਹਰੀਜੱਟਲ ਡਿਵਾਈਡਰ

Tabbable nav

ਟੇਬਲ ਉਦਾਹਰਨ

ਟੈਬਾਂ ਵਿੱਚ ਫੇਡ

jQuery ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੈ

ਕਿਸੇ ਵੀ ਦਿਸ਼ਾ ਵਿੱਚ ਟੇਬਲ

ਹੇਠਾਂ ਟੈਬਾਂ

ਖੱਬੇ ਪਾਸੇ ਟੈਬਾਂ

ਸੱਜੇ ਪਾਸੇ ਟੈਬਾਂ

ਨਵਬਾਰ

ਮੂਲ ਨਵਬਾਰ

ਨਵਬਾਰ ਦੇ ਹਿੱਸੇ

ਬ੍ਰਾਂਡ

ਨਵ ਲਿੰਕ

ਫਾਰਮ

ਖੋਜ ਫਾਰਮ

ਕੰਪੋਨੈਂਟ ਅਲਾਈਨਮੈਂਟ

ਡ੍ਰੌਪਡਾਊਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਟੈਕਸਟ

ਵਿਕਲਪਿਕ ਡਿਸਪਲੇ ਭਿੰਨਤਾਵਾਂ

ਸਿਖਰ 'ਤੇ ਸਥਿਰ

ਥੱਲੇ ਤੱਕ ਸਥਿਰ

ਸਥਿਰ ਸਿਖਰ ਨਵਬਾਰ

ਜਵਾਬਦੇਹ ਨਵਬਾਰ

ਉਲਟੀ ਪਰਿਵਰਤਨ

ਰੋਟੀ ਦੇ ਟੁਕੜੇ

ਉਦਾਹਰਨਾਂ

ਪੰਨਾਬੰਦੀ ਸਮੱਗਰੀ ਦੁਆਰਾ ਪੇਜਿੰਗ ਲਈ ਦੋ ਵਿਕਲਪ

ਮਿਆਰੀ ਪੰਨਾ ਨੰਬਰ

ਵਿਕਲਪ

ਅਯੋਗ ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਰਾਜ

ਆਕਾਰ

ਅਲਾਈਨਮੈਂਟ

ਪੇਜਰ

ਡਿਫੌਲਟ ਉਦਾਹਰਨ

ਇਕਸਾਰ ਲਿੰਕ

ਵਿਕਲਪਿਕ ਅਯੋਗ ਸਥਿਤੀ

ਲੇਬਲ ਅਤੇ ਬੈਜ

ਲੇਬਲ

ਬੈਜ

ਆਸਾਨੀ ਨਾਲ ਸਮੇਟਣਯੋਗ

ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਭਾਗ

ਹੀਰੋ ਯੂਨਿਟ

ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ!

ਪੰਨਾ ਸਿਰਲੇਖ