বুটস্ট্রাপ ইমেজ আকৃতি(size)
বুটস্ট্রাপে নিম্নলিখিত আকৃতির ইমেজের জন্য ইমেজ ক্লাস রয়েছে।
- রাউন্ড কর্ণার
- বৃত্তাকার ইমেজ
- Thumbnail ইমেজ
বুটস্ট্রাপ ইমেজের এই অধ্যায়টিতে আমরা উল্লেখিত আকৃতির ইমেজের উদাহরণ প্রদর্শন করেছি।
রাউন্ড কর্ণার
ইমেজের কর্ণার বা কোণগুলোকে রাউন্ড করার জন্য .img-rounded ক্লাসটি ব্যবহার করা হয়। (IE8 রাউন্ড কর্নার সাপোর্ট করে না):
kt_satt_skill_example_id=830
বৃত্তাকার ইমেজ
ইমেজকে বৃত্তাকার বা গোলাকার করে প্রদর্শন করানোর জন্য <img> এলিমেন্টের মধ্যে .img-circle ক্লাস ব্যবহার করুন। একটি ইমেজকে সার্কেলের আকৃতিতে নিয়ে আসে (IE8 এ রাউন্ড ইমেজ সাপোর্ট করে না):
kt_satt_skill_example_id=841
Thumbnail ইমেজ
ইমেজকে Thumbnail এর আকৃতিতে দেখানোর জন্য .img-thumbnail ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=843
রেসপন্সিভ ইমেজ
ইমেজকে যেকোন আকারেই রুপান্তর করা যায়। অর্থাৎ ইমেজের যেকোন আকারই নির্ধারণ করে আপনি তা প্রদর্শন করাতে পারবেন। রেসপন্সিভ ইমেজ স্বয়ংক্রিয়ভাবে সকল ডিভাইসের স্ক্রিনের সাথে এডজাস্ট করে নেয়।
ইমেজকে রেসপন্সিভ করার জন্য <img> ট্যাগের মধ্যে .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
রেসপন্সিভ এম্বেড
ভিডিও অথবা স্লাইড শো যেকোনো ডিভাইসে ভালোভাবে চলার জন্য রেসপন্সিভ করতে হয়।
রেসপন্সিভ সংক্রান্ত ক্লাসগুলি সরাসরি <iframe>, <embed>, <video> এবং <object> এলিমেন্টে ব্যবহার করা যায়।
নিম্নলিখিত উদাহরণে <iframe> ট্যাগের মধ্যে .embed-responsive-item ক্লাস যুক্ত করে একটি রেসপন্সিভ ভিডিও তৈরি করে দেখানো হলো। ধারনকারী <div> এলিমেন্টের মধ্যে ভিডিও এর আয়তকার অনুপাত নির্ধারন করে দিতে হবেঃ
kt_satt_skill_example_id=850
দুইটি আয়তকার অনুপাত থেকে আপনার প্রয়োজন অনুযায়ী একটি অনুপাত বেছে নিনঃ
kt_satt_skill_example_id=852
একনজরে ইমেজ সংক্রান্ত ক্লাসগুলো দেখে নেইঃ
| ক্লাস | বর্ণনা |
|---|---|
.img-rounded | ইমেজে রাউন্ড কর্ণার যুক্ত করে (ইন্টারনেট এক্সপ্লোরার ৮ এ সাপোর্ট করে না) |
.img-circle | ইমেজের আকৃতি বৃত্তের মতো করে (ইন্টারনেট এক্সপ্লোরার ৮ এ সাপোর্ট করে না) |
.img-thumbnail | ইমেজের আকৃতি thumbnail এর মতো করে। |
.img-responsive | একটি ইমেজকে রেসপন্সিভ করার জন্য ব্যবহার করা হয়। |
Read more
