একটি মোবাইল-বন্ধুত্বপূর্ণ এবং প্রতিক্রিয়াশীল ওয়েব অ্যাপ্লিকেশন লিখতে jQuery এবং বুটস্ট্র্যাপ যুক্ত করা

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

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

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

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

আমাদের প্রকল্পে jQuery এবং বুটস্ট্র্যাপ অন্তর্ভুক্ত

JQuery ডাউনলোড করতে, প্রকল্পের ওয়েব সাইটে http://jquery.com এ যান এবং সর্বশেষ স্থিতিশীল সংস্করণের জন্য বিজ্ঞপ্তিটি প্রদর্শন করে এমন বোতামটিতে ক্লিক করুন।

এই লেখার সময় এটি সম্পূর্ণ ব্রাউজারের সামঞ্জস্যের জন্য v1.11.3 (ইন্টারনেট এক্সপ্লোরার সংস্করণ 6, 7 এবং 8 সহ) বা v2.1.4 আপনি যদি নিশ্চিত হন যে আপনার দর্শকরা IE এর সংস্করণগুলি ব্যবহার করবেন না।

আমরা এই গাইডটিতে এই দ্বিতীয় বিকল্পটি নিয়ে যাব। ডাউনলোড লিঙ্কটিতে এখনও ক্লিক করবেন না (নিম্নলিখিত চিত্রটি কেবল সঠিক বিকল্পটি বোঝাতে বোঝানো হয়েছে)।

আপনি খেয়াল করবেন যে আপনি একটি সংকুচিত .min.js বা একটি সঙ্কুচিত .js jQuery এর সংস্করণ ডাউনলোড করতে পারেন। প্রথমটি ওয়েবসাইটগুলির জন্য বিশেষত বোঝানো হয়েছে এবং পৃষ্ঠাগুলির লোড সময় হ্রাস করতে সহায়তা করে (এবং এভাবে গুগল আপনার সাইটকে আরও ভালভাবে রেঙ্ক করবে), দ্বিতীয়টি উন্নয়নের উদ্দেশ্যে কোডারগুলিতে লক্ষ্যযুক্ত।

ব্রেভিটি এবং ব্যবহারের স্বাচ্ছন্দ্যের স্বার্থে, আমরা আমাদের সাইটের কাঠামোর অভ্যন্তরে স্ক্রিপ্টস ফোল্ডারে সংকোচিত সংস্করণ (মিনিডাইফড হিসাবে পরিচিত) ডাউনলোড করব।

সংকুচিত, উত্পাদনের সংস্করণটির জন্য লিঙ্কটিতে ডান ক্লিক করুন এবং লিংক হিসাবে সংরক্ষণ করুন নির্বাচন করুন ... এবং তারপরে নির্দেশিত ডিরেক্টরিতে নেভিগেট করুন (আপনি আমাদের অংশটি প্রথম অংশে সংরক্ষণ করার জন্য যে পথটি নির্দেশ করেছেন সেখানে আপনি নির্দেশিত পথটি উল্লেখ করতে পারেন)।

শেষ অবধি, বর্তমান ডায়লগের নীচে সংরক্ষণ করুন ক্লিক করুন:

এখন আমাদের প্রকল্পে বুটস্ট্র্যাপ যুক্ত করার সময় এসেছে। Http://getbootstrap.com এ যান এবং ডাউনলোড বুটস্ট্র্যাপ ক্লিক করুন। পরবর্তী পৃষ্ঠায়, একটি জিপ ফাইলে ব্যবহারের জন্য প্রস্তুত, মিনিফাইড উপাদানগুলি ডাউনলোড করতে নীচে নির্দেশিত হিসাবে হাইলাইট করা অপশনটিতে ক্লিক করুন:

ডাউনলোড শেষ হয়ে গেলে আপনার ডাউনলোড ফোল্ডারে যান, ফাইলটি আনজিপ করুন এবং হাইলাইট করা ফাইলগুলি আপনার প্রকল্পের অভ্যন্তরে নির্দেশিত ডিরেক্টরিতে অনুলিপি করুন:

# cd ~/Downloads
# unzip -a bootstrap-3.3.5-dist.zip
# cd bootstrap-3.3.5-dist

# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
# cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts

আপনি যদি এখন নেটবিনে আপনার সাইটের কাঠামো প্রসারিত করেন তবে এটি নীচের মত দেখতে হবে: