Bootstrap 5 বাটন

বাটন শৈলী

Bootstrap 5 বিভিন্ন শৈলীর বাটন প্রদান করে:

প্রতিদর্শ

<button type="button" class="btn">মৌলিক</button>
<button type="button" class="btn btn-primary">প্রধান</button>
<button type="button" class="btn btn-secondary">সহযোগী</button>
<button type="button" class="btn btn-success">সফল</button>
<button type="button" class="btn btn-info">তথ্য</button>
<button type="button" class="btn btn-warning">সতর্ক</button>
<button type="button" class="btn btn-danger">ঝুঙ্গুল</button>
<button type="button" class="btn btn-dark">কালো</button>
<button type="button" class="btn btn-light">হলুদ</button>
<button type="button" class="btn btn-link">লিঙ্ক</button>

আপনার নিজেই প্রয়াস করুন

বাটন শ্রেণীটি ব্যবহার করা যেতে পারে <a>、<button> বা <input> উপাদান:

প্রতিদর্শ

<a href="#" class="btn btn-success">লিঙ্ক বাটন</a>
<button type="button" class="btn btn-success">বাটন</button>
<input type="button" class="btn btn-success" value="ইনপুট বাটন">
<input type="submit" class="btn btn-success" value="সমর্থন বাটন">
<input type="reset" class="btn btn-success" value="রেসেট বাটন">

আপনার নিজেই প্রয়াস করুন

কেন আমরা লিঙ্কের href অ্যাট্রিবিউটে # লিখি?

আমরা কোনো লিঙ্ক করা পৃষ্ঠা নেই এবং "404" সংদেশ পেতে নয়াই, তাই আমরা # কে লিঙ্ক হিসাবে লিখি। প্রকৃতপক্ষে, তা হবে "সার্চ" পৃষ্ঠার সত্যিকারী URL

বাটন প্রোফাইল

Bootstrap 5 আটটি প্রোফাইল/কান্দি বাটনও প্রদান করে

মাউস তাদের উপর নিয়ে যাওয়ার মাধ্যমে, অতিরিক্ত "হভিং" ইফেক্ট দেখা যাবে:

প্রতিদর্শ

<button type="button" class="btn btn-outline-primary">প্রধান</button>
<button type="button" class="btn btn-outline-secondary">দ্বিতীয়তা</button>
<button type="button" class="btn btn-outline-success">সফল</button>
<button type="button" class="btn btn-outline-info">তথ্য</button>
<button type="button" class="btn btn-outline-warning">সতর্ক</button>
<button type="button" class="btn btn-outline-danger">ঝুঙ্গুই</button>
<button type="button" class="btn btn-outline-dark">কালো</button>
<button type="button" class="btn btn-outline-light text-dark">সাদা</button>

আপনার নিজেই প্রয়াস করুন

বাটন মাপ

বড় বাটনের জন্য ব্যবহার করুন .btn-lg শ্রেণী, ছোট বাটনের জন্য ব্যবহার করুন .btn-sm শ্রেণী：

প্রতিদর্শ

<button type="button" class="btn btn-primary btn-lg">বড়</button>
<button type="button" class="btn btn-primary">ডিফল্ট</button>
<button type="button" class="btn btn-primary btn-sm">ছোট</button>

আপনার নিজেই প্রয়াস করুন

ব্লক স্টাইল বাটন

পিতৃ ইলেক্ট্রনিকের পূর্ণ প্রস্থতা দিয়ে ব্লক স্টাইল বাটন তৈরি করতে হলে পিতৃ ইলেক্ট্রনিকেতে .d-grid helper" 类：

প্রতিদর্শ

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">সম্পূর্ণ প্রস্থ বাটন</button>
</div>

আপনার নিজেই প্রয়াস করুন

আপনি অনেক ব্লক বাটন আছে তবে, .gap-* শ্রেণীটি সময়মতো অন্তর নিয়ন্ত্রণ করে。

প্রতিদর্শ

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">সম্পূর্ণ প্রস্থ বাটন</button>
  <button type="button" class="btn btn-primary btn-block">সম্পূর্ণ প্রস্থ বাটন</button>
  <button type="button" class="btn btn-primary btn-block">সম্পূর্ণ প্রস্থ বাটন</button>
</div>

আপনার নিজেই প্রয়াস করুন

সক্রিয়/ডিসেবল বাটন

বাটনকে সক্রিয় (নিচে দেখানো) বা ডিসেবল (অসক্রিয়) অবস্থায় সেট করা যেতে পারে:

শ্রেণী .active বাটনকে প্রয়োগ করে এটা প্রয়োগকারী হবে, disabled এটি বাটনকে অসক্রিয় করে। মনে রাখুন যে, <a> ইমেজফ্লাইট ডিসেবল অ্যাট্রিবিউটটি সমর্থন করে না, তাই আপনাকে .disabled শ্রেণীটি দেখাবে যে তা দৃশ্যমানভাবে ডিসেবল হয়েছে。

প্রতিদর্শ

<button type="button" class="btn btn-primary active">একটিক প্রাইমারি</button>
<button type="button" class="btn btn-primary" disabled>ডিসেবলড প্রাইমারি</button>
<a href="#" class="btn btn-primary disabled">ডিসেবলড লিঙ্ক</a>

আপনার নিজেই প্রয়াস করুন

লোডার বাটন

আপনি আরও "স্পিনার" যোগ করতে পারেন বাটনে, আপনি আমাদের BS5 স্পিনার ট্যুটোরিয়ালে আরও বেশি জানতে পারবেন:

প্রতিদর্শ

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>

আপনার নিজেই প্রয়াস করুন