বুটস্ট্রাপ ইমেজ - Bootstrap Image
বুটস্ট্রাপ ইমেজ আকৃতি(size)
বুটস্ট্রাপে নিম্নলিখিত আকৃতির ইমেজের জন্য ইমেজ ক্লাস রয়েছে।
- রাউন্ড কর্ণার
- বৃত্তাকার ইমেজ
- 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 |
একটি ইমেজকে রেসপন্সিভ করার জন্য ব্যবহার করা হয়। |