0

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

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

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

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

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

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 […]