এই পোস্টে আমরা বুটস্ট্র্যাপ দিয়ে একটি সাইট তৈরি করে শুরু করব, ওপেন সোর্স ফ্রেমওয়ার্ক যা আমাদের জন্য এটিকে প্রতিক্রিয়াশীল করা এবং এটিকে কিছু ইন্টারঅ্যাক্টিভিটি প্রদান করা সহজ করে তোলে। এটি একটি মৌলিক টেমপ্লেট যা একটি ডেভেলপমেন্ট এনভায়রনমেন্ট প্লাগইন দ্বারা স্বয়ংক্রিয়ভাবে তৈরি হয় যা আমরা আগে সুপারিশ করেছিলাম এবং আমাদের সংশোধন করতে হবে।
মধ্যে পূর্ববর্তী নিবন্ধ আপনি VS কোডিয়াম ইনস্টল করার নির্দেশাবলী পাবেন, এর ইউজার ইন্টারফেসকে স্প্যানিশ ভাষায় অনুবাদ করুন এবং বুটস্ট্র্যাপ প্লাগইন ইনস্টল করুন।
দুটি জিনিস মনে রাখতে হবে:
- আমরা যে কমান্ডগুলি ব্যবহার করি তা হল কীবোর্ড শর্টকাট, আপনাকে সেগুলি টাইপ করতে হবে। কপি/পেস্ট কাজ করে না।
- আমাদের কন্টেন্ট ম্যানেজার আমাকে HTML কোড প্রদর্শনের অনুমতি দেয় না তাই আমাকে স্ক্রিনশট ব্যবহার করতে হবে। যাতে আমি তাদের আপলোড করা উদাহরণগুলির কোডে আপনার অ্যাক্সেস থাকে গিটহাবের কাছে।
কিভাবে একটি GitHub সংগ্রহস্থল ক্লোন করবেন
যা আমাদের বাকিদের থেকে মহানদের আলাদা করে তা হল তারা যেভাবে সমস্যার প্রতি প্রতিক্রিয়া দেখায়। রিচার্ড স্টলম্যান তার প্রিন্টার ড্রাইভার পছন্দ করেননি এবং যেহেতু তারা তাকে এটি পরিবর্তন করতে দেয়নি, তাই তিনি বিনামূল্যে সফ্টওয়্যার আন্দোলন শুরু করেন। লিনাস টরভাল্ডস কোড শেয়ারিং প্ল্যাটফর্মগুলির কোনও দ্বারা বিশ্বাসী হননি এবং নিজের তৈরি করেছিলেন। গিট
প্রথাগত সফ্টওয়্যার বিতরণ সিস্টেমের বিপরীতে যেখানে শুধুমাত্র ব্যবহারকারীর ইন্টারঅ্যাকশন অনুমোদিত হয় ডাউনলোড করা হয়, গিট দিয়ে আপনি সময়ের সাথে প্রকল্পের বিবর্তন অনুসরণ করতে পারেন। অন্যান্য লোকেরা সংগ্রহস্থলটি ক্লোন করতে পারে, পরিবর্তন করতে পারে এবং প্রস্তাব করতে পারে যে মূল প্রকল্পের বিকাশকারীরা তাদের অন্তর্ভুক্ত করে। গৃহীত হলে, বিকাশকারীরা ফাইলগুলি ডাউনলোড এবং পুনরায় আপলোড না করে সহজেই তা করতে পারে৷
গিট ভিত্তিক বেশ কিছু পরিষেবা আছে, আমি গিটহাব বেছে নিয়েছি শুধুমাত্র কারণ এটি VS কোডিয়ামের সাথে একীভূত হয়।
আপনার কম্পিউটারে নমুনা ফাইলগুলি ডাউনলোড করার জন্য আপনাকে টার্মিনালে প্যাকেজগুলি ইনস্টল করার জন্য আপনার বিতরণের নির্দেশাবলী অনুসরণ করে গিট প্যাকেজটি ইনস্টল করতে হবে।
তারপর আপনি নিম্নলিখিত কমান্ড টাইপ করুন.
আমি ডকুমেন্ট ফোল্ডারে ফাইল সংরক্ষণ করতে পছন্দ করি তাই আমি এর সাথে ডিরেক্টরি পরিবর্তন করি
cd Documentos
তারপর আমি এর সাথে ফাইলগুলি ক্লোন করি:
git clone https://github.com/dggonzalez1971/bootstrap.git
আমি আপনাকে প্রতিটি বাকী নিবন্ধে এই পদক্ষেপগুলি মনে করিয়ে দিতে যাচ্ছি, যেহেতু এইভাবে আপনি উদাহরণ ফাইলগুলি আপলোড করার সাথে সাথে আপডেট করবেন৷
ফাইলগুলি দেখতে শুধু ফাইল এক্সপ্লোরারটি খুলুন এবং ফোল্ডারটি সন্ধান করুন বুটস্ট্র্যাপ।
বুটস্ট্র্যাপ দিয়ে একটি সাইট তৈরি করা
আপনি যদি ম্যানুয়ালি কোডটি টাইপ করতে চান তবে আমরা একটি ফোল্ডার তৈরি করে শুরু করি যেখানে আমরা সাইটটি সংরক্ষণ করব। আপনি আপনার যা খুশি নাম রাখতে পারেন।
তারপরে আমরা পরবর্তী পদক্ষেপগুলি অনুসরণ করি:
- মেনুতে যান সংরক্ষণাগার।
- ক্লিক করুন নতুন টেক্সট ফাইল.
- ক্লিক করুন সংরক্ষণ করুন।
- আমরা যে ফোল্ডারটি তৈরি করেছি তা সন্ধান করি এবং ফাইলটির নাম রাখি উদাহরণ1.html।
- ক্লিক করুন সংরক্ষণ করুন।
কখনও কখনও ফাইল এক্সপ্লোরার উইন্ডো VSCodium এক দ্বারা লুকানো হতে পারে।
আসুন এক্সটেনশনটি আমাদের জন্য মৌলিক টেমপ্লেট তৈরি করুন। এই জন্য আমরা টাইপ !b5-$
এটি কোড তৈরি করবে যা আপনি উদাহরণ ফোল্ডারে example1.html হিসাবে পাবেন
আমরা নিম্নলিখিত দেখতে পাবেন:
এটি বুটস্ট্র্যাপ এক্সটেনশন দ্বারা উত্পন্ন কোড।
আমরা এই ফাইলে কিছু পরিবর্তন করতে যাচ্ছি। আপনি example2.html নামের অধীনে পরিবর্তনগুলি পাবেন
- লাইন 2 এ আমরা es এর সাথে eng প্রতিস্থাপন করে ভাষা পরিবর্তন করি। এটি সার্চ ইঞ্জিনকে নির্দেশ করে যে সাইটের ভাষা স্প্যানিশ।
- 6 লাইনে আমরা লেবেলের অধীনে থাকা পাঠ্যটি পরিবর্তন করি খেতাব। আমরা রাখি আমার প্রথম বুটস্ট্র্যাপ সাইট।
- 12 লাইনে আমরা ট্যাগের মধ্যে বিষয়বস্তু পরিবর্তন করি h1 দ্বারা এটি বুটস্ট্র্যাপ দিয়ে তৈরি একটি সাইট।
এর পরে, আমরা কিছু গুরুত্বপূর্ণ পরিবর্তন করব। এই পরিবর্তনগুলি এর সাথে করতে হবে:
- প্লাগইন বিকাশকারী বুটস্ট্র্যাপ সংস্করণগুলির সাথে তাল মিলিয়ে চলতে পারে না এবং আরও বর্তমান সংস্করণ রয়েছে৷
- বুটস্ট্র্যাপ উপাদানগুলির জন্য অনেকগুলি বিকল্প রয়েছে এবং আমি অন্য একটিতে আগ্রহী।
- অফিসিয়াল ডকুমেন্টেশন অনুসারে, জাভাস্ক্রিপ্ট লাইব্রেরিতে কলগুলি অবশ্যই বডি ট্যাগের ভিতরে থাকতে হবে।
উদাহরণ 2 আমরা লাইন 7 এর বিষয়বস্তু পরিবর্তন করেছি, লাইন 8 এবং 9 মুছে ফেলেছি এবং সংখ্যার সামঞ্জস্য বজায় রাখতে অবশিষ্ট সামগ্রী আপলোড করেছি। তারপরে আমরা একটি নতুন লাইন 10 তৈরি করতে 11 লাইনের শেষে ক্লিক করি এবং জাভাস্ক্রিপ্ট লাইব্রেরিতে লিঙ্কটি রাখি।
আপনি যদি কোডটি বুঝতে না পারেন তবে চিন্তা করবেন না। আমি পরবর্তী নিবন্ধে প্রতিটি লাইনের কাজ ব্যাখ্যা করব।