집 >웹 프론트엔드 >부트스트랩 튜토리얼 >Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)
Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)
- 青灯夜游앞으로
- 2021-12-08 19:19:555733검색
Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? 다음 글에서는 Bootstrap5의 Toast 메시지 Toasts 컴포넌트 사용법을 소개하겠습니다.
1 토스트 예시
토스트는 모바일 및 데스크톱 운영 체제에서 널리 사용되는 푸시 알림을 모방하도록 설계된 가벼운 알림입니다. Flexbox로 제작되어 정렬 및 위치 지정이 쉽습니다. [관련 추천: "부트스트랩 튜토리얼"]
팝업 프롬프트처럼 토스트 메시지도 자체적으로 초기화해야 하는데 공식 홈페이지의 초기화 방법이 왜 유효하지 않은지 알 수 없습니다. 해외사이트에서 가능한 방법입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
<div id="liveToast" class="toast hide" data-bs-animation="false" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>吐司消息提示</strong>
<small>11 mins ago</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
你有一条短消息！
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html> "163896212712802Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)")
2 옵션 설정
옵션은 데이터 속성이나 JavaScript를 통해 전달될 수 있습니다. 데이터 속성의 경우 data-bs-animation=""와 같이 data-bs-에 옵션 이름을 추가합니다.
- data-bs-animation="true"는 토스트에 CSS 페이드 전환 효과를 적용합니다.
- data-bs-autohide="true"는 토스트를 자동으로 숨깁니다.
- data-bs-delay="5000", 지연된 토스트 5s 숨기기( 기본 단위는 milliseconds)
위 값은 기본값입니다. 연마 효과에 만족한다면 전혀 작성할 필요가 없습니다. 27.3.1 예제에서는 data-bs-autohide를 설정했습니다. ="false" 스크린샷 촬영이 편리하도록 토스트를 자동으로 숨기지 않도록 설정되어 있습니다. 그렇지 않으면 마우스를 아무 곳이나 클릭하는 한 메시지 상자가 사라집니다.
3 반투명
토스트도 반투명할 수 있으므로 어떤 음식과도 잘 어울립니다. CSS 속성인 background-filter를 지원하는 브라우저는 토스트 아래의 요소를 흐리게 처리하려고 시도합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>半透明吐司</strong>
<small>11 mins ago</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
你有一条短消息！
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html>
4 쌓기
는 토스트를 toast-container용기에 포장하여 수직 간격을 추가하여 수행할 수 있습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn1">显示吐司消息1</button>
<button type="button" class="btn btn-primary" id="liveToastBtn2">显示吐司消息2</button>
<div>
<div id="toast1" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>吐司消息</strong>
<small>刚刚发送</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
第一条消息
</div>
</div>
<div id="toast2" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>吐司消息</strong>
<small>2分钟前</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
第二条消息
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn1").onclick = function() {
new bootstrap.Toast(document.querySelector('#toast1')).show();
}
document.querySelector("#liveToastBtn2").onclick = function() {
new bootstrap.Toast(document.querySelector('#toast2')).show();
}
</script>
</body>
</html> "163896215185633Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)")
5 사용자 정의 콘텐츠
하위 구성 요소를 제거하거나, 공통 클래스를 조정하거나, 마크업을 추가하여 알림을 사용자 정의하세요.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div role="alert" aria-live="assertive" aria-atomic="true">
<div>
邀请你穿越到三国！
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">接受邀请</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">关闭</button>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html>
6가지 색 구성표
위의 예를 바탕으로 색상 범용 카테고리를 통해 다양한 토스트 색 구성표를 만들 수도 있습니다. 다음으로 토스트에 bg-danger와 text-white를 추가한 다음 닫기 버튼에 text-white를 추가합니다. 가장자리를 명확하게 표시하기 위해 border-0을 통해 기본 테두리를 제거합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<div>
这里是红色背景的
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html> "163896216033913Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)")
7 표시 위치 설정
기본 토스트 메시지는 브라우저 오른쪽 하단에 표시됩니다. 필요에 따라 맞춤 CSS를 사용하여 토스트 위치를 지정하세요. 오른쪽 상단 모서리는 일반적으로 상단 중앙과 마찬가지로 알림에 사용됩니다. 한 번에 하나의 토스트만 표시하려면 토스트에 위치 지정 스타일을 추가하세요.
<form> <div class="mb-3"> <label for="selectToastPlacement">Toast placement</label> <select class="form-select mt-2" id="selectToastPlacement"> <option value="" selected>Select a position...</option> <option value="top-0 start-0">Top left</option> <option value="top-0 start-50 translate-middle-x">Top center</option> <option value="top-0 end-0">Top right</option> <option value="top-50 start-0 translate-middle-y">Middle left</option> <option value="top-50 start-50 translate-middle">Middle center</option> <option value="top-50 end-0 translate-middle-y">Middle right</option> <option value="bottom-0 start-0">Bottom left</option> <option value="bottom-0 start-50 translate-middle-x">Bottom center</option> <option value="bottom-0 end-0">Bottom right</option> </select> </div> </form> <div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts"> <div class="toast-container position-absolute p-3" id="toastPlacement"> <div class="toast"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> </div>
위는 공식 예입니다. Bootstrap5 Toasts이를 구동하는 js 코드를 찾지 못했습니다. 하지만 관심 있는 분들은 참고용으로 보시기 바랍니다. 여기서는 위의 코드를 기반으로 왼쪽 상단에 표시되도록 수정했습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div class="position-fixed top-0 start-0 p-3" style="z-index: 5">
<div id="liveToast" class="toast hide" data-bs-animation="false" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>吐司消息提示</strong>
<small>11 mins ago</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
你有一条短消息！
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html> "163896216588337Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)")
부트스트랩에 대한 자세한 내용을 보려면 부트스트랩 기본 튜토리얼을 방문하세요! !
위 내용은 Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제