Bootstrap বেসিক টেবিল
সাধারণত Bootstrap বেসিক টেবিলে light padding বা সামান্য প্যাডিং ও horizontal বা আনুভূমিক divider থাকে। এক্ষেত্রে divider বলতে Row এর bottom-border কে বোঝানো হয়েছে।
.table class ব্যবহার করে টেবিলের basic styling করা হয়। যেমন:
কোড :
<div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
উল্লেখ্য : এই অনুচ্ছেদের সকল উদাহরণের ক্ষেত্রে বা সকল বুটস্ট্র্যাপ কোড নিয়ে কাজ করার সময় অবশ্যই হেড সেকশনে নিম্নোক্ত কোড টাইপ করতে হবে :
<head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/ bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script> </head>
Striped Rows
.table-striped class ব্যবহার করে টেবিলে zebra-stripes যোগ করা হয়। যেমন:
কোড:
<div class="container"> <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Bordered Table
.table-bordered class ব্যবহার করে টেবিলের ও সেলের চারদিকে বর্ডার যোগ করা হয়। যেমন:
কোড :
<div class="container"> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Hover Rows
টেবিলের row বা সারিতে hover ইফেক্ট দেবার জন্য .table-hover class টি যোগ করা হয়। যেমন:
কোড :
<div class="container"> <table class="table table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Condensed Table
.table-condensed class টি ব্যবহার করলে টেবিলের সেল সাধারণ প্যাডিং অর্ধেক পরিমাণে কমে যায়। যেমন:
কোড :
<div class="container"> <table class="table table-condensed"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Contextual Classes
সাধারণত কোনো টেবিলের rows (<tr>) কিংবা cells (<td>) এ color দেবার জন্য Contextual Classes ব্যবহার করা হয়। যেমন:
কোড :
<div class="container"> <table class="table table-condensed"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Contextual Class গুলো সাধারণত নির্দিষ্ট কিছু color কে নির্দেশ করে। যেসকল Contextual Class ব্যবহৃত হয় সেগুলো হলো:
.active |
কোনো টেবিলের row বা টেবিলের cell এর জন্য hover color এর জন্য ব্যবহৃত হয়। |
.success |
সফল (successful ) বা ইতিবাচক (positive) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়। |
.info |
নিরপেক্ষ বা তথ্যপূর্ণ (neutral informative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়। |
.warning |
মনোযোগ আকর্ষণ করার জন্য বা সতর্কতামূলক (warning) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়। |
.danger |
বিপদজনক বা নেতিবাচক (dangerous or potentially negative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়। |
