0

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

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

bootstrap

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

آموزش تصاویر در بوت استرپ     ایجاد عکس واکنش گرا در بوت استرپ   با سلام به همراهان همیشگی وب یار، این جلسه مبحث تصاویر در بوت استرپ را به شما آموزش می دهیم. در این مقاله به مباحثی از جمله  تصویر با لبه های گرد – عکس دایره ای – عکس بندانگشتی، ایجاد عکس واکنش گرا در بوت استرپ و ایجاد گالری تصاویر پرداخته می شود. در ادامه با تیم طراحی قالب وردپرس وب یار همراه باشید تا با تصاویر در بوت استرپ آشنا شوید.   انواع تصاویر استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد. کلاس img-rounded باعث گرد شدن گوشه های عکس می شود. کلاس img-circle عکس را به صورت دایره نمایش می دهد. کلاس img-thumbnail عکس مورد نظر را به صورت یک عکس بند انگشتی در می آورد. در کد زیر می توانید با نحوه ی استفاده از این کلاس ها آشنا شوید. <img src=”img/index.jpg” class=”img-rounded” alt=”tabiat” width=”200″ height=”140″> <img src=”img/images.jpg” class=”img-circle” alt=”tabiat” width=”140″ height=”140″> <img src=”img/index.jpg” class=”img-thumbnail” alt=”tabiat” width=”200″ height=”140″>   در شکل زیر می توانید انواع تصاویر را که با کد بالا ایجاد می شود […]

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

مطالعه :

آموزش بوت استرپ استایل دهی به متن در bootstrap با ادامه آموزش بوت استرپ bootstrap و این بار آموزش استایل دهی به متن در bootstrap توسط تیم طراحی سایت اصفهان وب یار در خدمت شما هستیم. در مقالهآموزش بوت استرپ استایل دهی به متن در bootstrap ،با معرفی تگ های mark,small,hgroup  در خدمت شما هستیم. در جلسه قبل با آموزش طراحی ریسپانسیو و بوت استرپ که مقدمه ای برای شروع آموزش بوت استرپ بود همراه شما بودیم.در مقاله ی آموزشی امروز تگ هایی برای استایل دهی به متن به شما آموزش داده خواهد شد. همچنین در این مقاله درباره ی کاربرد متن های رنگی در بوت استرپ و کلاس ها برای رنگ پس زمینه ی متن ها صحبت می شود. پس با ما همراه باشید تا با مثال های ساده و واضح این تگ ها را به شما آموزش دهیم.   تگ blockquote در بوت استرپ تگ blockquote برای نقل قول استفاده می شود. بوت استرپ به نقل قول ظاهر زیبایی می دهد. تنها کافی است که برای نقل قول از تگ blockquote استفاده شود. به کد زیر دقت کنید تا نحوه ی استفاده از این عنصر را یاد بگیرید. بوت استرپ این تگ را به صورتی که در خروجی زیر می بینید استایل دهی می کند. برای نشان دادن نقل قول در سمت راست از کلاس blockquote-reverse استفاده می کنیم. […]

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

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

صفحات واکنش گرا با flexbox
مطالعه :

باادامه ی آموزش های ساخت صفحات واکنش گرا(ریسپانسیو,Responsive (با استفاده از فلکس باکسFlexBox و خاصیت های  flex container در جلسه ی قبل و در ادامه با مباحث Flex items صفحات واکنش گرا با Flex Box و خاصیت FlexItem در خدمت شما هستیم. Flex items   flex-grow این خاصیت توانایی بزرگ شدن یک آیتم را تعیین میکند. این خاصیت یک مقدار عددی بدون واحد میپذیرد. مقدار پیشفرض آن ۰ است؛ یعنی آیتم‌ها توانایی بزرگ شدن را ندارند. در صورتی که flex container فضای خالی داشته باشد و به یک آیتم flex-grow: 1; بدهید، آن آیتم تا جایی بزرگ میشود که فضای خالی درون container از بین برود. دقت داشته باشید که هنگامی که خاصیت flex-direction فلکس container برابر row باشد، flex-grow بر عرض(width) آیتم اعمال میشود و اگر مقدار آن خاصیت برابر column باشد، flex-grow بر ارتفاع(height) اعمال میشود. ۱ ۲ ۳ .item2{ flex-grow: 1; } اگر به همه ی فلکس آیتم ها flex-grow: 1; بدهید، همه ی آنها به یک اندازه بزرگ میشوند. اگر در همین حالت مقدار flex-grow یکی از آیتم هارا ۲ قرار دهید، آن آیتم ۲ برابر دیگر آیتم خواهد شد. flex-shrink این خاصیت توانایی کوچک شدن یک آیتم را در صورت لزوم تعیین میکند. مقدار پیشفرض آن ۱ است، یعنی آیتم ها میتوانند کوچک شوند. اگر خاصیتflex-wrap فلکس container برابرnowrap باشد، آیتم ها تا زمانی که عرضشان به ۰ برسد کوچک میشوند. حال اگر در این صورت […]