بوت اسپرینگ 5 آف کینواس

Offcanvas (ਫਾਨਕਸ)

Offcanvas (ਫਾਨਕਸ) ਮੋਡਲ (ਮੂਲਤਬੀ ਛੁਪਾਇਆ ਹੋਇਆ ਅਤੇ ਸਰਗਰਮ ਹੋਣ ਉੱਤੇ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ) ਨਾਲ ਸਮਾਨ ਹੈ, ਪਰ ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਸਾਈਡਬਾਰ ਨੇਵੀਗੇਸ਼ਨ ਮੇਨੂ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਕਿਵੇਂ Offcanvas ਬਣਾਇਆ ਜਾਵੇ

ਹੇਠ ਦਿੱਤਾ ਉਦਾਹਰਣ ਨਾਲ offcanvas ਸਾਈਡਬਾਰ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਦਿਸਾਇਆ ਗਿਆ ਹੈ:

ਇੱਕ ਉਦਾਹਰਣ

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">ਸਿਰਲੇਖ</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>ਕੁਝ ਲੇਖ। ਕੁਝ ਲੇਖ। ਕੁਝ ਲੇਖ।</p>
    <p>ਕੁਝ ਲੇਖ। ਕੁਝ ਲੇਖ। ਕੁਝ ਲੇਖ।</p>
    <button class="btn btn-secondary" type="button">按钮</button>
  </div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Offcanvas ਸਾਈਡਬਾਰ ਖੋਲ੍ਹੋ
</button>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ ਸਪਸ਼ਟੀਕਰਣ

.offcanvas ਵਿਸ਼ੇਸ਼ਤਾ offcanvas ਸਾਈਡਬਾਰ ਬਣਾਉਂਦੀ ਹੈ。

.offcanvas-start ਵਿਸ਼ੇਸ਼ਤਾ ਸਥਿਤੀ ਨੂੰ offcanvas ਵਿੱਚ ਸਥਾਪਿਤ ਕਰਦੀ ਹੈ ਅਤੇ ਇਸ ਦੀ ਚੌਡਾਈ ਨੂੰ 400px ਸੈੱਟ ਕਰਦੀ ਹੈ। ਹੋਰ ਸਥਿਤੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਦੇਖੋ。

.offcanvas-title ਵਿਸ਼ੇਸ਼ਤਾ ਯੁਕਤੀ ਸਹੀ ਬਾਹਰੀ ਘੱਟੀ ਅਤੇ ਲਾਈਨ ਹਾਈਟ ਯੁਕਤੀ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੀ ਹੈ。

ਫਿਰ, ਤੁਸੀਂ ਆਪਣੀ ਸਮਗਰੀ ਜੋੜੋ .offcanvas-body ਵਿੱਚ ਵਰਤਣਾ ਹੋਵੇਗਾ。

ਜੇਕਰ ਤੁਸੀਂ offcanvas ਸਾਈਡਬਾਰ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ <button> ਜਾਂ <a> ਵਿਸ਼ੇਸ਼ਤਾ ਦਿਸ਼ਾ .offcanvas ਕੰਟੇਨਰ ਦਾ id (ਸਾਡੇ ਉਦਾਹਰਣ ਵਿੱਚ ਇਹ #demo）。

ਜੇਕਰ ਤੁਸੀਂ ਇਸਤੇਮਾਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ <a> ਐਲੀਮੈਂਟ ਦਾ offcanvas ਸਾਈਡਬਾਰ ਖੋਲ੍ਹਦਾ ਹੈ, ਤੁਸੀਂ href ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਥਾਂ ਨਾਲ ਵਰਤ ਸਕਦੇ ਹੋ data-bs-target ਵਿਸ਼ੇਸ਼ਤਾ ਦਿਸ਼ਾ #demo。

Offcanvas ਸਥਿਤੀ

ਕਿਰਪਾ ਕਰਕੇ ਇਸਤੇਮਾਲ ਕਰੋ .offcanvas-start|end|top|bottom offcanvas ਨੂੰ ਸੱਜੇ, ਸੱਦੇ, ਉੱਪਰ ਜਾਂ ਨੀਚੇ ਸਥਿਤ ਕਰੋ:

ਸੱਜੇ ਇੰਸਟੈਂਸ

<div class="offcanvas offcanvas-end" id="demo">

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਉੱਪਰ ਇੰਸਟੈਂਸ

<div class="offcanvas offcanvas-top" id="demo">

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਨੀਚੇ ਇੰਸਟੈਂਸ

<div class="offcanvas offcanvas-bottom" id="demo">

ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ