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

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

হোম-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

 

বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন (এডভান্স)


স্ক্রলস্পাই প্লাগ-ইন

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


কিভাবে স্ক্রলস্পাই তৈরি করবেন

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

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Scrollspy 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; 
		}
		#home {padding-top:50px;height:500px;color: #000; background-color: #fff;}
		#service1 {padding-top:50px;height:500px;color: #000; background-color: teal;}
		#service2 {padding-top:50px;height:500px;color: #000; background-color: bisque;}
		#contract {padding-top:50px;height:500px;color: #000; background-color: green;}
		#about-us {padding-top:50px;height:500px;color: #000; background-color: #fff;}
	  </style>
	  </head>
	  
	  <body data-spy="scroll" data-target=".navbar" data-offset="50">

		<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarId">
				<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="navbarId"> 
				<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="#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>
			</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>

ফলাফল




উদাহরণের ব্যাখ্যা

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

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

মনে রাখবেন অবশ্যই স্ক্রলযোগ্য এলিমেন্টের আইডির সাথে ন্যাভিগেশন লিংকের আইডির সাথে মিল হতে হবে (<div id="section1"> সাথে <a href="#section1">) মিল থাকতে হবে।

data-offset এট্রিবিউটের মাধ্যমে এটা নির্দিষ্ট করা হয় যে কতো পিক্সেলের মধ্যে স্ক্রলিং একটিভ হবে। ডিফল্ট ভ্যালু হলো 10px।

রিলেটিভ পজিশনঃ data-spy="scroll" যুক্ত এলিমেন্টে সিএসএসের position প্রোপার্টি প্রয়োজন, যার ভ্যালু হবে "relative"।


উলম্ব(Vertical) স্ক্রলস্পাই মেনু

এই উদাহরণে মেনু হিসেবে আমরা বুটস্ট্রাপের vertical ন্যাভিগেশন পিল ব্যবহার করেছি।

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Scrollspy 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;
		}
		ul.nav-pills {
			top: 20px;
			position: fixed;
		}
		div.col-sm-9 div {
			height: 250px;
			font-size: 28px;
		}
		#home {color: #000; background-color: #fff;;}
		#service1 {color: #000; background-color: teal;}
		#service2 {color: #000; background-color: bisque;}
		#contract {color: #000; background-color: green;}
		#about-us {color: #000; background-color: #fff;}
		
		@media screen and (max-width: 810px) {
			#section1, #section2, #section3, #section41, #section42  {
				margin-left: 150px;
			}
		}
	  </style>
	</head>
	<body data-spy="scroll" data-target="#scrollspyId" data-offset="20">

		<div class="container">
		<div class="row">
			<nav class="col-sm-3" id="scrollspyId">
			<ul class="nav nav-pills nav-stacked">
				<li class="active"><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.
				   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.</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, look into the navigation bar.
				  This is Contract section. In the time of scrolling, look into the navigation bar.</p>
			</div>      
			<div id="about-us">         
				<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, look into the navigation bar.
			     This is about us section. In the time of scrolling, look into the navigation bar.</p>
			</div>
			</div>
		</div>
		</div>

     </body>
</html>

ফলাফল