Awọn itaniji
Pese awọn ifiranṣẹ esi asọye fun awọn iṣe olumulo aṣoju pẹlu iwonba ti o wa ati awọn ifiranṣẹ itaniji rọ.
Awọn titaniji wa fun eyikeyi ipari ọrọ, bakanna bi bọtini ifasilẹ iyan. Fun iselona to dara, lo ọkan ninu awọn kilasi ọrọ-ọrọ ti o nilo mẹjọ (fun apẹẹrẹ, .alert-success
). Fun itusilẹ laini, lo awọn titaniji jQuery itanna .
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ
Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .sr-only
kilasi naa.
Lo .alert-link
kilasi IwUlO lati pese awọn ọna asopọ awọ ti o baamu ni kiakia laarin eyikeyi titaniji.
<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Awọn titaniji le tun ni awọn eroja HTML afikun ninu bi awọn akọle, awọn ìpínrọ ati awọn ipin.
Kú isé!
Aww bẹẹni, o ṣaṣeyọri ka ifiranṣẹ itaniji pataki yii. Ọrọ apẹẹrẹ yii yoo ṣiṣẹ diẹ diẹ sii ki o le rii bii aye laarin itaniji ṣe n ṣiṣẹ pẹlu iru akoonu yii.
Nigbakugba ti o nilo lati, rii daju pe o lo awọn ohun elo ala lati jẹ ki awọn nkan dara ati mimọ.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Lilo ohun itanna JavaScript titaniji, o ṣee ṣe lati yọkuro eyikeyi laini titaniji. Eyi ni bii:
- Rii daju pe o ti kojọpọ ohun itanna itaniji, tabi Bootstrap JavaScript ti o ṣajọ.
- Ti o ba n kọ JavaScript wa lati orisun, o nilo
util.js
. Ẹya ti a ṣajọ pẹlu eyi. - Ṣafikun bọtini ikọsilẹ ati
.alert-dismissible
kilasi, eyiti o ṣafikun afikun fifẹ si apa ọtun ti itaniji ati gbe.close
bọtini naa si. - Lori bọtini yiyọ kuro, ṣafikun abuda naa
data-dismiss="alert"
, eyiti o nfa iṣẹ ṣiṣe JavaScript. Rii daju lati lo<button>
eroja pẹlu rẹ fun ihuwasi to dara lori gbogbo awọn ẹrọ. - Lati mu awọn itaniji ṣiṣẹ nigbati o ba yọ wọn kuro, rii daju lati ṣafikun awọn
.fade
ati.show
awọn kilasi.
O le rii eyi ni iṣe pẹlu demo ifiwe kan:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Jeki yiyọ kuro ti itaniji nipasẹ JavaScript:
Tabi pẹlu data
awọn abuda lori bọtini kan laarin itaniji , bi a ti ṣe afihan loke:
Ṣe akiyesi pe pipadii itaniji yoo yọ kuro lati DOM.
Ọna | Apejuwe |
---|---|
$().alert() |
Mu ki o gbọ titaniji fun awọn iṣẹlẹ tẹ lori awọn eroja ti o ni data-dismiss="alert" ẹda. (Ko ṣe pataki nigba lilo ipilẹṣẹ-afọwọṣe data-api.) |
$().alert('close') |
Tititaniji pa nipa yiyọ kuro lati DOM. Ti awọn kilasi .fade ati .show awọn kilasi ba wa lori eroja, itaniji yoo parẹ ṣaaju ki o to yọkuro. |
$().alert('dispose') |
Pa ohun ano ká gbigbọn. |
Ohun itanna gbigbọn Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe titaniji.
Iṣẹlẹ | Apejuwe |
---|---|
close.bs.alert |
Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn close apẹẹrẹ ọna ti a npe ni. |
closed.bs.alert |
Iṣẹlẹ yii jẹ ina nigbati itaniji ti wa ni pipade (yoo duro fun awọn iyipada CSS lati pari). |