ਕੋਰਸ ਸਿਫਾਰਸ਼

Bootstrap 5 ਵਾਰਨਿੰਗ

ਵਾਰਨਿੰਗ

Bootstrap 5 ਨੇ ਪ੍ਰਿਫਾਰਮ ਵਾਲੀ ਵਾਰਨਿੰਗ ਸੁਨੇਹੇ ਬਣਾਉਣ ਲਈ ਇੱਕ ਸਰਲ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕੀਤਾ ਹੈ:

  • ਵਾਰਨਿੰਗ ਬਕਸ ਨੂੰ .alert ਕਲਾਸ ਦੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਫਿਰ ਨਾਲੋਂ ਕਿਸੇ ਵੀ ਕਲਾਸ ਨੂੰ ਜੋੜੋ:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

ਉਦਾਹਰਣ

<div class="alert alert-success">
  <strong>ਸਫਲ! </strong>ਇਹ ਵਾਰਨਿੰਗ ਬਕਸ ਸਫਲ ਜਾਂ ਹਾਂਪੱਖੀ ਕਾਰਵਾਈ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ。
</div>

ਆਪਣੇ ਹੀ ਮੰਨੋ ਕਰੋ

.alert-dark

ਵਾਰਨਿੰਗ ਲਿੰਕ .alert-link ਵਾਰਨਿੰਗ ਬਕਸ ਵਿੱਚ ਕਿਸੇ ਵੀ ਲਿੰਕ ਵਿੱਚ ਜੋੜੋ ਤਾਂ "ਮੇਲ ਵਾਲਾ ਰੰਗ ਲਿੰਕ" ਬਣਾ ਸਕਦੇ ਹਨ:

ਉਦਾਹਰਣ

<div class="alert alert-success">
  <strong>ਸਫਲ! </strong>ਤੁਸੀਂ ਇਹ ਸੁਨੇਹਾ <a href="#" class="alert-link">ਪੜ੍ਹਨਾ ਚਾਹੀਦਾ ਹੈ</a>。
</div>

ਆਪਣੇ ਹੀ ਮੰਨੋ ਕਰੋ

ਬੰਦ ਕਰੋ

ਵਾਰਨਿੰਗ ਸੁਨੇਹੇ ਬੰਦ ਕਰਨ ਲਈ .alert-dismissible ਵਾਰਨਿੰਗ ਕੰਟੇਨਰ ਵਿੱਚ ਜੋੜੋ। ਫਿਰ class="btn-close" ਅਤੇ data-bs-dismiss="alert" ਲਿੰਕ ਜਾਂ ਬਟਨ ਐਲੀਮੈਂਟ ਵਿੱਚ ਜੋੜੋ (ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਨੂੰ ਕਲਿੱਕ ਕਰੋ ਤਾਂ ਵਾਰਨਿੰਗ ਬਕਸ ਬੰਦ ਹੋ ਜਾਵੇਗੀ)。

ਉਦਾਹਰਣ

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>ਸਫਲ! </strong>ਇਹ ਵਾਰਨਿੰਗ ਬਕਸ ਸਫਲ ਜਾਂ ਹਾਂਪੱਖੀ ਕਾਰਵਾਈ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ。
</div>

ਆਪਣੇ ਹੀ ਮੰਨੋ ਕਰੋ

ਵਾਰਨਿੰਗ ਬਕਸ ਐਨੀਮੇਸ਼ਨ

.fade ਅਤੇ .show ਵਾਰਨਿੰਗ ਸੁਨੇਹੇ ਬੰਦ ਕਰਨ ਲਈ ਫੇਡ ਇਨ ਫੇਡ ਐਫੈਕਟ ਜੋੜੋ:

ਉਦਾਹਰਣ

<div class="alert alert-danger alert-dismissible fade show">

ਆਪਣੇ ਹੀ ਮੰਨੋ ਕਰੋ