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

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

হোম-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 Carousel 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>
		.carousel-inner > .item > img,
		.carousel-inner > .item > a > img {
			width: 80%;
			margin: auto;
		}
	  </style>
   </head>

   <body>

      <div class="container">
          <div id="carouselId" class="carousel slide" data-ride="carousel">
            <!-- ইন্ডিকেটরস -->
            <ol class="carousel-indicators">
            <li data-target="carouselId" data-slide-to="0" class="active"></li>
            <li data-target="carouselId" data-slide-to="1"></li>
            <li data-target="carouselId" data-slide-to="2"></li>
            <li data-target="carouselId" data-slide-to="3"></li>
            </ol>

            <!-- স্লাইড পার্ট -->
            <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="nilgiri.jpg" alt="Nilgiri" width="460" height="345">
            </div>

            <div class="item">
              <img src="paris.jpg" alt="Paris Tower" width="460" height="345">
            </div>
            
            <div class="item">
              <img src="triangle.jpg" alt="Triangle" width="460" height="345">
            </div>
            
            <div class="item">
              <img src="doha.jpg" alt="Doha Qatar" width="460" height="345">
            </div>
            </div>

            <!-- আগে পরে যাওয়ার জন্য কন্ট্রোলার তৈরি -->
            <a class="left carousel-control" href="#carouselId" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carouselId" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
          </div>
      </div>

      <script>
        $(document).ready(function () {
            $("#carouselId").on('slide.bs.carousel', function () {
                alert('A new slide is about to be shown!');
            });
            $("#carouselId").on('slid.bs.carousel', function () {
                alert('The carousel has finished sliding from one item to another!');
            });
        });
    </script>

   </body>
</html>

ফলাফল