বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

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

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ JS এফিক্স


JS এফিক্স (affix.js)

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

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

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

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

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


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

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

উদাহরণ

<!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:#F44336;color:#fff;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>

ফলাফল




এফিক্স অপশন

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

নাম টাইপ ডিপল্ট বর্ণনা
offset number | object | function 10 যখন স্ক্রলের পজিশন গননা করা হয় তখন পিক্সেল সংখ্যা নির্দিষ্ট করে। যখন একটি একক সংখ্যা ব্যবহার করা হয় তখন অফসেট উপর এবং নিচের ডিরেকশনে সেট হয়। যদি আপনি শুধুমাত্র উপর অথবা নিচের ডিরেকশন নিয়ন্ত্রণ করতে চান তখন অবজেক্ট ব্যবহার করতে পারেন, যেমনঃ offset: {top:25}

একাধিক অফসেটের জন্য, offset: {top:25, bottom:50} ব্যবহার করুন।

টিপসঃ ডায়নামিক অফসেট নির্ধারণ করার জন্য ফাংশন ব্যবহার করা হয়।
target sector | node | element window object এফিক্সের টার্গেট এলিমেন্টকে নির্দিষ্ট করে।

এফিক্স ইভেন্ট

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

ইভেন্ট বর্ণনা উদাহরণ
affix.bs.affix এফিক্স এলিমেন্টটি ফিক্সড হওয়ার পূর্বে এই ইভেন্টটি ঘটে। (যখন .affix-top ক্লাসটি .affix ক্লাস দ্বারা রিপ্লেস হতে যায়) উদাহরণ দেখুন
affixed.bs.affix ফিক্সড পজিশন সম্পন্ন হওয়ার এই ইভেন্টটি ঘটে। (যখন .affix-top ক্লাসটি .affix ক্লাস দ্বারা রিপ্লেস সম্পন্ন হয়।) উদাহরণ দেখুন
affix-top.bs.affix টপ(এফিক্স) এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পূর্বে এই ইভেন্টটি সম্পন্ন হয় (non-fixed)। (যখন .affix ক্লাস .affix-top ক্লাসের জায়গায় রিপ্লেস হতে যায়) উদাহরণ দেখুন
affixed-top.bs.affix টপ এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পর এই ইভেন্টটি সম্পন্ন হয় (non-fixed) । (.affix ক্লাস .affix-top এর দ্বারা পরিবর্তিত হবে) উদাহরণ দেখুন
affix-bottom.bs.affix বটম এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পূর্বে এই ইভেন্টটি সম্পন্ন হয় (non-fixed)। (.affix ক্লাসটি .affix-bottom ক্লাস দ্বারা পরিবর্তিত হবে)
affixed-bottom.bs.affix বটম এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পর এই ইভেন্টটি সম্পন্ন হয় (non-fixed)। (.affix ক্লাসটি .affix-bottom ক্লাস দ্বারা পরিবর্তন সম্পন্ন হয়।)

আরো উদাহরণ


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

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

উদাহরণ

<!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 id="header" class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
				<h1>বুটস্ট্রাপ এফিক্স উদাহরন</h1>
				<h3>ন্যাভবারকে ফিক্সড (sticky) করার জন্য জেকুয়েরির ব্যবহার করা হয়েছে।</h3>
				<p>ন্যাভবার কেমন দেখায় তা দেখার জন্য পেজটি স্ক্রলিং করুন।</p>
				<p>স্ক্রল করে হেডার এলিমেন্ট অতিক্রম করার পর ন্যাভবারটি পেজের উপর স্থির হয়ে যাব।</p>
		</div> 

		<nav class="navbar navbar-inverse">
			<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>
			<script>
				$(document).ready(function(){
						$(".navbar").affix({offset: {top: $("#header").outerHeight(true)} });
				});
			</script>

     </body>
</html>

ফলাফল




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

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

উদাহরণ- স্ক্রলিংয়ে ব্যাকগ্রাউন্ড কালার এবং প্যাডিংয়ের পরিবর্তন

<!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%;
				-webkit-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
				background-color: #F44336;
				border-color: #F44336;

		}
		.affix a {
				color: #fff !important;
				padding: 15px !important;
				-webkit-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
		}
		.affix-top a {
				padding: 25px !important;
		}
		.affix + .container-fluid {
				padding-top: 95px;
		}
	  </style>
	</head>
	<body>

		<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
			<h1>বুটস্ট্রাপ এফিক্স উদাহরণ</h1>
			<h3>স্ক্রলিং ফিক্সড (sticky) ন্যাভবার</h3>
			<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>

ফলাফল




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

<!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%;
				-webkit-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
		}
		.affix-top {
				position: static;
				top: -35px;
		}
		.affix + .container-fluid {
				padding-top: 70px;
		}
	  </style>
	</head>
	<body>

		<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
			<h1>বুটস্ট্রাপ এফিক্স উদাহরণ</h1>
			<h3>স্ক্রলিং ফিক্সড (sticky) ন্যাভবার</h3>
			<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>

ফলাফল