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

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

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

১.   একটি ওয়েব সাইট এর  কন্টেন্ট কে কিভাবে বিভিন্ন ডিভাইসে সাপোর্ট দেয়া যায় বা  বিভিন্ন ডিভাইসে  ওয়েব সাইট  এর কন্টেন্ট কি রকম দেখাবে।
২.   ইনপেন্ট এলিমেন্ট  এর ব্যবহার।
৩.   কোন কোন Browser এ বুটস্ত্রাপ সাপোর্ট দিবে।
৪.    রেস্পন্সিভ ঊটিলিটি।
৫.   রেস্পন্সিভ ওয়েব ডিজাইন এর কিছু টিপস।

আমারা বুটসট্র্যাপ এর ২য় পর্বে  col-lg,col-md,col-xs,.col-sm ইত্যাদি সম্পর্কে বিস্তারিত জেনেছিলাম। আপনি যদি এর আগের পর্ব গুলো দেখে না থাকেন তবে এই লিংক এ গিয়ে দেখে আসুন।
col-xs-4 ক্লাসটি দিয়ে যদি আমারা মোবাইল এর জন্য সাইট তৈরি করতাম তাহলে,col-xs এর বড় হল col-sm তাহলে সে   col-sm এ ও সে অটোমেটিক  col-sm-4 বা  চার কলাম নিয়ে নিত। এর পর col-sm এর বড় হল col-md তাহলে সে অটোমেটিকেলি col-md-4 তে চার কলাম নিয়ে নিবে। col-md এর বড় হল col-lg সে col-lg-4 তে চার কলাম নিয়ে নিবে।

আপনি এই ভাবে দিলে যে আউটপুট আসবে

আর এইভাবে দিলেও একই আউটপুট আসবে।

 

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

 

আপনি যদি মজিলা ফাইয়ারফক্স ব্যবহার করে থাকেন,সেখানে যদি ফাইয়ারবাগ ইন্সটল করা থাকে তাহলে Ctrl+shift+m চাপুন তাহলে আপনি কোন ডিভাইস এ কি রকম দেখাবে তা দেখথে পারবেন।
Large devices  এর আউটপুট

Medium devices Desktops এর আউটপুট

Small devices Tablets  এর  আউটপুট

Extra small devices Phones  এর অউটপুট

   রেস্পন্সিভ ওয়েব ডিজাইন এর কিছু টিপস

আপনারা col-sm এ থাকা অবস্থায় ইনপেন্ট এলিমেন্ট করে দেখতে পারেন col-sm-4 টি বাড়িয়ে কমিয়ে দেখতে পারেন। যেমন   col-sm-4  এর জায়গায় আপনি col-sm-5 বা col-sm-6 চেপে Enter দিন পরিবর্তন দেখতে পারবেন।

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

আমরা আমাদের ওয়েবসাইট এর যেকোনো পার্টকে মোবাইল ডিভাইসে এ বা Large ডিভাইসে visible বা হাইড করে দিতে পারি।

চলুন ব্যাপারটি বাস্তবে করা যাক

 

এইটি দিলে শুধুমাত্র  Large devices এ শো করবে। আর অন্য ডিভাইস এ এইটি শো করবে না।

আপনি Ctrl+shift+m  চেপে দেখুন স্মল ডিভাইস এ দুইটি কলাম শো করছে।

এই ভাবে করে আপনারা   visible-xs,visible-sm,visible-md,visible-lg. inline-block,block ইত্যাদি দিয়ে দেখতে পারেন। আশা করি পারবেন। টুইটারবুটস্ত্রাপ এ এই গুলো ছাড়া আর কিছু বুঝার নেই। আর  বাকি সব ক্লাস কপি পেস্ট করে ব্যবহার করা হয়।

কোন কোন Browser এ বুটস্ত্রাপ সাপোর্ট দিবে ?????

টুইটার বুটস্ত্রাপ এ যে সব ওয়েব ব্রাউজার এ সাপোর্ট দিবে তার একটি তালিকাঃ-

বুটস্ত্রাপ মুটামুটি সকল Web Browser এ সাপোর্ট করে। Andorid মোবাইল ও iOS এ নট সাপোর্টএড দেখে ভাবেন না যে তাতে  টুইটার বুটস্ত্রাপ এ তৈরি করা ওয়েব সাইট  দেখা যাবে না।আসলে যারা Andorid এবং ios মোবাইল ব্যবহার করে তারা অনেক অ্যাডভান্স ইউজার, তারা বেশির ভাগই গুগলক্রম ও মোজিলা ফাইয়ারফক্স ব্যবহার  করে।
সোর্স ফাইল ডাউনলোড করতে এই নিচের ছবিতে  ক্লিক করুন।

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

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

Level 0

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

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


টিউনস


আরও টিউনস


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


টিউমেন্টস

ধন্যবাদ।

@লিমন : আপনাকে ও ধন্যবাদ।

thanks . hope you will conitnue

@স্বপ্নবাদী সিফাত:আমি চালিয়ে যাবো,সাথে থাকুন ধন্যবাদ আপনার মূল্যবান টিউমেন্ট এর জন্য।

Level 1

ভাই দারুন হইছে।নতুন পোস্টের অপেক্ষায় আছি।

techcity@: ধন্যবাদ সাথে থাকুন।

ডাটাবেজের পাশাপাশি এটা শিখতে চাচ্ছি। ধন্যবাদ। চালিয়ে যান। সাথেই আছি…

সাহীদুজ্জামান সাহীদ@:হুম অবশই শিখতে পারবেন,আপনাকে ও ধন্যবাদ সুন্দর টিউমেন্ট এর জন্য।