বুটামসমূহ

একাধিক আকাৰ, অৱস্থা, আৰু অধিক সমৰ্থনৰ সৈতে প্ৰপত্ৰ, সংলাপ, আৰু অধিক কাৰ্য্যসমূহৰ বাবে Bootstrap ৰ স্বনিৰ্বাচিত বুটাম শৈলীসমূহ ব্যৱহাৰ কৰক।

উদাহৰণ

বুটষ্ট্ৰেপে কেইবাটাও পূৰ্বনিৰ্ধাৰিত বুটাম শৈলী অন্তৰ্ভুক্ত কৰে, প্ৰত্যেকেই নিজৰ অৰ্থগত উদ্দেশ্য পূৰণ কৰে, অধিক নিয়ন্ত্ৰণৰ বাবে কেইটামান অতিৰিক্ত নিক্ষেপ কৰা হয়।

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

লিখনী ৰেপিং নিষ্ক্ৰিয় কৰক

যদি আপুনি বুটামৰ লিখনীটো ৰেপ হোৱাটো নিবিচাৰে, তেন্তে আপুনি বুটামত .text-nowrapশ্ৰেণীটো যোগ কৰিব পাৰে। Sass ত, আপুনি $btn-white-space: nowrapপ্ৰতিটো বুটামৰ বাবে লিখনী ৰেপিং নিষ্ক্ৰিয় কৰিবলে সংহতি কৰিব পাৰে।

বুটাম টেগসমূহ

.btnক্লাছবোৰ উপাদানটোৰ সৈতে ব্যৱহাৰ কৰিব পৰাকৈ ডিজাইন কৰা হৈছে <button>। কিন্তু, আপুনি এই শ্ৰেণীসমূহ <a>বা <input>উপাদানসমূহতো ব্যৱহাৰ কৰিব পাৰে (যদিও কিছুমান ব্ৰাউজাৰে অলপ বেলেগ ৰেণ্ডাৰ প্ৰয়োগ কৰিব পাৰে)।

বৰ্তমান পৃষ্ঠাৰ ভিতৰত নতুন পৃষ্ঠা বা অংশসমূহৰ <a>সৈতে সংযোগ নকৰি, এই সংযোগসমূহক role="button"সহায়ক প্ৰযুক্তিসমূহ যেনে সহায়ক প্ৰযুক্তিসমূহলৈ তেওঁলোকৰ উদ্দেশ্য সঠিকভাৱে প্ৰকাশ কৰিবলৈ এটা দিব লাগে স্ক্ৰীণ ৰিডাৰ।

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

ৰূপৰেখা বুটামসমূহ

এটা বুটামৰ প্ৰয়োজন, কিন্তু তেওঁলোকে অনা হেফটি বেকগ্ৰাউণ্ড ৰং নহয়? অবিকল্পিত পৰিবৰ্তক শ্ৰেণীসমূহক .btn-outline-*যিকোনো বুটামত সকলো পটভূমি ছবি আৰু ৰং আঁতৰাবলৈ শ্ৰেণীসমূহৰ সৈতে সলনি কৰক।

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

আকাৰসমূহ

ডাঙৰ বা সৰু বুটামৰ আড়ম্বৰপূৰ্ণ? যোগ কৰক .btn-lgবা .btn-smঅতিৰিক্ত আকাৰৰ বাবে।

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

ব্লক স্তৰৰ বুটাম সৃষ্টি কৰক—যিবোৰ এটা অভিভাৱকৰ সম্পূৰ্ণ প্ৰস্থত বিস্তৃত—যোগ কৰি .btn-block।

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

সক্ৰিয় অৱস্থা

এটা গাঢ় পটভূমি, গাঢ় সীমা, আৰু, যেতিয়া ছাঁসমূহ সামৰ্থবান কৰা হয়, এটা ইনছেট ছাঁৰ সৈতে সক্ৰিয় হ'লে বুটামসমূহ টিপি দেখা যাব। s ত এটা শ্ৰেণী যোগ কৰাৰ প্ৰয়োজন নাই <button>কাৰণ তেওঁলোকে এটা pseudo-class ব্যৱহাৰ কৰে । কিন্তু, আপুনি এতিয়াও একে সক্ৰিয় ৰূপক বলবৎ কৰিব পাৰে .active(আৰু aria-pressed=“true”বৈশিষ্ট্য অন্তৰ্ভুক্ত কৰিব পাৰে) যদি আপুনি অৱস্থাক প্ৰগ্ৰামেটিকভাৱে প্ৰতিলিপি কৰিব লাগে ।

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

অক্ষম অৱস্থা

disabledযিকোনো <button>উপাদানত বুলিয়ান বৈশিষ্ট্য যোগ কৰি বুটামসমূহক নিষ্ক্ৰিয় যেন দেখাওক।

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

উপাদান ব্যৱহাৰ কৰা নিষ্ক্ৰিয় বুটামসমূহে <a>অলপ বেলেগ আচৰণ কৰে:

• <a>s এ বৈশিষ্ট্য সমৰ্থন নকৰে disabled, গতিকে আপুনি .disabledশ্ৰেণীটো যোগ কৰিব লাগিব ইয়াক দৃশ্যমানভাৱে নিষ্ক্ৰিয় যেন দেখাবলৈ।
• pointer-eventsকিছুমান ভৱিষ্যত-বন্ধুত্বপূৰ্ণ শৈলীসমূহ এংকৰ বুটামসমূহত সকলো নিষ্ক্ৰিয় কৰিবলে অন্তৰ্ভুক্ত কৰা হৈছে । সেই বৈশিষ্ট্য সমৰ্থন কৰা ব্ৰাউজাৰসমূহত, আপুনি নিষ্ক্ৰিয় কাৰ্চাৰটো একেবাৰেই দেখা নাপাব।
• ব্যৱহাৰ কৰা নিষ্ক্ৰিয় বুটামসমূহে সহায়ক প্ৰযুক্তিসমূহলে উপাদানৰ অৱস্থা সূচনা কৰিবলে বৈশিষ্ট্য <a>অন্তৰ্ভুক্ত কৰিব লাগে ।aria-disabled="true"
• ব্যৱহাৰ কৰা নিষ্ক্ৰিয় বুটামসমূহে বৈশিষ্ট্যটো অন্তৰ্ভুক্ত <a> কৰিব নালাগে ।href

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

লিংক কাৰ্য্যকৰীতা সতৰ্কবাণী

hrefআপুনি এটা নিষ্ক্ৰিয় সংযোগত বৈশিষ্ট্য ৰাখিব লাগিব ক্ষেত্ৰসমূহ সামৰি ল'বলৈ , .disabledশ্ৰেণীয়ে s ৰ pointer-events: noneসংযোগ কাৰ্য্যকৰীতা নিষ্ক্ৰিয় কৰিবলৈ চেষ্টা কৰিবলৈ ব্যৱহাৰ কৰে। <a>মন কৰিব যে এই CSS বৈশিষ্ট্য এতিয়াও HTML ৰ বাবে প্ৰামাণিক কৰা হোৱা নাই, কিন্তু সকলো আধুনিক ব্ৰাউজাৰে ইয়াক সমৰ্থন কৰে। ইয়াৰ উপৰিও, আনকি সমৰ্থন কৰা ব্ৰাউজাৰসমূহতো pointer-events: none, কিবৰ্ড নেভিগেচন অপ্ৰভাৱিত হৈ থাকে, অৰ্থাৎ দৃষ্টিশক্তিৰ কিবৰ্ড ব্যৱহাৰকাৰী আৰু সহায়ক প্ৰযুক্তিৰ ব্যৱহাৰকাৰীসকলে এতিয়াও এই সংযোগসমূহ সক্ৰিয় কৰিব পাৰিব। গতিকে সুৰক্ষিত হ'বলৈ, ৰ উপৰিও aria-disabled="true", এই সংযোগসমূহত এটা বৈশিষ্ট্যও অন্তৰ্ভুক্ত tabindex="-1"কৰক যাতে সিহঁতে কিবৰ্ড ফ'কাচ গ্ৰহণ কৰাত বাধা দিয়ে, আৰু সিহঁতৰ কাৰ্য্যকৰীতা সম্পূৰ্ণৰূপে নিষ্ক্ৰিয় কৰিবলৈ স্বনিৰ্বাচিত জাভাস্ক্রিপ্ট ব্যৱহাৰ কৰক।

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

বুটাম প্লাগইন

বুটামৰ সৈতে অধিক কৰক। নিয়ন্ত্ৰণ বুটামে সঁজুলিদণ্ডিকাৰ দৰে অধিক উপাদানৰ বাবে বুটামৰ গোটসমূহ অৱস্থান কৰে বা সৃষ্টি কৰে।

ৰাজ্যসমূহ টগল কৰক

data-toggle="button"এটা বুটামৰ অৱস্থা টগল কৰিবলৈ যোগ কৰক active। যদি আপুনি এটা বুটাম পূৰ্ব-টগল কৰিছে, আপুনি হস্তচালিতভাৱে .activeশ্ৰেণীটো আৰু aria-pressed="true" ত যোগ কৰিব লাগিব <button>।

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

চেকবক্স আৰু ৰেডিঅ' বুটামসমূহ

বুটষ্ট্ৰেপৰ .buttonশৈলীসমূহ অন্য উপাদানসমূহত প্ৰয়োগ কৰিব পাৰি, যেনে <label>s, চেকবাকচ বা ৰেডিঅ' শৈলী বুটাম টগলিং প্ৰদান কৰিবলে । JavaScript ৰ যোগেদি সিহতৰ টগলিং আচৰণ সামৰ্থবান কৰিবলে আৰু আপোনাৰ বুটামসমূহৰ ভিতৰত s শৈলী কৰিবলে যোগ কৰিবলে সেই পৰিবৰ্তিত বুটামসমূহ ধাৰণ data-toggle="buttons"কৰা এটাত যোগ কৰক। মন কৰিব যে আপুনি একক ইনপুট-চালিত বুটাম বা সিহতৰ গোট সৃষ্টি কৰিব পাৰে।.btn-group.btn-group-toggle<input>

এই বুটামসমূহৰ বাবে পৰীক্ষা কৰা অৱস্থা কেৱল বুটামত ইভেন্টৰ যোগেদি আপডেইট কৰা হয়click । যদি আপুনি ইনপুট আপডেইট কৰিবলে অন্য পদ্ধতি ব্যৱহাৰ কৰে—যেনে, <input type="reset">ইনপুটৰ বৈশিষ্ট্য হস্তচালিতভাৱে প্ৰয়োগ কৰি বা হস্তচালিতভাৱে প্ৰয়োগ কৰি checked—আপুনি হস্তচালিতভাৱে টগল .activeকৰিব <label>লাগিব।

মন কৰিব যে পূৰ্ব-নিৰীক্ষণ কৰা বুটামসমূহে আপোনাক .activeশ্ৰেণীটোক ইনপুটৰ ত হস্তচালিতভাৱে যোগ কৰাৰ প্ৰয়োজন হয় <label>।

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

পদ্ধতিসমূহ