বুটস্ট্রাপ টেবিল - Bootstrap Table

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

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

বেসিক/সাধারণ বুটস্ট্রাপ টেবিল তৈরি করার জন্য <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>

ফলাফল

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

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

বুটস্ট্রাপ ডোরাকাটা(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>

ফলাফল

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

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

বুটস্ট্রাপ সম্পর্কিত পেজ

<DOCTYPE> ট্যাগ <html> ট্যাগ <head> ট্যাগ <title> ট্যাগ <meta> ট্যাগ <link> ট্যাগ <script> ট্যাগ <body> ট্যাগ <div> ট্যাগ heading(h1-h6) ট্যাগ <p> ট্যাগ <table> ট্যাগ <thead> ট্যাগ <tbody> ট্যাগ <tr> ট্যাগ <th> ট্যাগ <td> ট্যাগ

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

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

সিএসএস কম্পোনেন্ট

JS কম্পোনেন্ট

বুটস্ট্রাপ গ্রীড সিস্টেম

বুটস্ট্রাপ রেফারেন্স

বুটস্ট্রাপ টেবিল - Bootstrap Table

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

উদাহরণ

ফলাফল

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

বুটস্ট্রাপ ডোরাকাটা(Striped) সারি

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

বুটস্ট্রাপ সম্পর্কিত পেজ

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য