বুটস্ট্রাপ প্রোগ্রেস বার - Bootstrap Progressbar
বুটস্ট্রাপ বেসিক প্রোগ্রেস বার
বুটস্ট্রাপ প্রোগ্রেস বার: প্রোগ্রেস বারের মাধ্যমে ইউজার জানতে পারে তার সম্পাদিত প্রক্রিয়াটি কতটুকু সম্পন্ন হয়েছে এবং কতটুকু বাকী রয়েছে।
বুটস্ট্রাপে বিভিন্ন ধরনের প্রোগ্রেস বার রয়েছে।
বুটস্ট্রাপ বেসিক প্রোগ্রেস বার তৈরি করার জন্য <div> এলিমেন্টর মধ্যে .progress ক্লাস এবং তারমধ্যে অন্য একটি <div> এলিমেন্টে .progress-bar ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Progressbar Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>বেসিক প্রোগ্রেস বারের উদাহরণ</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="sr-only">৪০% সম্পূর্ণ</span>
</div>
</div>
</div>
</body>
</html>
ফলাফল
 |
নোটঃ প্রোগ্রেস বার ইন্টারনেট এক্সপ্লোরার(৯) এবং এর পূর্ববর্তী ভার্সনে সাপোর্ট করে না। কারন প্রোগ্রেস বারের ক্ষেত্রে এটি সিএসএস(৩) ট্রানজিশন এবং এনিমেশন এফেক্ট ব্যবহার করে। নোটঃ স্ক্রিন রিডারদের পড়তে সাহায্য করার জন্য aria-* এট্রিবিউট ব্যবহার করুন। |
|---|
লেবেলসহ প্রোগ্রেস বার
লেভেলসহ একটি প্রোগ্রেস বার দেখতে নিম্নরুপঃ
প্রোগ্রেস বারের পারসেন্টেজ প্রদর্শন করানোর জন্য .sr-only ক্লাস বাদ দিনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Progressbar Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>লেবেলসহ প্রোগ্রেস বারের উদাহরণ</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
৪০% সম্পূর্ণ
</div>
</div>
</div>
</body>
</html>
ফলাফল
প্রোগ্রেস বারের কালার
প্রোগ্রেস বারকে কালার করার জন্য কনটেকচুয়াল ক্লাসগুলো ব্যবহার করতে পারেন। এছাড়াও আপনি আপনার পছন্দ মতো কালার যুক্ত করার জন্য সিএসএসের সাহায্য নিন।
কিভাবে কনটেকচুয়াল ক্লাসগুলো প্রোগ্রেস বারে ব্যবহার করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Progressbar Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>প্রগ্রেস বার কালার</h2>
<p>কনটেকচুয়াল ক্লাসের মাধ্যমে প্রগ্রেস বার কালার করা হয়েছে:</p>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
৪০% সম্পূর্ণ (সাকসেস)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
৫০% সম্পূর্ণ (ইনফো)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow=& quot;60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
৬০% সম্পূর্ণ (ওয়ার্নিং)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
৭০% সম্পূর্ণ (ডেঞ্জার)
</div>
</div>
</body>
</html>
ফলাফল
Striped প্রোগ্রেস বার
Striped প্রোগ্রেস বার দেখতে নিম্নরুপঃ
Striped প্রোগ্রেস বার তৈরি করার জন্য .progress-bar-striped ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Progressbar Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped প্রগ্রেস বার</h2>
<p>ডোরাকাটা/Striped প্রোগ্রেস বার তৈরি করার জন্য .progress-bar-striped ক্লাস যুক্ত করুনঃ</p>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
৪০% সম্পূর্ণ (সাকসেস)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
৫০% সম্পূর্ণ ( ইনফো)
</div>
</div>
</div>
</body>
</html>
ফলাফল
এনিমেশনযুক্ত প্রোগ্রেস বার
একটি "এনিমেশন" যুক্ত প্রোগ্রেস বারঃ
এনিমেশন যুক্ত প্রোগ্রেস বার তৈরি করার জন্য .progress-bar-striped ক্লাসের সাথে .active ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Progressbar Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>এ্যানিমেশনযুক্ত প্রগ্রেস বার</h2>
<p>প্রোগ্রেস বারে এ্যানিমেশন যুক্ত করার জন্য .active ক্লাস যুক্ত করুন:</p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
৭০%
</div>
</div>
</div>
</body>
</html>
ফলাফল
Stacked প্রোগ্রেস বার
কয়েকটি প্রোগ্রেস বার মিলে একটি প্রোগ্রেস বার তৈরি করা যায়।
একই <div class="progress"> এর মধ্যে একাধিক প্রোগ্রেস বার যুক্ত করে stacked প্রোগ্রেস বার তৈরি করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Progressbar Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Stacked প্রগ্রেস বার </h2>
<p>Stacked প্রোগ্রেস বার তৈরি করার জন্য .progress ক্লাস যুক্ত একই div এলিমেন্টের মধ্যে একাধিক বার যুক্ত করুন:</p>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:50%">
খালি জায়গা
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:30%">
ওয়ার্নিং
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
ডেঞ্জার
</div>
</div>
</body>
</html>
ফলাফল