বুটস্ট্রাপ৩ সিএসএস কম্পোনেন্ট (Bootstrap3 CSS Component)

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

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

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

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

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

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

kt_satt_skill_example_id=830

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

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

kt_satt_skill_example_id=841

Thumbnail ইমেজ

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

kt_satt_skill_example_id=843

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

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

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

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

kt_satt_skill_example_id=846

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

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

kt_satt_skill_example_id=848

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

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

রেসপন্সিভ সংক্রান্ত ক্লাসগুলি সরাসরি `; } else { card += `

BOOK

${content.book.name}

${content.book.author_name ? '' + content.book.author_name + '' : ''} by ${content.book.business?.name || 'Satt Academy'}

${content.book.price == 0 || content.book.price == '0' || content.book.price == null ? 'Free' : '৳' + content.book.price + ''}

`; } else if (content.type == 'course') { //console.log(content); card += `

COURSE

${content.course.name}

${content.course.author_name ? '' + content.course.author_name + '' : ''} by ${content.course.business?.name || 'Satt Academy'}

${content.course.price == 0 || content.course.price == '0' || content.course.price == null ? 'Free' : '৳' + content.course.price + ''} ${content.course.course_level.toUpperCase()}

`; } else if (content.type == 'exam') { card += `

MODEL TEST || SATT ACADEMY

${content.exam.name}

by ${ content.exam.business?.name ?? 'Satt Academy' }

${content.exam.duration} min ${content.exam.number_of_question} questions ${content.exam.total_mark} marks

Attend now!

`; } if (content.content_footer) { card += `

${content.content_footer}

`; } card += `