টুইটার বুটসট্র্যাপ [পর্ব-০১] :: প্রাথমিক আলোচনা

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

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

টুইটার বুটসট্র্যাপ হল এইচটিএমএল,সিএসএস,জাভাস্ক্রিপ্ট এর সমন্বয়ে তৈরি একটি ফ্রেমওয়ার্ক।যা দিয়ে আপনি  অনেক  কম  সময়  এ একটি পাওয়ারফুল ওয়েব সাইট  তৈরি করতে পারবেন।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 হল যখন বুটস্ত্রাপ এর ডিফল্ট থিম নিয়ে কাজ করবেন। তখন এইটি নিয়ে কাজ করতে হয়।এছাড়া এইটি তেমন একটি ব্যবহার করা হয়না।

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


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



Level 0

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

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


টিউনস


আরও টিউনস


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


টিউমেন্টস

অনেক সুন্দর হচ্ছে। আশা করবো শুরু থেকে শেষ অবধি আপনাকে আমরা সাথে পাবো।

Level 0

সুন্দর টিউন!

ওয়ালিফ@:অসংখ্য ধন্যবাদ ওয়ালিফ ভাইয়া সুন্দর একটি মন্তব্য এর জন্য,সাথে থাকুন।

mjh@ ধন্যবাদ টিউনটি পড়ার জন্য।

nice, keep it up.

ভাইয়া ভিডিও হলে ভাল হত,

Ashikur Rahman Tomal@Thanks.

লিমন:আসলে ভিডিও তৈরি করার মত হাতে তেমন সময় নেই।তারপর ও চেষ্টা করব।ধন্যবাদ আপনার মূল্যবান মন্তবের জন্য।