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

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

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

 

বুটস্ট্রাপ প্যানেল


প্যানেল

বুটস্ট্রাপ প্যানেল হচ্ছে একটি বর্ডার বক্স যেখানে কনটেন্ট এর চারপাশে কিছু প্যাডিং থাকে। প্যানেল তৈরি করার জন্য .panel ক্লাস ব্যবহার করা হয় এবং প্যানেলের কন্টেন্ট .panel-body ক্লাস এর মধ্যে রাখা করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Panel 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>
          <div class="panel panel-default">
            <div class="panel-body">এটি একটি বেসিক প্যানেল</div>
          </div>
	    </div>

   </body>
</html>

ফলাফল




প্যানেল হেডিং

প্যানেলের মধ্যে হেডিং তৈরি করার জন্য .panel-heading ক্লাস ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Panel 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>
          <div class="panel panel-default">
             <div class="panel-heading">প্যানেল হেডিং</div>
             <div class="panel-body">প্যানেল কন্টেন্ট</div>
          </div>
	    </div>

   </body>
</html>

ফলাফল




প্যানেল ফুটার

প্যানেলের মধ্যে ফুটার তৈরি করার জন্য .panel-footer ক্লাস ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Panel 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>
          <div class="panel panel-default">
            <div class="panel-heading">প্যানেল হেডিং</div>
            <div class="panel-body">প্যানেল কনটেন্ট</div>
            <div class="panel-footer">প্যানেল ফুটার</div>
          </div>
	    </div>

   </body>
</html>

ফলাফল




প্যানেল গ্রুপ

অনেকগুলো প্যানেল নিয়ে একটি প্যানেল গ্রুপ তৈরি করার জন্য প্যানেলগুলোকে .panel-group ক্লাস যুক্ত একটি <div> এলিমেন্টের মধ্যে রাখুন।

.panel-group ক্লাস প্রত্যেকটি প্যানেলের নিচের মার্জিন দূর করে দেয়।

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Panel 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>
        <p>panel-group ক্লাস নিচের মার্জিন রিমুভ করে দেয়। কি পরিবর্তন হয় তা দেখার জন্য ক্লাসটি রিমুভ করে রান করান।</p>
        <div class="panel-group">
          <div class="panel panel-default">
            <div class="panel-heading">প্যানেল হেডার</div>
            <div class="panel-body">প্যানেল কন্টেন্ট</div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">প্যানেল হেডার</div>
            <div class="panel-body">প্যানেল কন্টেন্ট</div>
          </div>
        </div>
	    </div>

   </body>
</html>

ফলাফল




প্যানেলে কনটেকচুয়াল ক্লাসের ব্যবহার

প্যানেলে কালার করতে কনটেকচুয়াল ক্লাস ব্যবহার করা যায়। প্যানেল সংক্রান্ত কনটেকচুয়াল ক্লাসগুলো হলো- (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warningএবং .panel-danger। এগুলো থেকে আপনার প্রয়োজন মতো একটি ক্লাস ব্যবহার করুনঃ

প্যানেলে panel-primary ক্লাসের ব্যবহার
প্যানেল কনটেন্ট
প্যানেলে panel-info ক্লাসের ব্যবহার
প্যানেল কনটেন্ট