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

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

হোম-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/data-* ব্যবহার করে backdrop অপশনের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Modal 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>মোডাল অপশন backdrop</h2>
            <p>এই উদাহরণটিতে প্রথম মোডালে JS এবং দ্বিতীয় মোডালে data-backdrop="" এট্রিবিউট ব্যবহার করে
               backdrop অপশন দেখানো হয়েছে।</p>
            <!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
            <button type="button" class="btn btn-info btn-md" id="btnId1">মোডাল (backdrop:true)</button>
            <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#modalId2"
                    data-backdrop="false">মোডাল (backdrop:false)</button>

            <!-- মোডাল -->
            <div class="modal fade" id="modalId1" role="dialog">
                <div class="modal-dialog">
                
                <!-- মোডাল কন্টেন্ট -->
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">ধূসর প্রলেপ যুক্ত মোডাল</h4>
                    </div>
                    <div class="modal-body">
                    <p>এই মোডালে একটি ধূসর প্রলেপ থাকবে।</p>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ করুন</button>
                    </div>
                </div>

                </div>
            </div>
            
            <!-- মোডাল -->
            <div class="modal fade" id="modalId2" role="dialog">
                <div class="modal-dialog">
                
                <!-- মোডাল কন্টেন্ট -->
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">ধূসর প্রলেপ ছাড়া মোডাল</h4>
                    </div>
                    <div class="modal-body">
                    <p>এই মোডালে কোনো ধূসর প্রলেপ থাকবে না।</p>
                    <p><strong>নোটঃ</strong> এই মোডালের ক্ষেত্রে মোডালের বাহিরে ক্লিক করলেও ক্লোজ হবে না।</p>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ করুন</button>
                    </div>
                </div>

                </div>
            </div>

        </div>
            
        <script>
        $(document).ready(function(){
            $("#btnId1").click(function(){
                $("#modalId1").modal({backdrop: true});
            });
        });
        </script>

   </body>
</html>

ফলাফল






উদাহরণঃ JS/data-* ব্যবহার করে keyboard অপশনের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Modal 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>মোডাল অপশন keyboard</h2>
            <p>এই উদাহরণটিতে প্রথম মোডালে JS এবং দ্বিতীয় মোডালে data-keyboard="" এট্রিবিউট ব্যবহার করে
               keyboard অপশন দেখানো হয়েছে।</p>
            <p>escape key (Esc) এর মাধ্যমে মোডাল ক্লোজ হবে কিনা তা নির্দিষ্ট করার জন্য <strong>keyboard</strong>
                অপশন ব্যবহার করা হয়।</p>
            <p><strong>নোট:</strong> মোডাল উইন্ডোটি প্রদর্শন করানোর জন্য Tab বাটনে ক্লিক করুন এবং ক্লোজ করার জন্য Esc 
               বাটনে ক্লিক করুন।</p>
            <!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
            <button type="button" class="btn btn-info btn-md" id="btnId1">মোডাল(js) (keyboard:true)</button>
            <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#modalId2"
                    data-keyboard="false">মোডাল(data) (keyboard:false)</button>

            <!-- মোডাল -->
            <div class="modal fade" id="modalId1" role="dialog">
                <div class="modal-dialog">
                
                <!-- মোডাল কন্টেন্ট -->
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">ধূসর প্রলেপ যুক্ত মোডাল</h4>
                    </div>
                    <div class="modal-body">
                       <p>কী-বোর্ডের escape কী তে চাপ দিলে এই মোডালটি বন্ধ হয়ে যাবে।</p>
                       <p><strong>নোট:</strong> মোডাল উইন্ডোটি প্রদর্শন করানোর জন্য Tab বাটনে ক্লিক করুন এবং ক্লোজ
                            করার জন্য Esc বাটনে ক্লিক করুন।</p>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ করুন</button>
                    </div>
                </div>

                </div>
            </div>
            
            <!-- মোডাল -->
            <div class="modal fade" id="modalId2" role="dialog">
                <div class="modal-dialog">
                
                <!-- মোডাল কন্টেন্ট -->
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">ধূসর প্রলেপ ছাড়া মোডাল</h4>
                    </div>
                    <div class="modal-body">
                       <p>কী-বোর্ডের escape কী তে চাপ দিলেও এই মোডালটি ক্লোজ হবে না।</p>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ করুন</button>
                    </div>
                </div>

                </div>
            </div>

        </div>
            
        <script>
        $(document).ready(function(){
            $("#btnId1").click(function(){
                $("#modalId1").modal({keyboard: true});
            });
        });
        </script>

   </body>
</html>

ফলাফল






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

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Modal 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-info btn-md" id="btnId">টোগল মোডাল</button>

            <!-- মোডাল -->
            <div class="modal fade" id="modalId" role="dialog">
                <div class="modal-dialog">
                
                <!-- মোডাল কন্টেন্ট -->
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">মোডাল মেথড</h4>
                    </div>
                    <div class="modal-body">
                    <p>মোডালকে ম্যানুয়েললি টোগল করার জন্য টোগল মেথড ব্যবহার করা হয়।</p>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ করুন</button>
                    </div>
                </div>
                
                </div>
            </div>
        </div>
        
        <script>
        $(document).ready(function(){
            $("#btnId").click(function(){
                $("#modalId").modal("toggle");
            });
        });
        </script>

   </body>
</html>

ফলাফল






উদাহরণঃ show এবং hide মেথডের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Modal 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>
        #btnId {
            width: 300px;
            padding: 10px;
            font-size:20px;
            position: absolute;
            margin: 0 auto;
            right: 0;
            left: 0;
            bottom: 50px;
            z-index: 9999;
        }
      </style>
   </head>

   <body>

        <div class="container">
            <h2>মোডাল মেথড</h2>
            <p><strong>show</strong> মেথড দ্বারা মোডালকে প্রদর্শণ করানো হয় এবং <strong>hide</strong> মেথড দ্বারা
                 মোডালকে হাইড করানো হয়।</p>
            <!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
            <button type="button" class="btn btn-info btn-md" id="btnId">হাইড মোডাল</button>

            <!-- মোডাল -->
            <div class="modal fade" id="modalId" role="dialog">
                <div class="modal-dialog">
                
                <!-- মোডাল কন্টেন্ট -->
                <div class="modal-content">
                    <div class="modal-header">
                    <h4 class="modal-title">মোডাল মেথড</h4>
                    </div>
                    <div class="modal-body">
                    <p><strong>show</strong> মেথড দ্বারা মোডালকে প্রদর্শণ করানো হয় এবং <strong>hide</strong> মেথড দ্বারা
                         মোডালকে হাইড করানো হয়।</p>
                    <p>পূনরায় পেজ রিফ্রেশ করুন।</p>     
                    </div>
                </div>
                
                </div>
            </div>
        </div>
        
        <script>
        $(document).ready(function(){
            // পেজটি লোডিং এর সাথে সাথে মোডালটি প্রদর্শিত হয়।
            $("#modalId").modal("show");
            
            // মোডালকে হাইড করে।
            $("#btnId").click(function(){
                $("#modalId").modal("hide");
            });
        });
        </script>

   </body>
</html>

ফলাফল






উদাহরণঃ মোডাল ইভেন্টের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Modal 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>
            <h3>মোডাল ওপেন এবং ক্লোজ করুন</h3>
            <!-- বাটন দ্বারা মোডালটি ক্লিক করুন -->
            <button type="button" class="btn btn-info btn-lg" id="btnId">ওপেন মোডাল</button>

            <!-- মোডাল -->
            <div class="modal fade" id="modalId" role="dialog">
                <div class="modal-dialog">

                <!-- মোডাল কন্টেন্ট -->
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">মোডাল হেডার</h4>
                    </div>
                    <div class="modal-body">
                    <p>মোডালটি যখন প্রদর্শিত হতে যাচ্ছে তখন <strong>show.bs.modal</strong> ইভেন্টটি কাজ করে।</p>
                    <p>মোডালটি যখন প্রদর্শিত হওয়ার পর <strong>shown.bs.modal</strong> ইভেন্টটি ঘটে।</p>
                    <p> মোডালটি যখন হাইড হয় তখন <strong>hide.bs.modal</strong> ইভিন্টটি ঘটে।</p>
                    <p>মোডালটি পুরোপুরি হাইড হওয়ার পর <strong>hidden.bs.modal</strong> ইভেন্টটি ঘটে
                       (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর)।</p>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">ক্লোজ করুন</button>
                    </div>
                </div>

                </div>
            </div>
        </div>

        <script>
        $(document).ready(function () {
            $("#btnId").click(function () {
                $("#modalId").modal("show");
            });
            $("#modalId").on('show.bs.modal', function () {
                alert('The modal is about to be shown.');
            });
            $("#modalId").on('shown.bs.modal', function () {
                alert('The modal is fully shown.');
            });
            $("#modalId").on('hide.bs.modal', function () {
                alert('The modal is about to be hidden.');
            });
            $("#modalId").on('hidden.bs.modal', function () {
                    alert('The modal is now hidden.');
            });
        });
        </script>

   </body>
</html>

ফলাফল