آموزش هشدارها در بوت استرپ: ساخت پیام های هشدار کاربردی و واکنش گرا

0 دیدگاه

در این بخش هشدارها در بوت استرپ را بررسی می‌کنیم. این قابلیت یکی از مفاهیم پایه در آموزش بوت استرپ است و معمولاً در طراحی رابط‌های کاربری تعاملی استفاده می‌شود. هشدارها معمولاً به صورت برجسته ظاهر می‌شوند و کاربر باید نسبت به آن‌ها واکنشی نشان دهد؛ مانند پیام‌های هشدار، خطا، اطلاع‌رسانی یا تأیید عملیات.

برای ساخت پیام‌های هشدار، ابتدا از کلاس پایه .alert استفاده کنید و سپس با افزودن کلاس‌های زمینه‌ای مانند .alert-success، .alert-warning، .alert-info و …، هشدارهایی زیبا و متناسب با نیاز طراحی خود ایجاد کنید. همچنین در صورت نیاز می‌توانید یک دکمه بستن نیز اضافه کنید تا کاربر بتواند پیام را ببندد.

هشدارهای ساده

بوت استرپ مجموعاً ۸ نوع مختلف از هشدارها را ارائه می‌دهد. از میان آن‌ها، پیام موفقیت، پیام خطا، هشدار و پیام‌های اطلاعاتی جزو رایج‌ترین نوع هشدارها هستند. مثال زیر نحوه استفاده از این هشدارها را نمایش می‌دهد:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h4 class="fs-2">Examples of alert messages</h4>
            <div class="alert alert-primary" role="alert">
                It is a primary alert box!
            </div>
            <div class="alert alert-secondary" role="alert">
                It is a secondary alert box!
            </div>
            <div class="alert alert-success" role="alert">
                It is a success alert box!
            </div>
            <div class="alert alert-danger" role="alert">
                It is a danger alert box!
            </div>
            <div class="alert alert-warning" role="alert">
                It is a warning alert box!
            </div>
            <div class="alert alert-info" role="alert">
                It is an info alert box!
            </div>
            <div class="alert alert-light" role="alert">
                It is a light alert box!
            </div>
            <div class="alert alert-dark" role="alert">
                It is a dark alert box!
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Alerts</title>

</head>

<body>

<h4 class="fs-2">Examples of alert messages</h4>

It is a primary alert box!

</div>

It is a secondary alert box!

</div>

It is a success alert box!

</div>

It is a danger alert box!

</div>

It is a warning alert box!

</div>

It is an info alert box!

</div>

It is a light alert box!

</div>

It is a dark alert box!

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

نکته‌ای درباره دسترسی‌پذیری: استفاده از رنگ در پیام‌های هشدار تنها یک نشانه بصری ایجاد می‌کند، و این موضوع برای کاربرانی که از فناوری‌های کمکی مانند صفحه‌خوان (Screen Reader) استفاده می‌کنند مفید نخواهد بود. بنابراین اطمینان حاصل کنید که مفهوم پیام تنها از طریق محتوا نیز قابل درک باشد، نه فقط از طریق رنگ‌ها.

برای افزایش وضوح محتوا، می‌توانید از روش‌های جایگزین مانند استفاده از کلاس .visually-hidden بهره بگیرید تا اطلاعات مهم به صورت غیر بصری نیز در دسترس قرار گیرد.

مثال هشدار زنده (Live Alert)

شما می‌توانید در صفحه وب خود پیام هشدار زنده ایجاد کنید. برای انجام این کار، به مثال زیر توجه کنید:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Bootstrap - Alerts</title>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>        
        </head>
        <body>
            <div class="container mt-3">
                <h4 class="fs-2">Live alert</h4>
                <div class="alert alert-primary alert-dismissible" role="alert">
                    <div id="liveAlertPlaceholder"></div>
                    <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
                </div>
            </div>
            <script>
                const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
                const appendAlert = (message, type) => {
                const wrapper = document.createElement('div')
                wrapper.innerHTML = [
                `<div class="alert alert-${type} alert-dismissible" role="alert">`,
                `   <div>${message}</div>`,
                '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
                '</div>'
                ].join('')
                alertPlaceholder.append(wrapper)
                }
                const alertTrigger = document.getElementById('liveAlertBtn')
                if (alertTrigger) {
                    alertTrigger.addEventListener('click', () => {
                    appendAlert('Amazing, this is a live alert message!', 'success')
                    })
                    }
            </script>
      </body>

<!DOCTYPE html>

<head>

<title>Bootstrap - Alerts</title>

</head>

<body>

<h4 class="fs-2">Live alert</h4>

<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

</div>

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const appendAlert = (message, type) => {

const wrapper = document.createElement('div')

wrapper.innerHTML = [

`<div class="alert alert-${type} alert-dismissible" role="alert">`,

` <div>${message}</div>`,

' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',

'</div>'

].join('')

alertPlaceholder.append(wrapper)

}

const alertTrigger = document.getElementById('liveAlertBtn')

if (alertTrigger) {

alertTrigger.addEventListener('click', () => {

appendAlert('Amazing, this is a live alert message!', 'success')

})

}

</script>

</body>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

کد جاوااسکریپت زیر در مثال بالا برای فعال‌سازی هشدار زنده استفاده شده است:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
            const appendAlert = (message, type) => {
            const wrapper = document.createElement('div')
            wrapper.innerHTML = [
            ``,
            `   ${message}`,
            '   ',
            ''
            ].join('')
              alertPlaceholder.append(wrapper)
            }
            const alertTrigger = document.getElementById('liveAlertBtn')
            if (alertTrigger) {
                alertTrigger.addEventListener('click', () => {
                appendAlert('Amazing, this is a live alert message!', 'success')
                 })
                }

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const appendAlert = (message, type) => {

const wrapper = document.createElement('div')

wrapper.innerHTML = [

``,

` ${message}`,

' ',

].join('')

alertPlaceholder.append(wrapper)

}

const alertTrigger = document.getElementById('liveAlertBtn')

if (alertTrigger) {

alertTrigger.addEventListener('click', () => {

appendAlert('Amazing, this is a live alert message!', 'success')

})

}

رنگ لینک در بوت استرپ

می‌توانید از کلاس کاربردی .alert-link در داخل هر پیام هشدار استفاده کنید تا لینک‌ها به‌صورت خودکار با رنگ هشدار هماهنگ شوند و جلوه‌ای یکپارچه داشته باشند. مثال زیر این قابلیت را به‌خوبی نشان می‌دهد.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h4 class="fs-2">Alert messages with links</h4>
            <div class="alert alert-primary" role="alert">
                It is a primary alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>
            </div>
            <div class="alert alert-secondary" role="alert">
                It is a secondary alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>
            </div>
            <div class="alert alert-success" role="alert">
                It is a success alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>
            </div>
            <div class="alert alert-danger" role="alert">
                It is a danger alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>
            </div>
            <div class="alert alert-warning" role="alert">
                It is a warning alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>
            </div>
        </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Alerts</title>

</head>

<body>

<h4 class="fs-2">Alert messages with links</h4>

It is a primary alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>

</div>

It is a secondary alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>

</div>

It is a success alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>

</div>

It is a danger alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>

</div>

It is a warning alert with <a href="https://www.sourcebaran.com/" class="alert-link">sourcebaran.com</a>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

محتوای اضافه در پیام هشدار بوت استرپ

در پیام‌های هشدار می‌توانید از عناصر HTML اضافی مانند تیترها (headers)، پاراگراف‌ها و جداکننده‌ها (dividers) نیز استفاده کنید. مثال زیر نحوه استفاده از این عناصر در یک هشدار را نشان می‌دهد.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h4 class="fs-2">Alert messages with additional content</h4>
            <div class="alert alert-success" role="alert">
                <h4 class="alert-heading">Congratulations! Sending my best wishes.</h4>
                <p>Congratulations on your graduation! Sending you our best wishes for a happy and successful future.</p>
                <hr>
                <p class="mb-0">What could be better than something sweet to celebrate an accomplishment!!!</p>
              </div>
        </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Alerts</title>

</head>

<body>

<h4 class="fs-2">Alert messages with additional content</h4>

<h4 class="alert-heading">Congratulations! Sending my best wishes.</h4>

<p>Congratulations on your graduation! Sending you our best wishes for a happy and successful future.</p>

<hr>

<p class="mb-0">What could be better than something sweet to celebrate an accomplishment!!!</p>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

هشدار با آیکون در بوت استرپ

برای ایجاد پیام‌های هشدار که شامل آیکون هستند، می‌توانید از ابزارهای فلکس باکس و آیکون‌های بوت استرپ استفاده کنید.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h4 class="fs-2">Alert messages with icons</h4>
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <symbol id="success-bg" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </symbol>
                <symbol id="info-bg" viewBox="0 0 16 16">
                  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                </symbol>
                <symbol id="warning-bg" viewBox="0 0 16 16">
                  <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                </symbol>
            </svg>
            <div class="alert alert-primary d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-bg"/></svg>
                <div>
                  It is an info alert with an info icon.
                </div>
            </div>
            <div class="alert alert-success d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#success-bg"/></svg>
                <div>
                  It is a success alert with a success icon.
                </div>
            </div>
            <div class="alert alert-warning d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#warning-bg"/></svg>
                <div>
                  It is a warning alert with a warning icon.
                </div>
            </div>
            <div class="alert alert-danger d-flex align-items-center" role="alert">
                <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#warning-bg"/></svg>
                <div>
                  It is a danger alert with a danger icon.
                </div>
            </div>
        </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Alerts</title>

</head>

<body>

<h4 class="fs-2">Alert messages with icons</h4>

</symbol>

</symbol>

</symbol>

</svg>

<div>

It is an info alert with an info icon.

</div>

<div>

It is a success alert with a success icon.

</div>

<div>

It is a warning alert with a warning icon.

</div>

<div>

It is a danger alert with a danger icon.

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

بستن هشدارها در بوت استرپ

در بوت استرپ می‌توانید پیام‌های هشدار را به‌صورت درون‌خطی (inline) ببندید. برای این کار باید از افزونه جاوااسکریپت مربوط به هشدارها استفاده کنید. مراحل انجام این کار به صورت زیر است:

ابتدا فایل جاوااسکریپت بوت استرپ یا افزونه هشدار را در صفحه خود بارگذاری کنید و مطمئن شوید که به‌درستی عمل می‌کند.
دکمه بستن را به عنصر هشدار اضافه کنید و کلاس .alert-dismissible را نیز به آن اختصاص دهید. این کلاس، موقعیت مناسب دکمه را مشخص می‌کند و فضای کافی از سمت راست هشدار در اختیارش قرار می‌دهد.

برای فعال کردن عملکرد بستن، ویژگی data-bs-dismiss="alert" را به دکمه بستن اضافه کنید.

در مثال زیر، نحوه استفاده از این ویژگی را مشاهده می‌کنید.

اگر پس از بستن پیام هشدار، قصد دارید فوکوس را روی یک عنصر غیرتعاملی (مانند یک div یا span) قرار دهید که به طور پیش‌فرض قابلیت دریافت فوکوس ندارد، حتماً ویژگی tabindex="-1" را به آن عنصر اضافه کنید.
در غیر این صورت، ممکن است فوکوس از بین برود و کاربر به ابتدای صفحه بازگردد، که تجربه کاربری نامناسبی ایجاد می‌کند.

هشدارهای انیمیشنی

برای افزودن افکت انیمیشن هنگام بسته شدن پیام هشدار، از دو کلاس کاربردی .fade و .show استفاده کنید.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Alerts</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
        <h4 class="fs-2">Alert messages with animation</h4>
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <strong>Primary Alert Box!</strong> This will close the alert box with fading effect.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>Success Alert Box!</strong> This will close the alert box with fading effect.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>Warning Alert Box!</strong> This will close the alert box with fading effect.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
  </body>
</html>