বুটস্ট্রাপ৩ রেফারেন্স (Bootstrap3 Reference)

Bootstrap 3 একটি জনপ্রিয়, ওপেন সোর্স CSS ফ্রেমওয়ার্ক যা web development এর জন্য সহজ এবং দ্রুত responsive এবং mobile-first ডিজাইন তৈরি করতে সহায়ক। Bootstrap 3 ফ্রেমওয়ার্কে এমন অনেক সরঞ্জাম রয়েছে যা ডেভেলপারদের আধুনিক, সুন্দর, এবং কার্যকর ওয়েবসাইট তৈরি করতে সাহায্য করে।

Bootstrap 3 রেফারেন্স (Bootstrap 3 Reference)

Bootstrap 3-এ মূলত grid system, components, utilities, এবং customization ব্যবহৃত হয় যা ওয়েব পেজ ডিজাইন ও ডেভেলপমেন্টকে সহজ করে। এখানে Bootstrap 3 এর প্রধান বৈশিষ্ট্য এবং উপাদানগুলোর একটি সারাংশ দেওয়া হলো:

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

Bootstrap 3-এর grid system হল responsive layouts তৈরি করার একটি শক্তিশালী উপায়। এর মাধ্যমে আপনি বিভিন্ন ডিভাইসের স্ক্রীনে কন্টেন্ট কিভাবে প্রদর্শিত হবে তা কনফিগার করতে পারেন।

• Grid Classes: Bootstrap 3 grid system 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>

• .container: মূল কন্টেইনার।
• .row: এক বা একাধিক কলাম রাখার জন্য।
• .col-md-4: ১২ কলাম সিস্টেমে প্রতিটি কলামের জন্য ৪ কলাম বরাদ্দ করা হয় (বাকি অংশটি স্বয়ংক্রিয়ভাবে সমানভাবে ভাগ হয়)।

2. Typography (টাইপোগ্রাফি):

Bootstrap 3-এ প্রিপ্যাকেজড ফন্ট এবং টেক্সট স্টাইল রয়েছে যা ওয়েবসাইটে সুন্দর এবং পঠনযোগ্য টেক্সট প্রদর্শন করতে সাহায্য করে।

• Heading: h1, h2, ... h6 এর জন্য স্টাইলস প্রদান।
• Paragraph: সাধারণ প্যারাগ্রাফের জন্য প্রিভিউ।
• Text Alignment: text-left, text-center, text-right কন্টেন্টের অ্যালাইনমেন্ট নিয়ন্ত্রণ করতে।

উদাহরণ:

<h1 class="text-center">Heading</h1>
<p class="lead">This is a lead paragraph.</p>

3. Components (কম্পোনেন্টস):

Bootstrap 3-এ অনেক রেডি-মেড কম্পোনেন্ট আছে যা সহজেই ওয়েব পেজের অংশ হিসেবে ব্যবহার করা যায়। কিছু গুরুত্বপূর্ণ কম্পোনেন্ট হল:

• Buttons: বিভিন্ন স্টাইলের বাটন।

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success Button</button>

• Navbars: ওয়েবসাইটে নেভিগেশন মেনু তৈরি করতে।

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </div>
</nav>

• Modals: পপ-আপ ডায়ালগ।

<div class="modal fade" id="myModal" 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 Header</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>

• Alerts: সতর্কীকরণ বার্তা প্রদর্শন করতে।

<div class="alert alert-success">
  <strong>Success!</strong> This is a success alert.
</div>

• Forms: ব্যবহারকারীদের তথ্য সংগ্রহ করতে।

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

4. Utilities (ইউটিলিটি ক্লাস):

Bootstrap 3-এ অনেক ধরনের ইউটিলিটি ক্লাস আছে যা দ্রুত স্টাইলিং এবং টিউনিং করতে ব্যবহৃত হয়।

• Visibility Classes: কন্টেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করতে।
  • visible-xs, hidden-xs, visible-md, hidden-md ইত্যাদি।
• Spacing Classes: মার্জিন এবং প্যাডিং নিয়ন্ত্রণ করতে।
  • m-t, m-b, m-l, m-r, p-t, p-b ইত্যাদি।
• Text Utilities: টেক্সট স্টাইলিং।
  • text-muted, text-danger, text-success ইত্যাদি।

উদাহরণ:

<p class="text-center">This is centered text.</p>

5. Customizing Bootstrap 3:

Bootstrap 3 কাস্টমাইজ করতে, আপনি Sass variables ব্যবহার করতে পারেন অথবা Bootstrap Less ফাইল ব্যবহার করে কাস্টম থিম তৈরি করতে পারেন।

উদাহরণ:

$primary-color: #ff5733; /* Change the primary color */
@import "bootstrap";

6. Responsive Design (রেসপন্সিভ ডিজাইন):

Bootstrap 3-এ রেসপন্সিভ ওয়েব ডিজাইন সমর্থিত। এর মাধ্যমে ওয়েবসাইটগুলো বিভিন্ন ডিভাইস (Desktop, Tablet, Mobile) অনুযায়ী স্বয়ংক্রিয়ভাবে রেঞ্জ পরিবর্তন করতে পারে।

• Responsive Classes: col-xs-, col-sm-, col-md-, col-lg- ক্লাস ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য কন্টেন্ট সাজানো যায়।

উদাহরণ:

<div class="col-sm-6 col-md-4">
  <div class="panel panel-default">
    <div class="panel-body">Content</div>
  </div>
</div>

7. Typography and Icons (টাইপোগ্রাফি এবং আইকন):

Bootstrap 3-এ কিছু প্রাক-নির্ধারিত টাইপোগ্রাফি রয়েছে এবং glyphicons (আইকন সেট) রয়েছে যা দ্রুত ওয়েবসাইটে আইকন যোগ করতে সহায়তা করে।

উদাহরণ:

<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-search"></span>

Summary:

Bootstrap 3 একটি আধুনিক ওয়েব ডিজাইন ফ্রেমওয়ার্ক যা responsive web design, components, grid system, utilities এবং অন্যান্য কার্যকরী ফিচার সরবরাহ করে। এটি দ্রুত ওয়েবসাইট তৈরির জন্য অত্যন্ত জনপ্রিয় এবং কোডিংকে আরও সহজ করে তোলে। Bootstrap 3 ব্যবহার করে ডেভেলপাররা সহজেই স্কেলেবল এবং রেসপন্সিভ ওয়েবসাইট তৈরি করতে পারেন যা সকল ডিভাইস এবং স্ক্রীনে সুন্দরভাবে কাজ করবে।

References:

• Official Bootstrap 3 Documentation

বুটস্ট্রাপ JS ড্রপডাউন (dropdown.js)

ড্রপডাউন মেনু হলো টোগল মেনু, যা ইউজারকে পূর্বনির্ধারিত তালিকা থেকে একটি ভ্যালু বাছাই করার সুযোগ দেয়।

ড্রপডাউনের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ ড্রপডাউন টিউটোরিয়ালটি পড়ুন।

data-* এট্রিবিউট মাধ্যম

ড্রপডাউন মেনুকে টোগল করার জন্য বাটন অথবা লিংকে data-toggle="dropdown" এট্রিবিউটটি যুক্ত করুন।

kt_satt_skill_example_id=1292

বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম

ম্যানুয়েললি যুক্ত করার জন্যঃ

kt_satt_skill_example_id=1293

বুটস্ট্রাপ ড্রপডাউন মেথড

নিচের টেবিলে ড্রপডাউন মেথডগুলো দেয়া হলো।

বুটস্ট্রাপ ড্রপডাউন ইভেন্ট

নিচের টেবিলে ড্রপডাউন ইভেন্টগুলো দেয়া হলো।

আরো কিছু উদাহরণ

ক্লিকে ক্যারেট আইকন পরিবর্তন

নিচের উদাহরণে দেখানো হয়েছে কিভাবে ড্রপডাউনে ক্লিক করা হলে ক্যারেট আইকনটি নিচের দিক থকে ওলট হয়ে উপরের দিকে চলে যায়ঃ

kt_satt_skill_example_id=1294

নিচের উদাহরণে, ন্যাভিগেসন বারে লগ-ইন ফর্ম সহ একটি ড্রপডাউন যুক্ত করা হয়েছেঃ

kt_satt_skill_example_id=1295

বুটস্ট্রাপ মাল্টি-লেভেল ড্রপডাউন

এই উদাহরণে, আমরা মাল্টি-লেভেল ড্র্পডাউন অপেন করার জন্য জেকুয়েরি ব্যবহার করেছিঃ

kt_satt_skill_example_id=1296

বুটস্ট্রাপ জেএস কলাপ্স (collapse.js)

এটি একরডিয়ন এবং ন্যাভিগেশন এর মতো কলাপ্সিবল কম্পোনেন্টের জন্য মূল স্টাইল এবং নমনীয় সাপোর্ট প্রদান করে।

প্লাগ-ইন ডিপেনডেন্সিঃ কলাপ্সের জন্য আপনার বুটস্ট্রাপ ভার্সনে ট্রানজিশন প্লাগ-ইন অন্তর্ভুক্ত করা প্রয়োজন হয়।

কলাপ্সিবলের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ কলাপ্সিবল টিউটোরিয়ালটি পড়ুন।

কলাপ্স প্লাগ-ইন ক্লাসসমূহ

বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম

একটি কলাপ্সিবল এলিমেন্টের নিয়ন্ত্রন স্বয়ংক্রিয়ভাবে অর্পন করার জন্য ঐ এলিমেন্টে শুধুমাত্র data-toggle="collapse" এবং data-target যুক্ত করুন। data-target এট্রিবিউটটি সিএসএস সিলেক্টরকে কলাপ্স প্রয়োগ করার জন্য গ্রহন করে। মনে রাখবেন যেন কলাপ্সিবল এলিমেন্টে কলাপ্স ক্লাস যুক্ত করা হয়। যদি আপনি ডিফল্টভাবে ওপেন রাখতে চান, তাহলে অতিরিক্ত ক্লাস .in যুক্ত করুন।

kt_satt_skill_example_id=1297

টিপসঃ কলাপ্সিবল কন্ট্রোলে গ্রুপ ম্যানেজমেন্টের মতো একরডিয়ন যুক্ত করতে data এট্রিবিউট data-parent="#selector" যুক্ত করুন।

বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম

ম্যানুয়েললি যুক্ত করার জন্যঃ

kt_satt_skill_example_id=1298

বুটস্ট্রাপ কলাপ্স মেথড

নিচের টেবিলে কলাপ্স মেথডগুলো দেয়া হলো।

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

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

আরো উদাহরণ

আইকন বা টেক্সটকে এক্সপান্ড এবং কলাপ্স

নিচের উদাহরণে যখন কলাপ্সিবল কন্টেন্টটি ওপেন এবং ক্লোজ হয় তখন বাটনের টেক্সট এবং আইকন পরিবর্তিত হয়ঃ

kt_satt_skill_example_id=1299

বুটস্ট্রাপ JS ট্যাব (tab.js)

একটি কন্টেন্টকে বিভিন্ন অংশে ভাগ করতে ট্যাব ব্যবহার করা হয় যেখানে প্রত্যেকটি অংশের যেকোন একটি অংশই একবারে দেখা যাবে।

বুটস্ট্রাপ ট্যাব সর্ম্পকিত টিউটরিয়ালের জন্য আমাদের বুটস্ট্রাপ ট্যাব/পিল টিউটোরিয়ালটি পড়ুন।

বুটস্ট্রাপ ট্যাব প্লাগইন ক্লাসসমূহ

বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম

ট্যাবের মধ্যে data-toggle="tab" এট্রিবিউট যুক্ত করুন এবং প্রত্যেকটি ট্যাব আইটেমের মধ্যে ইউনিক আইডি সহ .tab-pane ক্লাস যুক্ত করুন তারপর পুরোটাকে .tab-content ক্লাসের আওতায় অন্তর্ভূক্ত করুন।

kt_satt_skill_example_id=1300

বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম

ম্যানুয়ালি সক্রিয় করার জন্যঃ

kt_satt_skill_example_id=1301

kt_satt_skill_example_id=1302

বুটস্ট্রাপ ট্যাব মেথড

ট্যাব মেথড নিচের টেবিলে দেখানো হলো।

বুটস্ট্রাপ ট্যাব ইভেন্ট

ট্যাব ইভেন্ট নিম্নোক্ত টেবিল দেখানো হলো।

টিপসঃ একটিভ ট্যাব এবং পূর্ববর্তী একটিভ ট্যাব পেতে জেকুয়েরির event.target এবং event.relatedTarget ইভেন্ট গুলো ব্যবহার করুন।

বুটস্ট্রাপ জেএস বাটন (button.js)

যদি আপনি বাটনের উপর আরো অধিক কন্ট্রোল পেতে চান তাহলে প্লাগ-ইন ব্যবহার করুন।

বাটন টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ বাটন টিউটোরিয়ালটি পড়ুন।

বুটস্ট্রাপ বাটন প্লাগ-ইন ক্লাসসমূহ

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

বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম

ম্যানুয়েললি যুক্ত করার জন্যঃ

kt_satt_skill_example_id=1307

বুটস্ট্রাপ বাটন মেথড

নিচের টেবিলের মধ্যে বাটন মেথডগুলো দেখানো হলোঃ

নোট: এই প্লাগ-ইনের ক্ষেত্রে মেথড data এট্রিবিউটের মাধ্যমে অতিক্রম করতে পারে।

বাটন সংক্রান্ত আরো কিছু উদাহরণ

বাটনকে কাস্টমাইজ করতে সিএসএস ব্যবহার করুন।

কিভাবে রাউন্ড বর্ডার বাদ দিবেনঃ

kt_satt_skill_example_id=1308

কিভাবে বাটনে বিশেষ কালার যুক্ত করা যায়ঃ

kt_satt_skill_example_id=1309

কিভাবে বাটনে স্যাডো যুক্ত কয়া যায়ঃ

কিভাবে বাটনে বিশেষ কালার যুক্ত করা যায়ঃ

kt_satt_skill_example_id=1310

বুটস্ট্রাপ জেএস ক্যারোসেল (carousel.js)

ক্যারোসেল প্লাগ-ইন হলো এলিমেন্টের মধ্যে চক্রাকারে ঘুরার জন্য একটি কম্পোনেন্ট(component), যেমনঃ একটি ক্যারোসেল (স্লাইডসো)।

ক্যারোসেলের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ ক্যারোসেল টিউটোরিয়ালটি পড়ুন।

ক্যারোসেল প্লাগ-ইন ক্লাস

বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম

data-ride="carousel" এট্রিবিউট ক্যারোসেলকে একটিভ করে।

data-slide এবং data-slide-to এট্রিবিউটের মাধ্যমে একটি স্লাইড পরিবর্তিত হয়ে কোন স্লাইডে যাবে তা নির্দিষ্ট করে।

data-slide এট্রিবিউটে দুইটি ভ্যালু ব্যবহার করা যায়ঃ prev অথবা next, যেখানে data-slide-to তে নাম্বার ব্যবহার ব্যবহৃত হয়।

kt_satt_skill_example_id=1314

বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম

ম্যানুয়েললি যুক্ত করার জন্যঃ

kt_satt_skill_example_id=1316

বুটস্ট্রাপ ক্যারোসেল অপশন

অপশন data এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে পাস(pass) করতে পারে। data এট্রিবিউটের ক্ষেত্রে, অপশনের নাম "data-" সাথে যুক্ত করুন। যেমন; data-interval=""

উদাহরণঃ জাভাস্ক্রিপ্ট ব্যবহার করে ক্যারোসেলের সবগুলো অপশনের ব্যবহার

kt_satt_skill_example_id=1317

উদাহরণঃ data-* এট্রিবিউট ব্যবহার করে ক্যারোসেলের সবগুলো অপশনের ব্যবহার

kt_satt_skill_example_id=1319

বুটস্ট্রাপ ক্যারোসেল মেথড

নিচের টেবিলে ক্যারোসেল মেথডগুলো দেয়া হলো।

নোটঃ মেথডগুলো সবগুলো নিয়ে জাভাস্ক্রিপ্ট অপশন উদাহরণ দেওয়া হয়েছে

বুটস্ট্রাপ ক্যারোসেল ইভেন্ট

নিচে টেবিলে ক্যারোসেল ইভেন্টগুলো দেয়া হলো।

বুটস্ট্রাপ JS মোডাল (modal.js)

বুটস্ট্রাপ মোডাল প্লাগ-ইন হলো একটি ডায়ালগ বক্স/পপ-আপ উইন্ডো, যা বর্তমান পেজের উপরের অংশে প্রদর্শিত হয়।

বুটস্ট্রাপ মোডালের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ মোডাল টিউটোরিয়ালটি পড়ুন।

বুটস্ট্রাপ মোডাল প্লাগ-ইন ক্লাসসমূহ

বুটস্ট্রাপ data-* এট্রিবিউটের মাধ্যমে মোডাল ট্রিগার

যেকোনো একটি এলিমেন্টে data-toggle="modal" এবং data-target="#modalID" যুক্ত করুন।

নোটঃ<a> এলিমেন্টে data-target এট্রিবিউটটি বাদ দিন এবং তার পরিবর্তে href="#modalID" ব্যবহার করুনঃ

kt_satt_skill_example_id=1320

জাভাস্ক্রিপ্টের মাধ্যমে ট্রিগার

ম্যানুয়েললি যুক্ত করার জন্যঃ

kt_satt_skill_example_id=1321

বুটস্ট্রাপ মোডাল অপশন

অপশন data এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। data এট্রিবিউটের ক্ষেত্রে, অপশনের নাম "data-" সাথে যুক্ত করুন। যেমন; data-keyboard=""

বুটস্ট্রাপ মোডাল মেথড

নিচের টেবিলে মোডাল মেথডগুলো দেয়া হলো।

বুটস্ট্রাপ মোডাল ইভেন্ট

নিচের টেবিলের মোডাল ইভেন্টগুলো দেয়া হলো।

উদাহরণ

বুটস্ট্রাপ লগ-ইন মোডাল

নিচের উদাহরণে লগ-ইনের জন্য একটি মোডাল তৈরি করা হলোঃ

kt_satt_skill_example_id=1322

বুটস্ট্রাপ JS স্ক্রলস্পাই (scrollspy.js)

স্ক্রল পজিশনের উপর ভিত্তি করে ন্যাভিগেশন লিস্টের লিঙ্ককে স্বয়ংক্রিয়ভাবে আপডেট করার জন্য বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন ব্যবহার করা হয়।

বুটস্ট্রাপ স্ক্রলস্পাই সম্পর্কে জানতে বুটস্ট্রাপ স্ক্রলস্পাই টিউটোরিয়ালটি পড়ুন।

টিপসঃ স্ক্রলস্পাই প্লাগ-ইন প্রায়ই এফিক্স প্লাগ-ইনের সাথে ব্যবহার করা হয়।

বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম

যেই এলিমেন্টে স্ক্রলস্পাই ব্যবহার করবেন ঐ এলিমেন্টের মধ্যে data-spy="scroll" এট্রিবিউটটি যুক্ত করুন (বেশিরভাগ ক্ষেত্রে < body > এলিমেন্টেই ইহা ব্যবহার করা হয়)।

তারপর data-target এট্রিবিউটের সাথে id এর ভ্যালু অথবা ন্যাভিগেশন বারের (.navbar) ক্লাসের নাম যোগ করি। ইহা ন্যাভবারের সাথে স্ক্রল এরিয়ার কানেকশন তৈরি করে।

ন্যাভবারের লিস্ট আইটেমের ID এবং স্ক্রল এরিয়ার ID একই হতে হবে (< div id="section1" > ও <a href="#section1"> এর ID একই)।

যখন স্ক্রল করা হয়, অপশনাল data-offset এট্রিবিউটটি স্ক্রলের সময় উপরের থেকে কত পিক্সেল নিচে নামবে তা নির্দেশ করে। যখন আপনার মনে হবে ন্যাভবারের একটিভ স্ট্যাট স্ক্রল এলিমেন্টের সাপেক্ষে খুব দ্রুত অথবা খুব ধীরগতিতে পরিবর্তন হচ্ছে তখন এই অপশন খুব গুরুত্বপূর্ন ভূমিকা পালন করবে। ডিফল্ট ভ্যালু ১০ পিক্সেল।

kt_satt_skill_example_id=1324

বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম

জাভাস্ক্রিপ্টের সাহায্যে সক্রিয় করার জন্যঃ

kt_satt_skill_example_id=1325

বুটস্ট্রাপ স্ক্রলস্পাই এর অপশন

অপশন ডাটা এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। ডাটা এট্রিবিউটের ক্ষেত্রে data-* নামের সাথে অপশনের নাম যুক্ত করা হয়, যেমন data-offset=""

আরো উদাহরণ

বুটস্ট্রাপ এ্যানিমেশনযুক্ত স্ক্রলস্পাই

একই পেজের মধ্যে স্মুথ(smooth) পেজ স্ক্রল যেভাবে যোগ করবেনঃ

kt_satt_skill_example_id=1326

বুটস্ট্রাপ JS এফিক্স (affix.js)

একটি ইলিমেন্টকে পেজের একটি নির্দিষ্ট জায়গায় ফিক্সড করে দেওয়ার ক্ষেত্রে এফিক্স প্লাগ-ইন ব্যবহার করা হয়। এটি প্রায়ই ন্যাভিগেশন মেনু এবং সোস্যাল আইকনের ক্ষেত্রে ব্যবহার করা হয়, যাতে করে এগুলো পেজ স্ক্রলিং করার সময় পেজের একটি নির্দিষ্ট স্থানে গিয়ে ফিক্সড হয়ে যায়।

এই প্লাগ-ইনটি স্ক্রলিং পজিশনের উপর ভিত্তি করে এলিমেন্টের আচরকে টোগল করে (সিএসএসের পজিশন স্ট্যাটিক থেকে ফিক্সড করে)।

এফিক্স প্লাগইনটি মূলত তিন ক্লাসের মধ্যে টোগলঃ .affix, .affix-top, এবং .affix-bottom। প্রতিটি ক্লাসই নির্দিষ্ট স্টেটের প্রতিনিধিত্ব করে। আপনাকে অবশ্যই আসল অবস্থানে হ্যান্ডেল করার জন্য .affix ক্লাসে সিএসএসের position:fixed প্রপার্টিটি ব্যবহার করতে হবে।

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

টিপসঃ এফিক্স প্লাগ-ইনটি স্ক্রলস্পাই প্লাগ-ইনের সাথে ব্যবহার করা যায়।

data-* এট্রিবিউট মাধ্যম

যেই এলিমেন্টটিকে এফিক্স যুক্ত করতে চান ঐ এলিমেন্টটিতে data-spy="affix" এট্রিবিউট এবং স্ক্রলের অবস্থান নির্দিষ্ট করা জন্য
data-offset-top|bottom="number" এট্রিবিউট যুক্ত করুন।

kt_satt_skill_example_id=1329

বুটস্ট্রাপ এফিক্স অপশন

অপশন ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যম অতিক্রম করতে পারে। ডেটা অ্যাট্রিবিউট এর ক্ষেত্রে, ডেটাতে অপশনের নাম লিখুন-,যেমন ডেটা-offset=""

বুটস্ট্রাপ এফিক্স ইভেন্ট

নিচের টেবিলে এফিক্স সংক্রান্ত ইভেন্টগুলো দেয়া হলো

আরো উদাহরণ

স্বয়ংক্রিয়ভাবে ন্যাভবারকে এফিক্স করার জন্য জেকুয়েরির ব্যবহার

ইউজার একটি এলিমেন্টের(< header >) নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর ন্যাভবারকে এফিক্স করার জন্য জেকুয়েরির outerHeight() মেথড ব্যবহার করা হয়।

kt_satt_skill_example_id=1331

এ্যানিমেশনযুক্ত এফিক্স ন্যাভবার

বিভিন্ন .affix ক্লাসকে সূনিপুন করার জন্য সিএসএস ব্যবহার করুনঃ

kt_satt_skill_example_id=1332

উদাহরণ - ন্যাভবারের মধ্যে স্লাইড

kt_satt_skill_example_id=1333