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

বুটস্ট্র্যাপ বোতামগুলির উদাহরণ

1

বুটস্ট্র্যাপ হল একটি সম্পূর্ণ কাঠামো যা সব ধরণের উপাদান যেমন বোতাম, ফর্ম, প্যানেল ইত্যাদি ধারণ করে। বুটস্ট্র্যাপ থিম টেমপ্লেট দিয়ে উপাদানগুলির রঙ এবং আকার কাস্টমাইজ করা সহজ। এই নিবন্ধে, আমরা বিভিন্ন ধরণের বুটস্ট্র্যাপ 3 বোতামের উদাহরণ প্রদর্শন করব। বুটস্ট্র্যাপ 5 বোতামের জন্য সর্বশেষ নিবন্ধটি দেখুন ।

আপনার সাইটে বুটস্ট্র্যাপ বোতাম যুক্ত করার জন্য আপনার নিম্নলিখিত বিষয়গুলির প্রয়োজন।

  • বুটস্ট্র্যাপ CSS এবং JS
  • jQuery স্ক্রিপ্ট
  • ফন্ট অসাধারণ আইকন
  • কাস্টম CSS স্টাইল
  • HTML কোড

কোড পাচ্ছি

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

আপনার পৃষ্ঠায় কোড যোগ করা

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> ADD CUSTOM CSS CODE HERE /* You can also link it as an external stylesheet */ </style> ADD HTML CODE HERE <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

উদাহরণ শোকেস

শোকেস বোতামগুলি বিভিন্ন গ্রুপে শ্রেণিবদ্ধ করা হয়েছে:

  • বৃত্ত আইকন বোতাম

  • ড্রপডাউন বোতাম

  • ডিফল্ট বোতাম

  • লাইন বোতাম

  • আয়তক্ষেত্র বোতাম

  • বৃত্ত বোতাম

  • গোলাকার কোণার বোতাম

  • সমতল বোতাম

  • গ্রেডিয়েন্ট বোতাম

  • গ্রেডিয়েন্ট এবং আয়তক্ষেত্র বোতাম

  • সমতল এবং আয়তক্ষেত্র বোতাম

  • লাইন এবং আয়তক্ষেত্র বোতাম

  • বৃত্ত এবং লাইন বোতাম

  • বৃত্ত এবং গ্রেডিয়েন্ট বোতাম

  • গোলাকার এবং লাইন বোতাম

  • আইকন এবং নেটওয়ার্ক নাম সহ বড় সামাজিক বোতাম

  • শুধুমাত্র আইকন সহ ছোট সামাজিক বোতাম

নীচে বুটস্ট্র্যাপ বোতামের কয়েকটি উদাহরণ দেওয়া হল।

বুটস্ট্র্যাপ বোতামগুলির উদাহরণ

আইকন সহ বৃত্ত বোতাম

বুটস্ট্র্যাপ বোতামগুলির উদাহরণ

বুটস্ট্র্যাপ সামাজিক শেয়ারিং বোতাম

বুটস্ট্র্যাপ বোতামগুলির উদাহরণ

বুটস্ট্র্যাপ সহজ লাইন বোতাম

বুটস্ট্র্যাপ বোতামগুলির উদাহরণ

বুটস্ট্র্যাপ গোলাকার লাইন বোতাম

বুটস্ট্র্যাপ বোতামগুলির উদাহরণ

বুটস্ট্র্যাপ গোলাকার রঙের বোতাম

বুটস্ট্র্যাপ বোতামগুলির উদাহরণ

বুটস্ট্র্যাপ ডিফল্ট স্টাইল বোতাম

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

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

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