Twitter
Bootstrap allows you to style successful execution of a stuff, warning,
and error messages of your website or app. In this tutorial you will
learn how to do that.
Creating a simple alert message
Using
CSS class "alert", which is located from line number 2123 to 2175 of
bootstrap.css version 2.0.1, you may create a simple alert message. You
may add an optional close icon to it.
When
you click the close icon in the alert box, it is closed. And for this
interactivity, you have to add two JavaScript files jquery.js and
alert.js. You may add them just before your body element closes.
Example of creating a simple alert message with Twitter Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic alerts with twitter bootstrap</title>
<meta name="description" content="Creating basic alerts with Twitter Bootstrap. Examples of alerts and errors with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<div class="alert">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
</div>
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>
Note that from line number 18 to 21 are required. Everything else is for demonstration purpose only.
Output
Extending simple alert message
With
two more CSS classes "alert-block " and "alert-heading", you may extend
the previously shown simple alert message. It gives you more control
over text to rendered and you may add a text header preceding the alert
text.
When you click the
close icon in the alert box, it is closed. And for this interactivity,
you have to add two JavaScript files jquery.js and alert.js. You may add
them just before your body element closes.
Example of extending simple alert message with Twitter Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Extending simple alert with twitter bootstrap</title>
<meta name="description" content="Extending simple alert with twitter bootstrap.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<div class="alert alert-block">
<a class="close" data-dismiss="alert">×</a>
<h4 class="alert-heading">Warning!</h4>
What are you doing?! this will delete all files!!
</div>
</div>
</div>
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>
Output
Creating alerts on error, success and information
Twitter
Bootstrap allows you to create alerts suitable to be rendered on error
or danger, success and information. For error, you need CSS class
"alert-error", for success you need "alert-success" class and for
information you need class "alert-info". And of course, like it is
stated in the previous examples, you need to JS files jquery.js and
alert.js.
Example of alerts on error, success and information with Twitter Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example alerts on error success and information with Twitter bootstrap</title>
<meta name="description" content="Example alerts on error success and information with Twitter bootstrap.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<strong>Error!</strong>This is a fatal error.
</div>
<div class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
<strong>Success!</strong>You have successfully done it.
</div>
<div class="alert alert-info">
<a class="close" data-dismiss="alert">×</a>
<strong>Info!</strong>Watch this, but you may forget.
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>
Output
No comments:
Post a Comment