বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ প্রোগ্রেস বার


বেসিক প্রোগ্রেস বার

প্রোগ্রেস বারের মাধ্যমে ইউজার জানতে পারে তার সম্পাদিত প্রক্রিয়াটি কতটুকু সম্পন্ন হয়েছে এবং কতটুকু বাকী রয়েছে।

বুটস্ট্রাপে বিভিন্ন ধরনের প্রোগ্রেস বার রয়েছে।

বেসিক প্রোগ্রেস বার তৈরি করার জন্য <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>

ফলাফল




Note নোটঃ প্রোগ্রেস বার ইন্টারনেট এক্সপ্লোরার(৯) এবং এর পূর্ববর্তী ভার্সনে সাপোর্ট করে না। কারন প্রোগ্রেস বারের ক্ষেত্রে এটি সিএসএস(৩) ট্রানজিশন এবং এনিমেশন এফেক্ট ব্যবহার করে।

নোটঃ স্ক্রিন রিডারদের পড়তে সাহায্য করার জন্য 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>

ফলাফল




প্রোগ্রেস বারের কালার

প্রোগ্রেস বারকে কালার করার জন্য কনটেকচুয়াল ক্লাসগুলো ব্যবহার করতে পারেন। এছাড়াও আপনি আপনার পছন্দ মতো কালার যুক্ত করার জন্য সিএসএসের সাহায্য নিন।

কিভাবে কনটেকচুয়াল ক্লাসগুলো প্রোগ্রেস বারে ব্যবহার করা যায় তা নিচের উদাহরণে দেখানো হলোঃ

  1. .progress-bar-success
  2. .progress-bar-info
  3. .progress-bar-warning
  4. .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>

ফলাফল