Header Ads

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

October 26, 2019 0

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

Image result for bootstrap table\

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

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

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

বেসিক বুটস্ট্রাপ টেবিলের মধ্যে হালকা প্যাডিং থাকে এবং টেবিলের সারিগুলোর মধ্যে অনুভুমিক ডিভাইডার থাকে।
বেসিক/সাধারণ বুটস্ট্রাপ টেবিল তৈরি করার জন্য <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>




Copy

ফলাফল

ডোরাকাটা(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>




Copy

ফলাফল

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

টেবিল এবং টেবিল সেলের চারপাশে বর্ডারযুক্ত করার জন্য .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>




Copy

ফলাফল

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

টেবিলের সারিগুলোর মধ্যে হোভার ইফেক্ট সক্রিয় করার জন্য .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>




Copy

ফলাফল

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

টেবল সেলের প্যাডি কমানোর জন্য .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>




Copy

ফলাফল

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

টেবিলের সারি অথবা সেলে কালার করার জন্য কনটেকচুয়াল ক্লাস ব্যবহার করা যায়। (<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>




Copy

ফলাফল

কনটেকচুয়াল ক্লাসগুলির বর্ণনা নিচে দেওয়া হলোঃ
ক্লাসবর্ণনা
.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>




Copy

ফলাফল

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

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

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.