Intoduction :-
Hii Friends...
Alert boxes are used quite often to stand out the information that requires immediate attention of the end users such as warning, error or confirmation messages. With Bootstrap you can easily create elegant alert messages box for various purposes. You can also add an optional close button to dismiss any alert.
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dotnetmodules</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This alert box indicate a successful or positive action.
</div>
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> This alert box indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> This alert box indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> This alert box indicate a dangerous or potentially negative action.
</div>
</div>
</body>
</html>
Hii Friends...
Alert boxes are used quite often to stand out the information that requires immediate attention of the end users such as warning, error or confirmation messages. With Bootstrap you can easily create elegant alert messages box for various purposes. You can also add an optional close button to dismiss any alert.
DEMO:-
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dotnetmodules</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This alert box indicate a successful or positive action.
</div>
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> This alert box indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> This alert box indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> This alert box indicate a dangerous or potentially negative action.
</div>
</div>
</body>
</html>
0 comments:
Post a Comment