বুটস্ট্রাপ এফিক্স - Bootstrap Affix
বুটস্ট্রাপ এফিক্স প্লাগ-ইন
বুটস্ট্রাপ এফিক্স প্লাগ-ইনের মাধ্যমে একটি এলিমেন্টকে পেজের একটি জায়গায় আবদ্ধ করা যায়। এটি প্রায়ই ন্যাভিগেশন মেনু অথবা সামাজিক মাধ্যমের আইকন বাটনে ব্যবহার করা হয় যেন উপর-নিচ স্ক্রলিংয়ের সময়ে এগুলো একটি স্থানে গিয়ে অবদ্ধ বা থেমে যায়।
স্ক্রল পজিশনের উপর ভিত্তি করে প্লাগ-ইনটি এর আচরনকে on এবং off এ টোগল (সিএসএস position প্রোপার্টিকে static থেকে fixed) করে।
এফিক্সের মাধ্যমে যখন আমরা পেজ উপর-নিচ স্ক্রলিং করি, মেনুটি সবসময় দৃশ্যমান থাকে এবং এর অবস্থানে গিয়ে থেমে যায়।
কিভাবে একটি এফিক্স মেনুবার তৈরি করবেন
কিভাবে একটি horizontal এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#e699ff;color:#000;height:200px;">
<h1>বুটস্ট্রাপ এফিক্স উদাহরণ</h1>
<h3>স্ক্রলিং ফিক্সড (sticky) ন্যাভবার</h3>
<p>data-spy="affix" এর ফলে ন্যাভবার কেমন দেখায় তা দেখার জন্য পেজটি স্ক্রলিং করুন। </p>
<p><strong>আপনি একটি নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর ন্যাভবারটি পেজের উপর স্থির হয়ে যাবে।</strong></p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197" style="border-radius:0">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home page</a></li>
<li><a href="#">Service page</a></li>
<li><a href="#">Contract page</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
</div>
</body>
</html>
ফলাফল
কিভাবে একটি vertical এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
top: 20px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
<h1>বুটস্ট্রাপ এফিক্স উদাহরণ</h1>
<h3>স্ক্রলিং ফিক্সড (sticky) সাইড ন্যাভবার</h3>
<p>data-spy="affix" এর ফলে বাম পাশের ন্যাভিগেশন মেনু কেমন দেখায় তা দেখার জন্য পেজটি স্ক্রলিং করুন।</p>
<p><strong>আপনি একটি নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর বাম পাশের ন্যাভিগেশন মেনুটি স্থির হয়ে যাবে।</strong></p>
</div>
<br>
<div class="container">
<div class="row">
<nav class="col-sm-3">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#contract">Contract</a></li>
</ul>
</nav>
<div class="col-sm-9">
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
</div>
</div>
</div>
</body>
</html>
ফলাফল
উদাহরণের ব্যাখ্যা
যেই এলিমেন্টে আপনি এফিক্স করতে চান সেটিতে data-spy="affix" এট্রিবিউট যুক্ত করুন।
স্ক্রলের অবস্থান হিসেব করার জন্য data-offset-top|bottom এট্রিবিউট ব্যবহার করুন (অপশনাল) ।
এটি কিভাবে কাজ করে
এফিক্স প্লাগ-ইন তিনটি ক্লাসের মধ্যে টোগল তৈরি করে: .affix, .affix-top, এবং
.affix-bottom । প্রত্যেকটি ক্লাসই নির্দিষ্ট স্টেটকে রিপ্রেজেন্ট করে। আসল অবস্থান মোকাবেলা করার জন্য আপনাকে অবশ্যই সিএসএস প্রোপার্টি ব্যবহার করতে হবে। শুধুমাত্র ব্যতিক্রম এক্ষেত্রেই, .affix ক্লাসে শুধুমাত্র position:fixed
ব্যবহার করতে হবে।
- এই প্লাগ-ইনটি এলিমেন্টকে এর সর্বোচ্চ উপরে অথবা সর্বোচ্চ নিচে অবস্থান নির্ধারন করার জন্য
.affix-topঅথবা.affix-bottomক্লাস যুক্ত করে নেয়। এক্ষেত্রে সিএসএসের মাধ্যমে অবস্থান নির্ধারন করার প্রয়োজন নেই। - স্ক্রলিংয়ের পূর্বে এফিক্স এলিমেন্ট আসল এফিক্সকে ট্রিগার করবে - এটা হলো সেই জায়গা যেখানে প্লাগ-ইন
.affixক্লাসের (setsposition:fixed) মাধ্যমে.affix-topঅথবা.affix-bottomক্লাসকে রিপ্লেস করে। পেজের কোন স্থানে এফিক্স এলিমেন্টটির স্থান হবে এটা অবশ্যই আপনাকে সিএসএসেরtopঅথবাbottomপ্রোপার্টির মাধ্যমে নির্ধারণ করে দিতে হবে। - যদি নিম্ন অফসেট ডিফাইন করা হয়, এক্ষেত্রে
.affix-bottomক্লাসের মাধ্যমে.affixক্লাস রিপ্লেস হবে। যেহেতু অফসেট হলো অপশনাল, প্রথম সেটিং এ যথাযথ সিএসএস ব্যবহার করতে হবে। এই ক্ষেত্রে, যখন প্রয়োজন হবে তখনposition:absoluteব্যবহার করবে।
উপরের প্রথম উদাহরণে, যখন আমরা উপর থেকে ১৯৭ পিক্সেল স্ক্রলিং করি তখন এফিক্স প্লাগ-ইন <nav> এলিমেন্টে .affix ক্লাস (position:fixed) যুক্ত করে নেয়। আপনি যদি উদাহরণটি ওপেন করেন, এর পাশাপাশি আপনি আরো দেখতে পাবেন যে, আমরা .affix ক্লাসের মধ্যে সিএসএস top প্রোপার্টি ব্যবহার করেছি যার ভ্যালু হলো ০(শুন্য) । এর মাধ্যমে এটা নিশ্চিত করা হয় যে, যখন আমরা উপর থেকে ১৯৭ পিক্সেল স্ক্রলিং করবো তখনই ন্যাভিগেশন বারটি পেজের উপরে অবস্থান নিশ্চিত করবে।
স্ক্রলস্পাই এবং এফিক্স
স্ক্রলস্পাই প্লাগ-ইনের সাথে এফিক্স প্লাগ-ইনের ব্যবহার:
Horizontal মেনু (ন্যাভবার)
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
.affix {
top:0;
width: 100%;
z-index: 9999 !important;
}
.navbar {
margin-bottom: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
#home {padding-top:50px;height:250px;color: #fff; background-color: #1E88E5;}
#service1 {padding-top:50px;height:250px;color: #fff; background-color: #673ab7;}
#service2 {padding-top:50px;height:250px;color: #fff; background-color: #ff9800;}
#contract {padding-top:50px;height:250px;color: #fff; background-color: #00bcd4;}
#about-us {padding-top:50px;height:250px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>স্ক্রলস্পাই & এফিক্স উদাহরন</h1>
<h3>স্ক্রলিং ফিক্সড (sticky) ন্যাভবার।</h3>
<p>data-spy="affix" এবং data-spy="scrollspy" এর ফলে ন্যাভবার কেমন দেখায় তা দেখার জন্য পেজটি স্ক্রলিং করুন। </p>
<p>আপনি একটি নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর ন্যাভবারটি পেজের উপর স্থির হয়ে যাবে,স্ক্রলিং এর অবস্থান এর উপর নির্ভর
করে ন্যাভবারের লিংক গুলো স্বয়ংক্রিয়ভাবে আপডেট হয়। </p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site Logo</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"
href="#">Service <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#serivice1">Web-development</a></li>
<li><a href="#service2">App-development</a></li>
</ul>
</li>
<li><a href="#contract">Contract</a></li>
<li><a href="#about-us">About us</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="home" class="container-fluid">
<h1>Home</h1>
<p>This is home section. In the time of scrolling, look into the navigation bar. This is home section.
In the time of scrolling, look into the navigation bar......</p>
</div>
<div id="service1" class="container-fluid">
<h1>Service</h1>
<h2>Service - Web-development</h2>
<p>This is service section's web-development section. In the time of scrolling, look into
the navigation bar. This is service section's web-development section......</p>
</div>
<div id="service2" class="container-fluid">
<h1>Service</h1>
<h2>Service - App-development</h2>
<p>This is service section's app-development . In the time of scrolling, look into the navigation bar.
This is service section's app-development........</p>
</div>
<div id="contract" class="container-fluid">
<h1>Contract</h1>
<p>This is Contract section. In the time of scrolling, look into the navigation bar.
This is Contract section. In the time of scrolling.........</p>
</div>
<div id="about-us" class="container-fluid">
<h1>About us</h1>
<p>This is about us section. In the time of scrolling, look into the navigation bar.
This is about us section. In the time of scrolling.......</p>
</div>
</body>
</html>
ফলাফল
Vertical মেনু (সাইডবার)
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
.affix {
top: 20px;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
#home {color: #fff; background-color: #1E88E5;}
#service1 {color: #fff; background-color: #673ab7;}
#service2 {color: #fff; background-color: #ff9800;}
#contract {color: #fff; background-color: #00bcd4;}
#about-us {color: #fff; background-color: #009688;}
@media screen and (max-width: 810px) {
#home, #service1, #service2, #contract, #about-us {
margin-left: 150px;
}
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:220px;">
<h1>স্ক্রলস্পাই & এফিক্স উদাহরন</h1>
<h3>স্ক্রলিং ফিক্সড (sticky) ভার্টিক্যাল ন্যাভবার।</h3>
<p>data-spy="affix" এবং data-spy="scrollspy" এর ফলে ন্যাভবার কেমন দেখায় তা দেখার জন্য পেজটি স্ক্রলিং করুন। </p>
<p>আপনি একটি নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর ন্যাভবারটি বাম পাশে স্থির হয়ে যাবে,
স্ক্রলিং এর অবস্থান এর উপর নির্ভর করে ন্যাভবারের লিংক গুলো স্বয়ংক্রিয়ভাবে আপডেট হয়। </p>
</div>
<br>
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Service <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#service1">Web-development</a></li>
<li><a href="#service2">App-development</a></li>
</ul>
</li>
<li><a href="#contract">Contract</a></li>
<li><a href="#about-us">About us</a></li>
</ul>
</nav>
<div class="col-sm-9">
<div id="home">
<h1>Home</h1>
<p>This is home section. In the time of scrolling, look into the navigation bar.
This is home section. In the time of scrolling, look into the navigation bar......</p>
</div>
<div id="service1">
<h1>Service</h1>
<h2>Service - Web-development</h2>
<p>This is service section's web-development section. In the time of scrolling,
look into the navigation bar. This is service section's web-development section......</p>
</div>
<div id="service2">
<h1>Service</h1>
<h2>Service - App-development</h2>
<p>This is service section's app-development . In the time of scrolling, look into the
navigation bar. This is service section's app-development........</p>
</div>
<div id="contract">
<h1>Contract</h1>
<p>This is Contract section. In the time of scrolling, look into the navigation bar.
This is Contract section. In the time of scrolling.........</p>
</div>
<div id="about-us" class="container-fluid">
<h1>About us</h1>
<p>This is about us section. In the time of scrolling, look into the navigation bar.
This is about us section. In the time of scrolling.......</p>
</div>
</div>
</div>
</div>
</body>
</html>
ফলাফল