0

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

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

bootstrap

دکمه های گروهی در bootstrap
مطالعه :

دکمه های گروهی در بوت استرپ – آموزش بوت استرپ تیم طراحی سایت اصفهان وب یار در این مقاله به آموزش دکمه ها در بوت استرپ می پردازد. در این آموزش شما با دکمه های گروهی در بوت استرپ، تنظیم سایز دکمه های گروهی، ایجاد دکمه های گروهی عمودی، Justified Button Groups ، ایجاد منوی کشویی برای دکمه های گروهی در بوت استرپ و Split Button Dropdowns آشنا خواهید شد. مباحث دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ در مقاله ی دکمه ها در بوت استرپ – قسمت اول ذکر شده است که می توانید با مطالعه ی آن اطلاعات خود را درباره ی دکمه ها در بوت استرپ تکمیل نمایید.   ایجاد دکمه های گروهی در بوت استرپ شما می توانید در بوت استرپ دکمه ها را به صورت خطی گروه بندی کنید. برای این منظور کافی است از کلاس btn-group  در تگ div استفاده کنید و دکمه ها را در این div قرار دهید. به کد زیر دقت کنید. <div class=”btn-group”> <button type=”button” class=”btn btn-primary”>ok</button> <button type=”button” class=”btn btn-primary”>cancel</button> <button type=”button” class=”btn btn-primary”>Apply</button> </div> خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید.   جالب است بدانید که شما می توانید برای […]

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

سایز دکمه ها در بوت استرپ – آموزش بوت استرپ در این مقاله، آموزش دکمه ها در بوت استرپ را خواهید خواند که توسط تیم طراحی سایت اصفهان وب یار برای شما عزیزان آماده شده است. در این آموزش شما با دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ آشنا می شوید. دکمه ها برای اهداف مختلفی مانند submit یا reset کردن یک فرم، نمایش دادن یا مخفی کردن یک مطلب در سایت و موارد دیگر استفاده می شوند. بنابراین دکمه ها یک بخش لازم در طراحی سایت هستند. در ادامه همراه ما باشید تا با دکمه ها در بوت استرپ آشنا شوید. معرفی دکمه ها در bootstrap همانطور که می دانید تگ button برای ایجاد دکمه استفاده می شود. حال برای این که استایلی را که بوت استرپ برای دکمه ها در نظر گرفته است، به تگ button اضافه کنیم، کافی است از کلاس های بوت استرپ برای دکمه ها استفاده کنیم. این کلاس ها به شرح زیر می باشد. btn-default  : برای ایجاد یک دکمه ی پیش فرض به رنگ خاکستری است. btn-primary  : برای مشخص کردن دکمه ی اصلی از این کلاس استفاده می شود. btn-success  : این کلاس مشخص کننده ی یک عملیات […]

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

هشدارها در بوت استرپ در مبحث آموزش بوت استرپ، در این بخش میخوایم با آموزش مبحث هشدارها در بوت استرپ ادامه دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن آن ها و کلاس alert-link آشنا خواهید شد. هشدارها برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر کدام از هشدارها یک باکس رنگی متفاوت را ایجاد می کنند که با مضمون پیام همخوانی دارد. در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید تا نحوه تنظیم هشدارها را باهم بیاموزیم.   انواع هشدارها در بوت استرپ برای ایجاد هشدار از کلاس alert در تگ div استفاده می شود. این هشدارها می توانند مشخص کننده یک عملیات موفقیت آمیز، یک عمل خنثی، اطلاعات هشداردهنده و یا عملیات خطرناک باشند که با نوشتن کلاس های زیر در ادامه ی کلاس alert می توانید نوع هشدار را برای کاربر مشخص کنید. alert-success: این هشدار نشان دهنده ی یک عمل مثبت یا موفقیت آمیز است. alert-info: این هشدار یک سری اطلاعات مفید را در اختیار کاربران قرار می دهد. alert-warning: این جعبه ی هشدار، یک هشدار به کاربر می دهد. alert-danger: این هشدار مشخص کننده ی یک اطلاعات منفی یا خطرناک است. در کد زیر می توانید نحوه استفاده از این کلاس ها را مشاهده کنید.

خروجی این کد در تصویر زیر نمایش داده شده […]

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

ایجاد عکس واکنش گرا در بوت استرپ با سلام به همراهان همیشگی وب یار، این جلسه مبحث تصاویر در بوت استرپ را به شما آموزش می دهیم. در این مقاله به مباحثی از جمله  تصویر با لبه های گرد – عکس دایره ای – عکس بندانگشتی، ایجاد عکس واکنش گرا در بوت استرپ و ایجاد گالری تصاویر پرداخته می شود. در ادامه با وب یار همراه باشید تا با نحوه ایجاد تصاویر در بوت استرپ آشنا شوید. تصاویر در بوت استرپ با.img-fluid. max-width: 100%;  وheight: auto;به تصویر اعمال می شود تا با عنصر والد مقیاس شود. انواع تصاویر استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد. کلاس img-rounded باعث گرد شدن گوشه های عکس می شود. کلاس img-circle عکس را به صورت دایره نمایش می دهد. کلاس img-thumbnail عکس مورد نظر را به صورت یک عکس بند انگشتی در می آورد. در کد زیر می توانید با نحوه ی استفاده از این کلاس ها آشنا شوید.

در شکل زیر می توانید انواع تصاویر را که با کد بالا ایجاد می شود را ببینید. ایجاد عکس واکنش گرا در بوت استرپ عکس واکنش […]

مطالعه :

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

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

ریسپانسیو کردن لیست و div های تودر تو   :Flexbox آموزش لیست های چند ستونه ریسپانسیو با با آموزشی دیگر از ریسپانسیو کردن صفحات وب سایت ها در خدمت شما دانش آموختگان آنلاین هستیم, امروز میخواهیم ریسپانسیو کردن لیست های چند ستونه را به شما آموزش بدهیم, تا ببینید به چه راحتی میتوانید لیست های چند ستونه خود را ریسپانسیو کنید,البته این آموزش میتواند با ایده ای شما تکمیل شود و شما با اضافه کردن کدهای سی اس اس css بیشتر  استایل های زیباتری به آن ببخشید,پس در آموزش این جلسه از ریسپانسیو کردن لیست ها با وب یار همراه باشید. آموزش لیست ها ی چند ستونه ریسپانسیو انعطاف پذیر: در آموزش ریسپانسیو کردن لیست ها میخواهیم ابتدا N ایتم را تعریف کنیم ,که این N ایتم در Z تعداد ستون نمایش داده خواهند شد, خب توجه کنید که تعداد این Z ستون با توجه به عرض صفحه نمیش ما width میتواند بیشتر شود و یا اینکه حتی کمتر نیز شود, پس این تغییر تعداد ستون ها در صفحه نمایش های دستگاههای گوناگون با عرض های مختلف به چه چیزی بستگی دارد؟؟؟؟ پاسخ خیلی واضح و مشخص است این تعداد ستون های گوناگون به عرض صفحه ی نمایش بستگی دارد و در صفحه نمایش های گوناگون باعرض های مختلف این تعداد ستون ها تغییر میکند و همچنین با تغییر سایز […]