آموزش جدول در بوت استرپ از ایجاد تا ریسپانسیو
آموزش ایجاد جدول در Bootstrap
با سلام به همراهان همیشگی تیم طراحی سایت اصفهان وب یار، این جلسه در راستای یادگیری بوت استرپ با آموزش جدول در بوت استرپ همراه شما عزیزان هستیم. در مقالات گذشته نحوه ی شبکه بندی در بوت استرپ و استایل دهی به متن در بوت استرپ آموزش داده شد.
در این آموزش به ایجاد جدول، کلاس table-bordered ، کلاس table-hover و کلاس table-striped پرداخته می شود. همراه ما باشید تا خیلی واضح و ساده با جدول در بوت استرپ آشنا شوید.
ایجاد جدول در بوت استرپ
برای ایجاد جدول در بوت استرپ از کلاس table در تگ table استفاده می کنیم. جدول پایه بوت استرپ به طور پیش فرض شامل خطوط افقی است و padding دارد. کلاس table، استایل مقدماتی را به جدول اضافه می کند و کلاس table-striped جدول را به صورت راه راه در می آورد. در کد زیر با نحوه ی استفاده از این کلاس ها آشنا می شوید.
<table class="table">
<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>
<br><br>
<table class="table table-striped" style="background:#b3b3ff;">
<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>.warning</td>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<td>.danger</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
همانطور که می دانید تگ tr برای ایجاد سطر و تگ td برای ایجاد ستون در جدول است. تگ thead و تگ tbody به ترتیب برای هدر جدول و بدنه ی اصلی جدول استفاده می شوند.
خروجی کد بالا به صورت زیر می باشد.
کلاس table-bordered
کلاس table-bordered برای ایجاد کادر در اطراف و درون جدول است. به کد زیر دقت کنید.
<table class="table table-bordered">
<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-hover
کلاس table-hover به قسمت tbody جدول خاصیت hover را می دهد. یعنی روی هر سطر جدول که بروید، رنگ آن تغییر می کند. در کد زیر نحوه ی استفاده از این کلاس نشان داده شده است.
<table class="table table-hover" style="background:#b3b3ff;">
<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>
خروجی به صورت زیر می باشد. همانطور که در شکل مشاهده می کنید زمانی که ماوس را روی سطرهای جدول نگه می داریم، رنگ آن تغییر می کند.
آموزش جدول در بوت استرپ – جدول ریسپانسیو در bootstrap
در ادامه این مقاله آموزش جدول در بوت استرپ را با کلاس table-condensed ، کلاس های متنی برای رنگی کردن سطر یا سلول جدول و ریسپانسیو کردن جدول ادامه خواهیم داد.
کلاس 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
در این شکل قابلیت اسکرول به جدول اضافه شده است.
جدول ریسپانسیو در صفحه نمایش کمتر از 768px
آموزش جدول در بوت استرپ در این جا به پایان رسید. برای مطالعه سایر مقالات حوزه بوت استرپ به مقاله مرجع آموزش بوت استرپ مراجعه کنید.
دقیفا مفهوم تبلیغات چیست و چه جایگاهی دارد؟کسب و کار ها تا چه اندازه وابسته به تبلیغات هستند؟تبلیغ در کدام پلتفرم ها برای من سود بیشتری دارد؟ “بسیاری از چیز های کوچک ، به واسطه تبلیغات صحیح بزرگ شده اند.“ مارک تواین تبلیغات چیست و چرا تبلیغات انجام می دهیم؟ از زمان های خیلی دور و حتی قبل از شکل گیری صنعت تبلیغات به صورت گسترده امروزی ، از تبلیغات به عنوان وسیله یا روشی برای ارتقا جایگاه یک محصول یا خدمت در اذهان جامعه و یا یک جامعه هدف خاص استفاده می شد. اما به مرور زمان با افزایش رقابت در بین کسب و کار ها و برند ها ، رویکرد ترفیع جایگاه برند در جامعه ، دچار اختلال شد. در آن زمان افراد زیادی در معرض تبلیغات و پیام های تبلیغاتی قرار می گرفتند که البته بیشتر این افراد ، از مخاطبان و جز جامعه هدف این دسته از تبلیغات نبودند ، از این رو ، تبلیغات روز به روز تاثیر خود را بر فکر و عملکرد مردم ، از دست می دادند که نتیجه این امر ، کاهش استفاده مفید و کارآمد از بودجه بندی تبلیغاتی بود. امروزه با وجود رقابت های سنگین تبلیغاتی ، عرصه تبلیغات برای شرکت ها و کسب و کار ها ، بسیار پرهزینه هستند و اگر به درستی از ابزار ها و […]
قبل از شروع نوشتن محتوای این مقاله به نظرم رسید که خالی از لطف نیست تا جمله ای از یکی از بزرگان صنعت برنامه نویسی یعنی نیکلاس نگروپونته را برای شما عزیزان علاقه مند به حوزه برنامه نویسی ، بیان کنم .ایشان در یکی از سخنرانی های خود درباره برنامه نویسی اینطوری می فرمایند:“برنامه‌نویسی این امکان رو به شما می‌ده تا در مورد خودِ «فکر کردن» فکر کنید و وقتی هم که دیباگ می‌کنید، در مورد خودِ «یادگیری» یاد می‌گیرید.”و در حقیقت نیز نیز همین طور است.اگر روش صحیح درست فکر کردن و یادگیری را بلد نباشیم ، به هیچ وجه ، قادر نخواهیم بود برنامه نویسی را به صورت حرفه ای پیش ببریم. خوب بریم سر اصل مطلب ، یعنی برسی جدید ترین و نو ظهور ترین زبان های برنامه نویسی. مقدمه امروزه با پیشرفت روز افزون تکنولوژی و وابستگی کسب و کار ها به صنعت دیجیتال ، اهمیت برنامه نویسان و توسعه دهندگان همه زمینه ها ، روز به روز افزایش میابد؛ این بدان معنا است که چه برنامه نویس هستید و چه کارفرما ، این بسیار اهمیت دارد که حداقل آگاهی های لازم را از دانش برنامه نویسی داشته باشید.اما دانستن یک زبان برنامه نویسی به تنهایی مشکلی را حل نمی کند و شما می بایست با جدید ترین متد ها و زبان ها آشنایی داشته باشید.زبان […]
از بلاک اکشن ها چه می دانید؟ آیا تا به حال محدودیت های بلاک اکشن برای شما اعمال شده است؟اصلا در چه صورتی محدودیت های بلاک اکشن، برای شما اعمال می شود؟اگر اکانت اینستاگرام ما بلاک شد ، چه کاری از دست ما بر می آید؟ به طور کلی، بیشتر سامانه ها و وب اپلیکیشن ها ، برای فعالیت کاربران خود ، محدودیت هایی را به منظور جلوگیری از سوء استفاده های ناشی از فعالیت ربات ها ، اعمال می کنند و در صورتی که رفتار کاربری ، ربات گونه تشخیص داده شود ، در مرحله اول دسترسی این کاربر به برخی از خدمات و بخش های اپلیکشن محدود شده یا به عبارتی بلاک اکشن می شود.به دلیل آنکه بلاک اکشن شدن ، بیشتر در اینستاگرام ، دامن گیر ما می شود ، در ادامه موضوع اکشن بلاک را با محوریت اینستاگرام ، پیش خواهیم برد.در ادامه مقاله با ما همراه باشید. اینستاگرام من را بلک کرده ،این دقیقا یعنی چی؟ در صورتی که فعالیت های معمول شما در این پلتفرم(لایک ، کامنت ، فالو ، پست ، اشتراک گذاری استوری و پست یا هر اقدام دیگری) ، مسدود شده یا فعال نمی باشد ، اینساگرام ، محدودیت های بلاک اکشن را برای شما فعال نموده و این بدان معناست که شما قادر به لایک کردن یا دنبال کردن […]
یادگیری زبان برنامه نویسی ، نیاز هر انسانی است که در دنیای امروز ما زندگی می کند.اما ممکن است یادگیری برنامه نویسی ترسناک و دلهره آور به نظر برسد؛ اما با انتخاب درست زبان برنامه نویسی ، این نگرانی تا حد زیادی بی معنا می شود. به جرعت می توان گفت این نگرانی با وجود منابع آفلاین و آنلاین در دسترس مانند w3schools که بهترین آموزش ها را به صورت رایگان در اختیار همگان قرار می دهند ، امری بی مورد است ، به طوری که امروزه یک کودک نیز این امکان را دارد تا یک زبان برنامه نویسی را از ابتدا بیاموزد و شروع به برنامه نویسی نماید.اما مسئله در حوزه یادگیری زبان برنامه نویسی ، تنها منابع یادگیری نیستند ، بلکه فردی که اراده نموده تا وارد دنیای جذاب و بی مثال برنامه نویسی شود ، باید مسیر درستی را طی کند تا به قدرت نوشتن برنامه های سطح بالا و ارزشمند ، دست یابد. در ادامه با ما در این مقاله همراه باشید، مطمئناً در انتهای ایم مقاله از سردرگمی شما برای شروع برنامه نویسی ، کاسته خواهد شد. در چه حوزه ای علاقه مند به فعالیت هستید؟ برای اینکه بتوان زبان مناسبی را برای شروع انتخاب و برای یادگیری آن برنامه ریزی کرد ، باید این موضوع را دانست که زبان های برنامه نوسی زیادی […]
حتما شما هم آوازه برنامه نویسی و برنامه نویس شدن به گوشتان خورده و احتمالا به این فکر کرده اید که برنامه نویس شوید. در این مقاله از وب یار شما را راهنمایی خواهیم کرد و به شما نشان خواهیم داد که اصلا برای این رشته ساخته شده اید یا خیر. اول همه و قبل از هر توضیحی ، باید به این نکته توجه کنید که برای برنامه نویس شدن مانند تمام تخصص های دنیا ، می بایست ابتدا ، مبتدی باشید و به خودتان اجازه برنامه نویس مبتدی بودن را بدهید. اگر متوجه منظور من نشدید اشکال ندارد ، در ادامه کامل تر توضیح خواهم داد. برنامه نویسی برای مبتدیان برنامه نویسی یکی از سرگرم کننده ترین و جذاب ترین حرفه ها و مشاغل دنیاست که در این حرفه ، فرد برنامه نویس توانایی برقراری ارتباط با یک ماشین را دارد. این برقراری ارتباط ، به وسیله زبان های برنامه نویسی انجام می شوند ، اما به عنوان یک برنامه نویس مبتدی باید بدانید که کجای راه هستید و اگر هنوز مسیر و راه خود را آغز ننموده اید ، پیشنهاد می کنم که حتما این کار را انجام دهید. چرا مهم است که زمینه فعالیت خود را مشخص کنیم؟ به دلیل اینکه همیشه یک برنامه نویس مبتدی باقی نمانید. به عبارت دیگر از ابتدا ، باید در زمینه […]
روزبه‌روز به تعداد افرادی که با استفاده از دستگاه موبایل خود وب را مرور می‌کنند افزوده می‌شود، از این رو ساخت و طراحی کردن سایت‌هایی که برای مرورگرهای موبایل هستند نسبت به گذشته از اهمیت چندانی برخودار شده‌است. در این مقاله قصد داریم به شما عزیزان نحوه ساخت وبسایت با گوشی را آموزش بدهیم. ساخت وب سایت با اپلیکیشن با پیشرفت روزافزون تکنولوژی، اپلیکیشن‌های گوشی هوشمند نیز از این قافله عقب نمانده و یک قدم فراتر برداشته‌اند. آن‌ها این امکان را به افراد می‌دهند تا بتوانند از طریق گوشی و تبلت خود به ساخت و ویرایش یک وبسایت بپردازند. اگر شما به دنبال تبلیغات و ایجاد یک کسب‌وکار هستید، ساخت و داشتن یک وبسایت ضروری است. این امکانی است اپلیکیشن‌ها در اختیار کاربران گذاشته‌اند تا با استفاده از آن‌ها بتوانند به راحتی وبسایت مورد نظر خود را بسازند. برخی از این اپلیکشین‌ها عبارت‌اند از: ۱.اپلیکیشن Milkshake اگر در ساخت وبسایت عجله دارید، به شما استفاده از اپلیکیشن Milkshake را پیشنهاد می‌کنیم. این اپلیکشین یک وبسایت ساز فوری است که این امکان را به شما می‌دهد تا در چند دقیقه بتوانید یک وبسایت برای خودتان بسازید. برای ساخت وبسایت با گوشی با استفاده از این اپلیکیشن لازم است ابتدا یک طرح را انتخاب کنید، سپس اطلاعات خود را وارد نموده و در آخر لینک‌ها را پیوست نمایید. این اپلیکشین به دلیل […]