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

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

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

 

বুটস্ট্রাপ ট্যাব এবং পিল


মেনু

বেশিরভাগ ওয়েবপেজেরি মেনুবার থাকে।

এইচটিএমএলে আনওর্ডার্ড লিস্টের (<ul>) মাধ্যমে মেনু তৈরি করা হয় (স্টাইল পরবর্তী বিষয়) যেমনঃ

উদাহরণ

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Service</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">Contract</a></li>
</ul>

যদি আপনি উপরের লিস্টটিকে আনুভূমিক(horizontal) মেনু হিসেবে তৈরি করতে চান তাহলে <ul> এলিমেন্টের মধ্যে .list-inline ক্লাসটি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
          <h3>ইনলাইন লিস্ট</h3>
          <ul class="list-inline">
            <li><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
	    </div>

   </body>
</html>

ফলাফল




এছাড়া আপনি বুটস্ট্রাপের ট্যাব এবং পিলের মাধ্যমেও মেনুবার তৈরি করতে পারেন। (নিচে দেখুন)

নোটঃ ট্যাব এবং পিল কে কিভাবে টোগোলেবল/ডায়নামিক করা যায় তা শিখার জন্য এই পেজের সর্বশেষ উদাহরণটি লক্ষ্য করুন।


ট্যাব

<ul class="nav nav-tabs"> এর মাধ্যমে ট্যাব তৈরি করা যায়ঃ

টিপসঃ <li class="active"> দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছে।

নিচের উদাহরণটিতে বুটস্ট্রাপ দ্বারা ন্যাভিগেশন ট্যাব তৈরি করে দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
          <h3>ট্যাব</h3>
          <ul class="nav nav-tabs">
            <li><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li class="active"><a href="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
	    </div>

   </body>
</html>

ফলাফল




ট্যাবের মধ্যে ড্রপডাউন মেনু

আপনি চাইলে ট্যাবের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারেন।

নিচের উদাহরণে "Service" সেকশনে একটি ড্রপডাউন ব্যবহার করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
          <h3>ট্যাবের মধ্যে ড্রপডাউনের ব্যবহার</h3>
          <ul class="nav nav-tabs">
            <li class="active"><a href="#">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="#">Web-development</a></li>
                <li><a href="#">App-development</a></li>
                <li><a href="#">Web-security</a></li> 
              </ul>
            </li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
          </ul>
	    </div>

   </body>
</html>

ফলাফল




পিল

<ul class="nav nav-pills"> দ্বারা পিল তৈরি করা হয় এবং <li class="active"> দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
          <h3>পিল</h3>
          <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
          </ul>
	    </div>

   </body>
</html>

ফলাফল




ভার্টিক্যাল পিল

পিলকে ভার্টিক্যাল ভাবেও তৈরি করা যায়। এর জন্য .nav-stacked ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
          <h3>পিল</h3>
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contract</a></li>
          </ul>
          </ul>
	    </div>

   </body>
</html>

ফলাফল




একই সারিতে ভার্টিক্যাল পিল

এখানে শেষ কলামটিতে ভার্টিক্যাল আকারে পিল ব্যবহার করা হয়েছে।
যেখানে বড় স্ক্রিনে কলামগুলো পাশাপাশি অবস্থান করে। কিন্তু ছোট স্ক্রিনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটি একক কলামে রুপান্তরিত হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
          <h3>ভার্টিক্যাল পিল</h3>
          <div class="row">
              <div class="col-md-3">
                <p>Content</p>
              </div>
              <div class="col-md-3">
                <p>Content</p>
              </div>
              <div class="col-md-3">
                <p>Content</p>
              </div>
              <div class="col-md-3">
                <ul class="nav nav-pills nav-stacked">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Service</a></li>
                  <li><a href="#">Gallery</a></li>
                  <li><a href="#">Contract</a></li>
                </ul>
              </div>
              <div class="clearfix visible-lg"></div>
          </div>
	    </div>

   </body>
</html>

ফলাফল




পিলের মধ্যে ড্রপডাউন মেনুর ব্যবহার

আমরা চাইলে পিলের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারি।

নিচের এই উদাহরণটিতে "Service" সেকশনে ড্রপডাউন ব্যবহার করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
            <h3>পিলস এর মধ্যে ড্রপডাউন মেনুর ব্যবহার</h3>
            <ul class="nav nav-pills nav-stacked">
              <li class="active"><a href="#">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="#">Web-development</a></li>
                  <li><a href="#">App-development</a></li>
                  <li><a href="#">Web-security</a></li> 
                </ul>
              </li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Contract</a></li>
            </ul>
	    </div>

   </body>
</html>

ফলাফল




সেন্টারে ট্যাব এবং পিলের ব্যবহার

ট্যাব এবং পিলকে মধ্যস্থানে/জাস্টিফাই করার জন্য .nav-justified ক্লাস ব্যবহার করুন।

মনে রাখবেন ৭৬৮ পিক্সেল থেকে ছোট স্ক্রিনে লিস্ট আইটেমগুলো নিচে নিচে চলে আসবে তবে কন্টেন্টগুলো ঠিক মাঝামাঝিতেই থাকবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
            <h3>সেন্টারে ট্যাব ও পিলের ব্যবহার</h3>
            <!-- ট্যাবের মাঝামাঝি অবস্থান -->
            <ul class="nav nav-tabs nav-justified">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Service</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Contract</a></li>
            </ul>

            <!-- পিলের মাঝামাঝি অবস্থান -->
            <ul class="nav nav-pills nav-justified">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Service</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Contract</a></li>
            </ul>
	    </div>

   </body>
</html>

ফলাফল




টোগোলেবল/ডায়নামিক ট্যাব

ট্যাবকে টোগোলেবল করার জন্য, প্রত্যেকটি লিংকে data-toggle="tab" এট্রিবিউটটি ব্যবহার করুন।
তারপর একক একটি ID 'র সাথে .tab-pane ক্লাসটি ব্যবহার করুন এবং .tab-content ক্লাসযুক্ত একটি <div> এলিমেন্টের মধ্যে সবগুলো কন্টেন্টকে রাখুন।

এছাড়াও যদি আপনি ক্লিক করার সময় ট্যাবে ফেড-ইন এবং ফেড-আউট এফেক্ট যুক্ত করতে চান তাহলে .tab-pane ক্লাসের সাথে অবশ্যই .fade ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
          <h2>ডায়নামিক ট্যাব</h2>
          <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
              <li><a data-toggle="tab" href="#service">Service</a></li>
              <li><a data-toggle="tab" href="#about-us">About us</a></li>
          </ul>

          <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
              <h3>স্যাট একাডেমী</h3>
              <p>দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।</p>
            </div>
            <div id="service" class="tab-pane fade">
              <h3>Service</h3>
              <p>এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।</p>
            </div>
            <div id="about-us" class="tab-pane fade">
              <h3>About us</h3>
              <p>শিক্ষাতে বানিজ্য নয়। শিক্ষা বানিজ্যকে না বলি।</p>
            </div>
          </div>
	    </div>

   </body>
</html>

ফলাফল




টোগোলেবল/ডায়নামিক পিল

ট্যাবের মতো পিলের ক্ষেত্রে ঠিক একই কোড ব্যবহার করা হয়। শুধুমাত্র data-toggle="tab" এট্রিবিউটের জায়গায় data-toggle="pill" এট্রিবিউট ব্যবহার করতে হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Tabs and Pills 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>
   </head>

   <body>

		<div class="container">
            <h2>ডায়নামিক পিল</h2>
            <ul class="nav nav-pills">
              <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
              <li><a data-toggle="pill" href="#service">Service</a></li>
              <li><a data-toggle="pill" href="#about-us">About us</a></li>
            </ul>

            <div class="tab-content">
              <div id="home" class="tab-pane fade in active">
                <h3>স্যাট একাডেমী</h3>
                <p>দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।</p>
              </div>
              <div id="service" class="tab-pane fade">
                <h3>Service</h3>
                <p>এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।</p>
              </div>
              <div id="about-us" class="tab-pane fade">
                <h3>About us</h3>
                <p>শিক্ষাতে আর বানিজ্য নয়। শিক্ষা বানিজ্যকে না বলি।</p>
              </div>
            </div>
	    </div>

   </body>
</html>

ফলাফল




একনজরে ট্যাব এবং পিল সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

ক্লাস বর্ণনা
.nav nav-tabs একটি ন্যাভিগেশন ট্যাব তৈরি করে।
.nav nav-pills একটি ন্যাভিগেশন পিল তৈরি করে।
.nav nav-pills nav-stacked একটি ভার্টিক্যাল ন্যাভিগেশন পিল তৈরি করে।
.nav-justified ৭৬৮ পিক্সেলের উর্দ্ধে স্ক্রিনের ক্ষেত্রে পেরেন্ট এলিমেন্টের সমান প্রস্থের ন্যাভিগেশন ট্যাব/পিল তৈরি করে। ছোট স্ক্রিনে এটি একের পর এক নিচে নিচে অবস্থান করবে।
.disabled ট্যাব/পিলকে ডিজেবল(unclickable) করার জন্য এটি ব্যবহার করা হয়।
.tab-content .tab-pane ক্লাস এবং data-toggle="tab" এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে data-toggle="pill")। এটি ট্যাব/পিলকে টোগোলেবল করে।
.tab-pane .tab-content ক্লাস এবং data-toggle ="tab" এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে data-toggle="pill")। এটি ট্যাব/পিলকে টোগোলেবল করে।