0

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

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

آرشیو برچسب ها

modal ها در بوت استرپ

مدال در بوت استرپ مدال یک پنجره  محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود. برای ساخت modal نیاز به کدهای html ، css و java script دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را برای ما آسان کرده و لازم به کدنویسی های پیشرفته ای نداریم. با طراحی سایت اصفهان وب یار همراه باشید تا نحوه ی ایجاد modal در بوت استرپ را به شما آموزش دهیم.   ساخت modal در بوت استرپ برای ایجاد مدال در بوت استرپ به دو فایل bootstrap.css و bootstrap.js نیاز دارید. شما می توانید این فایل ها را از سایت بوت استرپ دانلود نمایید و در کدهایتان، آن ها را فراخوانی کنید. فایل bootstrap.css را در پوشه ای به نام css و فایل bootstrap.js را در پوشه ای به نام js قرار دهید. نحوه ی فراخوانی این دو فایل را می توانید در کد زیر مشاهده نمایید. یک فایل index.html بسازید و قطعه کد زیر را در آن قرار دهید. <!DOCTYPE html> <html lang=”fa”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width,initial-scale=1 “> <title>bootstrap-18</title> <link href=”css/bootstrap.css” rel=”stylesheet”> <link href=”style.css” rel=”stylesheet”> </head> <body> <div class=”wrapper”> <h2>Modal Example</h2> <!– Trigger the modal with a button –> <button type=”button” class=”btn btn-info btn-lg” data-toggle=”modal” data-target=”#myModal”>Open […]

دکمه های گروهی در 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: این هشدار مشخص کننده ی یک اطلاعات منفی یا خطرناک است. در کد زیر می توانید نحوه ی استفاده از این کلاس ها را مشاهده کنید. <div class=”container”> <div class=”alert alert-success”> This alert box could indicate a successful or positive action. </div> <div class=”alert […]

آموزش بوت استرپ

مقدمه – آموزش بوت استرپ با سلام به دوستان وب یاری های عزیز، این جلسه آموزش بوت استرپ را با آموزش کلاس های well  و jumbotron ادامه می دهیم. همچنین این جلسه با ایجاد header برای صفحه در بوت استرپ آشنا خواهید شد. پس در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید.   کلاس well در بوت استرپ با استفاده از کلاس well می توان یک کادر با گوشه های گرد و پس زمینه ی خاکستری رنگ در اطراف یک عنصر ایجاد کرد. برای استفاده شی well کافی است کلاس well را به یک div اضافه کنید. همچنین این کلاس مقداری padding دارد. لازم به ذکر است که به طور پیش فرض اندازه ی شی well در حالت متوسط قرار دارد که با استفاده از کلاس های well-sm و well-lg می توان این سایز را تغییر داد. کلاس well-sm برای کوچکتر نشان دادن شی well استفاده می شود. کلاس well-lg برای بزرگتر نشان دادن سایز well در بوت استرپ به کار برده می شود. در کد زیر نحوه ی استفاده از این کلاس ها نشان داده شده است. <div class=”well”>well class in Bootstrap</div> <div class=”well well-sm”>well-sm class in Bootstrap</div> <div class=”well well-lg”>well-lg class in Bootstrap</div>   خروجی این کد را می توانید در تصویر زیر مشاهده کنید.   آموزش کلاس jumbotron در بوت استرپ برای جلب توجه […]

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

آموزش تصاویر در بوت استرپ     ایجاد عکس واکنش گرا در بوت استرپ   با سلام به همراهان همیشگی وب یار، این جلسه مبحث تصاویر در بوت استرپ را به شما آموزش می دهیم. در این مقاله به مباحثی از جمله  تصویر با لبه های گرد – عکس دایره ای – عکس بندانگشتی، ایجاد عکس واکنش گرا در بوت استرپ و ایجاد گالری تصاویر پرداخته می شود. در ادامه با تیم طراحی قالب وردپرس وب یار همراه باشید تا با تصاویر در بوت استرپ آشنا شوید.   انواع تصاویر استفاده از تصاویر در سایت به دلیل جذب مخاطبان اهمیت ویژه ای دارد. بوت استرپ کلاس هایی را برای تصاویر در نظر گرفته که با استفاده از این کلاس ها حالت های متفاوتی را برای تصاویر ایجاد می کند. این کلاس ها به شرح زیر می باشد. کلاس 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″>   در شکل زیر می توانید انواع تصاویر را که با کد بالا ایجاد می شود […]