0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی 09133886881 احمدپور

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 176
تاریخ بروزرسانی ۶ مرداد ۱۳۹۸

آموزش جدول در بوت استرپ جدول ریسپانسیو در 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

 

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

 

مطالب مرتبط
مطالعه :

ثبت نام ایران خودرو و ثبت نام سایپا یکی از پر درآمدترین کار های توافقی است که شما در این آموزش یادخواهید گرفت. با توجه به اینکه ثبت نام ایران خودرو تغییر یافته و همچنین ثبت نام سایپا به دو روش جدید انجام می گیرد در روش قدیم ثبت نام خودرو و روش جدید ثبت نام سایپا و ایرانخودرو با ما همراه باشید.

سئو سایت اصفهان
مطالعه : 20 دقیقه

سئو سایت اصفهان یکی از خدمات تیم طراحی سایت و سئو سایت وب یار می باشد. آیا تا کنون به سئو سایت خود فکر کرده اید؟ آیا می دانید برای بهینه سازی سایت خود چه فاکتورهایی را باید در نظر بگیرید؟

طراحی سایت حرفه ای در اصفهان
مطالعه :

در کلاس آموزش طراحی سایت اصفهان، طراحی وب سایت را به صورت عملی و پروژه محور به شما یاد خواهیم داد. طراحی سایت هم مثل هر تخصص دیگری باید به صورت عملی صورت گیرد تا بعداً بتوانید در بازار کار مشغول به فعالیت شوید.

تغییر پیش شماره های اصفهان
مطالعه :

تغییر پیش شماره اصفهان و شهرستان ها و دانلود لیست جدید طراحی سایت اصفهان و سئو سایت اصفهان وب یار با ارائه خدمات تخصصی به دنبال افزایش فروش و رونق کسب و کار مشتریان خود می باشد. شهرستان اردستان شهر اصفهان ​​ شهرستان آران و بیدگل ​​ شهرستان برخوار شهرستان نطنز​ توابع اصفهان​​​ شهرستان تیران و کرون​​ شهرستان چادگان شهرستان خمینی شهر​​ شهرستان خوانسار​​ شهرستان خورو بیابانک​​​ شهرستان دهاقان ​شهرستان سمیرم​​ شهرستان شاهین شهر و میمه​ شهرستان شهرضا​ شهرستان فریدن​ شهرستان فریدونشهر​ شهرستان فلاورجان​ شهرستان کاشان​ شهرستان گلپایگان شهرستان لنجان ​شهرستان مبارکه​ شهرستان نائین​ شهرستان نجف آباد برای تهیه لیست زیر بسیار وقت گذاشته شده و در یک فایل متن ساده و راحت آماده شده تا هر چه سریعتر کار اداری شما انجام گردد چون وقتتان خیلی با ارزش است طراحی سایت حرفه ای در اختیار داشتن یک سایت حرفه ای و حضور موثر در فضای مجازی و تجارت الکترونیک، از مهمترین ملزومات دنیای امروزی برای کسب درآمد عالی از این بستر جذاب است. تیم طراحی سایت اصفهان وب یار با ارائه سرویس های ویژه طراحی سایت ، سئو و اینترنت مارکتینگ این امکان را به شما می دهد که توسط طراحی سایت حرفه ای در میان برند مشاغل و شرکت های ملی و بین المللی، شناخته شده و به رقابت و کسب درآمد عالی بپردازید.   کلاس آموزش طراحی […]

آرایه ها در جاوا اسکریپت
مطالعه : 8 دقیقه

آرایه ها در جاوا اسکریپت جلسه هفتم     بعد از یادگیری انواع داده ها در جاوا اسکریپت نوبت به بحث آرایه ها میرسد که در این مطلب به توضیح موارد زیر که برای بحث آرایه ها در جاوا اسکریپت می باشد می پردازیم.   • آرایه چیست؟ • شکل کلی آرایه • نحوه ی دسترسی به آرایه • متدهای آرایه • متد ()length • متد()concat • متد ()join • متد ()pop • متد ()Push • متد ()splice • متد ()Slice   آرایه چیست؟ آرایه یک نوع خاص از متغیر ها است که با یک نام و نوع داده می توان چندین مقدار را در آن ذخیره کرد ، استفاده می شود. شکل کلی آرایه شکل کلی آرایه به صورت زیر می باشد که array-name نام آرایه است و item آیتم های آرایه می باشد. var array-name = [item1, item2, …]; می خواهیم آرایه ای برای فروشندگان تعریف کنیم که در هر جای دیگر احتیاج به مشخصات فروشندگان داشتیم نیازی به تکرار همه ی اطلاعات نداشته باشیم. در مثال زیر میبینید که نام آرایه shop می باشد ‎و محصولات با نام های مربوطه در قسمت item نوشته شدند. <p id=”demo”>pen,eraiser,ball</p> <script> var shop = [“pen”, “eraiser”, “ball”]; document.getElementById(“demo”).innerHTML = shop; </script> اولین خانه ی آرایه با محتوای والیبال پر می شود. می دانیم که خانه های آرایه از 0 شروع […]

فریم ورک های جاوا اسکریپت
مطالعه : 10 دقیقه

 Best Javascript Frameworks 2019   منظور از فریم ورک جاوا اسکریپت چیست؟ در دنیای برنامه نویسی و توسعه، عبارت « فریم ورک جاوا اسکریپت » به کتابخانه ای از جاوا اسکریپت اشاره می کند که رابط های کاربری تعاملی و داده محور ارائه می دهد. این فریم ورک ها به گونه ای طراحی شده اند که در هنگام ایجاد تعامل با استفاده از یک برنامه یا رابط، به تهیه داده برای کاربران کمک می کنند. فریم ورک های جاوا اسکریپت با یکدیگر متفاوت اند اما هدف نهایشان یکی است: نمایش داده های جدید به محض اینکه کاربر، یک اقدام تعاملی را آغاز می کند. با تیم طراحی سایت اصفهان وب یار همراه باشید تا مروری بر ویژگی های محبوب چند مورد از فریم ورک های جاوا اسکریپت داشته باشیم.   خصوصیات فریم ورک های جاوا اسکریپت   1) موثر بودن: شما می توانید برنامه های موبایل، دسکتاپ و یا سایر رابط های کاربری سطح بالا را در مدت چند هفته و یا حتی چند روز بسازید! 2) امن بودن: همه فریم ورک های رایج و محبوب جاوا اسکریپت دارای تنظیمات امنیتی مطمئن هستند. طیف وسیعی از برنامه نویسان، تست کنندگان و کاربران نیز از این فریم ورک ها پشتیبانی می کنند. 3) کم هزینه بودن بیشتر فریم ورک های جاوا اسکریپت به صورت متن باز (open-source) و رایگان هستند که […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *