টুইটার বুটসট্র্যাপ এর পূর্ণাঙ্গ চেইন কোর্স পর্ব – ৫

টুইটার বুটস্ত্রাপ  এর  পঞ্চম পর্বে আপনাদের সবাইকে স্বাগতম।

আজকে আমি   টুইটার বুটস্ত্রাপ   যে বিষয় গুলো নিয়ে আলোচনা করবো :
১.টাইপোগ্রাফি।
২. কোড
৩. রেস্পন্সিভ টেবিল।

যদিও এর আগের পর্বে বলেছিলাম আজকে মিডিয়া কেউরি নিয়ে আলোচনা করবো। মিডিয়া কেউরি এর কাজ টা একটু অ্যাডভান্স টাই এইটি কোর্সের শেষ এর দিকে আমি দেখবো।      

টাইপোগ্রাফি

Alignment classes

 Alignment class গুলো ব্যাবহার করে আপনারা খুব সহজে যেকোনো টেক্সট কে কনটেইনার এর মাঝ বরাবর বা ডানে বামে নিয়ে যেতে পারেন।এর জন্য আপনাকে সিএসএস এ গিয়ে    P{text-aligen:center;} right,left ইত্যাদি আর লিখতে হবে না।আপনারা বুটস্ত্রাপ এর ক্লাস ব্যাবহার করে কাজ গুলো খুব সহজে করতে পারি। আপনাদের কোড এডিটর ওপেন করে নিচের মত কোড গুলো লিখে ফেলুন।  

আউটপুট

Blockquotes

<blogquote> টাগ ব্যাবহার করে আপনারা খুব সহজে যেকোনো পেরেগ্রাপ এর মাঝখানে সুন্দর ভাবে হাইলাইট করতে পারেন
উধাহরণ ১

ইনপুট

আউটপুট

উধাহরণ  ২

ইনপুট

আউটপুট

উধাহরণ ৩

Cite ট্যাগ ব্যাবহার করে খুব সহজে  সোর্স টাইটেল দিতে পারেন ।
নিচের মত কোড গুলো লিখে ফেলুন

ইনপুট

 আউটপুট

উধাহরণ ৪

.blockquote-reverse ক্লাস ব্যাবহার করে ডান দিকে লিখা গুলো কে নিয়ে যেতে পারেন। নিচের উধাহরণটি দেখলে আরও ভাল বুঝতে পারেন।

ইনপুট

   আউটপুট

 Lists
Description
অনেক সময় Description লিস্ট তৈরি করার সময় কোন তার পর কোনটা  বসবে সেটা  নিয়ে  অনেকে কনফেউস হয়ে যান তারা বুটস্ত্রাপ এর  থেকে কপি  করে ব্যাবহার করতে পারেন।
উধাহরণ ১  

নিচের মত কোড গুলো লিখে ফেলুন

আউটপুট

 উধাহরণ ২

এখন আমরা দেখবো কিভাবে  Horizontal description লিস্ট তৈরি করা যায়।
নিচের মত কোড গুলো লিখে ফেলুন

   
 আউটপুট

কোড

Inline

ইনপুট
যে কোন একটি এইচটিএমএল সিলেকটর কে Warp আকরে  দেখতে নিচের এই কোডটি ব্যাবহার করুন।

  আউটপুট

User input

ইনটারনেট এ টেক্সট টিউটরিয়াল তৈরি করার সময় <kbd> এই কোড টি বেশ কাজের।

  আউটপুট

Basic block

যে কোন কন্টেন্ট কে ব্লক করুন <Pre> ট্যাগ দিয়ে।
নিচের মত কোড লিখুন।

  আউট পুট

কিভাবে <class="pre-scrollable"> ট্যাগ ব্যাবহার করে স্ক্রোল বার দিবেন।

আউটপুট

 Variables


ইনপুট

আউটপুট

 রেস্পন্সিভ টেবিল

আমরা এখন বুটস্ত্রাপ এর ডিফল্ট  ক্লাস ব্যাবহার করে কিভবে টেবিলে সুন্দর সব  Effect দেয়া যায় তা দেখবো।
Basic example

আউটপুট

Striped rows


ইনপুট

 আউট পুট

 Bordered table

আউটপুট

Hover rows

আউটপুট

Condensed table

আউটপুট

Contextual classes 

আউটপুট

উপরের নিয়ম অনুসরণ করে Th আর Td কে স্টাইল করুন।

আউটপুট

Responsive tables

large screen এর আউটপুট

আপনার কম্পিউটার এ যদি মোজিলা ফয়ারফক্স ইন্সটল করা থাকে তাহলে CTRL+SHIFT+M চেপে দেখুন দেখবেন ছোট Screen এ ও টেবিলটিকে খুব সুন্দর ভাবে দেখা যাচ্ছে।  

তো আজ এই পর্যন্ত,আমি এই খানে যে সব বিষয় নিয়ে আলোচনা করি নি,সেগুলো আপনারা নিজেরায় পারবেন যদি ভালো ভাবে এইচটিএমএল ও সিএসএস শিখে থাকেন। এর পরের পর্বে আমি বুটস্ত্রাপ এর পরের ফিচার  গুলো নিয়ে আলোচনা করবো, আর হ্যাঁ আরও একটি কথা এই টিউন লিখথে গিয়ে ছোট খাটো ভুল ভ্রাম্থি  হয়েছে আশা করি এই গুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন, ধন্যবাদ সবাইকে প্রত্যেকের জন্য অনেক অনেক  শুভ কামনা রইল।        

সোর্স ফাইল ডাউনলোড করতে এই নিচের ছবিতে  ক্লিক করুন। 

বিঃদ্রঃ আমার অনুমতি ছাড়া এই ব্লগ এর পোস্ট অন্য কোথাও দিবেন না যদি দিতে চান আমার ব্লগ এর নাম উল্লেখ করে দিবেন।

ফেসবুক এ আমি

আমার সকল পোস্ট পড়তে  নিচের ইমেজটিতে ক্লিক করুন