0

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

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

طراحی سایت ریسپانسیو Responsive واکنش گرا

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
تعداد بازدید 225
تاریخ بروزرسانی ۱۲ دی ۱۳۹۴

طراحی سایت ریسپانسیو Responsive واکنش گرا

طراحی سایت ریسپانسیو Responsive واکنش گرا از مباحثی است که این روزها ذهن طراحان سایت ها و حتی مدیران سایت ها را به خود مشغول کرده است.اکثر کاربرانی که در حال جستجو در اینترنت هستند به صفحات وب سایت هایی که ریسپانسیو هستند بر میخورند, و متوجه میشوند که ظاهر وب سایت مورد نظر در تبلت آنها با گوشی همراه آنها و کامپیوتر شخصی شان فرق میکند,اما در کنار این نوع سایت ها وب سایت هایی نیز وجود دارند که قابلیت نمایش در گوشی های تلفن همراه یا تبلت ها را ندارند و برای دیدن قسمت های مختلف آن باید بر روی قسمت های مختلف سایت کلیک کرده و آن را زوم کنید تا آن چه که مورد نظرتان هست را ببینید,از همه بدتر وب سایت هایی هستند که محتوای سایت کلا به هم ریخته و برای کاربر و بازدید کننده غیر قابل استفاده می شوند, این جاست که نیاز به وب سایت های ریسپانسیو که ترجمه ی فارسی آن واکنش گرا میباشد احساس میشود. تیم طراحی سایت وب یار در همین راستا تصمیم گرفته است برای علاقمندان به یادگیری طراحی سایت ریسپانسیو به کمک بوت استرپ را در میان آموزش های سایت خود قدم به قدم بگنجاند.پیش تر نیز با آموزش طراحی سایت ریسپونسیو در خدمت شما بودیم اما از امروز به بعد تصمیم به قرار دادن آموزش های جامع تر برای شما عزیزان گرفته ایم.

بوت استرپ (Bootstrap) از محبوب ترین فریم ورک های سمت کلاینت برای طراحی صفحات وب است که شما با استفاده از آن می توانید سرعت طراحی سایت را افزایش دهید و همچنین اطمینان داشته باشید که سایت شما با همه ی مرورگرها و همه ی دیوایس ها سازگار است.

طراحی سایت ریسپانسیو Responsive  واکنش گرا

چراوب سایت های ریسپانسیو( واکنش گرا) ؟

برای آن که سایت های ریسپانسیو، سایت هایی هستند که خود را با اندازه ی صفحه نمایش  تلفن همراه یا تبلت به خوبی سازگار کرده و  انجام کار با آن ها بسیار روان و آسان می باشد, و این خود یک قابلیت بسیا ر بسیار و جذاب یرای کاربران وب سایت ها در هنگام استفاده از وب سایت ها میباشد. از دیگر مواردی که باعث اهمیت موضوع ریسپانسیو بودن سایت ها می شود تنوع سیستم عامل ها و مرورگر های موجود در بازار می باشد. سایت ریسپانسیو توانایی مچ شدن و سازگاری با انواع سیستم عامل ها (ویندوز – اندروید – لینوکس –  IOS– مکینتاش- یونیکس و…) و انواع مرورگر های جدید و قدیمی عرضه شده را دارند که این خود یکی از مهم ترین نقاط قوت این نوع سایت ها می باشد.

ایجاد صفحه وب با بوت استرپ

برای شروع کار کافی است یک فایل با پسوند html ایجاد کنید. در بوت استرپ به دلیل اینکه از دستورات html  و css استفاده می کنیم، ابتدا از اعلان DOCTYPE استفاده می کنیم. در تگ head ، برای اینکه صفحه ی وب واکنش گرا باشد از تگ meta استفاده می شود.
 در تگ meta ویژگی width=device-width بررسی می کند که عرض صفحه ی وب شما با عرض دستگاه های مختلف برابر باشد و ویژگی initial-scale=1 میزان زوم اولیه را هنگام لود شدن صفحه مشخص می کند. فایل css، کتابخانه ی جی کوئری و فایل جاوا اسکریپت بوت استرپ را هم باید در قسمت head  فراخوانی کنید.
به کد زیر دقت کنید با نوشتن این کد یک صفحه ی بوت استرپ ایجاد کرده ایم.

آموزش برنامه نویسی بوت استرپ

کلاس container در بوت استرپ

برای بسته بندی کردن محتوای سایت در بوت استرپ می توان از کلاس container یا container-fluid استفاده کرد.
کلاس container یک صفحه ی وب با عرض ثابت ایجاد می کند و سایت شما از چپ و راست کمی فاصله دارد و کلاس container-fluid کل عرض صفحه را می پوشاند و سایت شما از کناره ها فاصله نخواهد داشت.
در کد بالا از کلاس
container استفاده شده است و خروجی این کد به صورت زیر می باشد.

طراحی سایت واکنش گرا

شبکه بندی اولیه در بوت استرپ

بوت استرپ صفحه ی وب را به دوازده ستون تقسیم می کند و عناصر وب در این دوازده ستون قرار می گیرند. هر جا که نیاز باشد می توان با ادغام ستون ها، ستون بزرگتری ایجاد کرد. در تصویر زیر می توانید تقسیم بندی ها را مشاهده کنید. دقت کنید که جمع اعداد هر ردیف برابر با دوازده می شود.

 

شبکه بندی بوت استرپ

کلاس های شبکه بندی در بوت استرپ

  • Xs  برای تلفن های همراه
  • Sm  برای تبلت
  • Md  برای کامپیوترهای رومیزی
  • Lg  برای رایانه های بزرگتر

 Div با کلاس row برای ایجاد یک ردیف استفاده می شود. حالا باید با استفاده از کلاس های شبکه بندی ردیف ها را به ستون های دلخواه تقسیم کنید.  برای این کار کافی است از کلاس col استفاده کنید بعد از آن باید کلاس شبکه بندی را بنویسید و بعد از آن هم یک عدد قرار می دهیم که نشان دهنده ی پهنای ستون است.

به کد زیر دقت کنید:

آموزش کدهای بوت استرپ

با استفاده از کد بالا سه ستون مساوی ایجاد کردیم که با تغییر سایز مرورگر این سه ستون زیر هم قرار می گیرند. خروجی این کد به صورت زیر است.

آموزش طراحی سایت با بوت استرپ

آیا طراحی ریسپانسیو راه حل تمامی مشکلات جهت افزایش بازدید مشتریان است؟

اگر چه طراحی ریسپانسیو بسیار مهم است,اما نه همیشه. کاربران دسکتاپ اغلب دوست دارند تمام مطلب را ببینید و آن را بخوانند و از همه امکانات سایت استفاده کنند اما کاربران موبایل میخواهند همه چیز خلاصه باشد و خیلی سریع به همه امکانات سایت دسترسی داشته باشند.پس بهترین کا راین است که نوع کاربران خود رابشناسید.و متناسب با نوع کاربرانت اقدام به طراحی سایت بکنید,اما خب طراحی ریسپانسیو را دیگه نمیشه کنار گذاشت.خب در ادامه همراه ما باشید تا با آموزش طراحی سایت ریسپانسیو و نمونه کدها بیشتر اشنا شوید

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

تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
مطالب مرتبط
Toolset
مطالعه : 5 دقیقه

تنها استفاده از پست ها و صفحه ها برای ساخت هر وبسایتی با وردپرس کافی نیست. Toolset که یکی از افزونه های نمایش تمامی توابع وردپرسی است به شما این امکان را می دهد که وبسایت های رتبه بندی کننده، وبسایت های راهنما، وبسایت های دارای عضویت اشتراکی و یا وبسایت های فروشگاهی منحصر به فرد بسازید.   Toolset چیست؟ مجموعه ای از افزونه هایی است که برای گسترش وردپرس استفاده می شود. Toolset به آن ها که برنامه نویسی نمی دانند کمک می کند سایت های وردپرسی بسازند. این گفته به نظر یک شعار است اما آن ها که تجربه حداقل یک بار استفاده از Toolset را دارند نظرشان متفاوت است.   با Toolset چه می توان کرد؟   1) نوع محتوایی که میخواهید در سایت قرار دهید را خودتان تعیین کنید سایت های مختلف به نوع محتوای متفاوت نیاز دارند؛ Toolset به شما این امکان را می دهد که دقیقاً همان نوع محتوایی را که میخواهید، به کار ببرید و بین آن ها ارتباط ایجاد نمایید.   2) قالب (Template) و View اختصاصی طراحی کنید افزونه نمایش تمامی توابع وردپرسی Toolset کار طراحی قالب ها، آرشیوها و لیست ها را برای انواع محتوا، آسان کرده است. شما می توانید با HTML و یا با استفاده از صفحه ساز های خودکار، قالب های خود را طراحی کنید. تقریباً در […]

افزونه چت واتساپ
مطالعه : 10 دقیقه

افزونه چت واتساپ whats app وردپرس افزونه چت واتساپ whats app وردپرس به شما این امکان را می دهد که تجربیات لذت‌بخش چت کردن در واتساپ را در سایت خود پیاده‌سازی کنید. استفاده از این افزونه یکی از بهترین روش‌های ارتباطی و ارتباط با مشتری است که به‌ طور مستقیم کاربران سایت را پشتیبانی کرده و همچنین در ذهن مشتری ایجاد اعتماد و وفاداری نمایید.   موقعیت های مختلف نمایش افزونه چت واتساپ با تیم پشتیبانی شما می‌توانید در موقعیت مختلف سایت وردپرسی خود، از پشتیبان های آنلاین استفاده کنید.   نمايش در ويجت های قالب:   نمايش در صفحات محصول ساخته‌شده در ووکامرس:   دکمه‌های سفارشی و شورت کدها: امکانات بی نظير افزونه چت واتساپ whats app وردپرس افزونه چت واتساپ حساب‌های چندگانه را پشتیبانی می‌کند: به شما اجازه می دهد که تلفن واتساپ تمام کارمندان خود را بصورت شکیل و در یک باکس درکنار هم بگذارید. کارمندان شما با هر پست یا سمتی که در شرکت شما دارند برای بازدیدکنندگان وب‌سایت قابل‌ مشاهده هستند و مشتری با هر شخص یا بخشی که مایل است می‌تواند در واتساپ چت و گفتگو نماید. بازدیدکنندگان با تنظیمات سفارشی شما می‌توانند متوجه شوند که چه شخصی آنلاین و چه کسانی آفلاین هستند. حتی می‌توانند با برنامه‌ریزی شما در این پلاگین ببینند که مثلاً بخش پشتیبانی شما چه روزهایی و در چه ساعاتی […]

مطالعه :

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

مطالعه :

استایل و زیبا سازی سبد فروش edd وردپرس به وسیله فایل زیر میتوانید افزونه قدرتمند easy download digital  را زیبا کنین و استایل زیبایی به اون بدین و فروشتون را چند برابر کنین: فرم ارسال آسان دیجیتال فرم پرداخت بسیار آسان است! کنترل کامل از یک ظاهر طراحی شده با گزینه های مختلف و پیش نمایش زنده زمانی که شما را تغییر دهید. این افزونه نیاز به پلاگین دانلود Easy Digital Downloads دارد. Easy Digital Downloads یک راه حل کامل تجارت الکترونیک برای فروش محصولات دیجیتال در وردپرس است. شروع : این 6 مرحله ساده را برای ساخت فرم های زیبا دنبال کنید. مرحله # 1: → نصب / فعال کردن دانلود آسان دیجیتال. دریافت آسان دیجیتال دانلود مرحله 2: → ایجاد دانلودها و انتشار آنها. مرحله 3: → یک صفحه ایجاد کنید که در آن می توانید از کد کوتاه استفاده کنید [download number = “12” column = “4”]. مرحله 4: → به صفحه پرداخت که میخواهید سبک بروید بروید. مرحله 5: → حالا، این صفحه را مشاهده کنید و روی لینک «سفارشی کردن» در نوار مدیریت WordPress در بالای صفحه کلیک کنید. مرحله 6: → مشاهده و باز کردن Checkout Styler برای پانل EDD و سفارشی کردن صفحه پرداخت خود را. این همه! تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید

مطالعه :

طراحی ست اداری شرکت بازرگانی ایراکو طراحی ست اداری،طراحی سربرگ،طراحی کارت ویزیت،طراحی پاکت نامه، شرکت بازرگانی ایراکو توسط تیم طراح گرافیک وب یار انجام شده است. طراحی ست اداری شرکت بازرگانی ایراکو با رنگ بندی قرمز و مشکی و طرحی ساده و سنگین مناسب برای شرکت بازرگانی فعال در زمینه صادرات و واردات و گمرک و همکاری با عراق میباشد. طراحی ست اداری با تصاویر مرتبط به معرفی خود پرداخته و آدرس و شماره تلفن خود را درج نموده است. سفارش طراحی ست اداری،شامل طراحی کارت ویزیت،طراحی پاکت نامه،طراحی سربرگ،طراحی آرم و لوگو اختصاصی با طرح سفارشی شما صورت میگیرد. شما میتوانید سفارش طراحی ست اداری خود را به تیم و ب یار داده تا بار دیگر به صورت حرفه ای در میان رقبایتان بدرخشید. جهت سفارش ست اداری، شرکتی، صنعتی، خدماتی خود با ما در تماس باشید. طراحی ست اداری شرکت بازرگانی ایراکو5 (100%) 1 vote[s]

مطالعه :

طراحی ست اداری شرکت آواسنگ طراحی ست اداری،طراحی سربرگ،طراحی کارت ویزیت،طراحی پاکت نامه، شرکت آواسنگ توسط تیم طراح گرافیک وب یار انجام شده است. طراحی ست اداری شرکت آواسنگ با رنگ بندی شکیل و طرحی ساده و سنگین مناسب برای شرکت صنعتی فعال در زمینه محصولات و صنعت سنگ میباشد. طراحی ست اداری با تصاویر مرتبط به معرفی خود پرداخته و آدرس و شماره تلفن خود را درج نموده است. سفارش طراحی ست اداری،شامل طراحی کارت ویزیت،طراحی پاکت نامه،طراحی سربرگ،طراحی آرم و لوگو اختصاصی با طرح سفارشی شما صورت میگیرد. شما میتوانید سفارش طراحی ست اداری خود را به تیم و ب یار داده تا بار دیگر به صورت حرفه ای در میان رقبایتان بدرخشید. جهت سفارش ست اداری، شرکتی، صنعتی، خدماتی خود با ما در تماس باشید. طراحی ست اداری شرکت آواسنگ5 (100%) 1 vote[s]

دیدگاه ها

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

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