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

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

হোম-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 স্ক্রলস্পাই (scrollspy.js)

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

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

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


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

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

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

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

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

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

উদাহরণ

<!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>

ফলাফল




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

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

উদাহরণ

<!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>

		<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>

    <script>
    $(document).ready(function(){
        $('body').scrollspy({target: ".navbar", offset: 50});
    });
    </script>

     </body>
</html>

ফলাফল




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

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

নাম টাইপ ডিফল্ট বর্ণনা
offset number 10 ন্যাভবারের সাথে লিংককৃত সেকশন বা এলিমেন্টের কতো পিক্সেলের মধ্যে স্ক্রলস্পাই একটিভ হবে তা নির্দেশ করে। এটি অপশনাল। ডিফল্ট ভ্যালু হচ্ছে ১০ পিক্সেল। আগের উদাহরণটিতে data-offset এট্রিবিউটটি ব্যবহার করা হয়েছে।


আরো উদাহরণ


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

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

উদাহরণ

<!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>

        <script>
        $(document).ready(function(){
          $('body').scrollspy({target: ".navbar", offset: 50});
          $("#navbarId a").on('click', function(event) {
            if (this.hash !== "") {
              event.preventDefault();

              var hash = this.hash;

              $('html, body').animate({
                scrollTop: $(hash).offset().top
              }, 800, function(){
          
                window.location.hash = hash;
              });
            }  
          });
        });
        </script>

     </body>
</html>

ফলাফল