0

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

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

bootstrap

آموزش طراحی سایت ریسپانسیو
مطالعه :

طراحی سایت ریسپانسیو مفهوم طراحی سایت Responsive یا طراحی سایت ریسپانسیو با توجه به اینکه امروزه فناوری اطلاعات و اینترنت بخش بزرگی از زندگی روزمره را در برگرفته است و می بایست طیف گسترده ی دستگاه هایی که با استفاده از آنها می توان به اینترنت دسترسی داشت را در نظر گرفت، مطرح گردید. بنابراین انعطاف پذیری سایت، یا طراحی سایت Responsive یکی از مهمترین شاخص های یک طراحی سایت با کیفیت است. و البته عامل پیشرفت کسب و کار اینترنتی می گردد. در این مقاله قصد داریم بهتر و دقیق تر به این موضوع بپردازیم.   طراحی سایت واکنش گرا (Responsive) چیست؟ طراحی سایت ریسپانسیو یا واکنش گرا (Responsive) به سایتی گفته می شود که با توجه به دستگاهی که کاربر برای مشاهده سایت استفاده می‌کند واکنش نشان می‌دهد. بنابراین سایت واکنش گرا (Responsive) بدین معنا است که اگر با تبلت، گوشی یا هر وسیله دیگر با هر اندازه که باشد به یک سایت واکنش گرا مراجعه کنید، طول و عرض سایت هم اندازه با دستگاه شما خواهد شد. در ادامه به اهمیت طراحی سایت واکنش گرا می پردازیم. اهمیت طراحی سایت واکنش گرا(Responsive) یک طراحی سایت Responsive می تواند بسیار به رشد و کیفیت سایت شما کمک کند. باتوجه به آمارهای اخیر بسیاری از کاربران متصل به اینترنت از گوشی یا تبلت خود استفاده می‌کنند، که ایران از […]

آموزش جدول ریسپانسیو در bootstrap
مطالعه :

آموزش جدول در بوت استرپ – جدول ریسپانسیو در 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 ) یا یک سلول ( همان […]

آموزش ایجاد جدول در bootstrap
مطالعه :

آموزش ایجاد جدول در 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 […]

طراحی سایت ریسپانسیو
مطالعه :

مفهوم طراحی سایت Responsive یا طراحی سایت ریسپانسیو با توجه به اینکه امروزه فناوری اطلاعات و اینترنت بخش بزرگی از زندگی روزمره را در برگرفته است و می بایست طیف گسترده ی دستگاه هایی که با استفاده از آنها می توان به اینترنت دسترسی داشت را در نظر گرفت، مطرح گردید. بنابراین انعطاف پذیری سایت، یا طراحی سایت Responsive یکی از مهمترین شاخص های یک طراحی سایت با کیفیت است. و البته عامل پیشرفت کسب و کار اینترنتی می گردد. در این مقاله قصد داریم بهتر و دقیق تر به این موضوع بپردازیم. طراحی سایت ریسپانسیو چیست؟ طراحی ریسپانسیو (responsive) یا واکنش گرا، طراحی سایت به روشی است که سایت با ابعاد و رزولوشن دستگاه های مختلف سازگاری داشته باشد. در طراحی سایت ریسپانسیو، کاربران در تمامی دستگاه ها  مانند تلفن های همراه، لپ تاپ، تبلت و یا نمایشگرهای بزرگ مانند کامپیوتر های رومیزی می توانند به راحتی سایت را بررسی کنند و دیگر نیازی نیست که سایز صفحه را تغییر دهند و از عملیات ZOOM استفاده کنند. حدود 50 درصد از کاربران اینترنتی از گوشی موبایل برای مشاهده سایت ها استفاده می کنند. حال در نظر بگیرید که یک سایت ریسپانسیو نباشد و به درستی در تلفن های همراه نمایش داده نشود، در این صورت این سایت تعداد زیادی از کاربران را از دست خواهد داد. در این جا ممکن است این سوال پیش بیاید […]

modal ها در بوت استرپ
مطالعه :

مدال در بوت استرپ از افزونه مودال جاوا اسکریپت Bootstrap برای افزودن دیالوگ هایی به سایت خود برای لایت باکس ها، اعلان های کاربر یا محتوای کاملاً سفارشی استفاده می شود. مدال یک پنجره  محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود. برای ساخت modal نیاز به کدهای html ، css و java script دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را برای ما آسان کرده و لازم به کدنویسی های پیشرفته ای نداریم. با طراحی سایت اصفهان وب یار همراه باشید تا نحوه ی ایجاد modal در بوت استرپ را به شما آموزش دهیم. نحوه کارکرد مدال بوت استرپ قبل از شروع کار با مؤلفه مدال Bootstrap، حتماً موارد زیر را مرور کنید زیرا گزینه‌های منو در سال های اخیر تغییر کرده است. مدال ها با HTML، CSS و جاوا اسکریپت ساخته می شوند. آنها روی هر چیز دیگری در سند قرار می گیرند و اسکرول را از <body> حذف می کنند تا محتوای مدال به جای آن اسکرول شود. با کلیک بر روی “backdrop” به طور خودکار مودال بسته می شود. بوت استرپ هر بار فقط از یک پنجره مدال پشتیبانی می کند. و مدال‌های تودرتو پشتیبانی نمی‌شوند، زیرا این نوع مدال ها تجربه کاربری ضعیفی را […]

اسلایدر در بوت استرپ
مطالعه :

آموزش اسلایدر در بوت استرپ Carousel اسلایدری است که برای نمایش تصاویر، نوشته­ ها، ویدئو و انیمیشن­ های متحرک به کار می رود. پوسته  اصلی اسلایدشو ها تصاویر می باشند. در صفحه تنها می توان از یک Carousel استفاده کرد. برای ساخت اسلایدر حرفه ای با استفاده از بوت استرپ با تیم طراحی سایت اصفهان وب یار همراه باشید. مثال زیر نشان می دهد که چگونه می توان یک Carousel ساده را با استفاده از کد های Bootstrap ایجاد کرد.

اسلایدشو برای عملکرد مناسب کنترل های خود  نیاز به یک شناسه (در این مورد id=”myCarousel”) دارد.   <div> خارجی در این کد، ” class=”carousel مشخص می کند که این div حاوی Carousel می باشد. کلاس slide افکت های transition و animation را اضافه می کند که باعت ایجاد حالت اسلایدی برای عکس ها در هنگام نمایش آیتم های بعدی می شود. ویژگی data-ride=”carousel” به Bootstrap می گوید که بلافاصله پس از بارگذاری صفحات حرکت انیمیشنی Carousel را شروع می کند.   بخش  Indicators  Indicators ها نقطه های کوچکی در پایین هر اسلاید هستند که نشان می دهد چند آیتم در carousel وجود دارد. Indicators ها در یک لیست مرتب با کلاس .carousel-indicators مشخص می شوند. خصوصیت data-target به id carousel اشاره می کند. خصوصیت data-slide-to مشخص می کند که هنگام کلیک کردن بر روی یک دکمه ی خاص باید به کدام […]