বাটন এলিমেন্ট হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ (HTML) এলিমেন্টগুলোর মধ্যে অধিক উপযোগী একটি এই সেন্সে যে এটি ইউজারকে একটি পেজের সাথে ইন্টারঅ্যাক্ট করতে সক্ষম করে।
লগ ইন, সাবস্ক্রাইব, ডিলিট বা কিছু খোলা, একটি মেনু দেখানো, কালার থিম চেঞ্জ করা—এই সব অ্যাকশন বাটন দিয়ে করা হয়।
ডিফল্ট ব্রাউজার বাটন স্টাইলগুলো সেরা লুকিং নয়, এবং আধুনিক কত বলা যায় না।
প্রতিটি প্রজেক্টে তাদের স্টাইল কাস্টমাইজ করলে আমরা একই ফলাফলের জন্য একই কোড অনেকবার রিপিট করি।
আবার, Bootstrap আমাদের রক্ষা করে। Bootstrap বাটন দিয়ে কী কী সম্ভব সেটি দেখুন।
কালারড বাটন
<button class="btn btn-primary">button 1</button> <button class="btn btn-secondary">button 2</button> <button class="btn btn-info">button 3</button> <button class="btn btn-warning">button 4</button> <button class="btn btn-danger">button 5</button> <button class="btn btn-success">button 6</button> <button class="btn btn-light">button 7</button> <button class="btn btn-dark">button 8</button> <button class="btn btn-link">button 9</button>
কালার সম্পর্কে, আমরা Bootstrap-এর সব প্রিডিফাইনড কালার ব্যবহার করতে পারি, প্লাস BTN-LINK অপশন, লিংকের জন্য Bootstrap-এর স্টাইলিং প্রয়োগ করতে।
সব কালারড অপশনকে নাইস ইউনিফর্ম প্যাডিং मिलে, এবং কারসর হোভার করলে কিছুটা ডার্ক শেডে কুইক কালার ট্রানজিশন হয়। লিংকটি হোভার করলে আন্ডারলাইন পায়।
আমরা যদি শুধু BTN ক্লাস ডিক্লেয়ার করি, তবে Bootstrap শুধু ডিফল্ট ব্রাউজার স্টাইলিং রিমুভ করবে:
<button>Without Bootstrap</button> <button class="btn">With Bootstrap</button>
এখানে আমরা দেখতে পাচ্ছি:
আউটলাইন বাটন
আমরা একই কালারগুলো ব্যবহার করে শুধু আউটলাইন বিশিষ্ট বাটন তৈরি করতে পারি:
<button class="btn btn-outline-primary">button 1</button> <button class="btn btn-outline-secondary">button 2</button> <button class="btn btn-outline-info">button 3</button> <button class="btn btn-outline-warning">button 4</button> <button class="btn btn-outline-danger">button 5</button> <button class="btn btn-outline-success">button 6</button> <button class="btn btn-outline-light">button 7</button> <button class="btn btn-outline-dark">button 8</button> <button class="btn btn-outline-link">button 9</button>
সেগুলো আউটলাইনের মতো একই ব্যাকগ্রাউন্ড কালার পায়, এবং টেক্সট কন্ট্রাস্টের ওপর নির্ভর করে সাদা বা কালো হয়ে যায়। লাইট এবং ইয়েলো (WARNING) কালো টেক্সট পায়। যাইহোক, লিংক ভার্সন এই অপশন সাপোর্ট করে না।
সাইজিং
Bootstrap বাটনগুলির জন্য তিনটি সাইজ সাপোর্ট করে: স্মল, রেগুলার, এবং লার্জ।
আমরা সাইজ সিলেক্ট করতে একটি অন্য ক্লাস যোগ করি নিচের মতো:
<div class="m-5"> <button class="btn btn-primary btn-sm">small button 1</button> <button class="btn btn-warning btn-sm">small button 2</button> <button class="btn btn-primary btn-sm">small button 3</button> </div> <div class="m-5"> <button class="btn btn-primary">regular button 1</button> <button class="btn btn-warning">regular button 2</button> <button class="btn btn-danger">regular button 3</button> </div> <div class="m-5"> <button class="btn btn-primary btn-lg">large button 1</button> <button class="btn btn-warning btn-lg">large button 2</button> <button class="btn btn-danger btn-lg">large button 3</button> </div>
প্রতিটি সাইজের তিনটি বাটন বানানো হয়েছে, এবং প্রতিটি সাইজকে M-5 ক্লাসের একটি div-এ র্যাপ করা হয়েছে শুধু তাদের немного মার্জিন দিয়ে স্পেস আউট করার জন্য।
ব্লক লেভেল বাটন
আমরা যদি একটি বাটন চাই যা এর কন্টেইনিং এলিমেন্টের ফুল প্রস্থের হোক, তবে সেটিতে BTN-BLOCK ক্লাস যোগ করি। চলুন একটি সিম্পল ফর্ম বানাই, এই মেথডের জন্য একটি কমন কেস।
<div class="form-group"> <label for="username">username</label> <input type="text" class="form-control" /> <div class="form-group"></div> <label for="email">Email</label> <input type="email" class="form-control" /> </div> <button class="btn btn-lg btn-block btn-primary"> Block Level Button </button> <button class="btn btn-lg btn-secondary my-2">Regular button</button> </form>
আমরা Bootstrap ফর্ম ক্লাসের বিষয়ে বিস্তারিত জানাব না।
আমরা শুধু একটি সিম্পল ফর্ম বানালাম যা ইউজারনেম এবং ইমেইল গ্রহণ করে, এবং একটি ব্লক লেভেল বাটন এবং একটি রেগুলার বাটন আছে।
MT-2 আবার শুধু মার্জিন (টপ) যোগ করা হয়েছে দুটি বাটন আলাদা করার জন্য।
এখানে আমরা পার্থক্য দেখতে পাচ্ছি:
বাটন স্টেট
Bootstrap-এর অন্যান্য কম্পোনেন্টের মতো, আমরা একটি স্টেট ক্লাস দিয়ে বাটনের আপিয়রেন্স চেঞ্জ করতে পারি, সেটি হল ACTIVE বা DISABLED।
Active State
একটি অ্যাক্টিভ বাটন কিছুটা ডার্কার ব্যাকগ্রাউন্ড, বর্ডার, এবং শ্যাডো পায়।
<button class="btn btn-primary">Regular</button> <button class="btn btn-primary active">Active</button> <button class="btn btn-primary">Regular</button>
Disabled State
বিপরীতে, ডিজেবল বাটন একই প্রোপার্টিগুলোর জন্য লাইটার শেড ব্যবহার করে। জানুন যে DISABLED ক্লাস যোগ করলে শুধু বাটনকে লাইটার কালার দেয়। সেটি আসলেই ডিজেবল করতে হলে, আমাদের এটিকে বাটনের অ্যাট্রিবিউট হিসেবে ডিক্লেয়ার করতে হবে:
<button class="btn btn-primary disabled">Disabled Looking</button> <button class="btn btn-primary" disabled>Truly Disabled</button>
ক্লাস DISABLED থাকা টি এখনও ক্লিকযোগ্য, এবং একশন থাকলে সেটি পারফর্ম করবে।
অ্যাসিস্টিভ টেকনোলোজির জন্য, আমাদের ARIA-DISABLED=“TRUE” অ্যাট্রিবিউটও ইনক্লুড করতে হবে, যাতে স্ক্রিন রিডার ইউজাররা জানতে পারে স্ক্রিনে একটি ডিজেবল বাটন আছে।
এছাড়া, বর্তমানে <a> এলিমেন্টগুলো DISABLED অ্যাট্রিবিউট সাপোর্ট করে না, তাই ডিজেবল লুক পেতে হলে আমাদের ক্লাস ইনক্লুড করতে হবে।
<a class="btn btn-danger" disabled>Attribute Not Supported</a> <a href="#" class="btn btn-danger disabled">Disabled Look</a>
<a> ট্যাগের কেসে, DISABLED ক্লাস CSS রুল POINTER-EVENTS: NONE যোগ করে, যা মাউস ক্লিক ডিজেবল করে।
যাইহোক, এটি এখনো সব ব্রাউজারেও ফুলি সাপোর্টেড নয়, এবং সাপোর্টেড ব্রাউজারেও, লিংকটি কীবোর্ড দিয়ে অ্যাক্সেস করা যায়।
সেটি সম্পূর্ণ ডিজেবল নিশ্চিত করতে, আমাদের TABINDEX=“-1” অ্যাট্রিবিউট যোগ করা উচিত, যাতে সেগুলো কীবোর্ড দিয়েও ফোকাস করা যায় না।
আপনার যেকোনোভাবে <a> ট্যাগ বাটন হিসেবে ব্যবহার করা উচিত নয়, কিন্তু জানা ভালো।
বাটন গ্রুপ
Bootstrap-এ CARDS < (পাবলিশিংয়ের সময়ে) এর মতো, আমরা একটি GROUP ক্লাস ব্যবহার করে বাটনগুলো ফিউজ করতে পারি ভিজুয়ালি একটি একক এলিমেন্টে।
<div class="btn-group"> <button class="btn btn-primary">button 1</button> <button class="btn btn-warning">button 2</button> <button class="btn btn-info">button 3</button> <button class="btn btn-danger">button 4</button> </div>
আমরা সেগুলোকে BTN-GROUP ক্লাসের একটি div-এ র্যাপ করি এবং সেটিই!
বিহেভিয়র একদম একই, কিন্তু এখন সেগুলো একে অপরের পাশে পাশে আছে, এবং বাইরের কয়নারগুলো সুন্দর রাউন্ডেড।
সংক্ষেপে
প্রায় সব ওয়েবসাইটে বাটন পাওয়া যায়, এবং সেগুলো অনলাইন অভিজ্ঞতার একটি খুব গুরুত্বপূর্ণ অংশ। আমরা বাটন দিয়ে আমাদের অ্যাকাউন্টে লগ ইন করি, অনলাইনে কিছু অর্ডার করি, নিউজলেটার সাবস্ক্রাইব করি, বা আমাদের ইনবক্সে ল্যান্ড করা সকল স্প্যাম ব্লক করি। বাটন ছাড়া, ওয়েবসাইটগুলো ডিজিটাল বিজনেস কার্ড হতো। Bootstrap দিয়ে, আমরা বাটনকে আমাদের সাইটের একটি সুন্দর কম্পোনেন্ট ও বনায় পারি।
