বোতাম
একাধিক আকার, অবস্থা এবং আরও অনেক কিছুর সমর্থন সহ ফর্ম, ডায়ালগ এবং আরও অনেক কিছুর জন্য বুটস্ট্র্যাপের কাস্টম বোতাম শৈলী ব্যবহার করুন।
বুটস্ট্র্যাপে বেশ কয়েকটি পূর্বনির্ধারিত বোতাম শৈলী রয়েছে, প্রতিটি তার নিজস্ব শব্দার্থিক উদ্দেশ্য পরিবেশন করে, আরও নিয়ন্ত্রণের জন্য কয়েকটি অতিরিক্ত নিক্ষেপ করে।
সহায়ক প্রযুক্তির অর্থ বোঝানো
অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .sr-only
ক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।
.btn
ক্লাসগুলি উপাদানের সাথে ব্যবহার করার জন্য ডিজাইন করা হয়েছে <button>
। যাইহোক, আপনি এই ক্লাসগুলি <a>
বা <input>
উপাদানগুলিতেও ব্যবহার করতে পারেন (যদিও কিছু ব্রাউজার কিছুটা ভিন্ন রেন্ডারিং প্রয়োগ করতে পারে)।
<a>
বর্তমান পৃষ্ঠার মধ্যে নতুন পৃষ্ঠা বা বিভাগগুলির সাথে লিঙ্ক করার পরিবর্তে ইন-পেজ কার্যকারিতা (যেমন কন্টেন্ট ভেঙে ফেলা) ট্রিগার করতে ব্যবহৃত উপাদানগুলিতে বোতাম ক্লাস ব্যবহার করার সময়, এই লিঙ্কগুলিকে একটি দেওয়া উচিত role="button"
যাতে সহায়ক প্রযুক্তিতে তাদের উদ্দেশ্য যথাযথভাবে জানানো হয় যেমন স্ক্রিন রিডার
একটি বোতাম প্রয়োজন, কিন্তু না মোটা ব্যাকগ্রাউন্ড রং তারা আনা? .btn-outline-*
যেকোনো বোতামে সমস্ত ব্যাকগ্রাউন্ড ইমেজ এবং রঙ মুছে ফেলার জন্য ডিফল্ট মডিফায়ার ক্লাসগুলি দিয়ে প্রতিস্থাপন করুন ।
অভিনব বড় বা ছোট বোতাম? যোগ করুন .btn-lg
বা .btn-sm
অতিরিক্ত মাপের জন্য.
ব্লক লেভেল বোতামগুলি তৈরি করুন—যেগুলি একটি অভিভাবকের সম্পূর্ণ প্রস্থে বিস্তৃত—যোগ করে .btn-block
৷
সক্রিয় থাকাকালীন বোতামগুলি টিপে প্রদর্শিত হবে (একটি গাঢ় পটভূমি, গাঢ় সীমানা এবং ইনসেট শ্যাডো সহ)। s- এ একটি ক্লাস যোগ করার দরকার নেই <button>
কারণ তারা একটি ছদ্ম-শ্রেণী ব্যবহার করে । যাইহোক, আপনি এখনও একই সক্রিয় চেহারা জোর করতে পারেন .active
(এবং aria-pressed="true"
অ্যাট্রিবিউট অন্তর্ভুক্ত করুন) যদি আপনাকে প্রোগ্রামগতভাবে স্টেট প্রতিলিপি করতে হবে।
disabled
যেকোনো <button>
উপাদানে বুলিয়ান অ্যাট্রিবিউট যোগ করে বোতামগুলোকে নিষ্ক্রিয় দেখান।
উপাদান ব্যবহার করে অক্ষম বোতাম <a>
একটু ভিন্ন আচরণ করে:
<a>
sdisabled
বৈশিষ্ট্যটিকে সমর্থন করে না, তাই.disabled
এটিকে দৃশ্যত অক্ষম করার জন্য আপনাকে অবশ্যই ক্লাসটি যুক্ত করতে হবে।- কিছু ভবিষ্যত-বন্ধুত্বপূর্ণ শৈলী অন্তর্ভুক্ত করা
pointer-events
হয়েছে অ্যাঙ্কর বোতামে সমস্ত অক্ষম করতে। যে সমস্ত ব্রাউজারগুলি সেই সম্পত্তি সমর্থন করে, সেখানে আপনি অক্ষম কার্সারটি দেখতে পাবেন না। - অক্ষম বোতামে
aria-disabled="true"
সহায়ক প্রযুক্তির উপাদানের অবস্থা নির্দেশ করার জন্য বৈশিষ্ট্য অন্তর্ভুক্ত করা উচিত।
লিঙ্ক কার্যকারিতা সতর্কতা
ক্লাসটি s- এর লিঙ্ক কার্যকারিতা নিষ্ক্রিয় করার চেষ্টা করার জন্য .disabled
ব্যবহার করে , কিন্তু সেই CSS বৈশিষ্ট্যটি এখনও মানসম্মত নয়। উপরন্তু, এমনকি সমর্থন করে এমন ব্রাউজারগুলিতেও , কীবোর্ড নেভিগেশন অপ্রভাবিত থাকে, যার অর্থ দৃষ্টিশক্তিসম্পন্ন কীবোর্ড ব্যবহারকারী এবং সহায়ক প্রযুক্তির ব্যবহারকারীরা এখনও এই লিঙ্কগুলি সক্রিয় করতে সক্ষম হবে। তাই নিরাপদ থাকার জন্য, এই লিঙ্কগুলিতে একটি বৈশিষ্ট্য যুক্ত করুন (এগুলিকে কীবোর্ড ফোকাস গ্রহণ করা থেকে বিরত রাখতে) এবং তাদের কার্যকারিতা অক্ষম করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন৷pointer-events: none
<a>
pointer-events: none
tabindex="-1"
বোতাম দিয়ে আরও কিছু করুন। কন্ট্রোল বোতাম স্টেট বা টুলবারের মত আরো উপাদানের জন্য বোতামের গ্রুপ তৈরি করুন।
data-toggle="button"
একটি বোতামের অবস্থা টগল করতে যোগ করুন active
। আপনি যদি একটি বোতাম প্রি-টগল করে থাকেন, তাহলে আপনাকে অবশ্যই ম্যানুয়ালি .active
ক্লাস এবং aria-pressed="true"
তে যোগ করতে হবে <button>
।
বুটস্ট্র্যাপের .button
শৈলী অন্যান্য উপাদানগুলিতে প্রয়োগ করা যেতে পারে, যেমন <label>
s, চেকবক্স বা রেডিও শৈলী বোতাম টগল করার জন্য। জাভাস্ক্রিপ্টের মাধ্যমে তাদের টগল করার আচরণ সক্ষম করতে এবং আপনার বোতামগুলির মধ্যে গুলিকে শৈলীতে যুক্ত করতে এই পরিবর্তিত বোতামগুলি ধারণকারী একটিতে যোগ করুন data-toggle="buttons"
। মনে রাখবেন যে আপনি একক ইনপুট-চালিত বোতাম বা তাদের গ্রুপ তৈরি করতে পারেন।.btn-group
.btn-group-toggle
<input>
এই বোতামগুলির জন্য চেক করা অবস্থা শুধুমাত্র বোতামের ইভেন্টের মাধ্যমে আপডেটclick
করা হয়। আপনি যদি ইনপুট আপডেট করার জন্য অন্য পদ্ধতি ব্যবহার করেন—যেমন, <input type="reset">
ইনপুটের সম্পত্তির সাথে বা ম্যানুয়ালি প্রয়োগ করে checked
-আপনাকে ম্যানুয়ালি টগল করতে .active
হবে <label>
।
মনে রাখবেন যে পূর্ব-চেক করা বোতামগুলির জন্য আপনাকে ম্যানুয়ালি .active
ক্লাসটি ইনপুটে যোগ করতে হবে <label>
।
পদ্ধতি | বর্ণনা |
---|---|
$().button('toggle') |
পুশ স্টেট টগল করে। বোতামটিকে এমন চেহারা দেয় যে এটি সক্রিয় করা হয়েছে। |
$().button('dispose') |
একটি উপাদানের বোতাম ধ্বংস করে। |