Hongmu Notes
Home Language Notes bootstrap5 warning box
Language Notes Bootstrap

bootstrap5 warning box

bootstrap5 warning box

html code part

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">显示警告框(alert)</button>

js part

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}
微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

Bootstrap5 container document translation

Bootstrap5 container document translation Language Notes Bootstrap

Containers are the fundamental building blocks of Bootstrap; they are used to contain, fill, and align content within a specific device or viewport. Containers are the most basic layout elements in Bootstrap and are essential when using our default grid system. They are used to hold, fill, and (sometimes) center content. While containers can be nested, most layouts do not require nested containers. Bootstrap comes with three types of containers...
👁 190
Use of bootstrap5 accordion

Use of bootstrap5 accordion Language Notes Bootstrap

Parent Container: Class name: `accordion`; ID: `accordionExample` – The `data-bs-parent` attribute of the child accordion container must match the ID of the parent container. Child Item: Class name: `accordion-item`; Child Item Header: Class name: `Accordion-header`; ID: `headingOne`; The `aria-label` attribute of the child item content container...
👁 174
Summary of commonly used Bootstrap 5 form `pattern` attribute

Summary of commonly used Bootstrap 5 form `pattern` attribute Language Notes Bootstrap

Summary of commonly used Bootstrap 5 form `pattern` attribute: **Text input field validation**: Validates whether the value entered into a text input field matches a specified regular expression. For example, `pattern= "[a-zA-Z]{3,}$" ` ensures that the string contains at least 3 letters, and the last character cannot be a digit or a space. **Password input field validation**: Validates whether the value entered into a password input field matches a specified regular expression. For example,...
👁 339

Recommended reading

Responsive tea set sales website template 1192

Responsive tea set sales website template 1192 Practical Collection Yiyou template

This EyouCMS responsive template is ideal for the tea and tea ware sales industry. Its classical and elegant design is perfect for showcasing tea products, tea ceremony culture, brand stories, and sales information. It helps tea brands effectively present their products online and attract tea enthusiasts. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS...
👁 35
Responsive tea beverage sales website template – 1193

Responsive tea beverage sales website template – 1193 Practical Collection Yiyou template

An EyouCMS responsive website template designed for the tea and tea beverage sales industry. Its fresh and elegant design is ideal for showcasing tea products, brand stories, tea culture, and sales information. This template helps tea beverage brands effectively present their products online and attract consumers. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS...
👁 58
Responsive food and pastry business website template – 1194

Responsive food and pastry business website template – 1194 Practical Collection Yiyou template

This EyouCMS responsive template is ideal for food and pastry businesses. Its warm and inviting design is perfect for showcasing pastries, brand stories, product ranges, and franchise information. It helps baking brands attract consumers and franchisees online while enhancing their brand awareness. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS...
👁 51
Resource website typecho001 template

Resource website typecho001 template Program Notes Typecho

typecho001 template template please do not modify the folder name of this template. The folder name is: typecho001 1.4 Fix the js output problem on the article page 1.3 Fix the error prompt when the plug-in is not installed Optimize the list page code output 1.2 Fix the comment function and add a custom homepage title 1.1 Fix the comment reply asymmetry function Add a separate title setting function on the homepage Add the website favicon.ico icon Add one...
👁 198
Responsive premium imported alcoholic beverage website template – 1195

Responsive premium imported alcoholic beverage website template – 1195 Practical Collection Yiyou template

An eYouCMS responsive website template designed for the premium imported alcoholic beverages industry. Its luxurious and high-end design enables effective presentation of imported beverage products, brand stories, tasting experiences, and business partnership opportunities. This template helps beverage traders attract high-end consumers and distributors online. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for eYouCMS | eYouCMS...
👁 47
Modification of typecho paging style

Modification of typecho paging style Program Notes Typecho

Sir, times have changed! Typecho is currently the most perfect solution, because Baidu can only see the code of fixed thinking. The actual generated HTML code is breathtakingly clean and fully customized, including adding classes to the li element, adding classes to the a element, adding classes to the previous page and next page, and removing the li tags that come with typecho to express more. I can even add some text to the content inside...
👁 516