Progress bar in bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROGRESS BAR</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>PROGRESS BAR</h3>
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Progress bar in color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROGRESS BAR</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>PROGRESS BAR</h3>
<div class="progress">
<div class="progress-bar"style="width:60%;">60%</div>
</div>
<hr>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:50%;">50%</div>
</div>
<hr>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:40%;">40%</div>
</div>
<hr>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:80%;">80%</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Progress bar line style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROGRESS BAR</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>PROGRESS BAR</h3>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:50%;">50%</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Progress bar animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROGRESS BAR</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>PROGRESS BAR</h3>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:50%;">50%</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Multiple Progress bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROGRESS BAR</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>PROGRESS BAR</h3>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:30%;">30%</div>
<div class="progress-bar progress-bar-warning" style="width:30%;">30%</div>
<div class="progress-bar progress-bar-danger" style="width:20%;">20%</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Aria(accessable rich internet application)->visually challange person progress bar
use website->voice convert ->text to speech conversion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROGRESS BAR</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>PROGRESS BAR</h3>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="width:30%;">30%</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Pagination in bootstrap (bottom of page number)
simple pagination
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Simple pagination</h3>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Active&Disable pagination
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Simple pagination</h3>
<ul class="pagination">
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
pagination size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Simple pagination</h3>
<ul class="pagination pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<hr>
<ul class="pagination pagination-sm">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
No comments:
Post a Comment