বোতাম

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

উদাহরণ

বুটস্ট্র্যাপে বেশ কয়েকটি পূর্বনির্ধারিত বোতাম শৈলী রয়েছে, প্রতিটি তার নিজস্ব শব্দার্থিক উদ্দেশ্য পরিবেশন করে, আরও নিয়ন্ত্রণের জন্য কয়েকটি অতিরিক্ত নিক্ষেপ করে।

<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>কারণ তারা একটি ছদ্ম-শ্রেণী ব্যবহার করে । যাইহোক, আপনি এখনও একই সক্রিয় চেহারা জোর করতে পারেন .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, চেকবক্স বা রেডিও শৈলী বোতাম টগল করার জন্য। জাভাস্ক্রিপ্টের মাধ্যমে তাদের টগল করার আচরণ সক্ষম করতে এবং আপনার বোতামগুলির মধ্যে গুলিকে শৈলীতে যুক্ত করতে এই পরিবর্তিত বোতামগুলি ধারণকারী একটিতে যোগ করুন 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>

পদ্ধতি