آموزش Front-End

آموزش بوت استرپ ، کار با عکس ها

یکی از مهم ترین عناصر در محتوای یک وب سایت تصاویر می باشد. تصاویر، محتوای تان را جذاب می کند و محتوایی که دارای تصاویر بهینه باشند، از نظر موتورهای جستجو دارای اهمیت بالایی هستند. سبک دهی و واکنشگرا بودن تصاویر یکی از موضوعات اصلی در طراحی وب است که بوت استرپ کلاس های کاربردی زیادی را برای سبک دهی و واکنشگرایی به تصاویر ارائه کرده است. ریسپانسیو ( Responsive ) یا واکنشگرا کردن تصاویر در بوت استرپ : یکی از امکانات خوب بوت استرپ، ریسپانسیو کردن خودکار تصاویر در صفحه وب است. با اضافه کردن کلاس img-responsive به تگ <img> به راحتی می توانید تصاویر خود را در تمام سایزهای صفحه نمایش به صورت کاملا واکنشگرا نمایش ...

ادامه مطالب
آموزش بوت استرپ ، سیستم گرید بندی ( Grid )

حتما تا به حال به چهارچوب و نحوه نمایش مطالب و محتوا در مجلات ، روزنامه ها و صفحات وب دقت کرده اید. هر سیستم بنا به نیاز مخاطب خود محتوا را در ستون های مختلف طراحی کرده اند.گاهی وبسایت ها دارای سه ستون و گاهی دو ستون و ... می باشند که حتی داخل هر ستون مجددا ستون بندی های دیگری انجام شده است. سیستم شبکه بندی یا گریدبندی در Bootstrap به 12 ستون در یک سطر تقسیم بندی می شود. به هرکدام از این ستون ها گرید ( شبکه ) ...

ادامه مطالب
آموزش بوت استرپ ، معرفی اجزای بوت استرپ

Container تگ ( container ) پایه ای ترین المان در بوت استرپ است که برای استفاده از سیستم پیش فرض شبکه ای ( Grid System ) کاملاً ضروری است. ( این تگ، همانند تگ body عمل می کند و تا زمانی که نوشتن کدهای بوت استرپ به اتمام نرسیده، این تگ به پایان نمی رسد. ) [crayon-5a3334ab5c623364493180/] با استفاده از کلاس .container-fluid می توان از تمام عرض صفحه استفاده کرد. [crayon-5a3334ab5c62d247067961/] از زمانی که بوت استرپ طراحی شد و توسعه پیدا کرد، استفاده از مدیا کوئری ( به شکل سابق )

ادامه مطالب
آموزش بوت استرپ ، فایل های فریم ورک بوت استرپ

به خاطر داشته باشید دانستن این نکته بسیار مهم است که کتابخانه های جاوااسکریپت در بوت استرپ، به جی کوئری نیازمند می باشند. کدهای از پیش ساخته شده بوت استرپ: در نسخه دانلود شده ی بوت استرپ، اگر فولدرها را از حالت zip خارج کنید، چیزی شبیه به درختواره ی زیر می بینید: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/ ├── bootstrap.js └── bootstrap.min.js

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

برای شروع سریع تر می توانید از MaxCDN استفاده نمایید. به این صورت که با قرار دادن آدرس زیر در header وبسایت، مستقیماً از مرجع رسمی بوت استرپ، کلاس ها و فایل ها را فراخوانی کنید. نکته قابل توجه در این روش این است که این کار، باعث کاهش سرعت بارگذاری سایت و در نتیجه کند شدن آن شود ( که توصیه نمی گردد ) [crayon-5a3334ab5d88c996977374/] همچنین افزودن برخی پلاگین های جاوا اسکریپت در انتهای صفحه و قبل از </body> توصیه می شود. دلیل انجام این کار، قابل شناسایی ...

ادامه مطالب
آموزش HTML ، لیست ها در HTML

لیست ها در HTML به سه دسته تقسیم میشوند شامل لیستهای مرتب ، لیستها نامرتب و لیستهای تعریف که به توضیح آنها میپردازیم. لیستهای مرتب: لیست مرتب (Ordered list) را با عنصر (ol)  نمایش میدهند و برای مواردی کاربرد دارد که لیست شدن در آن اهمیت فراوانی دارد .از این ترتیب برای شماره گزاری کردن استفاده میشود .   [crayon-5a3334ab5e286528943368/] لیستهای نامرتب: لیستهای نا مرتب (Unordered List) را با عنصر (ul) نمایش میدهند . این تگ برای لیست کردن مواردی میباشد که ترتیب در آن اهمیتی ندارد . که هر گزینه این لیست نیز با عنصر (li) ایجاد میشود . [crayon-5a3334ab5e291229313596/] لیست تعریف: این لیست هم با (dl) بکارگیری میشود در این لیست برای گزینه هایی که نمایش میدهیم ...

ادامه مطالب
آموزش HTML ، کاربرد تگ Section و Article در HTML

  از این تگ برای ایجاد بخش ها در صفحه بکارگیری میشود . در حقیقت مطالبی که در صفحه استفاده میشود توسط این تگ به بخش های جداگانه از یکدیگر به اصطلاح بلوک بندی میشوند . تگ article در داخل تگ section استفاده میگردد . و محتویات موجود در تگ section را بلوک بندی میکند و هر یک را به عنوان یک عنصر مجزا در نظر میگیرد . به طور کلی یک article  میتواند در داخل article دیگر قرار بگیرد و زیر مجموعه ایی از یک بدنه نیز در نظر گرفته میشود . [crayon-5a3334ab5e9c2979588540/] با مردان وردپرس همراه باشید.  

ادامه مطالب
آموزش HTML ، تگ های نمایش متن با حالات مختلف

به طور کلی برای دیده شدن هر متنی در HTML بایستی آن را در تگ body قرار دهیم و با قرار دادن هر متنی داخل این تگ میتوانیم کارهای جالبی خلق کنیم . مرورگرها اغلب متن ها را پشت سر هم و ساده نمایش میدهند ، مگر اینکه تغییراتی که مدنظر ما هست به آنها اضافه کنیم . در واقع مرورگرها کاراکترهای تب ( Tab )  و اینتر را در قسمت خروجی نمایش نمیدهند که دلیل آن این است که برخی از سیستم ها برای هر کاراکتری 4 فضای خالی را نمایش میدهند و برخی نیز 8 فضای خالی که این امر موجب میشود در اجرای کدهای HTML در سیستم کاربران ...

ادامه مطالب
آموزش HTML ، کاربرد تگ aside در HTML

در این بحث میخواهیم در مورد تگ aside با هم صحبت کنیم. به صورت ساده میتوان گفت محتوای سایت که در گوشه و کنار صفحه قرار دارد و جدا از محتویات سایت میباشد که با قسمتهای دیگر صفحات مرتبط میباشد در این تگ قرار میگیرند .به طور معمول لینکهای صفحه در این قسمت واقع میشوند . در قسمت پایین به مثال آن میپردازیم. [crayon-5a3334ab5fa91487143368/] با مردان وردپرس همراه باشید.

ادامه مطالب
آموزش HTML ، کاربرد تگ Header و Footer در HTML

قبل از ارائه این مطلب باید یادآوری کنم تگ Header با تگ Head که به آن در مطالب قبلی اشاره کردیم تفاوت دارد ، این تگ برای ایجاد سرصفحه و از تگ Footer برای ایجاد به اصطلاح پا صفحه استفاده می شود.  بعنوان مثال زمانیکه یک کتاب را نگاه می کنید می بینید که در پایین و بالای تمامی صفحات متن ، عکس و کادری تکرار شده که به طور معمول نام کتاب و عنوان فصل را در بر میگیرد که به متن و عکس سر صفحه ( Header )  و یا کادری که در پایین صفحه قرار دارد پا صفحه ( Footer ) گفته میشود. در صفحاتی که در طول روز با آن ...

ادامه مطالب