এই নিবন্ধটি আপনাকে নির্দেশ দেবে:
- কিভাবে বুটস্ট্র্যাপে বোতাম তৈরি করবেন?
- বুটস্ট্র্যাপে আউটলাইন বোতাম কীভাবে তৈরি করবেন?
- বুটস্ট্র্যাপ বোতামের আকার কীভাবে সামঞ্জস্য করবেন?
- বুটস্ট্র্যাপে একটি ব্লক-লেভেল বোতাম কীভাবে তৈরি করবেন?
- কিভাবে বুটস্ট্র্যাপে সক্রিয় স্টেট বোতাম তৈরি করবেন?
- বুটস্ট্র্যাপে কীভাবে অক্ষম রাজ্য বোতাম তৈরি করবেন?
কিভাবে বুটস্ট্র্যাপে বোতাম তৈরি করবেন?
বুটস্ট্র্যাপ ' বিটিএন ” ক্লাস বোতাম তৈরি করতে ব্যবহার করা হয়। শৈলীযুক্ত বোতাম যোগ করতে, আপনি ' বিটিএন ' রঙের ক্লাস সহ ক্লাস, যেমন ' btn-সাফল্য ” একটি সবুজ বোতাম তৈরি করতে।
HTML এ, ' <বোতাম> ', ' ', এবং ' <ইনপুট> ' টাইপ সহ ট্যাগ ' বোতাম ” বোতাম তৈরি করতে ব্যবহার করা হয়। দ্য ' বিটিএন ” ক্লাসে পূর্বনির্ধারিত স্টাইলিং রয়েছে যা বোতাম উপাদানগুলিতে মৌলিক স্টাইলিং যোগ করে।
একটি পরিষ্কার ধারণার জন্য, নীচের উদাহরণটি দেখুন।
উদাহরণ
HTML ফাইলে, বিভিন্ন ট্যাগ ব্যবহার করে বোতাম তৈরি করতে ধাপগুলি অনুসরণ করুন:
- যোগ করুন ' <বোতাম> ' এবং ' 'উপাদান এবং তাদের বরাদ্দ করুন' বিটিএন ' এবং ' btn-প্রাথমিক ” ক্লাস।
- তারপর, একটি যোগ করুন ' <ইনপুট> 'টাইপ দিয়ে ট্যাগ করুন' বোতাম ” এটি বরাদ্দ করুন ' বিটিএন ' এবং ' btn-সাফল্য ” প্রথম দুটি বোতাম নীল হিসাবে স্টাইল করার জন্য এবং তৃতীয়টি সবুজ হিসাবে:
< ক ক্লাস = 'বিটিএন বিটিএন-প্রাথমিক' href = '#' > খোলা < / ক >
< ইনপুট প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-সফল' মান = 'অনুসন্ধান' >
আউটপুট
বুটস্ট্র্যাপে আউটলাইন বোতাম কীভাবে তৈরি করবেন?
বোতামের রূপরেখা যোগ করতে, বুটস্ট্র্যাপ ' btn-রূপরেখা-* ” ক্লাস ব্যবহার করা হয়। এর সিনট্যাক্সে, ' * ” এখানে রূপরেখার রঙ প্রতিনিধিত্ব করে। এই ক্ষেত্রে, ' btn-আউটলাইন-বিপদ 'লাল রূপরেখা রাখে,' btn-আউটলাইন-প্রাথমিক ” নীল রূপরেখা সেট করে এবং আরও অনেক কিছু।
নীচে দেওয়া কোড বিশ্লেষণ করুন:
< বোতাম প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-আউটলাইন-প্রাথমিক' >পরবর্তী< / বোতাম >< বোতাম প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-আউটলাইন-বিপদ' >বাতিল করুন< / বোতাম >
< বোতাম প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-আউটলাইন-সফলতা' >সফল < / বোতাম >
লক্ষ্য করা যায় যে ' পরবর্তী ' বোতামে একটি নীল রূপরেখা রয়েছে, ' বাতিল করুন 'লাল আউটলাইন সহ বোতাম, এবং ' সফলতা ” বোতামটি একটি সবুজ রূপরেখা দিয়ে স্টাইল করা হয়েছে:
বুটস্ট্র্যাপ বোতামের আকার কীভাবে সামঞ্জস্য করবেন?
বোতামের আকার সামঞ্জস্য করতে কিছু বুটস্ট্র্যাপ ক্লাস প্রয়োগ করা হয়, যেমন:
- ' btn-lg ” ক্লাস একটি বড় বোতাম তৈরি করতে প্রয়োগ করা হয়। এই ক্লাস ফন্ট সাইজ এবং প্যাডিং বাড়াতে পারে।
- ' btn-md ” একটি মাঝারি আকারের বোতাম তৈরি করে।
- ' btn-sm একটি ছোট বোতাম তৈরি করে।
উদাহরণ
এখন, আমরা বিভিন্ন আকার এবং স্ব-ব্যাখ্যামূলক নাম সহ তিনটি বোতাম তৈরি করব:
< বোতাম প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-সেকেন্ডারি বিটিএন-এলজি' >বড় < / বোতাম >< বোতাম প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-সতর্কতা বিটিএন-এমডি' >মাঝারি < / বোতাম >
< বোতাম প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-বিপদ বিটিএন-এসএম' >ছোট< / বোতাম >
আউটপুট
বুটস্ট্র্যাপে একটি ব্লক-লেভেল বোতাম কীভাবে তৈরি করবেন?
ব্লক-লেভেল বোতামগুলি হল সেইগুলি যেগুলি পূর্ণ-প্রস্থের আকার ধারণ করে৷ ব্লক-লেভেল বোতাম তৈরি করতে, ' btn-ব্লক ” ক্লাসটি নিম্নরূপ ব্যবহার করা হয়
< বোতাম প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-সতর্কতা বিটিএন-ব্লক' > বোতাম< / বোতাম >< বোতাম প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-সেকেন্ডারি বিটিএন-ব্লক' >বোতাম< / বোতাম >
আউটপুট
কিভাবে বুটস্ট্র্যাপে সক্রিয় স্টেট বোতাম তৈরি করবেন?
সক্রিয় অবস্থা বোতামগুলি বর্তমানে সক্রিয় থাকা বোতামগুলিকে নির্দেশ করে। এই বোতামগুলি স্বাভাবিকের চেয়ে কিছুটা গাঢ়। এই ধরনের বোতাম তৈরি করতে, বুটস্ট্র্যাপ ' সক্রিয় ” ক্লাস ব্যবহার করা হয়।
উদাহরণ
নীচের কোড দুটি বোতাম তৈরি করে। প্রথমটি স্বাভাবিক অবস্থায় থাকে যখন অন্যটি প্রয়োগ করা হয় ' সক্রিয় 'শ্রেণী:
< বোতাম প্রকার = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-সফল' >সফল < / বোতাম >< বোতাম প্রকার = 'বোতাম' ক্লাস = 'btn btn-সাফল্য সক্রিয়' >সফল < / বোতাম >
আউটপুট
বুটস্ট্র্যাপে কীভাবে অক্ষম রাজ্য বোতাম তৈরি করবেন?
অক্ষম অবস্থায় থাকা বোতামগুলি সেই বোতামগুলিকে বোঝায় যেগুলি ক্লিক করা যায় না এবং অব্যবহারযোগ্য৷ বুটস্ট্র্যাপে, ' অক্ষম ” ক্লাস একটি অক্ষম রাষ্ট্র বোতাম তৈরি করতে ব্যবহার করা হয়. দ্য ' অক্ষম ” বৈশিষ্ট্যটিও এই উদ্দেশ্যে ব্যবহার করা যেতে পারে।
উদাহরণ
নীচে প্রদত্ত উদাহরণ দেখুন:
- প্রথম বোতামটি অক্ষম অবস্থায় নেই।
- দ্বিতীয়টি ব্যবহার করে ' অক্ষম ” ক্লাস একটি অক্ষম রাষ্ট্র বোতাম তৈরি করতে.
- তৃতীয়টি ব্যবহার করে ' অক্ষম ' বৈশিষ্ট্য:
< বোতাম প্রকার = 'বোতাম' ক্লাস = 'btn btn-সাফল্য নিষ্ক্রিয়' >সফল < / বোতাম >
< বোতাম টাইপ = 'বোতাম' ক্লাস = 'বিটিএন বিটিএন-সফল' নিষ্ক্রিয়>সফল< / বোতাম >
আউটপুট
আমরা বুটস্ট্র্যাপ বোতাম এবং CSS এ তাদের স্টাইলিং সম্পর্কিত বিভিন্ন দিক কভার করেছি।
উপসংহার
দ্য ' বিটিএন ” ক্লাসটি একটি সাধারণ ডিজাইনের সাথে বুটস্ট্র্যাপ বোতাম তৈরি করতে ব্যবহার করা হয়। রঙিন এবং আউটলাইন বোতাম তৈরি করতে, ' btn-* ' এবং ' btn-রূপরেখা-* ' ক্লাসগুলি ব্যবহার করা হয় যেখানে ' * ” যে কোনো রঙের শ্রেণীকে প্রতীকী করে। এই ক্ষেত্রে, ' btn-সতর্কতা 'একটি হলুদ বোতাম তৈরি করে, ' btn-আউটলাইন-সতর্কতা ” একটি হলুদ রূপরেখাযুক্ত বোতাম তৈরি করে এবং আরও অনেক কিছু। বোতামগুলিকে সক্রিয় বা নিষ্ক্রিয় করতে, যথাক্রমে 'সক্রিয়' এবং 'অক্ষম' শ্রেণীগুলি প্রয়োগ করা হয়। এই পোস্টটি বুটস্ট্র্যাপ বোতামগুলির উপর একটি বিস্তৃত নির্দেশিকা প্রদান করেছে।