টুইটার বুটসট্র্যাপ [পর্ব-০৫] :: পূর্ণাঙ্গ আলোচনা

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

আজকে আমি টুইটার বুটস্ত্রাপ যে বিষয় গুলো নিয়ে আলোচনা করবো :

১.   টাইপোগ্রাফি।
২.   কোড
৩.  রেস্পন্সিভ টেবিল।

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

টাইপোগ্রাফি


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

আউটপুট

Block quotes

<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 এ ও টেবিলটিকে খুব সুন্দর ভাবে দেখা যাচ্ছে।

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


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

Level 0

আমি রিদম দত্ত। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 34 টি টিউন ও 270 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

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


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

সুন্দর পোষ্ট লিখছেছ ভাই |

মোঃখায়রুজ্জামান বাপ্পি@: ধন্যবাদ আপনার সুন্দর মন্তব্য এর জন্য ।

প্রিয় টিউনার,

আপনার টিউনটি টেকটিউনস চেইন টিউন হিসেবে অন্তর্ভুক্ত করা হয়েছে। অভিনন্দন আপনাকে!

টেকটিউনসে চেইন টিউন কীভাবে প্রক্রিয়া হয় তা জানতে টেকটিউনস সজিপ্র এর https://www.techtunes.io/faq “চেইন টিউন” অংশ দেখুন।

নিয়মিত চেইন টিউন করুন। এখন থেকে আপনার নতুন করা চেইন টিউন গুলো টেকটিউনস থেকে চেইন এ যুক্ত করা হবে। চেইন টিউনে যুক্ত হবার ফলে চেইনের প্রতিটি পর্ব একসাথে থাকবে।

চেইনে নতুন পর্ব যুক্ত হলে তা টেকটিউনসের প্রথম পাতায় দেখা যাবে এবং “সকল চেইন টিউনস” https://www.techtunes.io/chain-tunes/ পাতায় চেইন টিউনটি যুক্ত হবে।

নিয়মিত চেইন টিউন করে নতুন নতুন টিউন আপনার চেইনে যুক্ত করুন এবং অসম্পূর্ণ না রেখে আপনার চেইন টিউনে নিয়মিত পূর্ণাঙ্গ রূপ দিন। ধন্যবাদ আপনাকে।

মেতে থাকুন প্রযুক্তির সুরে আর নিয়মিত করুন চেইন টিউন!

প্রিয় টিউনার,

আপনাকে এই চেইনটি চলমান করার জন্য অনুরোধ করা গেল। দয়া করে আপনার চেইন টিউনটি নতুন পর্ব যুক্ত করুন এবং নিয়মিত আপডেট করুন। ধন্যবাদ।