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

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

হোম-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 বাটন (button.js)

যদি আপনি বাটনের উপর আরো অধিক কন্ট্রোল পেতে চান তাহলে প্লাগ-ইন ব্যবহার করুন।

বাটন টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ বাটন টিউটোরিয়ালটি পড়ুন।


বাটন প্লাগ-ইন ক্লাসসমূহ

নিচের ক্লাসগুলো যেকোন <a>, <button> অথবা <input> এলিমেন্টকে স্টাইল করার জন্য ব্যবহার করা যায়ঃ

ক্লাস বিবরণ
.btn যেকোন বাটনে বেসিক স্টাইল যুক্ত করে।
.btn-default ডিফল্ট/স্ট্যান্ডার্ড বাটন তৈরি করে।
.btn-primary প্রাইমারি একশন বুঝায়।
.btn-success একটি সফল অথবা পজিটিভ কর্মকে বুঝায়।
.btn-info তথ্যবহুল এলার্ট মেসেজে বুঝায়।
.btn-warning সতর্কতা সংক্রান্ত মেসেজ বুঝাবে।
.btn-danger ক্ষতিকর অথবা সম্ভাব্য নেগেটিভ কর্মকে বুঝায়।
.btn-link বাটনকে দেখতে লিংকের মতো করবে। (কিন্তু, কাজ করবে বাটনের মতই)
.btn-lg বড় বাটন তৈরী করে।
.btn-sm ছোট বাটন তৈরী করে।
.btn-xs অতিরিক্ত ছোট আকারের বাটন তৈরী করে।
.btn-block ব্লক-লেভেল বাটন তৈরী করে। (পেরেন্ট এলিমেন্টের সম্পূর্ণ প্রস্থ নিয়ে)
.active বাটনকে একটিভ অবস্থায় দেখাবে।
.disabled বাটনকে disable করে দিবে।

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

ম্যানুয়েললি যুক্ত করার জন্যঃ

$('.btn').button();

বাটন মেথড

নিচের টেবিলের মধ্যে বাটন মেথডগুলো দেখানো হলোঃ

নোট: এই প্লাগ-ইনের ক্ষেত্রে মেথড data এট্রিবিউটের মাধ্যমে অতিক্রম করতে পারে।

মেথড বিবরণ উদাহরণ
.button("toggle") বাটনটি চাপ দেয়া আছে এমন দেখায়। উদাহরণ দেখুন
.button("loading") বাটনকে অক্ষম করে দেয় এবং বাটনের টেক্সটকে loading.. এ রুপান্তর করে। উদাহরণ দেখুন
.button("reset") বাটনের টেক্সটকে মূল টেক্সটে রুপান্তর করে(যদি পরিবর্তিত হয়) উদাহরণ দেখুন
.button("string") নতুন বাটন টেক্সট নির্দিষ্ট করে। উদাহরণ দেখুন

বাটন সংক্রান্ত আরো কিছু উদাহরণ



বাটনকে কাস্টমাইজ করতে সিএসএস ব্যবহার করুন।

কিভাবে রাউন্ড বর্ডার বাদ দিবেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button 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> 
        .btn-default {
           border-radius: 0;
        }
      </style>
   </head>

   <body>

     <div class="container">
       <h2>কাস্টমাইজ বাটন</h2>
       <p>বাটনের গোলাকার বর্ডার কিভাবে বাদ দিবেনঃ</p>
       <button type="button" class="btn btn-success">গোলাকার কর্ণার বাটন</button>
       <button type="button" class="btn btn-default">কোনাকুনি কর্ণার বাটন</button>
     </div>

   </body>
</html>

ফলাফল




কিভাবে বাটনে বিশেষ কালার যুক্ত করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button 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> 
          .btn-default {
              background: purple;
              color: #fff;
          }
          .btn-default:hover {
              background: #fff;
              color: #000;
          }
      </style>
   </head>

   <body>

      <div class="container">
        <h2>কাস্টমাইজ বাটন</h2>
        <p>Purple কালারের বাটনঃ</p>
        <button type="button" class="btn btn-default">বাটন</button>
      </div>

   </body>
</html>

ফলাফল




কিভাবে বাটনে স্যাডো যুক্ত কয়া যায়ঃ

কিভাবে বাটনে বিশেষ কালার যুক্ত করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button 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> 
          .btn-default {
              box-shadow: 1px 2px 5px #000000;
          }
      </style>
   </head>

   <body>

      <div class="container">
        <h2>কাস্টমাইজ বাটন</h2>
        <p>বাটনে স্যাডো ইফেক্ট যুক্ত করা হলোঃ</p>
        <button type="button" class="btn btn-default">বাটন</button>
      </div>

   </body>
</html>

ফলাফল