বুটস্ট্রাপ৩ সিএসএস কম্পোনেন্ট (Bootstrap3 CSS Component)

Bootstrap 3 একটি জনপ্রিয় ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং কার্যকরী ডিজাইন তৈরি করতে ব্যবহৃত হয়। এটি HTML, CSS, এবং JavaScript কম্পোনেন্টের একটি কালেকশন প্রদান করে যা সহজে ওয়েব পৃষ্ঠার ডিজাইন এবং ফাংশনালিটি তৈরি করতে সাহায্য করে। Bootstrap 3-এ অনেক ধরণের CSS কম্পোনেন্ট রয়েছে, যা ওয়েব পেজের বিভিন্ন উপাদান যেমন বাটন, নেভিগেশন বার, ফর্ম, কার্ড, টেবিল ইত্যাদি তৈরি করতে ব্যবহৃত হয়। এখানে Bootstrap 3 CSS কম্পোনেন্ট এর কিছু সাধারণ এবং জনপ্রিয় কম্পোনেন্ট নিয়ে আলোচনা করা হলো।

1. Buttons (বাটন)

Bootstrap 3 এ বিভিন্ন ধরনের বাটন তৈরি করার জন্য .btn ক্লাস ব্যবহার করা হয়। এছাড়া বিভিন্ন স্টাইল এবং সাইজের বাটন তৈরি করার জন্য অতিরিক্ত ক্লাস যেমন .btn-primary, .btn-success, .btn-danger ইত্যাদি ব্যবহার করা হয়।

উদাহরণ:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-info">Info Button</button>

2. Grid System (গ্রিড সিস্টেম)

Bootstrap 3 এর গ্রিড সিস্টেমটি 12 কলাম ভিত্তিক। এটি ওয়েব পেজের লেআউট ডিজাইন করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি বিভিন্ন সাইজের কন্টেন্ট, কোলাম এবং রেসপন্সিভ ডিজাইন তৈরি করতে পারেন।

উদাহরণ:

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

3. Navbars (নেভিগেশন বার)

Bootstrap 3 এ navbar কম্পোনেন্টটি ওয়েবসাইটের হেডারে নেভিগেশন লিঙ্ক বা মেনু তৈরির জন্য ব্যবহৃত হয়। এটি স্বয়ংক্রিয়ভাবে রেসপন্সিভ হয় এবং মোবাইল ডিভাইসে মেনু বার হ্যাম্বার্গার আইকনে রূপান্তরিত হয়।

উদাহরণ:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">My Website</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

4. Forms (ফর্ম)

Bootstrap 3 এ ফর্ম উপাদানগুলি তৈরি করতে .form-control ক্লাস ব্যবহার করা হয়। এটি ইনপুট ফিল্ড, টেক্সট এরিয়া, সিলেক্ট বক্স ইত্যাদির জন্য ব্যবহৃত হয়। এছাড়াও, ফর্মের জন্য .form-group ক্লাস এবং অন্যান্য ক্লাসগুলি ব্যবহৃত হয়।

উদাহরণ:

<form>
  <div class="form-group">
    <label for="exampleInputName">Name</label>
    <input type="text" class="form-control" id="exampleInputName" placeholder="Enter Name">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

5. Cards (কার্ড)

Bootstrap 3 এ cards ডিভাইসের মধ্যে সাধারণত panel কম্পোনেন্ট হিসেবে পরিচিত। এটি বিভিন্ন ধরনের কন্টেন্ট গ্রুপিং এবং ডিসপ্লে করার জন্য ব্যবহৃত হয়।

উদাহরণ:

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Body Content</div>
</div>

6. Modals (মডাল)

Modals হল পপ-আপ উইন্ডো যা ওয়েব পেজের মধ্যে প্রয়োজনীয় তথ্য দেখানোর জন্য ব্যবহৃত হয়। এটি ইউজার ইন্টারঅ্যাকশন বা কনফার্মেশন ডায়ালগ এর জন্য আদর্শ।

উদাহরণ:

<!-- Button to trigger modal -->
<button class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Modal Heading</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

7. Tables (টেবিল)

Bootstrap 3 এ টেবিলের জন্য .table ক্লাস ব্যবহৃত হয়। এটি টেবিলের শৈলী এবং লেআউট কাস্টমাইজ করতে সাহায্য করে, যেমন টেবিলের বর্ডার, রঙ, হোভার ইফেক্ট ইত্যাদি।

উদাহরণ:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

8. Alerts (অ্যালার্ট)

Bootstrap 3 এ বিভিন্ন ধরনের alerts (যেমন সাকসেস, ডেঞ্জার, ওয়ার্নিং) তৈরি করতে .alert ক্লাস ব্যবহার করা হয়। এগুলি সাধারণত ব্যবহারকারীদের তথ্য প্রদানের জন্য ব্যবহৃত হয়।

উদাহরণ:

<div class="alert alert-success">
  <strong>Success!</strong> Your request was successful.
</div>
<div class="alert alert-danger">
  <strong>Danger!</strong> Something went wrong.
</div>

9. Progress Bars (প্রগ্রেস বার)

Progress Bars হল একটি ইন্ডিকেটর যা প্রক্রিয়া বা কাজের অগ্রগতি প্রদর্শন করে। Bootstrap 3 এ এটি সহজে তৈরি করা যায় .progress এবং .progress-bar ক্লাসের মাধ্যমে।

উদাহরণ:

<div class="progress">
  <div class="progress-bar progress-bar-striped active" style="width: 40%">
    40% Complete
  </div>
</div>

10. Carousel (ক্যারোসেল)

Carousel হল একটি স্লাইড শো যা কনটেন্টের একাধিক আইটেম দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত ছবি বা অন্যান্য কনটেন্টের জন্য ব্যবহার করা হয়।

উদাহরণ:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="image1.jpg" alt="First Slide">
    </div>
    <div class="item">
      <img src="image2.jpg" alt="Second Slide">
    </div>
    <div class="item">
      <img src="image3.jpg" alt="Third Slide">
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

সারাংশ:

Bootstrap 3 CSS কম্পোনেন্ট ওয়েব ডেভেলপমেন্টে অনেক সুবিধা দেয়। এটি কাস্টমাইজড এবং রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করে এবং বিভিন্ন ধরনের উপাদান যেমন বাটন, টেবিল, ফর্ম, মডাল, নেভিগেশন বার ইত্যাদি তৈরি করতে ব্যবহার করা হয়। Bootstrap 3 ব্যবহার করে আপনার ওয়েব পেজে মোবাইল ফ্রেন্ডলি এবং সহজে ব্যবহারযোগ্য উপাদান যোগ করা সম্ভব।

বুটস্ট্রাপের ডিফল্ট সেটিং

বুটস্ট্রাপে গ্লোবাল ফন্ট-সাইজ হলো ১৪ পিক্সেল, এবং লাইন-উচ্চতা হলো ১.৪২৮।

এটি < body > এবং সকল প্যারাগ্রাফ এলিমেন্টের জন্য প্রযোজ্য।

সকল < p > এলিমেন্টের নিচে মার্জিন আছে যা তার লাইন-উচ্চতার অর্ধেক। (ডিফল্ট হচ্ছে ১০ পিক্সেল)।

বুটস্ট্রাপ এবং ব্রাউজার ডিফল্ট এর পার্থক্য

এই অধ্যায়ে, আমরা এইচটিএমএল এলিমেন্টের দিকে তাকালে দেখতে পাবো যে ব্রাউজারের ডিফল্ট স্টাইলের চেয়ে বুটস্ট্রাপের ডিফল্ট স্টাইলে কিছুটা ভিন্নতা রয়েছে।

< h1 > - < h6 >

বুটস্ট্রাপ এইচটিএমএল হেডিং এলিমেন্টগুলোকে (< h1 > থেকে < h6 >) নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

kt_satt_skill_example_id=776

< small >

বুটস্ট্রাপে এইচটিএমএল < small > এলিমেন্ট যেকোনো হেডিং এ একটি লাইটার, সেকেন্ডারি টেক্সট তৈরি করেঃ

kt_satt_skill_example_id=777

< mark >

বুটস্ট্রাপ এইচটিএমএল < mark > এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

kt_satt_skill_example_id=778

< abbr >

বুটস্ট্রাপ এইচটিএমএল < abbr > এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

kt_satt_skill_example_id=779

< blockquote >

বুটস্ট্রাপ এইচটিএমএল < blockquote > এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

kt_satt_skill_example_id=780

কোটেশনকে ডানদিকে দেখানোর জন্য .blockquote-reverse ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=782

< dl >

বুটস্ট্রাপ এইচটিএমএল < dl > এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

kt_satt_skill_example_id=784

< code >

বুটস্ট্রাপ এইচটিএমএল < code > এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

kt_satt_skill_example_id=786

< kbd >

বুটস্ট্রাপ এইচটিএমএল < kbd > এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

kt_satt_skill_example_id=789

< pre >

বুটস্ট্রাপ এইচটিএমএল < pre > এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ

kt_satt_skill_example_id=791

কালার এবং ব্যাকগ্রাউন্ড

বুটস্ট্রাপের কিছু কনটেকচুয়াল ক্লাস আছে যারা "অর্থবহ কালার" নির্ধারন করে।

টেক্সট কালারের জন্য ক্লাসগুলো হচ্ছেঃ .text-muted, .text-primary, .text-success, .text-info, .text-warning, এবং .text-danger:

kt_satt_skill_example_id=793

ব্যাকগ্রাউন্ড কালারের ক্লাসগুলো হচ্ছেঃ .bg-primary, .bg-success, bg-info, bg-warning, এবং .bg-danger:

kt_satt_skill_example_id=794

টাইপোগ্রাফীর অন্যান্য ক্লাস

এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য নিম্নোক্ত বুটস্ট্রাপ ক্লাসগুলো ব্যবহার করা যায়ঃ

বুটস্ট্রাপ সাধারণ/বেসিক টেবিল

বেসিক বুটস্ট্রাপ টেবিলের মধ্যে হালকা প্যাডিং থাকে এবং টেবিলের সারিগুলোর মধ্যে অনুভুমিক ডিভাইডার থাকে।

বেসিক/সাধারণ বুটস্ট্রাপ টেবিল তৈরি করার জন্য < table > এলিমেন্টের মধ্যে .table অন্তর্ভুক্ত করুনঃ

kt_satt_skill_example_id=816

একনজরে বুটস্ট্রাপ টেবিল সংক্রান্ত ক্লাসসমূহ

বুটস্ট্রাপ ডোরাকাটা(Striped) সারি

টেবিলের সারিগুলোকে ডোরাকাটা বা Striped করার জন্য .table ক্লাসের পাশাপাশি .table-striped ক্লাসটি ব্যবহার করুনঃ

kt_satt_skill_example_id=817

বুটস্ট্রাপ বর্ডারযুক্ত টেবিল

টেবিল এবং টেবিল সেলের চারপাশে বর্ডারযুক্ত করার জন্য .table-bordered ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=818

বুটস্ট্রাপ হোভারযুক্ত সারি

টেবিলের সারিগুলোর মধ্যে হোভার ইফেক্ট সক্রিয় করার জন্য .table-hover ক্লাসটি ব্যবহার করুনঃ

kt_satt_skill_example_id=819

বুটস্ট্রাপ কনডেন্সড টেবিল

টেবল সেলের প্যাডি কমানোর জন্য .table-condensed ক্লাস ব্যবহার করুন। এটি প্রায় অর্ধেক প্যাডিং কমিয়ে ফেলেঃ

kt_satt_skill_example_id=820

বুটস্ট্রাপ কনটেকচুয়াল ক্লাস

টেবিলের সারি অথবা সেলে কালার করার জন্য কনটেকচুয়াল ক্লাস ব্যবহার করা যায়। (< tr >) (< td >):

নোটঃ কনটেকচুয়াল কালারের বাহিরে অন্য কালারগুলো ব্যবহার করার জন্য সিএসএস ব্যবহার করুন।

kt_satt_skill_example_id=821

বুটস্ট্রাপ কনটেকচুয়াল ক্লাসগুলির বর্ণনা নিচে দেওয়া হলোঃ

বুটস্ট্রাপ রেসপন্সিভ টেবিল

টেবিলকে রেসপন্সিভ করার জন্য .table-responsive ক্লাসটি ব্যবহার করুন। রেসপন্সিভ টেবিলের ক্ষেত্রে টেবিলটির জন্য ছোট ডিভাইসে(786px এর কম) একটি আনুভূমিক স্ক্রলিং বার হবে, কিন্তু বড় স্ক্রিনের(786px এর বেশি) ক্ষেত্রে কোন পার্থক্যই দেখা যায় নাঃ

kt_satt_skill_example_id=822

এছাড়াও সারি এবং সেলের মধ্যে যেসকল ক্লাস ব্যবহার করা যায়ঃ

বুটস্ট্রাপ ইমেজ আকৃতি(size)

বুটস্ট্রাপে নিম্নলিখিত আকৃতির ইমেজের জন্য ইমেজ ক্লাস রয়েছে।

1. রাউন্ড কর্ণার
2. বৃত্তাকার ইমেজ
3. Thumbnail ইমেজ

বুটস্ট্রাপ ইমেজের এই অধ্যায়টিতে আমরা উল্লেখিত আকৃতির ইমেজের উদাহরণ প্রদর্শন করেছি।

রাউন্ড কর্ণার

ইমেজের কর্ণার বা কোণগুলোকে রাউন্ড করার জন্য .img-rounded ক্লাসটি ব্যবহার করা হয়। (IE8 রাউন্ড কর্নার সাপোর্ট করে না):

kt_satt_skill_example_id=830

বৃত্তাকার ইমেজ

ইমেজকে বৃত্তাকার বা গোলাকার করে প্রদর্শন করানোর জন্য <img> এলিমেন্টের মধ্যে .img-circle ক্লাস ব্যবহার করুন। একটি ইমেজকে সার্কেলের আকৃতিতে নিয়ে আসে (IE8 এ রাউন্ড ইমেজ সাপোর্ট করে না):

kt_satt_skill_example_id=841

Thumbnail ইমেজ

ইমেজকে Thumbnail এর আকৃতিতে দেখানোর জন্য .img-thumbnail ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=843

রেসপন্সিভ ইমেজ

ইমেজকে যেকোন আকারেই রুপান্তর করা যায়। অর্থাৎ ইমেজের যেকোন আকারই নির্ধারণ করে আপনি তা প্রদর্শন করাতে পারবেন। রেসপন্সিভ ইমেজ স্বয়ংক্রিয়ভাবে সকল ডিভাইসের স্ক্রিনের সাথে এডজাস্ট করে নেয়।

ইমেজকে রেসপন্সিভ করার জন্য <img> ট্যাগের মধ্যে .img-responsive ক্লাসটি ব্যবহার করুন।

.img-responsive ক্লাস ইমেজটিতে সিএসএসের display: block;, max-width: 100%; এবং height: auto; প্রোপার্টিগুলো যুক্ত করেঃ

kt_satt_skill_example_id=846

ইমেজ গ্যালারি

বুটস্ট্রাপের মাধ্যমে ইমেজ গ্যালারি তৈরি করার জন্য আপনাকে .thumbnail ক্লাসের সাথে গ্রীড সিস্টেম ব্যবহার করতে হবে। নিচের উদাহরণে .thumbnail ক্লাস এবং গ্রীড সিস্টেম সাহায্যে একটি ফটো গ্যালারি তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=848

রেসপন্সিভ এম্বেড

ভিডিও অথবা স্লাইড শো যেকোনো ডিভাইসে ভালোভাবে চলার জন্য রেসপন্সিভ করতে হয়।

রেসপন্সিভ সংক্রান্ত ক্লাসগুলি সরাসরি <iframe>, <embed>, <video> এবং <object> এলিমেন্টে ব্যবহার করা যায়।

নিম্নলিখিত উদাহরণে <iframe> ট্যাগের মধ্যে .embed-responsive-item ক্লাস যুক্ত করে একটি রেসপন্সিভ ভিডিও তৈরি করে দেখানো হলো। ধারনকারী <div> এলিমেন্টের মধ্যে ভিডিও এর আয়তকার অনুপাত নির্ধারন করে দিতে হবেঃ

kt_satt_skill_example_id=850

দুইটি আয়তকার অনুপাত থেকে আপনার প্রয়োজন অনুযায়ী একটি অনুপাত বেছে নিনঃ

kt_satt_skill_example_id=852

একনজরে ইমেজ সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

বুটস্ট্রাপ জামবোট্রন তৈরি

বুটস্ট্রাপ জামবোট্রন বলতে একটি বড় বক্সকে বুঝায় যা কোন গুরুত্বপূর্ণ কন্টেন্ট বা তথ্যকে বিশেষভাবে আকর্ষনীয় করে প্রদর্শন করে।

বুটস্ট্রাপ জামবোট্রন হচ্ছে ধূসর রঙ্গের একটি বক্স যার কোণাগুলো রাউন্ড হয় এবং এর ভিতরের টেক্সটের আকার সাধারন টেক্সটের ছেয়ে বড় হয়।

জামবোট্রন তৈরি করার জন্য < div > এলিমেন্টের সাথে .jumbotron ক্লাস ব্যবহার করা হয়ঃ

কন্টেইনারের মধ্যে জামবোট্রন

যদি জামবোট্রনকে স্ক্রিনের পুরোটা অংশ নিয়ে দেখাতে না চান তাহলে এটিকে < div class="container" > এর ভিতরে রাখুনঃ

kt_satt_skill_example_id=870

কন্টেইনারের বাহিরে জামবোট্রন

যদি জামবোট্রনকে স্ক্রিনের পুরোটা অংশ নিয়ে দেখাতে না চান তাহলে এটিকে < div class="container" > এর বাহিরে রাখুনঃ

kt_satt_skill_example_id=875

পেজ হেডার তৈরি

পেজ হেডার অনেকটা সেকশন ডিভাইডারের মতো।

.page-header ক্লাস হেডিংয়ের নিচে একটি আনুভূমিক রেখা যুক্ত করে এবং এলিমেন্টের চারপাশে কিছু অতিরিক্ত স্পেস যুক্ত করে নেয়ঃ

kt_satt_skill_example_id=877

বুটস্ট্রাপ ওয়েল

বুটস্ট্রাপের .well ক্লাস একটি এলিমেন্টে ধূসর কালারের ব্যাকগ্রাউন্ড, কিছু প্যাডিং এবং একটি বর্ডার যুক্ত করেঃ

নিচে একটি বেসিক Well এর উদাহরণ দেখানো হলো।

kt_satt_skill_example_id=886

বুটস্ট্রাপ Well এর আকার

বুটস্ট্রাপ Well এর আকার পরিবর্তন করার ক্ষেত্রে .well ক্লাসের সাথে ছোট আকারের well এর জন্য .well-sm এবং বড় আকারের well এর জন্য .well-lg ক্লাস যুক্ত করুনঃ

kt_satt_skill_example_id=887

এলার্ট

বুটস্ট্রাপের মাধ্যমে খুব সহজে সতর্কবার্তা তৈরি করা যায়।

বুটস্ট্রাপ এলার্ট তৈরি করার জন্য .alert ক্লাস এবং সাথে এই ক্লাসগুলোর যেকোন একটি ব্যবহার করুন। যেমন:- .alert-success, .alert-info, .alert-warning অথবা .alert-danger:

kt_satt_skill_example_id=893

এলার্ট ক্লোজ করা

এলার্ট বক্সটি ক্লোজ করার জন্য < a > এলিমেন্টের মধ্যে class="close" এবং data-dismiss="alert" এট্রিবিউট যুক্ত করুনঃ

kt_satt_skill_example_id=894

এ্যানিমেশনযুক্ত এলার্ট

এলার্ট মেসেজ ক্লোজ হওয়ার সময় ফেডিং(fading) ইফেক্ট যুক্ত করার জন্য .alert ক্লাসের সাথে .fade এবং .in ক্লাস যুক্ত করুনঃ

kt_satt_skill_example_id=897

বুটস্ট্রাপ এলার্টের সম্পূর্ণ রেফারেন্স

বুটস্ট্রাপ টুলটিপের অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS এলার্ট রেফারেন্স পেজে ভিজিট করুন।

বুটস্ট্রাপ বাটন স্টাইল

বুটস্ট্রাপে সাত ধরনের বাটন স্টাইল রয়েছে।

বুটস্ট্রাপ বাটন স্টাইল করার জন্য নিচের বুটস্ট্রাপ ক্লাসগুলো ব্যবহার করা হয়ঃ

1. .btn-default
2. .btn-primary
3. .btn-success
4. .btn-info
5. .btn-warning
6. .btn-danger
7. .btn-link

নিচের উদাহরনে বিভিন্ন বাটন স্টাইলের কোড দেখানো হয়েছেঃ

kt_satt_skill_example_id=914

< a >, < button >, অথবা <input > এলিমেন্টে বাটন ক্লাসগুলো ব্যবহার করা যায়ঃ

kt_satt_skill_example_id=915

বাটনের আকার

বুটস্ট্রাপে চার আকারের বাটন রয়েছে। নিচের উদাহরণে বিভিন্ন আকারের বাটন দেখানো হলোঃ

নিচের ক্লাসগুলো দ্বারা ভিন্ন ভিন্ন আকারের বাটন বুঝায়ঃ

1. .btn-lg
2. .btn-md
3. .btn-sm
4. .btn-xs

নিচের উদাহরনে বিভিন্ন আকারের বাটনের কোড দেখানো হয়েছেঃ

kt_satt_skill_example_id=917

ব্লক লেভেল বাটন

ব্লক লেভেল বাটন প্যারেন্ট এলিমেন্টের সমগ্র অংশ জুড়ে থাকে।

ব্লক লেভেল বাটন তৈরি করার জন্য .btn ক্লাসের সাথে .btn-block ক্লাস ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=919

সক্রিয়/নিষ্ক্রিয় বাটন

বাটনকে সক্রিয় বা নিষ্ক্রিয় ভাবে সেট করা যায়। এখানে নিষ্ক্রিয় বলতে বুঝানো হয়েছে যেই বাটনে ক্লিক করা যায় না।

.active ক্লাস ব্যবহার করে বাটনকে সক্রিয় ভাবে সেট করা হয় এবং .disabled ক্লাস ব্যবহার করে নিষ্ক্রিয় ভাবে বাটন সেট করা হয়ঃ

kt_satt_skill_example_id=921

একনজরে বাটন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

নিচের ক্লাসগুলো যেকোন <a>, <button>, অথবা <input> এলিমেন্টে ব্যবহার করা যায়ঃ

বুটস্ট্রাপ বাটন গ্রুপ

বুটস্ট্রাপ বাটন গ্রুপ: বুটস্ট্রাপে একাধিক বাটনকে একটি বাটন গ্রুপে(এক লাইনে) একত্রে করে রাখা যায়।

বুটস্ট্রাপ বাটন গ্রুপ তৈরি করার জন্য < div > এলিমেন্টের সাথে .btn-group ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=922

পরামর্শঃ কোন একটি গ্রুপের বাটনগুলোর আকার আলাদা আলাদা সেট করার চেয়ে গ্রুপের সকল বাটনের আকার একত্রে সেট করার জন্য .btn-group-* ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=923

ভার্টিক্যাল বাটন গ্রুপ

বুটস্ট্রাপের মাধ্যমে ভার্টিক্যাল বাটন গ্রুপও তৈরি করা যায়।

ভার্টিক্যাল বাটন গ্রুপ তৈরি করার জন্য .btn-group-vertical ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=925

জাস্টিফাইড বাটন গ্রুপ

প্যারেন্ট এলিমেন্টের সম্পূর্ণ প্রস্থ জুড়ে বাটন গ্রুপ তৈরি করার জন্য় .btn-group-justified ক্লাস ব্যবহার করুন।

কিভাবে < a > এলিমেন্টের মাধ্যমেও বাটন গ্রুপ তৈরি যায় তা নিচের উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=928

নোটঃ< button > এলিমেন্টর ক্ষেত্রে অবশ্যই প্রত্যেকটি বাটনকে .btn-group ক্লাসের আওতায় রাখতে হবেঃ

kt_satt_skill_example_id=930

বাটন গ্রুপ এবং ড্রপডাউন মেনুর একত্র ব্যবহার

ড্রপডাউন মেনু তৈরি করার জন্য নেস্টেড বাটন গ্রুপ নিচের উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=932

Split ড্রপডাউন বাটন

kt_satt_skill_example_id=934

গ্লিফআইকন

বুটস্ট্রাপে ২৬০ টি গ্লিফআইকন রয়েছে।

গ্লিফআইকন ইচ্ছেমতো টেক্সট, বাটন, টুলবার, নেভিগেশন, ফর্ম ইত্যাদিতে ব্যবহার করা যায়।

নিচে গ্লিফআইকনের কিছু উদাহরণ দেওয়া হলোঃ

সার্চ গ্লিফআইকনঃ

প্রিন্ট গ্লিফআইকনঃ

এনভেলাপ গ্লিফআইকনঃ

ডাউনলোডঃ

গ্লিফআইকন ব্যবহার করার পদ্ধতি

নিচে গ্লিফআইকন ব্যবহারের পদ্ধতি দেখনো হয়েছেঃ

kt_satt_skill_example_id=948

এখানে name অংশে অবশ্যই গ্লিফআইকনের নাম দিতে হবে।

গ্লিফআইকনের উদাহরণ

নিচের উদাহরনে গ্লিফআইকনের বিভিন্ন ব্যবহার দেখানো হয়েছেঃ

kt_satt_skill_example_id=950

বুটস্ট্রাপের জন্য অন্যান্য গ্লিফআইকন সমূহঃ

More Icon Click Here More Bootstrap Icons

বুটস্ট্রাপ ব্যাজ(Badge)

বুটস্ট্রাপ ব্যাজ হলো একটি লিংকের সাথে সম্পৃক্ত আইটেমের সংখ্যাত্বক ইঙ্গিত।

ব্যাজ তৈরি করার জন্য < span > এলিমেন্টে .badge ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=955

ব্যাজ যে কোনো এলিমেন্টের ভিতরেই লিখা যায়, যেমন বাটনঃ

বাটনের মধ্যে কিভাবে ব্যাজ ব্যবহার করা যায় তা নিচের উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=956

বুটস্ট্রাপ লেবেল

বুটস্ট্রাপ লেবেল ব্যবহার করে কোনো কিছু সম্পর্কে অতিরিক্ত তথ্য প্রদান করা হয়ঃ

লেবেল নতুন

লেবেল নতুন

লেবেল নতুন

লেভেল তৈরি করার জন্য < span > এলিমেন্টের মধ্যে .label ক্লাস এবং কনটেকচুয়াল ক্লাসগুলোর যেকোন একটি ব্যবহার করুন। কনটেকচুয়াল ক্লাসগুলো হলো-  .label-default, .label-primary, .label-success, .label-info, .label-warning অথবা .label-danger

kt_satt_skill_example_id=957

একনজরে লেভেল এবং ব্যাজ সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

বুটস্ট্রাপ বেসিক প্রোগ্রেস বার

বুটস্ট্রাপ প্রোগ্রেস বার: প্রোগ্রেস বারের মাধ্যমে ইউজার জানতে পারে তার সম্পাদিত প্রক্রিয়াটি কতটুকু সম্পন্ন হয়েছে এবং কতটুকু বাকী রয়েছে।

বুটস্ট্রাপে বিভিন্ন ধরনের প্রোগ্রেস বার রয়েছে।

বুটস্ট্রাপ বেসিক প্রোগ্রেস বার তৈরি করার জন্য <div> এলিমেন্টর মধ্যে .progress ক্লাস এবং তারমধ্যে অন্য একটি <div> এলিমেন্টে .progress-bar ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=962

	নোটঃ প্রোগ্রেস বার ইন্টারনেট এক্সপ্লোরার(৯) এবং এর পূর্ববর্তী ভার্সনে সাপোর্ট করে না। কারন প্রোগ্রেস বারের ক্ষেত্রে এটি সিএসএস(৩) ট্রানজিশন এবং এনিমেশন এফেক্ট ব্যবহার করে। নোটঃ স্ক্রিন রিডারদের পড়তে সাহায্য করার জন্য aria-* এট্রিবিউট ব্যবহার করুন।

লেবেলসহ প্রোগ্রেস বার

লেভেলসহ একটি প্রোগ্রেস বার দেখতে নিম্নরুপঃ

প্রোগ্রেস বারের পারসেন্টেজ প্রদর্শন করানোর জন্য .sr-only ক্লাস বাদ দিনঃ

kt_satt_skill_example_id=964

প্রোগ্রেস বারের কালার

প্রোগ্রেস বারকে কালার করার জন্য কনটেকচুয়াল ক্লাসগুলো ব্যবহার করতে পারেন। এছাড়াও আপনি আপনার পছন্দ মতো কালার যুক্ত করার জন্য সিএসএসের সাহায্য নিন।

কিভাবে কনটেকচুয়াল ক্লাসগুলো প্রোগ্রেস বারে ব্যবহার করা যায় তা নিচের উদাহরণে দেখানো হলোঃ

1. .progress-bar-success
2. .progress-bar-info
3. .progress-bar-warning
4. .progress-bar-danger

kt_satt_skill_example_id=967

Striped প্রোগ্রেস বার

Striped প্রোগ্রেস বার দেখতে নিম্নরুপঃ

Striped প্রোগ্রেস বার তৈরি করার জন্য .progress-bar-striped ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=969

এনিমেশনযুক্ত প্রোগ্রেস বার

একটি "এনিমেশন" যুক্ত প্রোগ্রেস বারঃ

এনিমেশন যুক্ত প্রোগ্রেস বার তৈরি করার জন্য .progress-bar-striped ক্লাসের সাথে .active ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=971

Stacked প্রোগ্রেস বার

কয়েকটি প্রোগ্রেস বার মিলে একটি প্রোগ্রেস বার তৈরি করা যায়।

একই < div class="progress" > এর মধ্যে একাধিক প্রোগ্রেস বার যুক্ত করে stacked প্রোগ্রেস বার তৈরি করা যায়ঃ

kt_satt_skill_example_id=973

বুটস্ট্রাপ বেসিক পেজিনেশন

যখন ওয়েবসাইটে অনেকগুলো পেজ থাকে, সেক্ষেত্রে পেজিনেশন ব্যবহার খুবি কার্যকর হয়।

বুটস্ট্রাপের বেসিক পেজিনেশন নিম্নরুপঃ

বুটস্ট্রাপ পেজিনেশন তৈরি করার জন্য < ul > এলিমেন্টের মধ্যে .pagination ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=976

একটিভ স্টেট

ব্যবহারকারী বর্তমানে কোন পেজে আছেন তা বুঝানোর জন্য .active ক্লাস যুক্ত করুনঃ

kt_satt_skill_example_id=977

Disabled স্টেট

Disabled লিংককে ক্লিক করা যায় না।

যদি কোনো লিংককে disabled করতে চান তাহলে ঐ লিংকে .disabled ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=978

পেজিনেশনের আকার

পেজিনেশন সহজে ছোট বড় করা যায়। বড় ব্লকের পেজিনেশনের জন্য .pagination ক্লাসের সাথে .pagination-lg ক্লাস এবং ছোট ব্লকের পেজিনেশনের জন্য .pagination-sm ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=979

ব্রেডকাম্ব

ব্রেডকাম্বের মাধ্যমেও পেজিনেশন তৈরি করা যায়। .breadcrumb ক্লাসের মাধ্যমে ন্যাভিগেশন আকারে বর্তমান পেজের অবস্থান জানা যায়। ব্রেডকাম্ব তৈরি করার জন্য <ul> এলিমেন্টের মধ্যে .breadcrumb ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=980

একনজরে ব্রেডকাম্ব এবং পেজিনেশন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

বুটস্ট্রাপ পেজার কি?

বুটস্ট্রাপ পেজার পেজিনেশন হতে এসেছে (যার বর্ণনা পূর্ববর্তী অধ্যায়ে দেওয়া হয়েছে)।

বুটস্ট্রাপ পেজারের মাধ্যমে সহজে Previous এবং Next বাটন তৈরি করা যায়।

Previous/Next বাটন তৈরি করার জন্য < ul > এলিমেন্টে .pager ক্লাস সংযুক্ত করুনঃ

kt_satt_skill_example_id=983

পেজার বাটন এ্যালাইন

পেজার বাটনকে পেজের উভয়পাশে এ্যালাইন করার জন্য < li > এলিমেন্টের মধ্যে .previous এবং .next ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=985

বুটস্ট্রাপ নেভিগেশনের সম্পূর্ণ রেফারেন্স

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

বুটস্ট্রাপ বেসিক লিষ্ট গ্রুপ

অধিকাংশ ক্ষেত্রেই বুটস্ট্রাপ বেসিক লিষ্ট গ্রুপ তৈরি করার জন্য আনওর্ডার লিষ্টের সাথে লিষ্ট আইটেম ব্যবহার করা হয়। একটি বেসিক লিষ্ট গ্রুপ তৈরি করার জন্য < ul > এলিমেন্টে .list-group ক্লাস এবং < li > এলিমেন্টে .list-group-item ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=987

লিষ্ট গ্রুপের মধ্যে ব্যাজের ব্যবহার

লিষ্ট গ্রুপে ব্যাজ সংযুক্ত করে ব্যবহার করা যায়। ব্যাজ স্বয়ংক্রিয়ভাবে তার অবস্থান ডানে নিয়ে নিবে।
লিষ্ট আইটেমের সাথে একত্রে ব্যাজ ব্যবহার করার জন্য (< li class="list-group-item") এর মধ্যে .badge ক্লাসযুক্ত একটি < span > এলিমেন্ট যুক্ত করুনঃ

kt_satt_skill_example_id=988

লিংক যুক্ত লিষ্ট গ্রুপ

লিষ্ট গ্রুপ আইটেমগুলো হাইপারলিংকযুক্ত হতে পারে। এর ফলে হোভারে করলে ব্যাকগ্রাউন্ড কালার ধূসর দেখাবে। লিংকযুক্ত লিষ্ট গ্রুপ তৈরি করার জন্য < ul > পরিবর্তে < div > এলিমেন্ট এবং < li > এর পরিবর্তে < a > এলিমেন্ট ব্যবহার করুনঃ

kt_satt_skill_example_id=989

একটিভ স্টেট

কোন একটি লিস্ট আইটেমকে একটিব হিসেবে হাইলাইট করার জন্য .active ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=990

Disabled আইটেম

লিষ্ট গ্রুপের কোনো একটি আইটেমকে disable করে রাখার জন্য ঐ এলিমেন্টের মধ্যে .disabled ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=991

কনটেকচুয়াল ক্লাস

কনটেকচুয়াল ক্লাস ব্যবহার করে লিষ্ট আইটেমকে কালার করা যায়ঃ

• list-group-item-success
• list-group-item-info
• list-group-item-warning
• list-group-item-danger

লিষ্ট আইটেমকে কালার করার জন্য .list-group-item ক্লাসের সাথে নিম্নলিখিত ক্লাসগুলো ব্যবহার করা হয় .list-group-item-success, list-group-item-info, list-group-item-warning এবং .list-group-item-danger।

কাস্টম কনটেন্ট

লিষ্ট গ্রুপ আইটেমের মধ্যে এইচটিএমএলের প্রায় সবগুলো এলিমেন্ট ব্যবহার করা যায়।

বুটস্ট্রাপে এই সংক্রান্ত দুটি ক্লাস রয়েছে। ক্লাস দুটি হলো- .list-group-item-heading এবং .list-group-item-text। নিম্নে এদের ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=992

বুটস্ট্রাপ প্যানেল

বুটস্ট্রাপ প্যানেল হচ্ছে একটি বর্ডার বক্স যেখানে কনটেন্ট এর চারপাশে কিছু প্যাডিং থাকে। প্যানেল তৈরি করার জন্য .panel ক্লাস ব্যবহার করা হয় এবং প্যানেলের কন্টেন্ট .panel-body ক্লাস এর মধ্যে রাখা করা হয়ঃ

kt_satt_skill_example_id=998

বুটস্ট্রাপ প্যানেল হেডিং

প্যানেলের মধ্যে হেডিং তৈরি করার জন্য .panel-heading ক্লাস ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1000

বুটস্ট্রাপ প্যানেল ফুটার

প্যানেলের মধ্যে ফুটার তৈরি করার জন্য .panel-footer ক্লাস ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1001

বুটস্ট্রাপ প্যানেল গ্রুপ

অনেকগুলো প্যানেল নিয়ে একটি প্যানেল গ্রুপ তৈরি করার জন্য প্যানেলগুলোকে .panel-group ক্লাস যুক্ত একটি <div> এলিমেন্টের মধ্যে রাখুন।

.panel-group ক্লাস প্রত্যেকটি প্যানেলের নিচের মার্জিন দূর করে দেয়।

kt_satt_skill_example_id=1002

বুটস্ট্রাপ প্যানেলে কনটেকচুয়াল ক্লাসের ব্যবহার

প্যানেলে কালার করতে কনটেকচুয়াল ক্লাস ব্যবহার করা যায়। প্যানেল সংক্রান্ত কনটেকচুয়াল ক্লাসগুলো হলো- (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warningএবং .panel-danger। এগুলো থেকে আপনার প্রয়োজন মতো একটি ক্লাস ব্যবহার করুনঃ

বুটস্ট্রাপ ফরম লে-আউট

বুটস্ট্রাপে তিন ধরণের ফরম লে-আউট রয়েছেঃ

• উলম্ব(Vertical) ফরম (এটিই ডিফল্ট)
• আনুভূমিক(Horizontal) ফরম
• ইনলাইন(Inline) ফরম

তিনটি ফরম লে-আউটের জন্যই স্ট্যান্ডার রুলস গুলো হলোঃ

• সবসময় < form role="form" > ব্যবহার করুন। (স্ক্রিন রিডারদের জন্য সহায়ক)
• লেভেল এবং ফরম কন্ট্রোলগুলো < div class="form-group" > এর মধ্যে রাখুন (কাঙ্খিত ব্যবধানের জন্য প্রয়োজন)
• সকল টেক্সট এলিমেন্ট যেমন < input >, < textarea > এবং < select > এ .form-control ক্লাস যুক্ত করুন।

বুটস্ট্রাপ Vertical ফরম (ডিফল্ট)

নিচের উদাহরণে দুইটি ইনফুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটন সহ একট vertical ফরম তৈরি করা হলোঃ

kt_satt_skill_example_id=1004

বুটস্ট্রাপ ইনলাইন ফরম

ইনলাইন ফরমে, সকল এলিমেন্টই ইনলাইন এবং বামে এ্যালাইনযুক্ত হয়। এছাড়াও লেভেলগুলো একই সাথে থাকে।

নোটঃ এটি শুধুমাত্র সেখানের এমন দেখাবে যেখানে ভিউপোর্ট(ডিভাইসের স্ক্রিনের আকার) কমপক্ষে 768px প্রশস্ত!

ইনলাইন ফরম তৈরি করা জন্য < form > এলিমেন্টের মধ্যে .form-inline ক্লাস যুক্ত করতে হবে।

নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ একটি ইনলাইন ফরম দেখানো হলোঃ

kt_satt_skill_example_id=1006

টিপসঃ আপনি যদি আপনার ফরমের প্রতিটি ইনপুট ফিল্ডে লেভেল যুক্ত না করেন, তাহলে স্ক্রিন রিডারদের জন্য তা কষ্টদায়ক হবে। .sr-only ক্লাস ব্যবহার করে চাইলে আপনি স্ক্রিন রিডার ব্যতীত অন্য যেকোন ডিভাইসের জন্য লেভেল হাইড করতে পারেনঃ

kt_satt_skill_example_id=1008

বুটস্ট্রাপ Horizontal ফরম

একটি Horizontal ফরম মার্কআপের সংখ্যা এবং উপস্থাপনার দিক থেকে অন্যান্য ফরমের চেয়ে আলাদা।

Horizontal ফরম তৈরি করার নিয়মঃ

1. Horizontal ফরম তৈরি করার জন্য < form > এলিমেন্টে .form-horizontal ক্লাস অন্তর্ভূক্ত করুন।
2. এবং সকল < label > এলিমেন্টে .control-label ক্লাস যুক্ত করুন।

টিপসঃ একটি Horizontal ফরম লে-আউটে লেভেল এবং ফরম কন্ট্রোল গ্রুপকে বিন্যাস(align) করার জন্য বুটস্ট্রাপের পূর্বনির্ধারিত গ্রীড ক্লাস ব্যবহার করুন।

নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ Horizontal ফরম তৈরি করা হলোঃ

kt_satt_skill_example_id=1011

সাপোর্টযোগ্য ফরম কন্ট্রোলসমূহ

বুটস্ট্রাপে নিম্নলিখিত ফরম কন্ট্রোলসমূহ সাপোর্ট করেঃ

1. input
2. textarea
3. checkbox
4. radio
5. select

বুটস্ট্রাপ ইনপুট

বুটস্ট্রাপে এইচটিএমএল(৫) এর সকল ইনপুট টাইপ সাপোর্ট করে: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, এবং color

নোটঃ যদি টাইপ সঠিকভাবে ডিক্লেয়ার করা না হয় তাহলে ইনপুটগুলো যথাযথভাবে স্টাইল হবে না!

নিচের উদাহরণে দুটি ইনপুট এলিমেন্ট রয়েছে; একটি টেক্সট এবং অন্যটি পাসওয়ার্ড টাইপের:

kt_satt_skill_example_id=1039

বুটস্ট্রাপ টেক্সটএরিয়া

নিচে একটি টেক্সটএরিয়ার উদাহরণ দেখানো হলোঃ

kt_satt_skill_example_id=1044

বুটস্ট্রাপ চেকবক্স

ইউজারের নিকট থেকে পূর্বনির্ধারিত অপশন লিস্ট থেকে একটি সংখ্যক অপশন সিলেক্ট করিয়ে নেয়ার ক্ষেত্রে চেকবক্স ব্যবহার করা হয়।

নিম্নলিখিত উদাহরণে তিনটি চেকবক্স দেখানো হলো। শেষের চেকবক্সটি disabled করে রাখা হয়েছেঃ

kt_satt_skill_example_id=1056

যদি আপনি চেকবক্সগুলোকে একই লাইনে রাখতে চান তাহলে .checkbox-inline ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1057

বুটস্ট্রাপ রেডিও বাটন

পূর্বনির্ধারিত অপশন লিস্ট থেকে ইউজারকে শুধুমাত্র একটি অপশন সিলেক্ট করার ক্ষমতা প্রদানের ক্ষেত্রে রেডিও বাটন ব্যবহার করা হয়। এক্ষেত্রে ইউজারের ক্ষমতা সীমিত করে দেয়া হয়।

নিম্নলিখিত উদাহরণে তিনটি রেডিও বাটন রয়েছে। শেষের অপশনটি disable করে রাখা হয়েছেঃ

kt_satt_skill_example_id=1058

যদি রেডিও বাটনগুলোকে একই লাইনে পেতে চান তাহলে .radio-inline ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1059

বুটস্ট্রাপ সিলেক্ট লিস্ট

ইউজারকে একাধিক অপশন সিলেক্ট করার সুযোগ দেয়ার ক্ষেত্রে সিলেক্ট লিস্ট ব্যবহার করা হয়।

নিম্নলিখিত উদাহরণে একটি ড্রপডাউন লিস্ট দেখানো হলো(সিলেক্ট লিস্ট):

kt_satt_skill_example_id=1060

Static কন্ট্রোল

যদি আপনি static কোন কন্ট্রোল সরাসরি প্রবেশ করাতে চান তাহলে একটি  < p > এলিমেন্টের মধ্যে .form-control-static ক্লাস ব্যবহার করতে পারেনঃ

kt_satt_skill_example_id=1064

বুটস্ট্রাপ ফরম কন্ট্রোলের বিভিন্ন অবস্থা

1. ফোকাস ইনপুট - ফোকাস অবস্থায় ইনপুটের আউটলাইন বাদ হয়ে যায় এবং তার পরিবর্তে স্যাডো বক্স ব্যবহৃত হয়।
2. ডিসেবল(disabled) ইনপুট - একটি ইনপুট ফিল্ডকে disabled করার জন্য ঐ ইনপুট ফিল্ডে disabled এট্রিবিউট ব্যবহার করুন।
3. ডিসেবল ফিল্ডসেট(FIELDSET) - একটি ফিল্ডসেটের সকল ইনপুট disabled করার জন্য ঐ ফিল্ডসেটে disabled এট্রিবিউট ব্যবহার করুন।
4. শুধুমাত্র পঠনযোগ্য ইনপুট - একটি ইনপুটকে ইউজারের নিকট শুধুমাত্র পঠনযোগ্য করে উপস্থাপনের জন্য ঐ ইনপুট ফিল্ডে readonly এট্রিবিউট ব্যবহার করুন। এই ধরনের ইনপুট ইউজার পরিবর্তন/এডিট করতে পারেনা।
5. ভ্যালিডেশন অবস্থা(STATES) - বুটস্ট্রাপে ভূল, সতর্কতা এবং সফলতা বার্তার জন্য ভ্যালিডেশন স্টাইল রয়েছে। বুটস্ট্রাপের এই ভ্যালিডেশন স্টাইল ব্যবহার করার জন্য পেরেন্ট এলিমেন্টে .has-warning, .has-error অথবা .has-success ক্লাস যুক্ত করুন।
6. আইকন - আপনি .has-feedback ক্লাস এবং একটি আইকনের সাহায্যে ফিডব্যাক যুক্ত করতে পারেন।
7. অদৃশ্যমান লেভেল - লেভেল অদৃশ্যমান অবস্থায় রাখার জন্য লেভেলে .sr-only ক্লাস যুক্ত করুন।

নিম্নলিখিত উদাহরণে একটি আনুভূমিক(Horizontal) ফরমে কিছু ফরম কন্ট্রোলের বিভিন্ন অবস্থা দেখানো হলোঃ

kt_satt_skill_example_id=1066

এবং এখানে ইনলাইন ফরম স্টাইলে কিছু ফরম কন্ট্রোলের বিভিন্ন ভ্যালিডেশন স্টেট দেখানো হলোঃ

kt_satt_skill_example_id=1069

ফরম ইনপুটের আকার নির্ধারণ

বুটস্ট্রাপে ফরমের আকার নির্ধারণ করার জন্য .input-lg এবং .input-sm ক্লাস ব্যবহার করা হয়।

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

উচ্চতা নির্ধারণ

নিচের উদাহরণে বিভিন্ন উচ্চতাসহ ইনপুট এলিমেন্ট দেখানো হলোঃ

kt_satt_skill_example_id=1095

Horizontal ফরমে লেভেল এবং ফরম কন্ট্রোলগুলোর আকার নির্ধারন করার জন্য < div class="form-group" > ক্লাসের সাথে .form-group-* ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1096

কলামের আকার নির্ধারণ

নিম্নলিখিত উদাহরণে .col-xs-* ক্লাসের সাহায্যে বিভিন্ন প্রশস্তের(width) ইনপুট এলিমেন্ট দেখানো হলোঃ

kt_satt_skill_example_id=1097

সাহায্যকারী টেক্সট

ফরমের মধ্যে ব্লক লেভেল সাহায্যকারী টেক্সট যুক্ত করার জন্য < p >, < span > অথবা < div > এলিমেন্টের মধ্যে .help-block ক্লাস ব্যবহার করুনঃ

kt_satt_skill_example_id=1098

বুটস্ট্রাপ টেক্সট ক্লাস

নিচের ক্লাসগুলো ব্যবহার করে টেক্সট-কালার দিয়ে টেক্সটের অর্থ যোগ করা যায়। লিংকের ক্ষত্রে হোভারে গাঢ় বর্ণ ধারন করবেঃ

বুটস্ট্রাপ ব্যাকগ্রাউন্ড ক্লাস

নিচের ক্লাসগুলো ব্যবহার করে ব্যাকগ্রাউন্ড-কালার দিয়ে টেক্সটের অর্থ যোগ করা যায়। হোভার করলএ লিঙ্কগুলো গাঢ় বর্ণ ধারন করবেঃ

অন্যান্য

বুটস্ট্রাপ রেস্পন্সিভ ইউটিলিটি ক্লাস

মেডিয়া কুয়েরির মাধ্যমে ডিভাইসে কন্টেন্ট দেখাতে/হাইড করতে এই ক্লাসগুলো ব্যবহার করা হয়।

কন্টেন্টকে সকল ডিভাইসে ঠিকভাবে প্রদর্শনের জন্য এক বা একাধিক ক্লাস ব্যবহার করা যেতে পারেঃ

ক্লাসের মাধ্যমে স্টাইল করা হয়েছে

৩.২.০ ভার্সনে, .visible-*-* ক্লাসের তিনটি ভ্যারিয়েশন দেওয়া হয় হয়েছে। প্রত্যকটির জন্য সিএসএস display প্রোপার্টির যে ভ্যালু ব্যবহার করা হয়েছে তা দেখানো হলোঃ

উদাহরনঃ ছোট (sm)স্ক্রিনের জন্য, ব্যবহারযোগ্য .visible-*-* ক্লাসগুলো হলোঃ .visible-sm-block, .visible-sm-inline, and .visible-sm-inline-block

.visible-xs, .visible-sm, .visible-md, এবং .visible-lg ক্লাসগুলো ৩.২.০ ভার্সনে অনুমোদিত করা হয়।

kt_satt_skill_example_id=1099