বুটস্ট্র্যাপ বোতাম

বোতাম এলিমেন্ট হল আরও দরকারী হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ (HTML) উপাদানগুলির মধ্যে একটি যে অর্থে এটি ব্যবহারকারীকে একটি পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করতে সক্ষম করে৷

লগ ইন করা, সাবস্ক্রাইব করা, কিছু মুছে ফেলা বা খোলা, একটি মেনু দেখানো, রঙের থিম পরিবর্তন করা বোতামগুলির সাহায্যে সম্পাদিত ক্রিয়া।

ডিফল্ট ব্রাউজার বোতাম শৈলী দেখতে সেরা নয়, এবং কোনোভাবেই আধুনিক নয়৷

প্রতিটি প্রকল্পে তাদের স্টাইলিং কাস্টমাইজ করে, আমরা একই ফলাফলের জন্য একই কোড বহুবার পুনরাবৃত্তি করি।

আবার, বুটস্ট্র্যাপ আমাদের বাধ্য করে। বুটস্ট্র্যাপ বোতামগুলির সাথে কী সম্ভব তা একবার দেখুন৷

রঙিন বোতাম

    <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>

রঙের বিষয়ে, আমরা লিঙ্কগুলির জন্য বুটস্ট্র্যাপের স্টাইলিং প্রয়োগ করতে প্রতিটি বুটস্ট্র্যাপের পূর্বনির্ধারিত, সাথে BTN-LINK বিকল্প ব্যবহার করতে পারি।

সমস্ত রঙিন বিকল্পগুলি চমৎকার ইউনিফর্ম প্যাডিং পায়, এবং কার্সারের সাথে ঘোরাফেরা করলে একটি সামান্য গাঢ় ছায়ায় দ্রুত রঙের রূপান্তর হয়। লিঙ্কটিতে হোভারে একটি আন্ডারলাইন রয়েছে।

যদি আমরা শুধুমাত্র BTN ক্লাস ঘোষণা করি, বুটস্ট্র্যাপ শুধুমাত্র ডিফল্ট ব্রাউজার স্টাইলিংটি সরিয়ে দেবে:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

<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>

তারা রূপরেখার মতো একই পটভূমির রঙ পায় এবং বৈসাদৃশ্যের উপর নির্ভর করে পাঠ্যটি সাদা বা কালো হয়ে যায়। হালকা এবং হলুদ (সতর্কতা) কালো লেখা আছে। যাইহোক, লিঙ্ক সংস্করণ এই বিকল্প সমর্থন করে না.

সাইজিং

বুটস্ট্র্যাপ বোতামের জন্য তিনটি আকার সমর্থন করে:ছোট, নিয়মিত এবং বড়।
এর মতো আকার নির্বাচন করতে আমরা অন্য ক্লাস যুক্ত করি:

<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 ক্লাসের একটি ডিভ-এ মোড়ানো হয় যাতে তাদের কিছুটা মার্জিন দেওয়া হয়, তাদের ফাঁকা জায়গা দেওয়া যায়।

ব্লক লেভেল বোতাম

আমরা যদি এমন একটি বোতাম চাই যা এর উপাদানটির সম্পূর্ণ প্রস্থ, তাহলে আমরা এতে 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>

আমরা বুটস্ট্র্যাপ ফর্ম ক্লাস সম্পর্কে বিশদে যাব না।

আমরা একটি সাধারণ ফর্ম তৈরি করেছি যা একটি ব্যবহারকারীর নাম এবং ইমেল গ্রহণ করে এবং একটি ব্লক স্তরের বোতাম এবং একটি নিয়মিত বোতাম রয়েছে৷

MT-2 আবার দুটি বোতাম আলাদা করার জন্য মার্জিন (শীর্ষ) যোগ করা হয়েছে।

এবং এখানে আমরা পার্থক্য দেখতে পারি:

বোতামের অবস্থা

অন্যান্য বুটস্ট্র্যাপ উপাদানগুলির মতো, আমরা একটি স্টেট ক্লাস সহ একটি বোতামের চেহারা পরিবর্তন করতে পারি, যা সক্রিয় বা অক্ষম৷

সক্রিয় অবস্থা

একটি সক্রিয় বোতামে একটি সামান্য গাঢ় পটভূমি, সীমানা এবং ছায়া থাকে।

      <button class="btn btn-primary">Regular</button>
      <button class="btn btn-primary active">Active</button>
      <button class="btn btn-primary">Regular</button>

অক্ষম অবস্থা

বিপরীতে, অক্ষম বোতাম একই বৈশিষ্ট্যের জন্য হালকা শেড ব্যবহার করে। জেনে রাখুন যে অক্ষম শ্রেণী যোগ করলে শুধুমাত্র বোতামটিকে হালকা রং দেওয়া হবে। এটিকে সত্যিকারের অক্ষম করতে, আমাদের এটিকে বোতামের বৈশিষ্ট্য হিসাবে ঘোষণা করতে হবে:

	<button class="btn btn-primary disabled">Disabled Looking</button>
    <button class="btn btn-primary" disabled>Truly Disabled</button>

অক্ষম শ্রেণীটি এখনও ক্লিকযোগ্য, এবং যদি এটি থাকে তবে একটি ক্রিয়া সম্পাদন করবে৷

সহায়ক প্রযুক্তির জন্য, আমাদের একটি ARIA-DISABLED="TRUE" বৈশিষ্ট্যও অন্তর্ভুক্ত করতে হবে, যাতে স্ক্রিন রিডার ব্যবহারকারীরা জানেন যে স্ক্রিনে একটি অক্ষম বোতাম রয়েছে৷

এছাড়াও, বর্তমানে উপাদানগুলি অক্ষম বৈশিষ্ট্য সমর্থন করে না, তাই অক্ষম চেহারা পেতে আমাদের অবশ্যই ক্লাস অন্তর্ভুক্ত করতে হবে।

<a class="btn btn-danger" disabled>Attribute Not Supported</a>
      <a href="#" class="btn btn-danger disabled">Disabled Look</a>

ট্যাগের ক্ষেত্রে, অক্ষম শ্রেণিতে CSS নিয়ম POINTER-EVENTS:NONE যোগ করা হয়, যা মাউস ক্লিক নিষ্ক্রিয় করে।

আপনি যাইহোক বোতাম হিসাবে ট্যাগগুলি ব্যবহার করবেন না, তবে এটি জেনে রাখা ভাল।

বোতাম গ্রুপ

বুটস্ট্র্যাপে CARDS <(লেখার সময় প্রকাশের সময়) এর মতো, আমরা একটি গ্রুপ ক্লাস ব্যবহার করতে পারি যাতে বোতামগুলিকে একক উপাদানে ভিজ্যুয়ালভাবে ফিউজ করা যায়।

<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 ক্লাসের সাথে একটি ডিভ-এ মুড়ে ফেলি এবং এটাই!

আচরণটি ঠিক একই, কিন্তু এখন তারা একে অপরের ঠিক পাশে রয়েছে এবং বাইরের কোণগুলি সুন্দরভাবে গোলাকার৷

সংখ্যা করার জন্য

বোতামগুলি প্রায় প্রতিটি ওয়েবসাইটে পাওয়া যেতে পারে এবং সেগুলি অনলাইন অভিজ্ঞতার একটি অত্যন্ত গুরুত্বপূর্ণ অংশ। আমরা আমাদের অ্যাকাউন্টে লগ ইন করতে পারি, অনলাইনে কিছু অর্ডার করতে পারি, একটি নিউজলেটারে সাবস্ক্রাইব করতে পারি, বা বোতামগুলির সাহায্যে আমাদের ইনবক্সে সমস্ত স্প্যাম অবতরণ ব্লক করতে পারি। তাদের ছাড়া, ওয়েবসাইট ডিজিটাল ব্যবসা কার্ড হবে. বুটস্ট্র্যাপের মাধ্যমে, আমরা বোতামগুলিকে আমাদের সাইটের একটি সুন্দর উপাদান বানাতে পারি৷

৷