ਉਦਾਹਰਨ

ਲਿੰਕਾਂ ਦੀਆਂ ਸੂਚੀਆਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਟੌਗਲ ਕਰਨ ਯੋਗ, ਪ੍ਰਸੰਗਿਕ ਮੀਨੂ। ਡ੍ਰੌਪਡਾਉਨ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨ ਨਾਲ ਇੰਟਰਐਕਟਿਵ ਬਣਾਇਆ ਗਿਆ ।

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

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

ਕੁਝ ਸਧਾਰਨ ਮਾਰਕਅੱਪ ਜੋੜਾਂ ਦੇ ਨਾਲ, 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" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </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>

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

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

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

ਸਿਰ! ਡ੍ਰੌਪਡਾਊਨ ਵਾਲੇ ਬਟਨਾਂ ਨੂੰ ਸਹੀ ਰੈਂਡਰਿੰਗ ਲਈ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਆਪਣੇ ਆਪ .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.

ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਲੋੜ ਹੈ

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

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

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

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

<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 ਲਈ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਕੋਈ ਹੋਵਰ ਪ੍ਰਭਾਵ ਨਹੀਂ । ਲਿੰਕ ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਰਹਿਣਗੇ, ਹਾਲਾਂਕਿ, ਜਦੋਂ ਤੱਕ ਉਹਨਾਂ ਕਲਿੱਕਾਂ ਨੂੰ ਰੋਕਣ ਲਈ ਕਸਟਮ ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਾਗੂ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ।

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

<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 ਪਲੱਗਇਨ ਦੁਆਰਾ ਸੰਚਾਲਿਤ ਹਨ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਡੌਕਸ ਪੰਨੇ 'ਤੇ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਕਿਵੇਂ ਲਿਆਉਣਾ ਹੈ ਇਸ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ।

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

ਹੇਠਾਂ ਟੈਬਾਂ

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>

ਮੂਲ ਨਵਬਾਰ

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

<div ਕਲਾਸ = "ਨਵਬਾਰ" > 
  <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ਇਸ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਇਕਸਾਰ ਕਰੋ।

<form class = "navbar-form pull-left" > 
  <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "span2" >  
  <button type = "submit" class = "btn" > ਸਪੁਰਦ ਕਰੋ </button>  
</form>

ਖੋਜ ਫਾਰਮ

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

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

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

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

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

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

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

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

ਟੈਕਸਟ

ਇੱਕ ਤੱਤ ਵਿੱਚ ਟੈਕਸਟ ਦੀਆਂ ਸਤਰਾਂ ਨੂੰ ਸਮੇਟਣਾ .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 ਕਲਾਸ = "ਨਵਬਾਰ" > 
  <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" > 
        <!-- .nav, .navbar-ਖੋਜ, .navbar-ਫਾਰਮ, ਆਦਿ -->
      </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 = "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 = "#" > ਅੱਗੇ </a></li> 
  </ul>
</div>

ਵਿਕਲਪ

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

ਲਿੰਕ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਲਈ ਅਨੁਕੂਲਿਤ ਹਨ। .disabledਅਣ-ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਲਿੰਕਾਂ ਅਤੇ .activeਮੌਜੂਦਾ ਪੰਨੇ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਵਰਤੋਂ ।

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

ਲੇਬਲ

ਬੈਜ

ਹੀਰੋ ਯੂਨਿਟ

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

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

ਪੰਨਾ ਸਿਰਲੇਖ

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

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

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

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

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

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

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

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

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

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

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

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

ਮਾਰਕਅੱਪ

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

<ul class = "ਥੰਬਨੇਲ" > 
  <li ਕਲਾਸ = "span4" > 
    <a href = "#" ਕਲਾਸ = "ਥੰਬਨੇਲ" >  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "ਥੰਬਨੇਲ" > 
  <li ਕਲਾਸ = "span4" > 
    <div ਕਲਾਸ = "ਥੰਬਨੇਲ" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> ਥੰਬਨੇਲ ਲੇਬਲ </h3>
      <p> ਥੰਬਨੇਲ ਸੁਰਖੀ... </p>
    </div>
  </li>
  ...
</ul>

ਹੋਰ ਉਦਾਹਰਣਾਂ

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

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

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

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

ਖਾਰਜ ਬਟਨ

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

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

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

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

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਚੇਤਾਵਨੀਆਂ ਨੂੰ ਖਾਰਜ ਕਰੋ

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

ਵਿਕਲਪ

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

<div ਕਲਾਸ = "ਅਲਰਟ ਅਲਰਟ-ਬਲਾਕ" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <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 ਤੋਂ ਪਹਿਲਾਂ ਵਾਲੇ ਸੰਸਕਰਣ ਐਨੀਮੇਸ਼ਨਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ।

ਖੂਹ

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

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

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

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

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

<div ਕਲਾਸ = " well well-small " > 
  ...
</div>

ਆਈਕਨ ਬੰਦ ਕਰੋ

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

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

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

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

ਸਹਾਇਕ ਕਲਾਸਾਂ

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

.ਖਿੱਚੋ-ਖੱਬੇ

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

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

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

.ਸੱਜਾ ਖਿੱਚੋ

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

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

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

.ਮਿਊਟ

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

ਕਲਾਸ = "ਮਿਊਟ"

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

.clearfix

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

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

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