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

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

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

 

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


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

বেসিক বুটস্ট্রাপ টেবিলের মধ্যে হালকা প্যাডিং থাকে এবং টেবিলের সারিগুলোর মধ্যে অনুভুমিক ডিভাইডার থাকে।

বেসিক/সাধারণ বুটস্ট্রাপ টেবিল তৈরি করার জন্য <table> এলিমেন্টের মধ্যে .table অন্তর্ভুক্ত করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Table 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>
        <table class="table">
            <thead>
            <tr>
              <th>নাম </th>
              <th>বয়স</th>
              <th>ই-মেইল</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>ফয়সাল খান</td>
              <td>২৩</td>
              <td>faysal@email.com</td>
            </tr>
            <tr>
              <td>জিহাদুল ইসলাম</td>
              <td>২২</td>
              <td>zehad@email.com</td>
            </tr>
            <tr>
              <td>মোঃ রাজু</td>
              <td>২৩ </td>
              <td>raju@email.com</td>
            </tr>
            </tbody>
        </table>
	</div>

</body>
</html>

ফলাফল




ডোরাকাটা(Striped) সারি

টেবিলের সারিগুলোকে ডোরাকাটা বা Striped করার জন্য .table ক্লাসের পাশাপাশি .table-striped ক্লাসটি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Table 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>Striped বুটস্ট্রাপ টেবিলের উদাহরণ</h2>
          <table class="table table-striped">
              <thead>
              <tr>
                <th>নাম </th>
                <th>বয়স</th>
                <th>ই-মেইল</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>ফয়সাল খান</td>
                <td>২৩</td>
                <td>faysal@email.com</td>
              </tr>
              <tr>
                <td>জিহাদুল ইসলাম</td>
                <td>২২</td>
                <td>zehad@email.com</td>
              </tr>
              <tr>
                <td>মোঃ রাজু</td>
                <td>২৩</td>
                <td>raju@email.com</td>
              </tr>
              </tbody>
          </table>
    </div>

  </body>
</html>

ফলাফল




বর্ডারযুক্ত টেবিল

টেবিল এবং টেবিল সেলের চারপাশে বর্ডারযুক্ত করার জন্য .table-bordered ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Table 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>
          <table class="table table-bordered">
              <thead>
              <tr>
                <th>নাম </th>
                <th>বয়স</th>
                <th>ই-মেইল</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>ফয়সাল খান</td>
                <td>২৩</td>
                <td>faysal@email.com</td>
              </tr>
              <tr>
                <td>জিহাদুল ইসলাম</td>
                <td>২২</td>
                <td>zehad@email.com</td>
              </tr>
              <tr>
                <td>মোঃ রাজু</td>
                <td>২৩</td>
                <td>raju@email.com</td>
              </tr>
              </tbody>
          </table>
    </div>

  </body>
</html>

ফলাফল




হোভারযুক্ত সারি

টেবিলের সারিগুলোর মধ্যে হোভার ইফেক্ট সক্রিয় করার জন্য .table-hover ক্লাসটি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Table 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>
          <table class="table table-hover">
              <thead>
              <tr>
                <th>নাম </th>
                <th>বয়স</th>
                <th>ই-মেইল</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>ফয়সাল খান</td>
                <td>২৩</td>
                <td>faysal@email.com</td>
              </tr>
              <tr>
                <td>জিহাদুল ইসলাম</td>
                <td>২২</td>
                <td>zehad@email.com</td>
              </tr>
              <tr>
                <td>মোঃ রাজু</td>
                <td>২৩</td>
                <td>raju@email.com</td>
              </tr>
              </tbody>
          </table>
    </div>

  </body>
</html>

ফলাফল




কনডেন্সড টেবিল

টেবল সেলের প্যাডি কমানোর জন্য .table-condensed ক্লাস ব্যবহার করুন। এটি প্রায় অর্ধেক প্যাডিং কমিয়ে ফেলেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Table 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>
          <table class="table table-condensed">
              <thead>
              <tr>
                <th>নাম </th>
                <th>বয়স</th>
                <th>ই-মেইল</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>ফয়সাল খান</td>
                <td>২৩</td>
                <td>faysal@email.com</td>
              </tr>
              <tr>
                <td>জিহাদুল ইসলাম</td>
                <td>২২</td>
                <td>zehad@email.com</td>
              </tr>
              <tr>
                <td>মোঃ রাজু</td>
                <td>২৩</td>
                <td>raju@email.com</td>
              </tr>
              </tbody>
          </table>
    </div>

  </body>
</html>

ফলাফল




কনটেকচুয়াল ক্লাস

টেবিলের সারি অথবা সেলে কালার করার জন্য কনটেকচুয়াল ক্লাস ব্যবহার করা যায়। (<tr>) (<td>):

নোটঃ কনটেকচুয়াল কালারের বাহিরে অন্য কালারগুলো ব্যবহার করার জন্য সিএসএস ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Table 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>
          <table class="table">
              <thead>
              <tr>
                <th>নাম </th>
                <th>বয়স</th>
                <th>ই-মেইল</th>
              </tr>
              </thead>
              <tbody>
              <tr class="info">
                <td>ফয়সাল খান</td>
                <td>২৩</td>
                <td>faysal@email.com</td>
              </tr>
              <tr class="success">
                <td>জিহাদুল ইসলাম</td>
                <td>২২</td>
                <td>zehad@email.com</td>
              </tr>
              <tr class="warning">
                <td>মোঃ রাজু</td>
                <td>২৩</td>
                <td>raju@email.com</td>
              </tr>
              </tbody>
          </table>
    </div>

  </body>
</html>

ফলাফল




কনটেকচুয়াল ক্লাসগুলির বর্ণনা নিচে দেওয়া হলোঃ

ক্লাস বর্ণনা
.active টেবিলের সারি অথবা টেবিলের সেলে হোভার কালার যুক্ত করে।
.success একটি সফল অথবা পজিটিভ কর্মকে নির্দেশ করে।
.info একটি নিরপেক্ষ তথ্য পরিবর্তন অথবা নিরপেক্ষ তথ্যকে নির্দেশ করে।
.warning মনোযোগ আকর্শন করার ক্ষেত্রে এটি সাধারনত ব্যবহার করা হয়।
.danger বিপজ্জনক অথবা নেগেটিভ কর্মকে নির্দেশ করে।

রেসপন্সিভ টেবিল

টেবিলকে রেসপন্সিভ করার জন্য .table-responsive ক্লাসটি ব্যবহার করুন। রেসপন্সিভ টেবিলের ক্ষেত্রে টেবিলটির জন্য ছোট ডিভাইসে(786px এর কম) একটি আনুভূমিক স্ক্রলিং বার হবে, কিন্তু বড় স্ক্রিনের(786px এর বেশি) ক্ষেত্রে কোন পার্থক্যই দেখা যায় নাঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Table 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>
          <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>নাম</th>
                <th>বয়স</th>
                <th>মোবাইল</th>
                <th>শহর</th>
                <th>দেশ</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>১</td>
                <td>রাজু</td>
                <td>২৩</td>
                <td>০১৮******৩৪</td>
                <td>চাঁদপুর</td>
                <td>বাংলাদেশ</td>
              </tr>
              <tr>
                <td>২</td>
                <td>জিহাদ</td>
                <td>২২</td>
                <td>০১৬******৭৮</td>
                <td>চাঁদপুর</td>
                <td>বাংলাদেশ</td>
              </tr>
              <tr>
                <td>২</td>
                <td>ফয়সাল</td>
                <td>২৩</td>
                <td>০১৬******৫৬</td>
                <td>চাঁদপুর</td>
                <td>বাংলাদেশ</td>
              </tr>
            </tbody>
          </table>
          </div>
    </div>

  </body>
</html>

ফলাফল




একনজরে টেবিল সংক্রান্ত ক্লাসসমূহ

ক্লাস বর্ণনা
.table যেকোনো <table> এলিমেন্টে বেসিক স্টাইল (হালকা প্যাডিং এবং শুধুমাত্র অনুভূমিক ডিভাইডার) যুক্ত করে।
.table-striped <tbody> 'র সারিতে zebra-striping যুক্ত করে (IE8 এ সাপোর্ট করে না)।
.table-bordered টেবিল এবং সেলের চারপাশে বর্ডার যুক্ত করে।
.table-hover টেবিলের সারিতে হোভার ইফেক্ট যুক্ত করার জন্য ব্যবহার করা হয়।
.table-condensed টেবিলের সেলের প্যাডিং অর্ধেক করার জন্য ব্যবহার করা হয়।

এছাড়াও সারি এবং সেলের মধ্যে যেসকল ক্লাস ব্যবহার করা যায়ঃ

ক্লাস বর্ণনা
.active সংশ্লিষ্ট সারি অথবা সেলে হোভার কালার যুক্ত করে।
.success সফল বা পজিটিভ অ্যাাকশন নির্দেশ করে।
.info একটি নিরপেক্ষ অ্যাাকশন নির্দেশ করে।
.warning সতর্কতা নির্দেশ করে।
.danger বিপদজ্জনক কোন সংকেত বুঝাতে ব্যবহার করা হয়।