0

هیچ محصولی در سبد خرید نیست.

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

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1050
تاریخ بروزرسانی ۱۰ آبان ۱۳۹۹

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

 

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

 

مطالب مرتبط
آموزش طراحی فلت
مطالعه :

آموزش طراحی فلت در اصفهان حالا چند وقتیه که  اصطلاح طراحی فلت خیلی باب شده,البته بهتر بگم چندین سال,من هم امروز تصمیم گرفتم درباره ی طراحی فلت پست جدیدی در وب یار قرار بدهم,تا کسانیکه مایل به دانستن اطلاعات درباره ی طراحی فلت هستند,به اطلاعاتی جامع و کامل از طراحی فلت برسند. خب حالا قدم‌به‌قدم تاانتهای این پست با من باشید تا ببنید که چه مطالب مفیدی از طراحی فلت دستتون میاد. خب خیلی وقتتون رو نمی‌گیرم و سریع شروع میکنم. اول از همه:طراحی فلت چیست (flat design) طراحی فلت به نوع جدیدی از طراحی گفته میشود که اول ازهمه در کشورهای خارجی باب شد. که در آن از نوع خاصی از رنگ ها ,آیکون ها و محدودیت های خاص خودش استفاده میشه و یه شعار خاص. در واقع همه چیز ساده است اما زیبا… در طراحی تخت به مانند طراحی سنتی دیگر از سایه‌های مخلتف ، گرادینت‌ها ، آنیمیشن‌ها ، تکسچرها و پترنها استفاده نمی‌شود.این نوع طراحی clean ، ساده و دارای یک ساختار تمیز و مرتب است ، فضای خالی زیاد دارد ، رنگ‌ها روشن، ساده و یکپارچه هستند، همه‌ی المان‌ها ۲ بعدی می‌باشند ، گوشه‌ها شارپ هستند ، روی تایپوگرافی نوشته‌ها کار شده است و دکمه‌ها و المان‌ها یک دست بدون سایه و برآمدگی هستند.نمونه های معروف شروع به کار طراحی فلت رو در طراحی ویندوز ۸ […]

آموزش تگ های معنایی HTML5
مطالعه :

آموزش طراحی سایت HTML5 – تگ های معنایی در مقاله ی قبلی آموزش طراحی سایت HTML5 را شروع کردیم و درباره ی تگ های معنایی صحبت کردیم. در این مقاله به ادامه ی آموزش تگ های معنایی می پردازیم. همانطور که قبلاً هم اشاره کردیم استفاده از این تگ ها در طراحی سایت باعث می شود تا هم برنامه نویسان و هم موتورهای جستجو ساختار سایت را به آسانی تشخیص دهند و در سئوی سایت تاثیر مثبت دارد. در این آموزش درباره ی تگ های section ، aside و nav صحبت می کنیم. پس خواندن این مقاله که توسط تیم طراحی سایت اصفهان وب یار تهیه شده را  از دست ندهید.   عنصر section در HTML5 تگ section که یک تگ جدید و از تگ های معنایی HTML5 است، یک بخش مجزا در سند تعریف می کند. در واقع از این تگ برای محتواهایی استفاده می شود که با هم ارتباط معنایی دارند و معمولاً برای این محتواها می توانیم یک heading تعریف کنیم. تگ section از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند. در جدول زیر اولین نسخه ای از مرورگرها که از این تگ پشتیبانی می کنند، نشان داده شده است. FirefoxoperaInternet explorersafarichrome4.011.19.05.06.0 در کد زیر می توانید نحوه ی استفاده از عنصر section را مشاهده کنید. <!DOCTYPE html> <html> <head> </head> <body> <section> […]

آموزش بوت استرپ
مطالعه :

مقدمه – آموزش بوت استرپ با سلام به وب یاری های عزیز، این جلسه آموزش بوت استرپ را با آموزش کلاس های well  و jumbotron ادامه می دهیم. همچنین این جلسه با ایجاد header برای صفحه در بوت استرپ آشنا خواهید شد. پس در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید.   کلاس well در بوت استرپ با استفاده از کلاس well می توان یک کادر با گوشه های گرد و پس زمینه ی خاکستری رنگ در اطراف یک عنصر ایجاد کرد. برای استفاده شی well کافی است کلاس well را به یک div اضافه کنید. همچنین این کلاس مقداری padding دارد. لازم به ذکر است که به طور پیش فرض اندازه ی شی well در حالت متوسط قرار دارد که با استفاده از کلاس های well-sm و well-lg می توان این سایز را تغییر داد. کلاس well-sm برای کوچکتر نشان دادن شی well استفاده می شود. کلاس well-lg برای بزرگتر نشان دادن سایز well در بوت استرپ به کار برده می شود. در کد زیر نحوه ی استفاده از این کلاس ها نشان داده شده است. <div class=”well”>well class in Bootstrap</div> <div class=”well well-sm”>well-sm class in Bootstrap</div> <div class=”well well-lg”>well-lg class in Bootstrap</div>   خروجی این کد را می توانید در تصویر زیر مشاهده کنید.   آموزش کلاس jumbotron در بوت استرپ برای جلب توجه کاربران […]

مطالعه :

آپلود فایل در php معمولا در بعضی از سایت ها لازم می شود که فرمی را در سایت تعبیه نموده که توسط آن کاربران بتوانند فایل های مورد نظر خود را در سایت آپلود نمایند ( از جمله آپلود فایل رزومه ، عکس و…). حال قبل از آموزش آپلود فایل در php و کدنویسی فرم ارسال فایل لازم است که ابتدا مطمئن شوید که تنظیمات آن فعال است. برای این کار اول باید فایل php.ini را بررسی نمایید و file_uploads را به حالت on قرار دهید. روش دسترسی به فایل php.ini در لوکال هاست و cpanel در ادامه آموزش داده شده است.   آموزش آپلود فایل در php   Php.ini  در لوکال هاست (نرم افزار Xamp) این فایل در وب سرور Xampp با توجه به نسخه های مختلف ، عموما در مسیر های زیر وجود دارد: \xampp\php\php.ini \xampp\apache\bin\php.ini \xampp\etc\php.ini       این قطعه کد ابتدا یک فرم آپلود ایجاد نموده و سپس اطلاعات موردنظر خود را به فایل upload.php می فرستد تا برروی آن اطلاعات را پردازش کند. درون تگ input ، مشخصه type را برابر file قرار داده‌ایم تا اعلام کنیم که نوع ورودی، به صورت فایل می‌باشد. بنابراین درون فرم، یک دکمه browse به کاربر نمایش داده‌می‌شود تا با آن بتواند فایل موردنظر را از کامپیوتر خود انتخاب نماید.   کدنویسی قسمت php فایل upload.php را ایجاد […]

آموزش کار با مسنجر تلگرام(ترفندهای تلگرام)
مطالعه :

آموزش کار با مسنجر تلگرام و ترفندهای تلگرام دانلود آموزش ارسال انبوه و تبلیغات به لیست شماره ها و انبوه کاربران تلگرام(ارسال اس ام اس به تلگرام) بر اساس مناطق و شماره های شما در حال حاضر قابلیت ارسال تا 90 هزار عدد در ماه آماده ارسال می باشد. تست شده در تاریخ 15 آذر 99 با ارسال روزانه بیش از 3 هزار ارسال بدون هزینه پنل .   تمامی نرم افزار های ارسال رایگان به لیست مخاطبان تلگرام همراه با تست و آموزش و بروزترین ورژن ها بصورت هدیه در پکیج خدمتتان قرار داده شده . امروزه مسنجر تلگرام یکی از محبوب ترین مسنجرها در میان مسنجرهایی از قبیل واتس آپ, لاین,وایبر,و اینستاگرام است,علت این موضوع هم امکانات تلگرام از قبیل امکان ارسال پیام صوتی به صورت گروهی,امکان ارسال انواع فایل ازقبیل ویدیو,صوت,عکس تا حجم حداکثر ۱۰۰۰ مگابایت,دارا بودن  سیستم رمز نگاری فوق العاده قدرتمند برای مسایل امنیتی,۱۰۰% رایگان(بر خلاف مسنجری همچون واتس آپ که بعد از مدتها باید هزینه پرداخت کرد. ). چنانچه در نحوه نصب تلگرام بر روی کامپیوتر مشکل دارید مطلب آموزش تصویری نصب تلگرام بر روی کامپیوتر را بخوانید.   فوت و فن های تلگرم: اما خب اکثر افرادی که با تلگرام کار میکنند,در کار کردن با تلگرام مشکلات,ابهاماتی در ذهنشان دارند, همچنین حتی برخی از افرادی که شاید در کار کردن با تلگرام مشکلی […]

seoچیست؟
مطالعه : 20 دقیقه

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

دیدگاه ها

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

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