در این آموزش چگونگی ایجاد و ساخت جدول را در بوت استرپ یاد خواهید گرفت . همچین اینکه چطور یک جدول را طراحی کنید و به آن سر و سامان دهید نیز ذکر خواهد شد...
برای ایجاد جدول ها در بوت استرپ باید از تگی به نام <table> استفاده کنیم
همانند table ها در html این جداول میتوانند بخشی به تحت عنوان , header که همان عنوان جدول است و بخشی به نام tbody برای ایجاد بدنه جدول به خود اختصاص دهند.
به کد زیر برای ایجاد جدول توجه کنید:
همان طور که در کد بالا مشاهده میکنید بخش اول به نام <th> قرار دارد که در این تگ میتوان عنوان یا همان هدر جدول را قرار داد که شامل نام و نام خانوادگی و ایمیل است.
همچنین این جدول از سه سطر برای اطلاعات ثبت شده است که با اضافه کردن هر <tr> یک سطر جدید به جدول اضافه میشود
نتیجه حاصل از کد بالا به صورت زیر است:
حال جدول مورد نظر طراحی شده نیاز به طراحی دارد تا جلوه بیشتری به کار ما بدهد که برای این کار باید از کلاس های مختص به خودش استفاده کرد :
اگر بخواهیم خانه های جدول یک سطر در میان به رنگ خاکستری ظاهر شوند باید از کلاس table-striped استفاده شود:
<table class="table-stiped>
به این صورت:
برای ایجاد کادر در جدول یا در اصلاح border باید از کلاس table-borderd استفاده کرد:
<table class="table-borderd>
حالت hover (به گونه ای که با قرار گرفتن موس به رنگ خاکستری ظاهر شود) :
<table class="table-hover">
همیچنین برای ایجاد پس زمینه مشکی با متن سفید به جدول از کلاس table-dark استفاده میشود:
<table class="table table-dark">
تا به اینجا با 3 کلاس .borderd , hover , dark اشنا شدیم نکته مهم در اینجا است که میتوان هر 3 این کلاس را با هم استفاده کرد به گونه ای که :
<table class = " table table-dark table-hover table-borderd">
حال برای اینکه هر سطر رنگ مورد نظر بگیرد باید در تگ tr کلاس رنگ ذکر شود به گونه ای که :
<tr class = "table-dark/info/success/primary/...>
میتوان یکی از رنگ های بالا را انتخاب کرد و رنگ آن سطر را تغیر داد.
و یا اگر به دنبال این هستیم که کل جدول را رنگی کنیم باید ابتدا نام کلاس table ذکر شود سپس رنگ مورد نظر :
<tr class = "table table-primary">
در این کلاس باید از 4 حالت sm , md , lg , xl استفده کرد:
<table class = "table table-sm">
در بحث رسپانسیو بودن جداول باید حتما از کلاس responsive استفاده شود:
<div class = " table-responsive-sm/md/lg/xl">
