Advertisement
  1. Web Design
  2. Bootstrap

টুইটার বুটস্ট্র্যাপ ১০১: ভূমিকা

Scroll to top
Read Time: 3 min
This post is part of a series called Twitter Bootstrap 101.
Twitter Bootstrap 101: The Grid

() translation by (you can also view the original English article)

টুইটার বুটস্ট্র্যাপ হচ্ছে যত্ন করে সাজানো ইউজার ইন্টারফেস এলিমেন্ট, লেআউট এবং জাভাস্ক্রিপ্ট টুলের একটি অসাধারণ সেট, যা আপনি বিনামূল্যে আপনার পরবর্তী প্রজেক্টে ব্যবহার করতে পারবেন। এই ভিডিও সিরিজে আমরা আপনাকে বুটস্ট্র্যাপের সাথে পরিচয় করার পাশাপাশি ডাউনলোড থেকে শুরু করে বুটস্ট্র্যাপ বেইজড একটি ওয়েবসাইট তৈরি করার সম্পূর্ণ প্রক্রিয়াটি দেখাবো।

যখন মার্ক অটো (@mdo) এবং জ্যাকব থর্নটন (@fat) ২০১১ সালের অগাস্টে টুইটার বুটস্ট্র্যাপ সারা বিশ্বে উন্মুক্ত করে, তখন তাঁদের ঘোষণাতেই এটা কি কাজে ব্যবহার করা হবে তা ব্যাখ্যা করা হয়েছেঃ ফ্রন্টএন্ড ডেভেলপারদেরকে আরও দ্রুত ও সহজে তাঁদের প্রজেক্ট তৈরি করতে এটা সাহায্য করবে। 

টুইটার বুটস্ট্র্যাপে আছে সহজে-ব্যবহারযোগ্য একটি ৯৬০ কলাম গ্রিড, এছাড়াও দক্ষতার সাথে বানানো টাইপোগ্রাফি, ন্যাভিগেশন, সারণী, ফরম, বাটনসহ, আরও অনেক কিছু।  প্রতিদিনের টুকিটাকি জাভাস্ক্রিপ্টের ছোঁয়া এনে দিতে, বুটস্ট্র্যাপে আছে  ড্রপ-ডাউন মেনুর জন্য এক সেট সুন্দর করে বানানো জেকুয়েরি প্লাগিন, ট্যাব, মডেল বক্স, টুলটিপ, এলার্ট ্ম্যাসেজসহ আরও অনেক কিছু।

bootstrapbootstrapbootstrap

এই উপাদানগুলো একত্রে ব্যবহার করে একটি সম্পূর্ণ নতুন, মানসম্মত, ইউজার ফ্রেন্ডলি, প্রফেশনাল HTML5 ওয়েবসাইট তৈরি করা সম্ভব। যেমনটি @mdo তাঁর মূল পোস্টে বলেছেনঃ

বুটস্ট্র্যাপ যেকোনো অ্যাপ্লিকেশন উন্নত দ্রুততর, পরিচ্ছন্ন ও ব্যবহারবান্ধব করে তোলার একটি সহজ উপায় ... ডেভেলপারদের দৈনন্দিন ব্যবহারের জন্য একটি পরিচ্ছন্ন এবং অভিন্ন সমাধান প্রদান করতে অতুলনীয়। 

এবং এখনও এটা অন্য কোনওভাবে কাস্টমাইজ করা যাবে না।  @mdo এর ভাষায়, "যদিও টুইটার বুটস্ট্র্যাপ অনেক বড়", তবুও এটা অনেক ইউনিক ডিজাইন তৈরির জন্য যথেষ্ট উপযোগী নয়। সুতরাং,

আপনি বুটস্ট্র্যাপ ব্যবহার করে কোনও কুইক প্রটোটাইপ অথবা আরও অত্যাধুনিক ডিজাইন এবং বৃহত্তর প্রকৌশল প্রচেষ্টার বাস্তবায়ন গাইড হিসেবে ব্যবহার করতে পারেন।

আপ্যাচি ২.০ লাইসেন্সের অধীনে একটি উদারনৈতিক লাইসেন্স, সৃজনশীলতার জন্য বেশ উপযোগী। তাই টুইটারকে নির্দিষ্ট কিছু ক্রেডিট প্রদান করে  আপনি আপনার পছন্দমত যেকোনো কনটেন্ট তৈরি, সংশোধন ও পরিবর্তন করে আপনার নিজের জন্য, ক্লায়েন্টের জন্য বা ব্যবসায়িক উদ্দেশ্যে যেকোনো ওয়েবসাইট তৈরি ও লাঞ্চ করতে পারবেন। (আরও জানতে এই ডিসকাশন থ্রেডটি দেখুন, যেখানে টুইটার কর্তৃপক্ষ ব্যাখ্যা করেছেন কিভাবে লাইসেন্স অনুযায়ী কোড কাস্টমাইজ করতে হয়।

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

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

আপনি আমার মত হয়ে থাকলে এটা চেক করে দেখতে এতক্ষনে উদগ্রীব হয়ে যাওয়ার কথা--এবং আপনার অবশ্যই চেক করা উচিৎ!

আসলে, ইতিমধ্যেই আমি এটা পরীক্ষা করেছি। চলুন, এবার বিস্তারিত দেখা যাক। 

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


কোড ডাউনলোড করুন


ভিডিও ১ঃ ভূমিকা

এছাড়াও, ভিডিও ডাউনলোড করতে পারেন, অথবা iTunes থেকে Webdesigntuts+ স্ক্রিনকাস্টে সাবস্ক্রাইব করুন! 

এই ভিডিওতে দেখানো ধাপগুলো:

  1.  বুটস্ট্র্যাপ হোমপেজের অনলাইন ডকুমেন্টেশনে যান
  2. বুটস্ট্র্যাপ দিয়ে তৈরি কিছু সাইটসমূহ দেখুন
  3. গিটহাব থেকে কোড ডাউনলোড করুন
  4. আনজিপ করুন

ভিডিও ২ঃ আনপ্যাক করা এবং সাজানো 

এছাড়াও, ভিডিও ডাউনলোড করতে পারেন, অথবা iTunes থেকে Webdesigntuts+ স্ক্রিনকাস্টে সাবস্ক্রাইব করুন! 

এই ভিডিওতে যেসব ধাপ দেখানো হয়েছে:

আমরা নিচের কাজগুলো করবো, কিন্তু ক্রমান্বয়ে করা জরুরী নয়:

  1. CSS দিয়ে সাজানো
  2. জাভাস্ক্রিপ্ট দিয়ে সাজানো
  3. অপ্রয়োজনীয় ফাইলসমূহ মুছে ফেলা (অন্যদিনের কাজ কমাবে)
  4. Apache 2.0 লাইসেন্স ফাইলসমূহ রাখা, কারণ টুইটার বুটস্ট্র্যাপ লাইসেন্স টার্ম অনুযায়ী এগুলো রাখতে হবে।
  5. আমাদের নিজস্ব বুটস্ট্র্যাপ বিল্টেড সাইট ডেভেলপের জন্য প্রস্তুত করা

পরবর্তী ধাপে কি থাকবে?

পরবর্তী টিউটোরিয়ালগুলোতে, আমি আপনাকে বুটস্ট্র্যাপের মূল ফিচারগুলো দেখাবো, এবং বুটস্ট্র্যাপ দিয়ে আপনার নিজস্ব কাস্টম বুটস্ট্র্যাপ স্নিপেট দিয়ে কাস্টম রিপোজিটরি তৈরি করতে সাহায্য করবো। এভাবেই, আমরা বুটস্ট্র্যাপ সম্পর্কে জানবো, এটার ব্যবহার এবং কাস্টমাইজ সম্পর্কে অভিজ্ঞতা অর্জন করবো। এবং পরবর্তীতে আরও দক্ষতার সাথে যাতে বুটস্ট্র্যাপের তৈরি প্রজেক্ট তৈরি করতে পারি সেজন্য প্রস্তুতি নিবো। 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.