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

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

হোম-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

 

বুটস্ট্রাপ ইমেজ


বুটস্ট্রাপ ইমেজ আকৃতি

বুটস্ট্রাপে নিম্নলিখিত আকৃতির ইমেজের জন্য ইমেজ ক্লাস রয়েছে।

  1. রাউন্ড কর্ণার
  2. বৃত্তাকার ইমেজ
  3. Thumbnail ইমেজ

বুটস্ট্রাপ ইমেজের এই অধ্যায়টিতে আমরা উল্লেখিত আকৃতির ইমেজের উদাহরণ প্রদর্শন করেছি।


রাউন্ড কর্ণার

ইমেজের কর্ণার বা কোণগুলোকে রাউন্ড করার জন্য .img-rounded ক্লাসটি ব্যবহার করা হয়। (IE8 রাউন্ড কর্নার সাপোর্ট করে না):

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Image 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>
			<img src="nilgiri.jpg" class="img-rounded" alt="Nilgiri Bangladesh" width="280" height="198">
	  </div>

  </body>
</html>

ফলাফল




বৃত্তাকার ইমেজ

ইমেজকে বৃত্তাকার বা গোলাকার করে প্রদর্শন করানোর জন্য <img> এলিমেন্টের মধ্যে .img-circle ক্লাস ব্যবহার করুন। একটি ইমেজকে সার্কেলের আকৃতিতে নিয়ে আসে (IE8 এ রাউন্ড ইমেজ সাপোর্ট করে না):

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Table 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>
			<img src="nilgiri.jpg" class="img-circle" alt="Nilgiri Bangladesh" width="210" height="198">
	  </div>

  </body>
</html>

ফলাফল




Thumbnail ইমেজ

ইমেজকে Thumbnail এর আকৃতিতে দেখানোর জন্য .img-thumbnail ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Image 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>বুটস্ট্রাপ Thumbnail ইমেজের উদাহরণ</h2>
			<img src="nilgiri.jpg" class="img-thumbnail" alt="Nilgiri Bangladesh" width="280" height="198">
	  </div>

  </body>
</html>

ফলাফল




রেসপন্সিভ ইমেজ

ইমেজকে যেকোন আকারেই রুপান্তর করা যায়। অর্থাৎ ইমেজের যেকোন আকারই নির্ধারণ করে আপনি তা প্রদর্শন করাতে পারবেন। রেসপন্সিভ ইমেজ স্বয়ংক্রিয়ভাবে সকল ডিভাইসের স্ক্রিনের সাথে এডজাস্ট করে নেয়।

ইমেজকে রেসপন্সিভ করার জন্য <img> ট্যাগের মধ্যে .img-responsive ক্লাসটি ব্যবহার করুন।

.img-responsive ক্লাস ইমেজটিতে সিএসএসের display: block;, max-width: 100%; এবং height: auto; প্রোপার্টিগুলো যুক্ত করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Image 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>
			<img src="nilgiri.jpg" class="img-responsive" alt="Nilgiri Bangladesh" width="580" height="280">
	  </div>

  </body>
</html>

ফলাফল




ইমেজ গ্যালারি

বুটস্ট্রাপের মাধ্যমে ইমেজ গ্যালারি তৈরি করার জন্য আপনাকে .thumbnail ক্লাসের সাথে গ্রীড সিস্টেম ব্যবহার করতে হবে। নিচের উদাহরণে .thumbnail ক্লাস এবং গ্রীড সিস্টেম সাহায্যে একটি ফটো গ্যালারি তৈরি করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Image 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>একটি ইমেজ গ্যালারির জন্য .thumbnail ক্লাসটি ব্যবহার করা হয়। ইমেজটিকে বড় আকারে দেখার জন্য ইমেজের মধ্যে ক্লিক করি:</p>
			<div class="row">
				<div class="col-md-4">
					<a href="paris.jpg" class="thumbnail">
					<p>প্যারিস টাওয়ার এই শহরের একটি অনন্য স্থাপনা</p>
					<img src="paris.jpg" alt="Paris Tower" style="width:150px;height:150px">
					</a>
				</div>
				<div class="col-md-4">
					<a href="triangle.jpg"
					class="thumbnail">
					<p>ফ্রান্সের অনন্য একটি স্থাপনা</p>
					<img src="triangle.jpg"
						alt="Triangle Building" style="width:150px;height:150px">
						</a>
				</div>
				<div class="col-md-4">
					<a href="nilgiri.jpg"
					class="thumbnail">
					<p>নিলগিরি বাংলাদেশের বান্দরবন জেলায় অবস্থিত</p>
					<img src="nilgiri.jpg"
						alt="Nilgiri Bangladesh" style="width:150px;height:150px">
						</a>
				</div>
			</div>
        </div>

  </body>
</html>

ফলাফল




রেসপন্সিভ এম্বেড

ভিডিও অথবা স্লাইড শো যেকোনো ডিভাইসে ভালোভাবে চলার জন্য রেসপন্সিভ করতে হয়।

রেসপন্সিভ সংক্রান্ত ক্লাসগুলি সরাসরি <iframe>, <embed>, <video> এবং <object> এলিমেন্টে ব্যবহার করা যায়।

নিম্নলিখিত উদাহরণে <iframe> ট্যাগের মধ্যে .embed-responsive-item ক্লাস যুক্ত করে একটি রেসপন্সিভ ভিডিও তৈরি করে দেখানো হলো। ধারনকারী <div> এলিমেন্টের মধ্যে ভিডিও এর আয়তকার অনুপাত নির্ধারন করে দিতে হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Image 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="embed-responsive embed-responsive-16by9">
				<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/T6Wufigr1p4"></iframe>
			</div>
     </div>

  </body>
</html>

ফলাফল




আয়তকার অনুপাত কি?

আয়তকার অনুপাত বলতে একটি ইমেজের দৈর্ঘ্য এবং প্রস্থের মধ্যে সমানুপাতিক সম্পর্ককে বুঝায়। ভিডিও এর আয়তকার আনুপাতের মধ্যে দুটি সাধারন অনুপাত হচ্ছে ৪ঃ৩ (২০ শতকের সার্বজনীন ভিডিও ফরম্যাট) এবং ১৬ঃ৯ (এইচডি টেলিভিশন এবং ইউরোপিয়ান ডিজিটাল টেলিভিশনের জন্য সার্বজনীন ফরম্যাট)।

দুইটি আয়তকার অনুপাত থেকে আপনার প্রয়োজন অনুযায়ী একটি অনুপাত বেছে নিনঃ

উদাহরণ

<!-- 16:9 অনুপাত -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 অনুপাত -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

একনজরে ইমেজ সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

ক্লাস বর্ণনা
.img-rounded ইমেজে রাউন্ড কর্ণার যুক্ত করে (ইন্টারনেট এক্সপ্লোরার ৮ এ সাপোর্ট করে না)
.img-circle ইমেজের আকৃতি বৃত্তের মতো করে (ইন্টারনেট এক্সপ্লোরার ৮ এ সাপোর্ট করে না)
.img-thumbnail ইমেজের আকৃতি thumbnail এর মতো করে।
.img-responsive একটি ইমেজকে রেসপন্সিভ করার জন্য ব্যবহার করা হয়।