ਬਟਨ ਸਮੂਹ

ਇੱਕ ਸੰਯੁਕਤ ਹਿੱਸੇ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕਠੇ ਕਈ ਬਟਨਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਬਟਨ ਸਮੂਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਲੜੀ <a>ਜਾਂ <button>ਤੱਤਾਂ ਨਾਲ ਬਣਾਓ।

ਵਧੀਆ ਅਭਿਆਸ

ਅਸੀਂ ਬਟਨ ਸਮੂਹਾਂ ਅਤੇ ਟੂਲਬਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ:

• ਇੱਕ ਸਿੰਗਲ ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਹਮੇਸ਼ਾਂ ਇੱਕੋ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ, <a>ਜਾਂ <button>.
• ਇੱਕੋ ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਰੰਗਾਂ ਦੇ ਬਟਨਾਂ ਨੂੰ ਨਾ ਮਿਲਾਓ।
• ਟੈਕਸਟ ਦੇ ਨਾਲ ਜਾਂ ਇਸ ਦੀ ਬਜਾਏ ਆਈਕਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਪਰ ਜਿੱਥੇ ਉਚਿਤ ਹੋਵੇ ਉੱਥੇ Alt ਅਤੇ ਸਿਰਲੇਖ ਟੈਕਸਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।

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

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

ਇਹ ਹੈ ਕਿ HTML ਐਂਕਰ ਟੈਗ ਬਟਨਾਂ ਨਾਲ ਬਣੇ ਸਟੈਂਡਰਡ ਬਟਨ ਸਮੂਹ ਨੂੰ ਕਿਵੇਂ ਵੇਖਦਾ ਹੈ:

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  <a ਕਲਾਸ = "btn" href = "#" > 1 </a>  
  <a ਕਲਾਸ = "btn" href = "#" > 2 </a>  
  <a ਕਲਾਸ = "btn" href = "#" > 3 </a>  
</div>

ਟੂਲਬਾਰ ਉਦਾਹਰਨ

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

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

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

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

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ »

ਸਿਰ

ਬਟਨ ਸਮੂਹਾਂ ਲਈ CSS ਇੱਕ ਵੱਖਰੀ ਫਾਈਲ ਵਿੱਚ ਹੈ, button-groups.less.

ਬਟਨ ਡਰਾਪਡਾਊਨ

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

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

ਉਦਾਹਰਨ ਮਾਰਕਅੱਪ

ਇੱਕ ਬਟਨ ਸਮੂਹ ਦੀ ਤਰ੍ਹਾਂ, ਸਾਡਾ ਮਾਰਕਅੱਪ ਨਿਯਮਤ ਬਟਨ ਮਾਰਕਅੱਪ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਪਰ ਸ਼ੈਲੀ ਨੂੰ ਸੁਧਾਰਨ ਅਤੇ ਬੂਟਸਟਰੈਪ ਦੇ ਡ੍ਰੌਪਡਾਉਨ jQuery ਪਲੱਗਇਨ ਨੂੰ ਸਮਰਥਨ ਦੇਣ ਲਈ ਮੁੱਠੀ ਭਰ ਜੋੜਾਂ ਨਾਲ।

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

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

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

ਉਦਾਹਰਨ ਮਾਰਕਅੱਪ

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

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

ਸ਼ਕਤੀਸ਼ਾਲੀ ਬੇਸ ਕਲਾਸ

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

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

ਟੈਬਸ ਅਤੇ ਗੋਲੀਆਂ ਸਮੱਗਰੀ ਦੇ ਭਾਗਾਂ ਜਾਂ ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ ਦੇ ਪੰਨਿਆਂ ਦੇ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਵਧੀਆ ਹਨ।

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

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

ਮੂਲ ਟੈਬਾਂ

ਨਿਯਮਤ <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>

ਉਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਸਟੈਕ ਕਰਨਾ ਹੈ

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

ਸਟੈਕਡ ਟੈਬਾਂ

• ਘਰ
• ਪ੍ਰੋਫਾਈਲ
• ਸੁਨੇਹੇ

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

ਸਟੈਕਡ ਗੋਲੀਆਂ

• ਘਰ
• ਪ੍ਰੋਫਾਈਲ
• ਸੁਨੇਹੇ

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

ਅਮੀਰ ਮੇਨੂ ਨੂੰ ਆਸਾਨ ਬਣਾਇਆ ਗਿਆ ਹੈ

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

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ ਸ਼ੁਰੂ ਕਰਨ ਬਾਰੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਪੜ੍ਹਨ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੰਨੇ 'ਤੇ ਜਾਓ ।

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

• ਘਰ
• ਪ੍ਰੋਫਾਈਲ
• ਡਰਾਪ ਡਾਉਨ
  • ਕਾਰਵਾਈ
  • ਇੱਕ ਹੋਰ ਕਾਰਵਾਈ
  • ਇੱਥੇ ਕੁਝ ਹੋਰ
  • ਵੱਖ ਕੀਤਾ ਲਿੰਕ

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

ਐਪਲੀਕੇਸ਼ਨ-ਸ਼ੈਲੀ ਨੈਵੀਗੇਸ਼ਨ

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

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

ਆਈਕਾਨਾਂ ਨਾਲ

ਆਈਕਾਨਾਂ ਨਾਲ ਲੈਸ ਕਰਨ ਲਈ Nav ਸੂਚੀਆਂ ਵੀ ਆਸਾਨ ਹਨ। ਕਲਾਸ ਦੇ ਨਾਲ ਸਹੀ <i>ਟੈਗ ਜੋੜੋ ਅਤੇ ਤੁਸੀਂ ਸੈੱਟ ਹੋ।

ਉਦਾਹਰਨ nav ਸੂਚੀ

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

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

ਆਈਕਾਨਾਂ ਨਾਲ ਉਦਾਹਰਨ

ਉਹੀ ਉਦਾਹਰਣ, ਪਰ <i>ਆਈਕਾਨਾਂ ਲਈ ਟੈਗਸ ਦੇ ਨਾਲ।

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i ਕਲਾਸ = "ਆਈਕਨ-ਬੁੱਕ" ></i> 
      ਲਾਇਬ੍ਰੇਰੀ
    </a>
  </li>
  ...
</ul>

ਕੀ ਸ਼ਾਮਲ ਹੈ

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

ਉਹਨਾਂ ਵਿਚਕਾਰ ਬਦਲਣਾ ਆਸਾਨ ਹੈ ਅਤੇ ਸਿਰਫ ਬਹੁਤ ਘੱਟ ਮਾਰਕਅੱਪ ਨੂੰ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ।

ਟੇਬਲ ਉਦਾਹਰਨ

.nav-tabsਟੈਬਾਂ ਨੂੰ ਟੈਬ ਕਰਨ ਯੋਗ ਬਣਾਉਣ ਲਈ, ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਹੋਰ ਡਿਵ ਵਿੱਚ ਲਪੇਟੋ .tabbable।

ਕਸਟਮ 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>

ਨਵਬਾਰ ਸਕੈਫੋਲਡਿੰਗ

ਨਵਬਾਰ ਨੂੰ ਸਥਿਰ ਜਾਂ ਸਥਿਰ ਡਿਸਪਲੇ ਲਈ ਇਸ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਬਣਾਉਣ ਲਈ ਸਿਰਫ ਕੁਝ ਡਿਵਜ਼ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div ਕਲਾਸ = "ਕੰਟੇਨਰ" > 
      ...
    </div>
  </div>
</div>

ਸਥਿਰ ਨਵਬਾਰ

ਨਵਬਾਰ ਨੂੰ ਵਿਊਪੋਰਟ ਦੇ ਸਿਖਰ 'ਤੇ ਫਿਕਸ ਕਰਨ ਲਈ, ਸਭ ਤੋਂ ਬਾਹਰੀ ਭਾਗ ਵਿੱਚ ਜੋੜੋ .navbar-fixed-top, .navbar.

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

ਤੁਹਾਡੇ CSS ਵਿੱਚ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਵਿੱਚ 40px ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ ਪੈਡਿੰਗ ਜੋੜ ਕੇ ਓਵਰਲੈਪ ਲਈ ਵੀ ਖਾਤਾ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੋਵੇਗੀ <body>। ਇਸ ਨੂੰ ਕੋਰ ਬੂਟਸਟਰੈਪ CSS ਤੋਂ ਬਾਅਦ ਅਤੇ ਵਿਕਲਪਿਕ ਜਵਾਬਦੇਹ CSS ਤੋਂ ਪਹਿਲਾਂ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ।

ਮਾਰਕਾ

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

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

ਖੋਜ ਫਾਰਮ

ਖੋਜ ਫਾਰਮ ਕਲਾਸ ਦੇ ਨਾਲ ਨਵਬਾਰ ਵਿੱਚ ਕਸਟਮ ਸਟਾਈਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ .navbar-search। ਇਸ ਨੂੰ ਇਕਸਾਰ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ .pull-leftਜਾਂ .pull-right'ਤੇ ।form

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

ਵਿਕਲਪਿਕ ਜਵਾਬਦੇਹ ਪਰਿਵਰਤਨ

ਤੁਹਾਡੀ ਟੌਪਬਾਰ ਵਿੱਚ ਸਮੱਗਰੀ ਦੀ ਮਾਤਰਾ ਦੇ ਆਧਾਰ 'ਤੇ, ਤੁਸੀਂ ਜਵਾਬਦੇਹ ਵਿਕਲਪਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਚਾਹ ਸਕਦੇ ਹੋ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਆਪਣੀ nav ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਰੱਖਣ ਵਾਲੇ div ਵਿੱਚ ਸਮੇਟਣਾ .nav-collapse.collapse, ਅਤੇ navbar ਟੌਗਲ ਬਟਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ .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 class = "brand" href = "#" > ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ </a>  
 
      <!-- ਹਰ ਚੀਜ਼ ਜੋ ਤੁਸੀਂ 940px ਜਾਂ ਇਸ ਤੋਂ ਘੱਟ 'ਤੇ ਲੁਕਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਇੱਥੇ ਰੱਖੋ -->
      <div class = "nav-collaps" > 
        <!-- .nav, .navbar-ਖੋਜ, .navbar-ਫਾਰਮ, ਆਦਿ -->
      </div>
 
    </div>
  </div>
</div>

ਨਵ ਲਿੰਕ

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

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

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

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

ਡ੍ਰੌਪਡਾਊਨ ਜੋੜ ਰਿਹਾ ਹੈ

ਨੈਵੀ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਜੋੜਨਾ ਬਹੁਤ ਸਰਲ ਹੈ, ਪਰ ਇਸ ਲਈ ਸਾਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੈ ।

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

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ →

ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰੀਏ

Breadcrumb ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇਹ ਦਿਖਾਉਣ ਦੇ ਤਰੀਕੇ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਉਹ ਇੱਕ ਐਪ ਜਾਂ ਸਾਈਟ ਦੇ ਅੰਦਰ ਕਿੱਥੇ ਹਨ, ਪਰ ਪ੍ਰਾਇਮਰੀ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਨਹੀਂ। ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੋਣ ਲਈ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਨੂੰ ਘੱਟ ਅਤੇ ਸੰਖੇਪ ਰੱਖੋ।

ਉਦਾਹਰਨਾਂ

ਇੱਕ ਸਿੰਗਲ ਉਦਾਹਰਨ ਦਿਖਾਈ ਗਈ ਹੈ ਕਿਉਂਕਿ ਇਹ ਕਈ ਪੰਨਿਆਂ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋ ਸਕਦੀ ਹੈ।

• ਘਰ

• ਘਰ /
• ਲਾਇਬ੍ਰੇਰੀ

• ਘਰ /
• ਲਾਇਬ੍ਰੇਰੀ /
• ਡਾਟਾ

ਮਾਰਕਅੱਪ

HTML ਲਿੰਕਾਂ ਦੇ ਨਾਲ ਤੁਹਾਡੀ ਮਿਆਰੀ ਕ੍ਰਮਬੱਧ ਸੂਚੀ ਹੈ।

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > ਘਰ </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > ਲਾਇਬ੍ਰੇਰੀ </a> <span class = "divider" > / </span>   
  </li>
  <li ਕਲਾਸ = "ਸਰਗਰਮ" > 
    <a href = "#" > ਡਾਟਾ </a> 
  </li>
</ul>

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

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

ਸਟੇਟਫੁਲ ਪੇਜ ਲਿੰਕ

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

ਲਚਕਦਾਰ ਅਲਾਈਨਮੈਂਟ

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

ਉਦਾਹਰਨਾਂ

ਡਿਫੌਲਟ ਪੇਜਿਨੇਸ਼ਨ ਕੰਪੋਨੈਂਟ ਲਚਕਦਾਰ ਹੁੰਦਾ ਹੈ ਅਤੇ ਕਈ ਭਿੰਨਤਾਵਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ।

ਮਾਰਕਅੱਪ

ਇੱਕ ਵਿੱਚ ਲਪੇਟਿਆ <div>, ਪੰਨਾ ਨੰਬਰ ਸਿਰਫ਼ ਇੱਕ ਹੈ <ul>।

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

ਪੇਜਰ ਬਾਰੇ

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

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

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

• ਪਿਛਲਾ
• ਅਗਲਾ

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

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

ਮਾਰਕਅੱਪ

ਆਪਣੀ ਸਮੱਗਰੀ ਨੂੰ divਇਸ ਤਰ੍ਹਾਂ ਲਪੇਟੋ:

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

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

<div ਕਲਾਸ = "ਪੇਜ-ਹੈਡਰ" > 
  <h1> ਉਦਾਹਰਨ ਪੰਨਾ ਸਿਰਲੇਖ </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.

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

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

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

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

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

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

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

ਮਾਰਕਅੱਪ

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

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

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

<ul class = "ਥੰਬਨੇਲ" > 
  <li ਕਲਾਸ = "span3" > 
    <div ਕਲਾਸ = "ਥੰਬਨੇਲ" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> ਥੰਬਨੇਲ ਲੇਬਲ </h5>
      <p> ਇੱਥੇ ਥੰਬਨੇਲ ਸੁਰਖੀ... </p>
    </div>
  </li>
  ...
</ul>

ਹੋਰ ਉਦਾਹਰਣਾਂ

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

ਮੁੜ ਲਿਖੀ ਬੇਸ ਕਲਾਸ

ਬੂਟਸਟਰੈਪ 2 ਦੇ ਨਾਲ, ਅਸੀਂ ਬੇਸ ਕਲਾਸ ਨੂੰ ਸਰਲ ਬਣਾਇਆ ਹੈ: .alertਦੀ ਬਜਾਏ .alert-message। ਅਸੀਂ ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੇ ਮਾਰਕਅੱਪ ਨੂੰ ਵੀ ਘਟਾ ਦਿੱਤਾ ਹੈ- <p>ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ, ਸਿਰਫ਼ ਬਾਹਰੀ <div>।

ਸਿੰਗਲ ਚੇਤਾਵਨੀ ਸੁਨੇਹਾ

ਘੱਟ ਕੋਡ ਵਾਲੇ ਵਧੇਰੇ ਟਿਕਾਊ ਹਿੱਸੇ ਲਈ, ਅਸੀਂ ਬਲਾਕ ਅਲਰਟ, ਸੁਨੇਹੇ ਜੋ ਵਧੇਰੇ ਪੈਡਿੰਗ ਅਤੇ ਆਮ ਤੌਰ 'ਤੇ ਵਧੇਰੇ ਟੈਕਸਟ ਦੇ ਨਾਲ ਆਉਂਦੇ ਹਨ, ਲਈ ਵੱਖ-ਵੱਖ ਦਿੱਖ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਹੈ। ਕਲਾਸ ਵੀ ਵਿੱਚ ਬਦਲ ਗਈ ਹੈ .alert-block।

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਨਾਲ ਬਹੁਤ ਵਧੀਆ ਚਲਦਾ ਹੈ

ਬੂਟਸਟਰੈਪ ਇੱਕ ਵਧੀਆ jQuery ਪਲੱਗਇਨ ਦੇ ਨਾਲ ਆਉਂਦਾ ਹੈ ਜੋ ਚੇਤਾਵਨੀ ਸੁਨੇਹਿਆਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਉਹਨਾਂ ਨੂੰ ਜਲਦੀ ਅਤੇ ਆਸਾਨ ਬਣਾ ਦਿੰਦਾ ਹੈ।

ਪਲੱਗਇਨ ਪ੍ਰਾਪਤ ਕਰੋ »

ਉਦਾਹਰਨ ਚੇਤਾਵਨੀਆਂ

ਸਧਾਰਨ ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਡਿਵ ਵਿੱਚ ਆਪਣਾ ਸੁਨੇਹਾ ਅਤੇ ਇੱਕ ਵਿਕਲਪਿਕ ਬੰਦ ਆਈਕਨ ਲਪੇਟੋ।

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

ਦੋ ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਮਿਆਰੀ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਵਧਾਓ: .alert-blockਵਧੇਰੇ ਪੈਡਿੰਗ ਅਤੇ ਟੈਕਸਟ ਨਿਯੰਤਰਣ ਅਤੇ .alert-headingਇੱਕ ਮੇਲ ਖਾਂਦੇ ਸਿਰਲੇਖ ਲਈ।

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

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

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

ਸਫਲਤਾ

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

ਜਾਣਕਾਰੀ

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

ਮੂਲ

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

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

ਧਾਰੀਦਾਰ

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

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

ਐਨੀਮੇਟਡ

ਧਾਰੀਦਾਰ ਉਦਾਹਰਣ ਲੈਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਐਨੀਮੇਟ ਕਰਦਾ ਹੈ।

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

ਵਾਧੂ ਰੰਗ

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

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

ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਘੱਟ ਫਾਈਲਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਖੁਦ ਦੇ ਰੰਗ ਅਤੇ ਆਕਾਰ ਰੋਲ ਕਰ ਸਕਦੇ ਹੋ।

ਵਿਵਹਾਰ

ਪ੍ਰਗਤੀ ਬਾਰ CSS3 ਪਰਿਵਰਤਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਇਸਲਈ ਜੇਕਰ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਚੌੜਾਈ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਵਿਵਸਥਿਤ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਆਸਾਨੀ ਨਾਲ ਮੁੜ ਆਕਾਰ ਦੇਵੇਗਾ।

ਜੇਕਰ ਤੁਸੀਂ .activeਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੀਆਂ .progress-stripedਪ੍ਰਗਤੀ ਪੱਟੀਆਂ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਪੱਟੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨਗੀਆਂ।

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

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

ਓਪੇਰਾ ਇਸ ਸਮੇਂ ਐਨੀਮੇਸ਼ਨਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ।

ਖੂਹ

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

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

ਬੈਜ

ਅਣ-ਪੜ੍ਹੀ ਗਿਣਤੀ ਲਈ ਜਾਂ ਇੱਕ ਸਧਾਰਨ ਸੂਚਕ ਵਜੋਂ ਕਿਸੇ ਤੱਤ 'ਤੇ ਬੈਜ ਦੀ ਵਰਤੋਂ ਕਰੋ।

<span ਕਲਾਸ = "ਬੈਜ" > 3 </div> 

ਬੰਦ ਕਰੋ ਆਈਕਨ

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

×

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