সুপ্রিয় টেকটিউনস কমিউনেটি আমি আপনাদের জন্য নিয়ে এসেছি টুইটার বুটসট্র্যাপ এর পূর্ণাঙ্গ চেইন কোর্স। আশা করছি ভালো কিছু শিখাতে পারবো।

টুইটার বুটসট্র্যাপ কি ?

টুইটার বুটসট্র্যাপ হল এইচটিএমএল,সিএসএস,জাভাস্ক্রিপ্ট এর সমন্বয়ে তৈরি একটি ফ্রেমওয়ার্ক।যা দিয়ে আপনি  অনেক  কম  সময়  এ একটি পাওয়ারফুল ওয়েব সাইট  তৈরি করতে পারবেন।Twitter Bootstrap বর্তমান বিশ্বের এক নাম্বার সিএসএস রেস্পন্সিভ ফ্রেমওয়ার্ক।

টুইটার বুটসট্র্যাপ শিখার আগে কি কি জানা থাকতে হবে ?

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

প্রথমে  গেট বুটসট্র্যাপ ওয়েব সাইটটি তে প্রবেশ করুন। http://getbootstrap.com  এর পর Download Bootstrap এ ক্লিক করুন। এর পর নিচের মত একটি উইন্ডো আসবে।Download Bootstrap এ ক্লিক করুন। একটি জিপ ফাইল ওপেন হবে।

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

ফোল্ডার গুলর ভিতরে কিছু ফাইল আছে।তার মধ্যে সব ফাইল আমাদের দরকার নেই।প্রথমে সিএসএস ফোল্ডার এ প্রবেশ করুন   bootstrap.min.css নামে একটি ফাইল দেখতে পাবেন। সেটি রেখে সিএসএস ফোল্ডার এ আর যত ফাইল আছে সব ডিলিট করে দিন। font ফোল্ডার এ যা আছে তা থাক ডিলিট করার প্রয়োজন নেই। js ফোল্ডার এ  bootstrap.min.js ফাইলটি রেখে বাকি সব ডিলিট করে দিন।
আপনাদের মধ্যে প্রশ্ন জাগতে পারে যে bootstrap.css ও bootstrap.min.css এবং bootstrap.js ও bootstrap.min.js  এর মধ্যে পার্থক্য কথায়।
bootstrap.css : এই ফাইলটি সব সিএসএস সুন্দর ভাবে সাজানো গুছানো।,কিন্তু এইটি ব্রাউজার এ লোড হতে অনেক সময় লাগে।তাছারা আমারা  bootstrap এর সিএসএস কে এডিট করবো না। আমরা শুধু মাত্র সিএসএস টি কে আমাদের প্রোজেক্ট এ ব্যবহার করবো।আপনারা নিচের ছবিটি দেখলে আরও ভালো ভাবে পরিষ্কার হবেন।

bootstrap.min.css : এর ফাইল গুলো এলোমেলো ভাবে সাজানো।সব ফাইল একটারসাথে আরেকটা করে সাজানো। যার কারনে ব্রাউজার এ লোড হতে কম সময় লাগবে। আমারা আমাদের প্রোজেক্ট এ   bootstrap.min.css  ব্যবহার করব।আমরা  bootstrap.css ও bootstrap.min.css কে জিপ ও আনজিপ এর সাথে ও তুলনা করতে পারি।একটা ফোল্ডার বা ফাইল কে যদি আমারা জিপ করি তাহলে তার ফাইল এর সাইজ তা কিছু টা হলে ও কমে । তেমনি bootstrap.css ওbootstrap.min.css ও অনেক টা সেই রকম । আপনারা নিচের ইমেজ টি দেখলে আরও ভালো বুঝতে পারবেন।

bootstrap এর মিনিফাইট ভার্শন সম্পর্কে জানতে গুগল এই what is the difference between bootstrap.css  এবং bootstrap.min.css লিখাটি লিখে সার্চ  করতে পারেন। অনেক Example পাবেন।  bootstrap.js ও bootstrap.min.js   এর জন্যও একই উধাহরণ তাই আর লিখলাম না। আর bootstrap-theme.css হল যখন বুটস্ত্রাপ এর ডিফল্ট থিম নিয়ে কাজ করবেন। তখন এইটি নিয়ে কাজ করতে হয়।এছাড়া এইটি তেমন একটি ব্যবহার করা হয়না।

এর পরের পর্বে আমি গ্রিড সিস্টেম নিয়ে আলোচোনা করব।

ধন্যবাদ সবাইকে টিউনটি পড়ার জন্য।
ফেসবুক এ আমি