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

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

হোম-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 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%;
		}
	  </style>
	</head>
	<body>

		<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
			<h1>বুটস্ট্রাপ ইভেন্ট</h1>
            <p>পেজটি স্কল করুন।</p>
            <p><strong>affix.bs.affix ইভেন্ট ঘটে যখন .affix-top ক্লাসটি .affix ক্লাস দ্বারা রিপ্লেস হতে যায়।</strong></p>
            <p><strong>affixed.bs.affix ইভেন্ট ঘটে যখন .affix-top ক্লাসটি .affix ক্লাস দ্বারা রিপ্লেস সম্পন্ন হয়।</strong></p>
            <p><strong>যখন .affix ক্লাস .affix-top ক্লাসের জায়গায় রিপ্লেস হয়ে যায় তখন affix-top.bs.affix ইভেন্ট ঘটে।</strong></p>
            <p><strong>যখন .affix ক্লাস .affix-top এর দ্বারা পরিবর্তিত হয় তখন affixed-top.bs.affix ইভেন্ট ঘটে।</strong></p>
            <p><strong>যখন .affix ক্লাসটি .affix-bottom ক্লাস দ্বারা পরিবর্তিত হয় তখন affix-bottom.bs.affix ইভেন্ট ঘটে।</strong></p>
            <p><strong>যখন .affix ক্লাসটি .affix-bottom ক্লাস দ্বারা পরিবর্তিত হয় তখন affixed-bottom.bs.affix ইভেন্ট ঘটে।</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>

        <script>
        $(document).ready(function(){
            $('.nav').affix({offset: {top: 205} });
            $(".nav").on('affix.bs.affix', function(){
                alert('The navigation menu is about to be affixed - The .affix-top class is about to be replaced with the .affix class');
            });
            $('.nav').on('affixed.bs.affix', function(){
                alert('The navigation menu is about to be affixed - The .affix-top class has been replaced with the .affix class');
            });
            $('.nav').on('affix-top.bs.affix', function(){
                alert('The navigation menu is about to return to its original top position - The .affix class is about to be replaced with .affix-top');
            });
            $('.nav').on('affixed-top.bs.affix', function(){
                alert('The navigation menu is about to return to its original top position - The .affix class has been replaced with .affix-top');
            });
            $('.nav').on('affix-bottom.bs.affix', function(){
                alert('The navigation menu is about to return to its original bottom position - The .affix class is about to be replaced with .affix-bottom');
            });
            $('.nav').on('affixed-bottom.bs.affix', function(){
                alert('The navigation menu is about to return to its original bottom position - The .affix class has been replaced with .affix-bottom');
            });
        });
        </script>

     </body>
</html>

ফলাফল