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

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

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

 


উদাহরণঃ toggle মেথডের ব্যবহার

<!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>
   </head>

   <body>

     <div class="container">
        <h2>বাটন মেথড</h2>
        <p>টোগলেবল বাটন তৈরি করার জন্য <strong>toggle</strong> মেথডটি ব্যবহার করা হয়। 
           যেখানে বাটনটি চাপ দেয়া আছে এমন দেখায়।</p>
        <button type="button" class="btn btn-default">Toggle Button</button>
        <button type="button" class="btn btn-default">No Toggle Button</button>
     </div>
     <script>
     $(document).ready(function(){
         $(".btn-default:first").click(function(){
             $(this).button('toggle');
         });
     });
     </script>

   </body>
</html>

ফলাফল






উদাহরণঃ loading মেথডের ব্যবহার

<!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>
   </head>

   <body>

     <div class="container">
        <h2>বাটন মেথড</h2>
        <p><strong>loading</strong> মেথড বাটনকে অক্ষম করে দেয় এবং বাটনের টেক্সটকে loading.. এ রুপান্তর করে</p>
        <button type="button" class="btn btn-default">বাটন উদাহরণ</button>
     </div>
     <script>
     $(document).ready(function(){
         $(".btn").click(function(){
             $(this).button('loading');
         });
     });
     </script>

   </body>
</html>

ফলাফল






উদাহরণঃ reset মেথডের ব্যবহার

<!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>
   </head>

   <body>

     <div class="container">
        <h2>বাটন মেথড</h2>
        <p><strong>reset </strong> মেথড দ্বারা বাটনের টেক্সটকে মূল টেক্সটে রুপান্তরিত করে(যদি পরিবর্তিত হয়)</p>
        <button type="button" class="btn btn-default">বাটন </button>
     </div>
     <script>
     $(document).ready(function(){
            $(".btn").click(function(){
                $(this).button("loading").delay(500).queue(function(){
                    $(this).button("reset");
                    $(this).dequeue();
                });
            });
        });
     </script>

   </body>
</html>

ফলাফল






উদাহরণঃ 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>
   </head>

   <body>

     <div class="container">
        <h2>বাটন মেথড</h2>
        <p>বাটন এর ভেতরের টেক্সটকে পরিবর্তন করার জন্য <strong>string</strong> মেথডটি ব্যবহার করা হয়।</p>
        <p><strong>নোটঃ</strong> এই উদাহরনটি কাজ করার জন্য বাটন টেক্সট এর সাথে আপনাকে অবশ্যই 
           <strong>data-STRING-text</strong> এট্রিবিউটটি ব্যবহার করতে হবে।</p>
        <button type="button" class="btn btn-default" data-somestringvalue-text="লোডিং শেষ" autocomplete="off">বাটন
        </button>
     </div>
     <script>
     $(document).ready(function(){
            $(".btn").click(function(){
                $(this).button('loading').delay(1000).queue(function(){
                    $(this).button('somestringvalue');
                    $(this).dequeue();
                });
            });
        });
     </script>

   </body>
</html>

ফলাফল