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

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

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

 

বুটস্ট্রাপ ফরম ইনপুট


সাপোর্টযোগ্য ফরম কন্ট্রোলসমূহ

বুটস্ট্রাপে নিম্নলিখিত ফরম কন্ট্রোলসমূহ সাপোর্ট করেঃ

  1. input
  2. textarea
  3. checkbox
  4. radio
  5. select

বুটস্ট্রাপ ইনপুট

বুটস্ট্রাপে এইচটিএমএল(৫) এর সকল ইনপুট টাইপ সাপোর্ট করে: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, এবং color

নোটঃ যদি টাইপ সঠিকভাবে ডিক্লেয়ার করা না হয় তাহলে ইনপুটগুলো যথাযথভাবে স্টাইল হবে না!

নিচের উদাহরণে দুটি ইনপুট এলিমেন্ট রয়েছে; একটি টেক্সট এবং অন্যটি পাসওয়ার্ড টাইপের:

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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>নিচের ফরমে দুটি ইনপুট এলিমেন্ট রয়েছে; একটি টেক্সট এবং পাসওয়ার্ড টাইপের:</p>
          <form role="form">
            <div class="form-group">
              <label>Name:</label>
              <input type="text" class="form-control">
            </div>
            <div class="form-group">
              <label>password:</label>
              <input type="password" class="form-control">
            </div>
          </form>
	    </div>

   </body>
</html>

ফলাফল




বুটস্ট্রাপ টেক্সটএরিয়া

নিচে একটি টেক্সটএরিয়ার উদাহরণ দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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>নিচের ফরমে মন্তব্যের ক্ষেত্রে একটি টেক্সটএরিয়া দেখানো হলো:</p>
          <form role="form">
            <div class="form-group">
              <label>Comment:</label>
              <textarea class="form-control" rows="4"></textarea>
            </div>
          </form>
	    </div>

   </body>
</html>

ফলাফল




বুটস্ট্রাপ চেকবক্স

ইউজারের নিকট থেকে পূর্বনির্ধারিত অপশন লিস্ট থেকে একটি সংখ্যক অপশন সিলেক্ট করিয়ে নেয়ার ক্ষেত্রে চেকবক্স ব্যবহার করা হয়।

নিম্নলিখিত উদাহরণে তিনটি চেকবক্স দেখানো হলো। শেষের চেকবক্সটি disabled করে রাখা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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>নিচে তিনটি চেকবক্স সহ একটি ফরম দেখানো হলো। শেষের চেকবক্সটি disabled করে রাখা হয়েছে:</p>
          <form role="form">
            <div class="checkbox">
              <label><input type="checkbox">Checkbox 1</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox">Checkbox 2</label>
            </div>
            <div class="checkbox disabled">
              <label><input type="checkbox" disabled>Checkbox 3</label>
            </div>
          </form>
	    </div>

   </body>
</html>

ফলাফল




যদি আপনি চেকবক্সগুলোকে একই লাইনে রাখতে চান তাহলে .checkbox-inline ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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>নিচের ফরমে তিনটি ইনলাইন চেকবক্স দেখানো হলো:</p>
          <form role="form">
            <label class="checkbox-inline">
              <input type="checkbox">Checkbox 1
            </label>
            <label class="checkbox-inline">
              <input type="checkbox">Checkbox 2
            </label>
            <label class="checkbox-inline">
              <input type="checkbox">Checkbox 3
            </label>
          </form>
	    </div>

   </body>
</html>

ফলাফল




বুটস্ট্রাপ রেডিও বাটন

পূর্বনির্ধারিত অপশন লিস্ট থেকে ইউজারকে শুধুমাত্র একটি অপশন সিলেক্ট করার ক্ষমতা প্রদানের ক্ষেত্রে রেডিও বাটন ব্যবহার করা হয়। এক্ষেত্রে ইউজারের ক্ষমতা সীমিত করে দেয়া হয়।

নিম্নলিখিত উদাহরণে তিনটি রেডিও বাটন রয়েছে। শেষের অপশনটি disable করে রাখা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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>নিচের ফরমে তিনটি রেডিও বাটন দেখানো হলো। শেষের অপশনটি disable করে রাখা হয়েছে:</p>
          <form role="form">
            <div class="radio">
              <label><input type="radio" name="optradio">Radio 1</label>
            </div>
            <div class="radio">
              <label><input type="radio" name="optradio">Radio 2</label>
            </div>
            <div class="radio disabled">
              <label><input type="radio" name="optradio" disabled>Radio 3</label>
            </div>
          </form>
	    </div>

   </body>
</html>

ফলাফল




যদি রেডিও বাটনগুলোকে একই লাইনে পেতে চান তাহলে .radio-inline ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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>নিচের ফরমে তিনটি ইনলাইন রেডিও বাটন দেখানো হলো:</p>
          <form role="form">
            <label class="radio-inline">
              <input type="radio" name="optradio">Radio 1
            </label>
            <label class="radio-inline">
              <input type="radio" name="optradio">Radio 2
            </label>
            <label class="radio-inline">
              <input type="radio" name="optradio">Radio 3
            </label>
          </form>
	    </div>

   </body>
</html>

ফলাফল




বুটস্ট্রাপ সিলেক্ট লিস্ট


ইউজারকে একাধিক অপশন সিলেক্ট করার সুযোগ দেয়ার ক্ষেত্রে সিলেক্ট লিস্ট ব্যবহার করা হয়।

নিম্নলিখিত উদাহরণে একটি ড্রপডাউন লিস্ট দেখানো হলো(সিলেক্ট লিস্ট):

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms Input 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>নিচের উদহরণে দুইটি ড্রপডাউনসহ একটি ফরম দেখানো হলো (সিলেক্ট লিস্ট):</p>
            <form role="form">
              <div class="form-group">
                <label for="selectlist1">সিলেক্ট লিস্ট (একটি সিলেক্ট করুন):</label>
                <select class="form-control">
                  <option>option 1</option>
                  <option>option 2</option>
                  <option>option 3</option>
                  <option>option 4</option>
                </select>
                <br>
                <label for="selectlist2">একের অধিক সিলেক্ট লিস্ট (একের অধিক সিলেক্ট করার জন্য  Ctrl চেপে ধরুন):</label>
                <select multiple class="form-control">
                  <option>option 1</option>
                  <option>option 2</option>
                  <option>option 3</option>
                  <option>option 4</option>
                  <option>option 5</option>
                </select>
              </div>
            </form>
	    </div>

   </body>
</html>

ফলাফল