031- 344 500 60

طراحی سایت اصفهان | سئو سایت اصفهان
طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی شرکت, طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی اینترنتی اصفهان , تبلیغات اینترنتی , 09133886881

صفحه نخست » بلاگ » bootstrap » آموزش جدول در بوت استرپ – قسمت دوم

آموزش جدول در بوت استرپ – قسمت دوم

تاریخ:۲۱ام مرداد ۱۳۹۶
مرضیه خیرخواه
17

آموزش جدول در بوت استرپ جدول ریسپانسیو در bootstrap

 

در این مقاله آموزش جدول در بوت استرپ را با کلاس table-condensed ، کلاس های متنی برای رنگی کردن سطر یا سلول جدول و ریسپانسیو کردن جدول ادامه خواهیم داد پس خواندن این مقاله را از دست ندهید. در قسمت اول آموزش جدول در بوت استرپ قبلی کلاس table-bordered ، کلاس table-hover و کلاس table-striped برای ایجاد جدول در بوت استرپ توضیح داده شد.

کلاس table-condensed

برای فشرده کردن جدول در بوت استرپ باید کلاس table-condensed را به تگ table اضافه کنیم. کلاس table-condensed با نصف کردن padding خانه ها جدول را متراکم می کند تا فضای کمتری اشغال کند. در کد زیر نحوه ی استفاده از این کلاس نشان داده شده است.

<table class="table table-condensed">
<thead>
 <tr>
  <td>Class</td>
  <td>Description</td>
 </tr>
</thead>
<tbody>
 <tr>
  <td>.active</td>
  <td>Applies the hover color to the table row or table cell</td>
 </tr>
 <tr>
  <td>.success</td>
  <td>Indicates a successful or positive action</td>
 </tr>
 <tr>
  <td>.info</td>
  <td>Indicates a neutral informative change or action</td>
 </tr>
</tbody>
</table>

خروجی این کد را می توانید در تصویر زیر مشاهده کنید.

جدول فشرده در بوت استرپکلاس table-condensed

کلاس های متنی برای تغییر رنگ جدول

با استفاده از کلاس های متنی در بوت استرپ می توان یک سطر ( همان tr ) یا یک سلول ( همان td ) را در جداول رنگی کرد. این کلاس ها عبارتند از active، success، info، warning و danger که هر کدام رنگ خاصی را به سطر یا سلول جدول نسبت می دهند و هر رنگ کاربرد خاص خود را دارد.

کاربرد رنگ کلاس های متنی به شرح زیر می باشد:

active: هنگام رویداد hover روی سلول یا سطری که این کلاس را دارد، رنگ اعمال می کند.
success: نشان دهنده ی یک عمل موفقیت آمیز در سطر یا سلول مورد نظر می باشد.
info: زمانی از این کلاس برای رنگی کردن جدول استفاده می شود، که بخواهیم نشان دهیم سطر یا سلول جدول حاوی اطلاعات آموزنده و خنثی است.
warning: برای مشخص کردن اخطار از این کلاس استفاده می شود.
danger: جهت نمایش دادن یک عمل خطرناک یا منفی از کلاس danger استفاده می شود.

در کد زیر از این کلاس ها استفاده شده است.

<table class="table">
<thead>
 <tr>
  <td>Class</td>
  <td>Description</td>
 </tr>
</thead>
<tbody>
 <tr class="active">
  <td>.active</td>
  <td>Applies the hover color to the table row or table cell</td>
 </tr>
 <tr class="success">
  <td>.success</td>
  <td>Indicates a successful or positive action</td>
 </tr>
 <tr class="info">
  <td>.info</td>
  <td>Indicates a neutral informative change or action</td>
 </tr>
 <tr class="warning">
  <td>.warning</td>
  <td>Indicates a warning that might need attention</td>
 </tr>
 <tr class="danger">
  <td>.danger</td>
  <td>Indicates a dangerous or potentially negative action</td>
 </tr>
</tbody>
</table>

خروجی کد بالا به صورت زیر است:

جدول در بوت استرپکلاس های متنی برای تغییر رنگ جدول

ریسپانسیو کردن جدول در بوت استرپ

تا این جای کار با ایجاد جدول آشنا شدید حال می خواهیم ریسپانسیو کردن جدول در بوت استرپ را به شما آموزش دهیم. برای ریسپانسیو کردن جدول کافی است کلاس table-responsive را به یک div اضافه کنید و کدهای ایجاد جدول را در این div قرار دهید. به کد زیر دقت کنید.

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td>#</td>
<td>FirstName</td>
<td>LastName</td>
<td>Age</td>
<td>Email</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>23</td>
<td>AnnaPitt@yahoo.com</td>
</tr>
</tbody>
</table>
</div>

 

در صورتی که سایز مرورگرتان را تغییر دهید ( برای صفحه نمایش کمتر از 768px ) به جدول قابلیت اسکرول شدن افقی اضافه می شود. و اگر صفحه نمایش بیشتر از 768px باشد، جدول بدون تغییر نمایش داده می شود. در شکل زیر جدول بدون تغییر است.

جدول ریسپانسیو در بوت استرپجدول ریسپانسیو در صفحه نمایش بیشتر از 768px

در این شکل قابلیت اسکرول به جدول اضافه شده است.

آموزش جدول در bootstrapجدول ریسپانسیو در صفحه نمایش کمتر از 768px

 

آموزش جدول در بوت استرپ در این جا به پایان رسید. در مقالات بعد همچنان آموزش بوت استرپ را ادامه می دهیم همراه ما باشید.

درباره نویسنده :
مرضیه خیرخواه

مطالب مرتبط

modal ها در بوت استرپ

modal ها در بوت استرپ

مدال در بوت استرپ مدال یک پنجره  محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود.  برای ساخت modal نیاز به کدهای html  ، css وjava script  دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را […]

دکمه های گروهی در bootstrap

دکمه ها در بوت استرپ – قسمت دوم

دکمه های گروهی در بوت استرپ – آموزش بوت استرپ تیم طراحی سایت وب یار در این مقاله به آموزش دکمه ها در بوت استرپ می پردازد. در این آموزش شما با دکمه های گروهی در بوت استرپ، تنظیم سایز دکمه های گروهی، ایجاد دکمه های گروهی عمودی، Justified Button Groups ، ایجاد منوی کشویی […]

آموزش دکمه ها در بوت استرپ

دکمه ها در بوت استرپ – قسمت اول

دکمه ها در بوت استرپ – آموزش بوت استرپ در این مقاله تیم طراحی سایت وب یار آموزش دکمه ها در بوت استرپ را برای شما عزیزان در نظر گرفته است. در این آموزش شما با دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با […]

آموزش هشدارها در بوت استرپ

هشدارها در بوت استرپ – آموزش bootstrap

هشدارها در بوت استرپ در این مقاله آموزش بوت استرپ را با مبحث هشدارها در بوت استرپ ادامه می دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا خواهید شد. هشدارها در بوت استرپ برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید