বুটস্ট্র্যাপ দিয়ে শুরু করা
এক দশক আগে, একটি ওয়েবসাইট থাকা একটি স্বপ্ন ছিল এবং কেবল প্রযুক্তিবিদদের জন্যই সম্ভব ছিল। আজকাল প্রতিটি সাধারণ মানুষ একটি সাইট বা ব্লগ শুরু করতে পারে বিনামূল্যে সাইট নির্মাতা সরঞ্জাম এবং UI কাঠামোর জনপ্রিয়তার জন্য ধন্যবাদ । যেহেতু সাইট বিল্ডিং শিল্প প্রকৃতিতে খুব প্রতিযোগিতামূলক, তাই প্রতিটি কোম্পানিকে শেষ ব্যবহারকারীদের আকৃষ্ট করার জন্য অন্যের চেয়ে ভাল প্রস্তাব দেওয়ার দিকে মনোনিবেশ করতে হবে। বুটস্ট্র্যাপ হল জনপ্রিয় কাঠামোর মধ্যে একটি এবং আমরা ব্যাখ্যা করব কিভাবে আপনি আপনার ওয়েবসাইট তৈরির জন্য বুটস্ট্র্যাপ শেখা শুরু করতে পারেন।
ব্যবহারকারীদের এবং বিকাশকারীদের তাদের ওয়েবসাইটের সাথে শুরু করার জন্য তিনটি ধরণের সরঞ্জাম রয়েছে:
- ওয়ার্ডপ্রেস.অর্গ, ড্রুপাল এবং জুমলার মত স্ব-হোস্টেড ওপেন সোর্স কন্টেন্ট ম্যানেজমেন্ট সিস্টেম ।
- WordPress.com, Weebly এবং Wix এর মত ফ্রি হোস্ট করা প্ল্যাটফর্ম ।
- বুটস্ট্র্যাপ এবং গুগল ম্যাটেরিয়াল ডিজাইনের মতো স্বাধীন ইউজার ইন্টারফেস (UI) ফ্রেমওয়ার্ক।
স্ব-হোস্টেড প্ল্যাটফর্মগুলির সুযোগ বিস্তৃত এবং বেশিরভাগ শেষ ব্যবহারকারীদের জন্য উপযুক্ত নয় যাদের বিনিয়োগ করার সময় নেই। বিনামূল্যে হোস্ট করা প্ল্যাটফর্মগুলি ব্যবহার করা সহজ কিন্তু ভারী নির্ভরতা রয়েছে যা আপনার ক্ষমতাগুলিকে শুধুমাত্র সেই প্ল্যাটফর্মে সীমাবদ্ধ করবে। শেষ বিকল্পটি হল স্ব-হোস্টিং, উন্নয়ন এবং ফ্রন্টএন্ড এলিমেন্ট ব্লকগুলিকে পুনরায় ব্যবহারের স্বাধীনতা। এই নিবন্ধে, আসুন বুটস্ট্র্যাপ ফ্রন্টএন্ড ফ্রেমওয়ার্ক দিয়ে কীভাবে শুরু করা যায় সে সম্পর্কে আরও বিশ্লেষণ করি।
বুটস্ট্র্যাপ শিখুন
বুটস্ট্র্যাপ কি?
এই সময়ে উপলব্ধ জনপ্রিয় ইউজার ইন্টারফেস কাঠামোর মধ্যে বুটস্ট্র্যাপ অন্যতম। এটি একটি ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা পিএইচপি এর মত সার্ভার সাইড স্ক্রিপ্টের সাথে জড়িত না করে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে তৈরি করা হয়েছে । এটি প্রথমে টুইটার দ্বারা "টুইটার ব্লুপ্রিন্ট" নামে তৈরি করা হয়েছিল যাতে একাধিক ডিভাইস এবং সরঞ্জামগুলিতে সামঞ্জস্যপূর্ণ দৃশ্যমানতা উন্নত করা যায়।
বুটস্ট্র্যাপ 100k+ তারকাসহ GitHub এ উপলব্ধ একটি জনপ্রিয় প্রকল্প । বুটস্ট্র্যাপ রিলিজ এবং আপডেটের সর্বশেষ তথ্য অফিসিয়াল ওয়েবসাইট getbootstrap.com এ পাওয়া যায় । মোবাইল প্রথম পদ্ধতির সাথে বুটস্ট্র্যাপের জনপ্রিয়তা বৃদ্ধি পায় এবং বুটস্ট্র্যাপ থিমগুলি ওয়ার্ডপ্রেসের মতো জনপ্রিয় বিষয়বস্তু পরিচালনার থিমগুলিতে সহজে রূপান্তরিত হয়। কোডিং দক্ষতা ছাড়াই আপনার ওয়েবসাইট কিক-স্টার্ট করার জন্য মোবাইরিসের মতো জনপ্রিয় বুটস্ট্র্যাপ সাইট নির্মাতাও রয়েছে ।
বুটস্ট্র্যাপ সংস্করণ
নীচের টেবিলে বুটস্ট্র্যাপের সংস্করণ আপডেট দেখানো হয়েছে, এটি V4 আলফা 6 এ যখন এই নিবন্ধটি লেখা হয়েছিল।
| সংস্করণ | তারিখ | প্রধান পরিবর্তন |
|---|---|---|
| সংস্করণ 1 | 19 আগস্ট 2011 | মুক্ত উৎস |
| সংস্করণ 2 | 31 জানুয়ারি 2012 | 12 টি কলাম গ্রিড লেআউট এবং গ্লিফিকন সহ প্রধান আপডেট। |
| সংস্করণ 3 | 19 আগস্ট 2013 | সমতল নকশা এবং মোবাইল প্রথম পদ্ধতি। |
| সংস্করণ 4 | 19 আগস্ট 2015 | CSS ক্লাসে প্রধান আপডেট, Sass ব্যবহার এবং Glyphicons অপসারণ, tether.js বাদ দেওয়া হয়েছে এবং popper.js যোগ করা হয়েছে। |
| সংস্করণ 5 | 05 মে 2021 | JQuery, বুটস্ট্র্যাপ আইকন, নতুন লোগো এবং RTL সমর্থন থেকে মুক্ত। |
সাধারণ ব্যবহার
এই মুহুর্তে স্থিতিশীল সংস্করণ হল বুটস্ট্র্যাপ 5.01 এবং যদি আপনি আগের সংস্করণ 3 বা 4 ব্যবহার করেন তবে আপনাকে সর্বশেষ সংস্করণে স্থানান্তরিত করতে হবে। শেষ ব্যবহারকারীরা সরাসরি পূর্বনির্ধারিত CSS / JS ফাইল ডাউনলোড করে আপনার সাইটে ব্যবহার করতে পারেন। সংস্করণ 3.4.1 ডাউনলোড করুন এখানে, V4.6 এখানে এবং V5.01 এখানে । আপনি যদি ক্লায়েন্ট বা আপনার নিজের জন্য প্রকল্পগুলি বিকাশ করছেন তবে আপনি গিটহাব থেকে সাস ফাইলগুলির সাথে সম্পূর্ণ সোর্স কোড ডাউনলোড করতে পারেন।
দ্রষ্টব্য: আপনার উইন্ডোজ ভিত্তিক পিসি বা ম্যাকওএস -এ বুটস্ট্র্যাপ ইনস্টল করা একটি জটিল কাজ কারণ এতে অনেক নির্ভরতা রয়েছে। সংক্ষেপে আপনার কম্পিউটারে Node.js এবং NPM ইনস্টল করা উচিত এবং কম্পাইল করার জন্য গ্রান্ট সহ। আরও আপনি আংশিক বা অন্তর্ভুক্ত ব্যবহার করে স্ট্যাটিক সাইট ফাইল তৈরির জন্য Harp.js ব্যবহার করতে পারেন।
লাইসেন্স
বুটস্ট্র্যাপ ফাইলগুলি এমআইটি লাইসেন্সের অধীনে একক প্রয়োজনের সাথে বিতরণ করা হয় কারণ কপিরাইট তথ্য সকল বুটস্ট্র্যাপ সোর্স ফাইলে রাখা উচিত।
লাইসেন্স এবং কপিরাইট বিজ্ঞপ্তিটি বুটস্ট্র্যাপের CSS এবং জাভাস্ক্রিপ্ট ফাইলগুলিতে অন্তর্ভুক্ত করুন যখন আপনি সেগুলি আপনার কাজে ব্যবহার করেন।
আপনি GitHub এ সম্পূর্ণ লাইসেন্স দেখতে পারেন ।
আপনার সাইট শুরু
বুটস্ট্র্যাপ দিয়ে আপনার সাইট নির্মাণ শুরু করার দুটি উপায় আছে। একটি হল আপনার হোস্টিং সার্ভারে CSS এবং JS ফাইল ডাউনলোড এবং হোস্ট করা এবং অন্যটি হল CDN লিংক ব্যবহার করা। আমরা একটি স্টার্টার টেমপ্লেট তৈরি করার সুপারিশ করি এবং তারপরে স্টার্টার টেমপ্লেটের ভিতরে সমস্ত বুটস্ট্র্যাপ উপাদান ব্যবহার শুরু করি। আপনি বুটস্ট্র্যাপ 5 স্টার্টার টেমপ্লেট বিভাগে আরও বিশদ পেতে পারেন ।
নিচে আপনার সাইটে ব্যবহারের জন্য CDN লিঙ্ক দেওয়া হল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>ক্রম অনুসারে পপার এবং তারপর বুটস্ট্র্যাপ জেএস ফাইল ব্যবহার করা নিশ্চিত করুন, অন্যথায় আপনি পপার স্ক্রিপ্ট সহ একক বান্ডেল স্ক্রিপ্ট ফাইল ব্যবহার করতে পারেন। একইভাবে বুটস্ট্র্যাপ CSS এর পরে যেকোনো কাস্টম CSS স্টাইলশীট যোগ করুন, যাতে এটি ফ্রেমওয়ার্ক সংজ্ঞাগুলির উপর অগ্রাধিকার না নেয়। বুটস্ট্র্যাপ 5 বক্স-সাইজিং প্রপার্টির জন্য বর্ডার-বক্স ব্যবহার করে যা লেআউটকে প্রভাবিত করতে পারে। শুধুমাত্র ইনলাইন CSS ঘোষণা করে নির্দিষ্ট উপাদানের জন্য প্রয়োজন হলে আপনি বিষয়বস্তু-বাক্সে এটি পরিবর্তন করতে পারেন ।
বুটস্ট্র্যাপ 5 শিখুন (সূচক )
রেকর্ডিং উত্স: webnots.com