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

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

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

১.   একটি ওয়েব সাইট এর  কন্টেন্ট কে কিভাবে বিভিন্ন ডিভাইসে সাপোর্ট দেয়া যায় বা  বিভিন্ন ডিভাইসে  ওয়েব সাইট        এর কন্টেন্ট কি রকম দেখাবে।
২.   ইনপেন্ট এলিমেন্ট  এর ব্যবহার।
৩.   কোন কোন 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 মোবাইল ব্যাবহার করে তারা অনেক অ্যাডভান্স ইউজার, তারা বেশির ভাগ ই গুগলক্রম ও মোজিলা ফাইয়ারফক্স ব্যাবহার  করে।




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

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

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

ফেসবুক এ আমি

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