বুটস্ট্র্যাপ ইমেজ আকৃতি
Bootstrap এর সাহায্যে সহজেই Image কে তিন প্রকার Shape এ দেখানো যায়, যথা:
- গোলাকৃতির কোণ
- বৃত্ত
- থাম্বনেল
গোলাকৃতির কোণ
Image এর চারপাশে Rounded Corner তৈরি করার জন্য .img-rounded class টিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Corner সাপোর্ট করে না।
উদাহরণ:
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
বৃত্ত
Image কে বৃত্তাকার বা Circle Shape এ দেখানোর জন্য .img-circle classটিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Cornerসাপোর্ট করে না।
উদাহরণ:
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
থাম্বনেল
Thumbnail Shape এ দেখানোর জন্য .img-thumbnail classটিকে যোগ করা হয়।
উদাহরণ:
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
প্রতিক্রিয়াশীল ইমেজ
সাধারণত Image এবং screen এর size ভিন্ন ভিন্ন হতে পারে। আবার, রেসপন্সিভ ইমেজ (Responsive Images) screen এর size অনুযায়ী image কে resize করে parent element এর সাথে সামঞ্জস্য রেখে screen এ ডিসপ্লে করে। রেসপন্সিভ ইমেজ তৈরি করার জন্য .img-responsive class টিতে <img> ট্যাগে যোগ করা হয়। উল্লেখ্য যে, .img-responsive class এর ক্ষেত্রে max-width: 100%; এবং height: auto; প্রযোজ্য হয়।
উদাহরণ:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
ফলাফল : প্রতিক্রিয়াশীল ইমেজ
Image Gallery বা গ্যালারী তৈরি
Bootstrap's grid system এ .thumbnail class যোগ করেও ইমেজ গ্যালারী তৈরি করা যায়।
উদাহরণ:
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="moustiers-sainte-marie.jpg" class="thumbnail">
<p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of
France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.
</p>
<img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div>
ফলাফল : ইমেজ গ্যালারী
প্রতিক্রিয়াশীল Embed
যে কোনো রকম videos বা slideshows রেসপন্সিভ হিসাবে যোগ করা যেতে পারে। এক্ষেত্রে সরাসরি <iframe>, <embed>, <video>, এবং <object> এলিমেন্ট এ class যোগ করা যায়।
নিম্নোক্ত উদাহরণে <iframe> ট্যাগে .embed-responsive-item class টি যোগ করে video টিকে রেসপন্সিভ আকারে উপস্থাপন করা হয়েছে। এক্ষেত্রে ভিডিওটির containing <div> টি হলো ভিডিওটির parent element, কাজেরই <div> এর মাধ্যমে video টির ratio নির্ধারিত হবে।
উদাহরণ :
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
ফলাফল : প্রতিক্রিয়াশীল Embed
aspect ratio বলতে কি বোঝায়?
কোনো image এর width ও height এর মধ্যকার আনুপাতিক হার বা সম্পর্কই হচ্ছে aspect ratio. সাধারণত দুই প্রকারের video aspect ratios ব্যবহৃত হয় যথা: ৪:৩ (বিংশ শতাব্দীর universal ভিডিও ফরমেট) এবং ১৬:৯ (HD televisio n ও European digital television এর universal ভিডিও ফরমেট)। সম্পূর্ণ Bootstrap Image রেফারেন্স: image এর সকল class এর পরিপূর্ণ রেফারেন্স পেতে Bootstrap Image Reference অধ্যায়টি দেখুন।
