কম্পিউটার
 Computer >> কম্পিউটার >  >> প্রোগ্রামিং >> CSS

একটি টেবিল তৈরি করতে বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করা

একটি টেবিল, সাধারণভাবে, কলামের একটি সেটের সাথে একটি সারির মধ্যে সম্পর্ক বর্ণনা করে। ডেটা সংগঠিত এবং চিত্রিত করার এটি একটি দুর্দান্ত উপায়।

বুটস্ট্র্যাপ হল একটি CSS ফ্রেমওয়ার্ক যা আমাদের অতি দ্রুত সামগ্রী তৈরি করতে সাহায্য করতে পারে। এই নিবন্ধে, আমরা কীভাবে বুটস্ট্র্যাপ সেট আপ করা যায় তা পর্যালোচনা করি, কেন আমাদের একটি টেবিলের প্রয়োজন হতে পারে তা শিখি এবং বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করে কার্যকরী টেবিলের কিছু উদাহরণ দেখুন।

শুরু করা

আমরা আমাদের ওয়েব পৃষ্ঠায় একটি মডেল দেখতে পারি তা নিশ্চিত করতে, আমাদের যথাযথ নির্ভরতা রয়েছে তা নিশ্চিত করুন। এই প্রদর্শনের জন্য, আমাদের Bootstrap, Popper.JS এবং jQuery এর প্রয়োজন নেই, তবে যেভাবেই হোক এটি যোগ করা একটি ভাল ধারণা কারণ আপনি সম্ভবত অন্যান্য উপাদানগুলির সাথে কাজ করবেন যার প্রয়োজন আছে৷ আপনার সমস্ত নির্ভরতা পেতে সহায়তার জন্য বুটস্ট্র্যাপের দ্রুত শুরু পৃষ্ঠাতে নেভিগেট করুন৷

আমাদের প্রয়োজনীয় প্যাকেজগুলি কীভাবে লিঙ্ক করবেন তা আপনার উপর নির্ভর করে, তবে সবচেয়ে সহজ, সবচেয়ে নতুনদের-বান্ধব উপায় হল jQuery, Popper.js এবং Bootstrap-এর জন্য সামগ্রী বিতরণ নেটওয়ার্ক – CDN – ব্যবহার করা। আপনার <script> এর অর্ডার সম্পর্কে সতর্ক থাকুন ট্যাগ - অর্ডার এখানে গুরুত্বপূর্ণ।

কখন একটি টেবিল ব্যবহার করতে হবে

আপনি যখন একসাথে অনেক ডেটা একত্রিত করতে চান তখন একটি টেবিল ব্যবহার করুন। আপনি যখন সহজে প্রতিক্রিয়াশীল টেবিল তৈরি করতে চান তখন একটি বুটস্ট্র্যাপ টেবিল ব্যবহার করুন। বুটস্ট্র্যাপ একটি টেবিলের মৌলিক HTML গঠন ব্যবহার করে। আপনার ওয়েবসাইটের জন্য কাস্টমাইজড, প্রতিক্রিয়াশীল টেবিলগুলিকে অন্তর্ভুক্ত করার জন্য আপনাকে যা করতে হবে তা হল তাদের CSS এবং আপনার কাস্টম স্টাইলিংকে অন্তর্ভুক্ত করুন৷

একটি টেবিল তৈরি করতে বুটস্ট্র্যাপ ব্যবহার করুন

টেবিলগুলি ঐতিহ্যগতভাবে HTML এবং CSS দিয়ে তৈরি করা হয়। এটি পর্দায় আমাদের টেবিলের মৌলিক কাঠামো এবং স্টাইলিং পাবে। আমরা বুটস্ট্র্যাপ ব্যবহার করি একটি প্রতিক্রিয়াশীল ডিজাইন পেতে এবং দ্রুত যাওয়ার জন্য প্রস্তুত যাতে আমরা আমাদের অ্যাপ্লিকেশনের জন্য আমাদের আইটেমগুলির তালিকায় উচ্চ অগ্রাধিকার আইটেমগুলিতে যেতে পারি।

বুটস্ট্র্যাপ ব্যবহার করার সময়, ডকুমেন্টেশন হাতে রাখুন যাতে আপনি টেবিলটি সঠিকভাবে গঠন করতে পারেন। একটি মোডাল বা একটি নেভিবারের বিপরীতে একটি টেবিলের মধ্যে যা আলাদা, তা হল এটি কাজ করার জন্য জাভাস্ক্রিপ্টের উপর নির্ভর করে না তাই এটি একটি বাস্তব উপাদানের পরিবর্তে একটি বিষয়বস্তু বৈশিষ্ট্য হিসাবে বেশি বিবেচিত হয়। আপনি উপাদান মেনুর বিপরীতে সাইডবারে বিষয়বস্তু মেনুর অধীনে টেবিল তৈরি করার বিষয়ে তথ্য পাবেন।

একটি মৌলিক কাঠামো দিয়ে শুরু করা যাক:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table>
    <thead>
      <tr>
        <th>Bootstrap Table Demo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

আপনি যদি উপরের মার্কআপটি চালান, আপনি একটি খুব মৌলিক টেবিল দেখতে পাবেন যার একটি শিরোনাম এবং বেশ কয়েকটি সারি রয়েছে যা পানীয়, দাম এবং তাদের সারি নম্বর বর্ণনা করে। পুরো নথির জন্য বুটস্ট্র্যাপ দ্বারা যা প্রতিষ্ঠিত হয়েছে তা ছাড়া আর কোনো স্টাইলিং নেই।

একটি টেবিলে স্টাইলিং যোগ করতে, আপনাকে যা করতে হবে তা হল .table যোগ করুন <table> এর ক্লাস ট্যাগ।

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table">
    <thead>
      <tr>
        <th scope="colgroup"> Bootstrap Table Demo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

এটি টেবিলে খুব মৌলিক স্টাইলিং এবং প্রতিক্রিয়াশীলতা যোগ করে। আসুন আমরা আমাদের প্রয়োজন অনুসারে স্টাইলিংটি কীভাবে কাস্টমাইজ করতে পারি তা দেখতে এক নজরে দেখে নেওয়া যাক।

উল্টানো ডিফল্ট রং

.table-dark যোগ করুন <table>-এ আপনার ক্লাসের নামের তালিকায় .table ছাড়াও টেবিলের মৌলিক রঙের স্কিম অন্ধকারে পরিবর্তন করতে ট্যাগ করুন। 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="colgroup"> Bootstrap Table Demo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

আপনি প্রাসঙ্গিক ক্লাস (যেমন .টেবিল-প্রাথমিক, টেবিল-বিপদ, টেবিল-সাফল্য, ইত্যাদি) নিয়ন্ত্রণ করতে অন্ধকার এবং আলো ছাড়াও মৌলিক বুটস্ট্র্যাপ রঙের বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন।

শৈলী বিকল্প

আপনি যদি শরীর থেকে আলাদা টেবিলের মাথার রঙের স্কিম নিয়ন্ত্রণ করতে চান, তাহলে আপনি .thead-dark যোগ করে তা করতে পারেন অথবা .thead-light <thead>-এ শ্রেণীর বৈশিষ্ট্য। 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-danger">
    <thead class="thead-light">
      <th>Bootstrap Table Demo</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

স্ট্রাইপস

.table-striped যোগ করুন <table> একটি টেবিলের প্রতিটি অন্য সারির রঙ সামঞ্জস্য করতে ট্যাগ করুন। 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-striped table-warning">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Stripes</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

সীমানা

প্রতিটি কক্ষের সব দিকে সীমানা যোগ করতে .table-bordered ব্যবহার করুন - প্রতিটি ঘরের সব দিক থেকে সমস্ত সীমানা সরাতে .table-borderless ব্যবহার করুন। 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-primary table-bordered">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Borders</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 
 <table class="table table-primary table-borderless">
    <thead class="thead-light">
      <th>Bootstrap Table Demo Without Borders</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script>
</body>
 
</html>

হোভার করুন

.table-hover <table>-এর ক্লাস অ্যাট্রিবিউটে যোগ করা হয়েছে ট্যাগ <tbody>-এর সমস্ত সারিকে অনুমতি দেবে hoverable হয়ে 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-hover table-primary table-bordered">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Hover</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script></body>
 
</html>

প্রতিক্রিয়াশীল টেবিল

আপনার <table> এনক্যাপসুলেট করুন একটি <div> সহ সমস্ত ব্রেকপয়েন্ট জুড়ে আপনার টেবিলকে প্রতিক্রিয়াশীল করতে ক্লাসের নাম .table-responsive সহ। এটি মূলত আপনার টেবিলটিকে অনুভূমিকভাবে স্ক্রোলযোগ্য করে তোলে যদি বিষয়বস্তুটি টেবিলের আকার দ্বারা ছোট করা হয়। 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table Demo</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <table class="table table-hover table-primary table-bordered">
    <thead class="thead-light">
      <th>Bootstrap Table Demo With Hover</th>
     <th />
     <th />
    </thead>
    <tbody>
      <tr>
       <th scope="col">No. </th>
       <th scope="col">Drink</th>
       <th scope="col">Price</th>
     </tr>
     <tr>
       <td scope="row">#1</td>
       <td>Iced Tea</td>
       <td>$3.25</td>
     </tr>
     <tr>
       <td scope="row">#2</td>
       <td>Fountain Soda</td>
       <td>$3.00</td>
     </tr>
     <tr>
       <td scope="row">#3</td>
       <td>Coffee</td>
       <td>$2.00</td>
     </tr>
     <tr>
       <td scope="row">#4</td>
       <td>Latte</td>
       <td>$4.25</td>
     </tr>
 
    </tbody>
  </table>
 
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="script.js">
  </script></body>
 
</html>

উপসংহার

আপনার HTML এর সাথে বুটস্ট্র্যাপ ব্যবহার করে টেবিল কাস্টমাইজ করার অনেক উপায় আছে। আপনি আপনার বুটস্ট্র্যাপ টেবিল স্টাইল করার এই উপায়গুলি ব্যবহার করে আয়ত্ত করার পরে, আপনার নিজস্ব কাস্টমাইজযোগ্য শৈলী ব্যবহার করার চেষ্টা করুন!


  1. একটি মডেল তৈরি করতে বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করা

  2. একটি ক্যারোজেল তৈরি করতে বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করা

  3. বুটস্ট্র্যাপ টেবিল-ডোরাকাটা বর্গ

  4. CSS3 ব্যবহার করে চিত্রের স্যাচুরেশন সামঞ্জস্য করা