توست
زىيارەتچىلەرگە توست ، يېنىك ۋە ئاسان تەڭشىگىلى بولىدىغان ئاگاھلاندۇرۇش ئۇچۇرى بىلەن ئۇقتۇرۇش قىلىڭ.
توستلار كۆچمە ۋە ئۈستەل يۈزى مەشغۇلات سىستېمىسى تەرىپىدىن ئومۇملاشقان ئىتتىرىش ئۇقتۇرۇشىنى تەقلىد قىلىپ لايىھەلەنگەن يېنىك ئۇقتۇرۇش. ئۇلار ئەۋرىشىم ساندۇق بىلەن ياسالغان ، شۇڭا ئۇلارنى توغرىلاش ۋە ئورۇنلاشتۇرۇش ئاسان.
ئومۇمىي چۈشەنچە
توپا قىستۇرمىسىنى ئىشلەتكەندە بىلىشكە تېگىشلىك ئىشلار:
- ئەگەر JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇ
util.js
. - توپا ئىقتىدار سەۋەبىدىن تاللىنىدۇ ، شۇڭا چوقۇم ئۇلارنى ئۆزىڭىز باشلىشىڭىز كېرەك .
- شۇنىڭغا دىققەت قىلىڭكى ، توپا ئورنىتىشقا مەسئۇل.
- ئەگەر سىز بەلگىلىمىسىڭىز توست ئاپتوماتىك يوشۇرۇلىدۇ
autohide: false
.
prefers-reduced-motion
مېدىيا سوئالىغا باغلىق. قولايلىق ھۆججەتلىرىمىزنىڭ قىسقارتىلغان ھەرىكەت بۆلىكىنى كۆرۈڭ
.
مىساللار
Basic
كېڭەيتكىلى بولىدىغان ۋە ئالدىن پەرەز قىلغىلى بولىدىغان توستلارنى رىغبەتلەندۈرۈش ئۈچۈن ، باش ۋە بەدەننى تەۋسىيە قىلىمىز. قىستۇرما ماۋزۇلار ئىشلىتىلىدۇ display: flex
، بىزنىڭ پەرقىمىز ۋە ئەۋرىشىم ساندۇقىمىزنىڭ ياردىمى بىلەن مەزمۇننى ئاسان ماسلاشتۇرغىلى بولىدۇ.
توپا سىز ئېھتىياجلىق بولغاندەك جانلىق بولۇپ ، تەلەپ قىلىنغان بەلگە ئىنتايىن ئاز. ھېچ بولمىغاندا ، بىز بىر «ئېلېمېنت» مەزمۇنىنى ئۆز ئىچىگە ئالغان بىر ئېلېمېنتنى تەلەپ قىلىمىز ھەمدە ئىشتىن بوشىتىش كۇنۇپكىسىنى كۈچلۈك ئىلھاملاندۇرىمىز.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Live
تۆۋەندىكى كۇنۇپكىنى چېكىپ ، سۈكۈتتىكى ھالەتتە يوشۇرۇنغان توست (بىزنىڭ ئوڭ تەرەپ ئاستى بۇرجىكىمىزدە ئورنىتىلغان) كۆرسىتىلىدۇ .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
سۈزۈك
توستلار ئاستىدىكى نەرسىلەر بىلەن ئارىلاشتۇرۇش ئۈچۈن سەل سۈزۈك.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Stacking
سىزدە كۆپ قېتىم توستۇق بولغاندا ، ئۇلارنى ئوقۇش شەكلىدە تىك تىزىشقا سۈكۈت قىلىمىز.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
ئورۇنلاشتۇرۇش
لازىملىق CSS بىلەن توستلارنى قويۇڭ. ئۈستى ئوڭ تەرەپ دائىم ئۇقتۇرۇش ئۈچۈن ئىشلىتىلىدۇ. ئەگەر سىز پەقەت بىرلا قېتىمدا بىر تال توست كۆرسەتمەكچى بولسىڭىز ، ئورۇن بەلگىلەش ئۇسلۇبىنى ئوڭ تەرەپكە قويۇڭ .toast
.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
تېخىمۇ كۆپ ئۇقتۇرۇش ھاسىل قىلىدىغان سىستېمىلارغا ئوراش ئېلېمېنتىنى ئىشلىتىشنى ئويلاڭ ، ئۇلار ئاسانلا تىزىدۇ.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
<div style="position: absolute; top: 0; right: 0;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
سىز يەنە flexbox ئەسلىھەلىرى بىلەن توستنى توغرىسىغا ۋە ياكى تىك ھالەتتە توغرىلىيالايسىز.
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
قولايلىق
توست زىيارەتچىلىرىڭىز ياكى ئىشلەتكۈچىلىرىڭىزگە كىچىك دەخلى قىلىشنى مەقسەت قىلىدۇ ، شۇڭا ئېكران ئوقۇرمەنلىرى ۋە شۇنىڭغا ئوخشاش ياردەم تېخنىكىسى بارلارغا ياردەم قىلىش ئۈچۈن ، توستىڭىزنى بىر aria-live
رايونغا ئوراپ قويۇڭ . جانلىق رايونلارغا ئۆزگەرتىش (مەسىلەن ، توپا زاپچاسلىرىنى ئوكۇل ئۇرۇش ياكى يېڭىلاش دېگەندەك) ئېكران ئوقۇرمەنلىرى تەرىپىدىن ئاپتوماتىك ئېلان قىلىنىدۇ ، ئىشلەتكۈچىنىڭ دىققىتىنى يۆتكەش ياكى ئىشلەتكۈچىنى ئۈزۈشنىڭ ھاجىتى يوق. بۇنىڭدىن باشقا ، aria-atomic="true"
ئۆزگەرتىلگەن نەرسىنى ئېلان قىلىشتىن باشقا ، پۈتۈن توستنىڭ ھەمىشە يەككە (ئاتوم) بىرلىكى سۈپىتىدە ئېلان قىلىنىشىغا كاپالەتلىك قىلىڭ. كېيىنكى ۋاقىتلاردا). ئەگەر ئېھتىياجلىق ئۇچۇرلار بۇ جەرياندا مۇھىم بولسا ، مەسىلەن جەدۋەلدىكى خاتالىق تىزىملىكى ئۈچۈن ، ئۇنداقتا ئاگاھلاندۇرۇش قىسمىنى ئىشلىتىڭئۇنىڭ ئورنىغا.
شۇنىڭغا دىققەت قىلىڭكى ، توپا ھاسىل قىلىش ياكى يېڭىلاشتىن بۇرۇن نەق مەيدان رايوندا بولۇشى كېرەك . ئەگەر سىز ھەرىكەتچان ھالدا بىرلا ۋاقىتتا ھەر ئىككىسىنى ھاسىل قىلىپ ، ئۇلارنى بەتكە كىرگۈزسىڭىز ، ئۇلار ياردەمچى تېخنىكا ئارقىلىق ئېلان قىلىنمايدۇ.
سىز يەنە مەزمۇنغا ئاساسەن دەرىجىسىنى role
ۋە دەرىجىسىنى ماسلاشتۇرۇشىڭىز كېرەك. aria-live
ئەگەر خاتالىقتەك مۇھىم ئۇچۇر بولسا ، ئىشلىتىڭ role="alert" aria-live="assertive"
، بولمىسا role="status" aria-live="polite"
خاسلىق ئىشلىتىڭ.
سىز كۆرۈۋاتقان مەزمۇننىڭ ئۆزگىرىشىگە ئەگىشىپ ، delay
ۋاقىتنى يېڭىلاپ تۇرۇڭ ، بۇنداق بولغاندا ئابونتلارنىڭ توستنى ئوقۇغۇدەك ۋاقتى بار.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
ئىشلەتكەندە autohide: false
، چوقۇم تاقاش كۇنۇپكىسىنى قوشۇپ ، ئىشلەتكۈچىلەرنىڭ توپىنى بىكار قىلىشىغا يول قويۇڭ.
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
تېخنىكىلىق جەھەتتىن توستىڭىزغا فوكۇس توغرىلاش / ھەرىكەتچان كونترول قىلىش (قوشۇمچە كۇنۇپكىلار ياكى ئۇلىنىش دېگەندەك) قوشۇش مۇمكىن بولسىمۇ ، ئەمما ئاپتوماتىك ھەيدەش ئۈچۈن بۇنداق قىلىشتىن ساقلىنىشىڭىز كېرەك. delay
سىز بۇ توپىنى ئۇزۇن ۋاقىت بەرسىڭىزمۇ ، كۇنۇپكا تاختىسى ۋە ياردەمچى تېخنىكا ئىشلەتكۈچىلەر ھەرىكەتكە ئۆتۈش ئۈچۈن توستقا ۋاقتىدا يېتىش تەسكە توختىشى مۇمكىن (چۈنكى توستلار كۆرسىتىلگەندە فوكۇسنى قوبۇل قىلمايدۇ). ئەگەر سىزدە چوقۇم تېخىمۇ كۆپ كونتروللار بولسا ، بىز بىلەن بىللە توپا ئىشلىتىشنى تەۋسىيە قىلىمىز autohide: false
.
JavaScript ھەرىكىتى
ئىشلىتىش
JavaScript ئارقىلىق توستنى باشلاڭ:
$('.toast').toast(option)
تاللانما
تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-
ئوخشاش data-animation=""
.
ئىسمى | تىپ | سۈكۈتتىكى | چۈشەندۈرۈش |
---|---|---|---|
animation | boolean | true | توستقا CSS سۇس ئۆتۈشنى ئىشلىتىڭ |
autohide | boolean | true | توپىنى ئاپتوماتىك يوشۇرۇش |
كېچىكىش | سان | 500 |
توست (ms) نى يوشۇرۇشنى كېچىكتۈرۈش |
Methods
ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى
بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .
$().toast(options)
ئېلېمېنتلار توپلىمىغا توست تۇتقۇچ باغلايدۇ.
.toast('show')
بىر ئېلېمېنتنىڭ توپىنى ئاشكارىلايدۇ. توست ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) چاقىرغۇچىغا قايتىدۇ . shown.bs.toast
سىز بۇ ئۇسۇلنى قولدا چاقىرىشىڭىز كېرەك ، ئەكسىچە توستىڭىز كۆرۈنمەيدۇ.
$('#element').toast('show')
.toast('hide')
بىر ئېلېمېنتنىڭ توپىنى يوشۇرىدۇ. توست ئەمەلىيەتتە يوشۇرۇلۇشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ . hidden.bs.toast
ئەگەر بۇ ئۇسۇلنى قوللانسىڭىز قولدا تېلېفون قىلىشىڭىز autohide
كېرەك false
.
$('#element').toast('hide')
.toast('dispose')
بىر ئېلېمېنتنىڭ توپىنى يوشۇرىدۇ. توستىڭىز DOM دا قالىدۇ ، ئەمما ئەمدى كۆرسەتمەيدۇ.
$('#element').toast('dispose')
Events
پائالىيەت تىپى | چۈشەندۈرۈش |
---|---|
show.bs.toast | show مىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ . |
shown.bs.toast | بۇ ھادىسە توست ئىشلەتكۈچىگە كۆرۈنگەندە ئېتىلىدۇ. |
hide.bs.toast | hide مىسال ئۇسۇلى چاقىرىلغاندا بۇ پائالىيەت دەرھال ئېتىۋېتىلىدۇ . |
hidden.bs.toast | بۇ پائالىيەت توست ئىشلەتكۈچىگە يوشۇرۇنغاندىن كېيىن ئېتىلىدۇ. |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})