bootstrap

آموزش سیستم شبکه بندی در بوت استرپ در این مطلب از مجموعه آموزش های وب یار می خواهیم سیستم شبکه بندی بوت استرپ را آموزش دهیم. با ما همراه باشید و چنانچه پرسشی نسبت به این مبحث دارید می توانید در بخش نظرات سوال خود را مطرح کنید و پاسخ آن را خواهیم داد. شبکه (Grid) چیست؟ با مراجعه به ویکی پدیا تعریف زیر را از شبکه داریم: شبکه در طراحی گرافیکی به یک ساختار (معمولاً دو بعدی) گفته میشود که برای ایجاد محتوای ساخت یافته از خطوط مستقیم عمودی و افقی استفاه میکند. از این سیستم برای ایجاد لایه های متناسب با چاپ استفاده میشود. همچنین در طراحی وب برای ایجاد لایه های متناسب و سازگار با یکدیگر از سیستم شبکه بندی استفاده میشود. سیستم شبکه بندی در بوت استرپ صفحه وب ما را به قسمت های مساوی تقسیم میکند. همانند یک برگه در نقشه کشی ؛ با این کار میتوانیم سازگاری و تناسب بین اشیاء مختلف در وب سایت خودمون رو حفظ کنیم. سیستم شبکه بندی در بوت استرپ چیست؟ باتوجه به تعریف رسمی سایت بوت استرپ ؛ سیستم شبکه بندی در بوت استرپ به صورت زیر تعریف میشود: بوت استرپ شامل سیستم شبکه بندی متحرک و با رویکردی Mobile First است که عرض صفحه را به ۱۲ ستون مساوی تقسیم میکند. اندازه ستون ها باتوجه به عرض […]

مرجع آموزش بوت استرپ : Bootstrap از جمله برنامه های مفید برای طراحی سایت به شمار میرود. بوت استرپ دارای ابزارهای رایگان برای طراحی سایت و نرم افزارهای تحت وب است که حاوی دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد. بوت استرپ 5 بوت استرپ تا به حال نسخه های متفاوتی را عرضه کرده است و آخرین نسخه آن بوت استرپ 5 است. بوت استرپ یک فریمورک سی اس اس، محصول کمپانی توییتر می باشد. این محصول علاوه بر ریسپانسیو کردن وبسایت شما به یک سری کلاس آماده برای زیبا سازی و چینش سایت شما مجهز است. آموزش بوت استرپ و کلاس های well  و jumbotron یک well ظرفی در <div> است که باعث می شود محتوا غرق شود یا اثر درج شده روی صفحه ایجاد کند. آموزش سیستم شبکه بندی در بوت استرپ بوت استرپ شامل کلاسهای از پیش تعریف شده ای است که با استفاده از آنها میتوانید به لایه بندی صفحات سرعت بخشید، همچنین دارای میکسین هایی است که میتوانید لایه های سفارشی ایجاد کنید. آموزش جدول در بوت استرپ از ایجاد تا ریسپانسیو ساخت جداول با تگ های HTML نمایش اطلاعات به حالت شبکه ای مانند سطر و ستون امکان پذیر است. ولی با […]

آموزش  کدهای طراحی سایت رسپانسیو Rsponsive آموزش کدهای طراحی سایت واکنش گرا آموزش کدهای طراحی سایت واکنش گرا,در آموزش امروز با آموزش کدهای طراحی سایت رسپانسیو قسمت  ساید بار سایت از تیم وب یار در خدمت شما هستیم,در این آموزش میخواهیم به شما آموزش دهیم که چگونه شما یک وب سایت ریسپانسیو داشته باشید که ساید بار آن نیز ریسپانسو باشد و در صورت تغییر در اندازه و نوع صفحات مختلف و ابزارهای متفاوت سایت به درستی نمایش داده شود . در صورتی که به طراحی ریسپانسیو علاقه دارید,مطلب آموزش طراحی منو ریسپانسیو را بخوانید. اولین موضوع در طراحی ریسپانسو این است که خروجی قالب خود را در حداقل سه دستگاه متفاوت مثل کامپیوتر یا لپ تاپ,گوشی موبایل و تبلت در نظر بگیرید. آموزش ریسپانسیو واکنش گرا ساید بار: با توجه به تصویر بالا خب مشخصه که قسمت فوتر سایت در قسمت پایین صفحه همیشه قرار میگیره,اما ساید بار سایت متحرکه و با توجه به اندازه صفحه در قسمت های مختلفی میتونه قرار بگیره. انتقال ساید بار به پایین سایت در صفحه نمایش های کوچک: حالا میخواهیم بررسی کنیم که در صفحه نمایش های کوچک چگونه ساید بار را به قسمت پایین منتقل کنیم. یکی از روشهای رایج برای انجام این کار استفاده ازخاصیت @media در فایل style.css پوسته است.کد زیر را در نظر بگیرید.در این کد نحوه استفاده از […]

با آموزش منو ریسپانسیو Responsive واکنش گرا از تیم وب یار خدمت شما هستیم,اگر اصول کلی در مورد کدهای ریسپانسیو را نمیدانید و میخواهید صحفه ای ریسپانسیو بسازید حتما مطلب آموزش کدهای طراحی سایت ریسپانسیوResponsive را بخوانید. آموزش طراحی منو ریسپانسیو Responsive قدم به قدم با من همراه باشید تا ببینید که به چه راحتی با کدنویسی  به ساخت یک منو ریسپانسیو (واکنش گرا) میپردازیم,و شما پس از یاد گرفتن کدهای طراحی منو واکنش گرا به راحتی میتوانید منو ریسپانسیو داشته باشید که در حالت عادی به صورت افقی نمایش داده بشود,و در صفحه نمایش هایی همانند موبایل ,تبلت,به صورت یک آیکون نمایش داده شود که با کلیک کردن بر روی این آیکون منو به صورت منوی کشویی ریسپانسیو نمایش داده شود. برای این کار ما از هیچ فریم ورکی استفاده نمیکنیم . خودمون با Media Query ها این کار رو به راحتی انجام میدیم . اول از همه بذارید با منطق این موضوع آشناتون کنم . ما با استفاده از Media Queries میتونیم تعیین کنیم که صفحه ی وبمون تو هر رزولوشن به چه شکلی نمایش داده بشه . برای منویی که قراره ایجاد کنیم هم به همین صورت عمل می کنیم . یک منو طراحی می کنیم و با استفاده از media query و کدهای css تعیین می کنیم که در رزولوشن های بالا منو بصورت عادی نمایش […]

سلام در سپتامبر سال 2020 یک خبر توجه همه را به خودش جلب کرد. کمپانی توییتر پنجمین ورژن از فریمورک محبوب بوت استرپ را ارائه کرد. در این نسخه تغییرات بسیار زیادی ایجاد شده است که در ادامه آن ها را خواهیم نوشت. می خواهیم به سوالاتی که در این باره برای شما پیش می آید پاسخ دهیم. بوت استرپ چیست؟ چرا باید از بوت استرپ بلد باشیم؟ بوت استرپ 5 چه ویژگی هایی دارد؟ چه تفاوتی بین ورژن 4 و 5 وجود دارد؟ چگونه از بوت استرپ 4 به 5 کوچ کنیم؟   بوت استرپ چیست؟ بوت استرپ یک فریمورک سی اس اس، محصول کمپانی توییتر می باشد. این محصول علاوه بر ریسپانسیو کردن وبسایت شما به یک سری کلاس آماده برای زیبا سازی و چینش سایت شما مجهز است. این محصول در 5 ورژن عرضه شده که نسخه 5 آن هنوز آزمایشی است. و تا اصلاح شدن آن زمان زیادی لازم است. خصوصیات فریمورک بوت استرپ قابلیت های ریسپانسیوسازی بسیار حرفه ای از ایجاد کدهای تکراری جلوگیری می کند سرعت کدنویسی را افزایش میدهد سازگاری با کلیه مرورگر حوزه کاری گسترده ای دارد   ویژگی ها و تفاوت های بوت استرپ 5 : تغییرات در این نسخه از بوت استرپ بسیار زیاد و وسیع بوده به گونه ای که باعث تعجب عموم شده است. در نسخه بتا 1 […]

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