TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

5

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

  • এগুলি বুটস্ট্র্যাপ 4 এবং 5 ফ্রেমওয়ার্ক দিয়ে তৈরি কাস্টম উইজেট।
  • আপনি আপনার সাইটে এই উইজেটগুলি অনুলিপি এবং আটকানো বা স্টার্টার টেমপ্লেট সহ পরীক্ষা করতে পারেন
  • আমরা প্রতিটি উইজেটকে কোড এবং ডেমো দিয়ে ব্যাখ্যা করেছি যাতে আপনি কেবল কপি এবং পেস্ট করতে পারেন।
  • আপনি আপনার নিজের কোড দিয়ে আরও উইজেট কাস্টমাইজ করতে পারেন।

উইজেটকে একটি স্বাধীন উপাদান হিসেবে ব্যবহার করার ব্যাখ্যা দেওয়ার জন্য, আমরা দেখিয়েছি কিভাবে উইবেলি সাইটে কিছু উইজেট ব্যবহার করতে হয়। যদিও Weebly একটি সাধারণ HTML এবং CSS প্ল্যাটফর্ম, আপনাকে আপনার ওয়েবসাইটে ব্যবহার করার জন্য কিছু পরামিতি সামঞ্জস্য করতে হতে পারে। সেরা উদাহরণ হল CSS- এর বক্স-সাইজিং প্রপার্টি, যদি আপনি প্যাডিং সংক্রান্ত সমস্যা লক্ষ্য করেন তবে উইজেটের নির্দিষ্ট উপাদানগুলির জন্য আপনাকে বিষয়বস্তু-বাক্স বা সীমানা-বাক্সে এটি পরিবর্তন করতে হতে পারে।

1 বুটস্ট্র্যাপ স্কুইড কার্ড উইজেট

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

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

প্লেইন টেক্সট সহ স্কুইড কার্ড

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

এক্স অক্ষের +8 ডিগ্রি

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

এক্স অক্ষের মধ্যে -8 ডিগির সাথে স্কুইড কার্ড

2 ব্যবহারকারীর প্রোফাইল কার্ড উইজেট

পরবর্তী উইজেট হল একটি রঙিন ব্যবহারকারী প্রোফাইল উইজেট। আপনি আপনার প্রয়োজন অনুযায়ী প্রোফাইল ছবি, সামাজিক লিঙ্ক এবং সংক্ষিপ্ত বিবরণ কাস্টমাইজ করতে পারেন। এটি আপনার সাইটে ব্যবহারকারীদের দেখানোর একটি ভাল উপায়।

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

বাম প্রোফাইল ছবি সহ ব্যবহারকারী কার্ড

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

বুটস্ট্র্যাপ ব্যবহারকারী প্রোফাইল কার্ড

3 ফ্লিপ কার্ড উইজেট

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

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

বুটস্ট্র্যাপ অনুভূমিক কার্ড ফ্লিপ উইজেট

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

বুটস্ট্র্যাপ উল্লম্ব কার্ড ফ্লিপ উইজেট

4 লম্বা ব্যাকগ্রাউন্ড সহ বুটস্ট্র্যাপ টিমের সদস্য

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

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

লম্বা পটভূমি সহ বুটস্ট্র্যাপ টিমের সদস্য উইজেট

বুটস্ট্র্যাপ সহ 5 সিএসএস প্রাইসিং টেবিল

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

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

সিএসএস প্রাইসিং টেবিল উইজেট

6 প্রশংসাপত্র স্লাইডার

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

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

দুটি সমান কলাম প্রশংসাপত্র স্লাইডার

7 বুটস্ট্র্যাপ ব্লক উদ্ধৃতি

উদ্ধৃতি, উদ্ধৃতি এবং রেফারেন্স বিষয়বস্তু প্রদর্শনের জন্য ব্লক কোটগুলি দরকারী। বুটস্ট্র্যাপে ডিফল্টভাবে একটি উদ্ধৃতি উপাদান নেই। যাইহোক, আপনি সহজেই CSS কোডের ছোটখাটো কাস্টমাইজেশন করে ব্লক কোটের বিভিন্ন স্টাইল তৈরি করতে পারেন।

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

বুটস্ট্র্যাপ ব্লককোট স্টাইল

8 সিএসএস লম্বা পৃষ্ঠা

আপনি কোন জাভাস্ক্রিপ্ট ছাড়াই সম্পূর্ণ CSS দিয়ে একটি লম্বন মত প্রভাব তৈরি করতে পারেন। জাম্বোট্রন কম্পোনেন্টটি সবচেয়ে কম পরিচিত এবং আপনি কাস্টমাইজড জাম্বোট্রন ব্যবহার করে সম্পূর্ণ প্রস্থের লম্বা পাতা তৈরি করতে পারেন।

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

জাম্বোট্রন সহ বুটস্ট্র্যাপ প্যারাল্যাক্স পৃষ্ঠা

9 অ্যাকর্ডিয়ন স্লাইডার উইজেট

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

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

বুটস্ট্র্যাপ অ্যাকর্ডিয়ন কন্টেন্ট স্লাইডার

10 বুটস্ট্র্যাপ উল্লম্ব টাইমলাইন উইজেট

উল্লম্ব টাইমলাইন হল ক্রম অনুসারে ঘটে যাওয়া ঘটনাগুলি প্রদর্শনের উপায়। আপনি ভবিষ্যতের পণ্য বা ইভেন্ট লঞ্চ দেখানোর জন্য এই টাইমলাইনটি ব্যবহার করতে পারেন। উল্লম্ব টাইমলাইন উইজেটটি কেমন হবে তা নীচে দেওয়া হল:

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

11 বুটস্ট্র্যাপ সহ উন্নত ডেটা টেবিল

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

আপনার সাইটের জন্য বিনামূল্যে বুটস্ট্র্যাপ উইজেট

উন্নত ডেটা টেবিল

সারসংক্ষেপ

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

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত