~~Post No:15~~

আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা Bootstrap সম্পর্কে জানবো।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib

Font Awesome Icons কিঃ

Font Awesome হচ্ছে এক ধরনের iconic font, যা ডিজাইন করা হয়েছে Bootstrap এর মাধ্যমে। এটি হচ্ছে এক ধরনের SVG (Scalable Vector Graphic) আইকন, যা আপনি ইচ্ছা করলে Customize করতে পারবেন এবং যে কোন ধরনের ব্লগ কিংবা ওয়েবসাইটে ব্যবহার করতে পারবেন। এই আইকন গুলি কোন নির্দিষ্ট আকারে Fixed করা নয়। আপনি ইচ্ছা করলে যে কোন সাইজের আইকন ব্যবহার করতে পারবেন। ছোট কিংবা বড় যে কোন ধরনের আইকন ব্যবহার করলে এর Graphically কোন পরিবর্তন হবে না। তাছাড়া আপনি ইচ্ছা করলে Css কোড ব্যবহার করে এটিতে যে কোন ধরনের কালার ইফেক্ট দিতে পারবেন। আপনি আমার ব্লগের ম্যানুবারের দিকে লক্ষ্য করলেই দেখবেন যে, আমি Font Awesome ব্যবহার করে কয়েকটি আইকন তৈরী করেছি।

Font Awesome Icons কিভাবে যুক্ত করবেন?

প্রথমে, আপনাকে CDN Font Awesome ওয়েবসাইট ভিজিট করতে হবে। অতঃপর Embed Code টি কপি করুন। এবং HTML এর Header Section-এ পেস্ট করুন।

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/brands.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/fontawesome.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/regular.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/solid.min.css


https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/svg-with-js.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/v4-font-face.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/v4-shims.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/v5-font-face.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/brands.min.js

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/conflict-detection.min.js

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/fontawesome.min.js

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/regular.min.js

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/solid.min.js

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/v4-shims.min.js

এরপর Font Awesome ওয়েবসাইট থেকে icon-এ ক্লিক করুন।

অতঃপর icon code-টি কপি করে নিজের কাজে ব্যবহার করুন।

বুটস্ট্র্যাপ টাইপোগ্রাফি (Bootstrap Typography):

Bootstrap Typography মূলত কিছু লেখাকে নির্দেশ করে যা বুটস্ট্যাপ ক্লাসের মাধ্যমে খুব সহজেই বিভিন্ন ভ্র্যারিয়েন্টে লেখা যায়।

<h1> - <h6>

বুটস্ট্রাপ এইচটিএমএল হেডিং এলিমেন্টগুলোকে (<h1> থেকে <h6>) নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

h1 বুটস্ট্রাপ হেডিং (৩৬পিক্সেল)

h2 বুটস্ট্রাপ হেডিং (৩০পিক্সেল)

h3 বুটস্ট্রাপ হেডিং (২৪পিক্সেল)

h4 বুটস্ট্রাপ হেডিং (১৮পিক্সেল)

h5 বুটস্ট্রাপ হেডিং (১৪পিক্সেল)

h6 বুটস্ট্রাপ হেডিং (১২পিক্সেল)

<small>

বুটস্ট্রাপে এইচটিএমএল <small> এলিমেন্ট যেকোনো হেডিং এ একটি লাইটার, সেকেন্ডারি টেক্সট তৈরি করেঃ

h1 বুটস্ট্রাপ হেডিং সেকেন্ডারি টেক্সট

h2 বুটস্ট্রাপ হেডিং সেকেন্ডারি টেক্সট

h3 বুটস্ট্রাপ হেডিং সেকেন্ডারি টেক্সট

h4 বুটস্ট্রাপ হেডিং সেকেন্ডারি টেক্সট

h5 বুটস্ট্রাপ হেডিং সেকেন্ডারি টেক্সট

h6 বুটস্ট্রাপ হেডিং সেকেন্ডারি টেক্সট

<mark>

বুটস্ট্রাপ এইচটিএমএল <mark> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

mark এলিমেন্টের উদাহরণঃ

টেক্সকে হাইলাইট করার জন্য mark এলিমেন্ট ব্যবহার করা হয়।

<blockquote>

বুটস্ট্রাপ এইচটিএমএল <blockquote> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

blockquote এলিমেন্টের উদাহরণ

বাংলাদেশ দক্ষিণ এশিয়ার একটি জনবহুল রাষ্ট্র। বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম, উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত। বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ। পার্শ্ববর্তী দেশের রাজ্য পশ্চিমবঙ্গ ও ত্রিপুরা-সহ বাংলাদেশ একটি ভৌগোলিকভাবে জাতিগত ও ভাষাগত "বঙ্গ" অঞ্চলটির মানে পূর্ণ করে। "বঙ্গ" ভূখণ্ডের পূর্বাংশ পূর্ব বাংলা নামে পরিচিত ছিল, যা বর্তমানে বাংলাদেশ নামের দেশ। পৃথিবীতে যে ক'টি রাষ্ট্র জাতিরাষ্ট্র হিসেবে মর্যাদা পায় তার মধ্যে বাংলাদেশ অন্যতম।

উইকিপিডিয়া থেকে সংগৃহীত

<blockquote-reverse>

বুটস্ট্রাপ এইচটিএমএল <blockquote-reverse> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

blockquote এলিমেন্টের উদাহরণ

উইকিপিডিয়া থেকে সংগৃহীত -

<dl>

বুটস্ট্রাপ এইচটিএমএল <dl> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

dl এলিমেন্টের উদাহরণ

Coffee

- Black hot drink

MIlk

- White cold drink

Cold-drinks

- carbonated beverage soft drinks

<code>

বুটস্ট্রাপ এইচটিএমএল <code> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

code এলিমেন্টের উদাহরণ

এই এইচটিএমএল কোডগুলোর মাধ্যমে একটি ডকুমেন্টের মধ্যে হেডিং এবং প্যারাগ্রাফ তৈরি করা হয়ঃ h1 - h6 এবং p

<kbd>

বুটস্ট্রাপ এইচটিএমএল <kbd> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

kbd এলিমেন্টের উদাহরণঃ

সেভ ডায়ালগ বক্স ওপেন করার জন্য ctrl + s চাপুন।

<pre>

বুটস্ট্রাপ এইচটিএমএল <pre> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

pre এলিমেন্টের উদাহরণ

    pre এলিমেন্টের মধ্যের টেক্সট ফিক্সড প্রস্থের 

    ফন্টে প্রদর্শিত হয়,        এছাড়াও এর 

    মধ্যের স্পেস এবং 

    লাইন ব্রেকগুলো 

    ব্রাউজার গননা করে।

কালার এবং ব্যাকগ্রাউন্ডঃ

বুটস্ট্রাপের কিছু কনটেকচুয়াল ক্লাস আছে যারা "অর্থবহ কালার" নির্ধারন করে।

টেক্সট কালারের জন্য ক্লাসগুলো হচ্ছেঃ .text-muted, .text-primary, .text-success, .text-info, .text-warning, এবং .text-danger:

টেক্সট কালারের উদাহরণঃ

এই টেক্সটি মিউটেড।

এই টেক্সটটি গুরুত্বপূর্ণ।

এই টেক্সটের দ্বারা সফলতা বুঝাচ্ছে।

এই টেক্সটি কিছু তথ্য রিপ্রেজেন্ট করে।

এই টেক্সটটি সতর্কতা বুঝাচ্ছে।

এই টেক্সটটি বিপদজনক বুঝাচ্ছে।

ব্যাকগ্রাউন্ড কালারের ক্লাসগুলো হচ্ছেঃ .bg-primary, .bg-success, bg-info, bg-warning, এবং .bg-danger:

ব্যাকগ্রাউন্ড কালারের উদাহরণ