مشاوره رایگان

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

نکات و ترفند های BOOTSTRAP

بوت استرپ سرشار از ویژگی های باورنکردنی است اما برای بسیاری از ما پیچیده به نظر می رسد. به سادگی نمی توانید تمام عملکردهای آن را به خاطر بسپارید یا نمی توانید یک هفته کارها را تعطیل کنید تا مستندات آن را مطالعه کنید. بسیاری از اوقات حتی کاربران باتجربه نیز وقتی برخی از قابلیت های پنهان آن را کشف می کنند متعجب می شوند.

من برخی از بهترین نکات و ترفندهایی را که تاکنون در کار برنامه نویسی بوت استرپ استفاده کرده ام را با دقت انتخاب کرده ام و مایلم آنها را با شما به اشتراک بگذارم.

برای داشتن تجربه ای بهتر در مطالعه ، آنها را به 4 گروه تقسیم کردم.

مواردی که در این مقاله به آنها می پردازیم:

شبکه (grid) در بوت استرپ

چگونه می توان ستون ها را هم ارتفاع کرد
نحوه افزودن فاصله عمودی به ستون ها
چگونه می توان از کلاسهای خود به جای ستون و ردیف استفاده کرد
نحوه تغییر ترتیب ستون ها در موبایل
نحوه نمایش یا پنهان کردن عناصر در موبایل
چگونه واکنش گرایی را غیرفعال کنیم

مولفه ها - navbar (نوار ناوبری) و footer (پاورقی)

نحوه باز کردن کشویی navbar در هنگام قرار گیری نشانگر موس روی آن
چگونه می توان ارتفاع navbar را تغییر داد
نحوه ایجاد پاورقی ثابت (همراه صفحه scroll نشود)

دکمه ها و فرم ها

نحوه ایجاد دکمه های سفارشی بوت استرپ
چگونه دکمه ها و سایر عناصر فرم را غیرفعال کنیم

نکات مربوط به تایپوگرافی و طرح بندی

چگونه یک عنصر بلوکی (تگی که display آن block است) را در مرکز قرار دهیم
چگونه یک محتوای درون خطی (inline) را در مرکز قرار دهیم
نحوه استفاده از کلاس های عنوان
نحوه جاسازی فیلم های YouTube یا Vimeo به صورت واکنش گرا

Grid در Bootstrap

چگونه می توان ستون ها را هم ارتفاع کرد؟

این یک مشکل کلاسیک است. شما تگ هایی با محتوای مختلف دارید اما می خواهید ارتفاع آنها یکسان باشد. یک راه حل برای این مشکل استفاده هوشمندانه از flexbox در سطر های Bootstrap است.

این رویکرد شامل این مراحل است:

یک کلاس row-flex ایجاد کنید و آن را به سطر اصلی اعمال کنید.
ستون های داخل ردیفی که این کلاس row-flex را دارند ، اکنون هم ارتفاع هستند.
من معمولاً Bootstrap را با مولفه های مورد نیاز طرح خودم مخلوط نمی کنم و تمام پس زمینه ها ، padding و... که مورد نیاز محتوا است را در تگ خاص خود درون تگ استفاده شده برای بوت استرپ ، اعمال می کنم. در اینجا برای هم ارتفاع کردن تنها کاری که باید انجام دهید ، این است که فقط با ویژگی height: 100% ارتفاع تگ محتوا را ۱۰۰٪ تنظیم کنید.

کد html :

<body>
  <div class="container">
    <h1>Same height columns in Bootstrap</h1>
    <div class="row row-flex">
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="content colour-1">
          <h3>First column</h3>
          <p>This one has a bit longer content</p>
          <p>This one has a bit longer content</p>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="content colour-2">
          <h3>Second column</h3>
          <p>Normal content.</p>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="content colour-3">
          <h3>Third column</h3>
          <p>Normal content.</p>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="content colour-4">
          <h3>Fourth column</h3>
          <p>Normal content.</p>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="content colour-5">
          <h3>Fifth column</h3>
          <p>Normal content.</p>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="content colour-6">
          <h3>Sixth column</h3>
          <p>Normal content.</p>
        </div>
      </div>
    </div>    
  </div>
</body>

کد css :

/* نمایش سطر به صورت فلکس و استفاده از ورپ برای تبعیت از عرض ستون ها */
.row-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* فاصله عمودی بین ستون ها */
[class*="col-"] {
  margin-bottom: 30px;
}

.content {
  height: 100%;
  padding: 20px 20px 10px;
  color: #fff;
}

نحوه افزودن فاصله عمودی به ستون ها

برای اضافه کردن فاصله عمودی به ستون های خود ، از قانون ساده CSS زیر استفاده کنید که حاشیه پایین 30px را به هر ستون Bootstrap می دهد.

/* فاصله عمودی بین ستون ها */
[class*="col-"] {
  margin-bottom: 30px;
}

چگونه از کلاسهای خودمان به جای ستون و ردیف استفاده کنیم

بسیاری از افراد روش Bootstrap در نوشتن کد با ستون ها و ردیف ها را دوست ندارند:

<div class="row">
  <div class="col-sm-8 col-lg-9">
    <p>Main content</p>
  </div>
  <div class="col-sm-4 col-lg-3">
    <p>Right column</p>
  </div>
</div>

اما به راحتی می توانید کد خود را مانند مثال بعدی بنویسید.

<div class="content">
  <div class="main">
    <p>Main content</p>
  </div>
  <div class="right-column">
    <p>Right column</p>
  </div>
</div>

برای استفاده از این روش باید از mixin های Bootstrap {LESS} یعنی ()make-row. و ()make-*-column. استفاده کنید:

.content {
  .make-row();
}

.main {
  .make-sm-column(8);
  .make-lg-column(9);  
}

.right-column {
  .make-sm-column(4);
  .make-lg-column(3);
}

اطلاعات بیشتر در زمینه mixin های Bootstrap را می توانید در اسناد رسمی Bootstrap ببینید.

نحوه تغییر ترتیب ستون ها در موبایل

یکی از ویژگی های بسیار مفید شبکه ای بوت استرپ ، امکان نمایش ستون ها با ترتیب متفاوت در موبایل نسبت به رایانه است.

تمام کاری که شما باید انجام دهید این است که از کلاسهای col-(breakpoint)-push-(number) و col-(breakpoint)-pull-(number) برای به جلو راندن یا به عقب کشیدن ستونها در نقطه شکست مشخص شده از محل اصلی استفاده کنید. می دانم که کمی پیچیده به نظر می رسد و معمولاً مدتی طول می کشد تا بتوان نتیجه کار را حدس زد اما بیایید در یک مثال به آن نگاهی بیندازیم. در کد زیر ، ستون اول به عنوان اولین مورد در موبایل اما به عنوان مورد دوم در رایانه لوحی و رایانه ظاهر می شود.

<div class="row">
    <div class="col-sm-4 col-sm-push-8 ">
      <div class="content colour-1">4 cols wide right column appears second on SM+ devices<br>but appears first on mobile
      </div>
    </div>
    <div class="col-sm-8 col-sm-pull-4">
      <div class="content colour-2">8 cols wide left column appears first on SM+ devices<br>but appears second on mobile
      </div>
    </div>
</div>

نحوه نمایش یا پنهان کردن عناصر در موبایل

اگر نیاز دارید که یک عنصر را به سرعت و به آسانی فقط در دستگاه های xs (بسیار کوچک) مخفی کنید ، یک کلاس hidden-xs وجود دارد که می توانید از آن استفاده کنید. به همین ترتیب ، می توانید از کلاس hidden-(breakpoint) برای بقیه نقاط شکست نیز استفاده کنید و آنها را با هم ترکیب کنید ، یعنی از کلاس های hidden-lg ، hidden-md ، hidden-sm استفاده کنید.

از طرف دیگر ، اگر می خواهید عنصری را فقط در دستگاه های خاصی نشان دهید ، می توانید از کلاس های visible-(breakpoint)-(display) استفاده کنید. به یک تفاوت جزئی در نام این کلاس توجه کنید - شما باید از ویژگی display نیز استفاده کنید. مقادیر ممکن قسمت (display) عبارتند ازblock ، inline-block و inline. بنابراین ، اگر می خواهید یک عنصر را به عنوان یک بلوک در دستگاه های بزرگ نمایش دهید ، فقط یک کلاس visible-lg-block به آن اضافه کنید.

برای مطالعه بیشتر در این باره ، اسناد رسمی را ببینید.

چگونه واکنش گرایی را غیرفعال کنیم

شرایطی وجود دارد که ترجیح می دهید صفحه شما به صورت واکنش گرا رفتار نکند. این موارد می تواند هنگام آماده سازی صفحه وب برای چاپ یا تولید خروجی برای PDF باشد.

مراحل اولیه غیرفعال کردن واکنش گرایی:

حذف < "meta name="viewport>
عرض ثابت را برای کلاس container خود تنظیم کنید. مثلاً container {width: 1000px !important;}

اگر اطلاعات بیشتری در این مورد نیاز دارید ، اسناد رسمی را ببینید.

مولفه ها - نوار ناوبری ، پاورقی

چگونه می توان کشویی navbar را پس از قرار گیری نشانگر موس باز کرد؟

رفتار استاندارد کشویی های بوت استرپ این است که با کلیک باز می شوند. این رفتار موافقان و مخالفان خود را دارد ولی من معمولاً آن را به عنوان پیش فرض استفاده می کنم. اگر می خواهید لیست های کشویی را پس از قرار گیری نشانگر موس روی آن ، باز کنید ، دستیابی به آن روند پیچیده ای نیست.

ما باید دو مورد را تغییر دهیم و تغییرات خود را فقط درصورتی استفاده می کنیم که دامنه نمایش (viewport) از 768 پیکسل بیشتر باشد (به عبارت دیگر navbar جمع نشده باشد).

ابتدا این دستور CSS را پس از بارگذاری CSS بوت استرپ به شیوه نامه خود اضافه کنید. این کاملاً ساده است - اگر دامنه نمایش از 768 پیکسل گسترده تر باشد و موس شما بالای یک پیوند با کلاس dropdown قرار بگیرد ، یک منو با کلاس dropdown-menu نمایش داده می شود.

@media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

دوم ، اگر پیوند والد نیز به یک URL اشاره داشته باشد ، برای تغییر رفتار Onclick پیوندهای دارای کلاس dropdown ، باید کمی کد جاوا اسکریپت نیز اضافه کنیم.

$('.dropdown-toggle').click(function(e) {
  if ($(document).width() > 768) {
    e.preventDefault();

    var url = $(this).attr('href');

    if (url !== '#') {
      window.location.href = url;
    }

  }
});

چگونه می توان ارتفاع نوار ناوبری را تغییر داد

هنگامی که می خواهید ارتفاع نوار ناوبری را تغییر دهید ، باید موارد بیشتری را تنظیم کنید تا اینکه فقط یک مقدار ارتفاع جدید برای navbar اضافه کنید.

در کد زیر ، من روشی را برای تغییر ارتفاع navbar به 80 پیکسل بیان می کنم.

.navbar {
  min-height: 80px;
}

.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

نحوه ایجاد یک پاورقی ثابت

با پیروی از این مراحل ، یک پانویس ثابت که با صفحه scroll نمی شود برای وب سایت خود ایجاد کنید:

یک عنصر پاورقی ایجاد کنید و position آن را absolute و bottom آن را 0 قرار دهید، یک ارتفاع ثابت برای آن تعیین کنید. (در مثال من ، 80px خواهد بود).

برای اینکه تمامی محتوا بتواند از زیر پاورقی خارج شود ، padding پایین را به عنصر <body> اضافه کنید و مقدار آن را برابر ارتفاع پاورقی تنظیم کنید.

body {
  height: 100%;
  padding-bottom: 80px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: #fafafa;
  border-top: solid 1px #eee;
}

/* additional demo styles */
.footer p {
  margin-top: 30px;
}

.article {
  padding-top: 40px;
}

دکمه ها و فرم ها

نحوه ایجاد دکمه های سفارشی بوت استرپ:

بوت استرپ دارای 5 استایل دکمه پیش فرض است - default (پیش فرض) ، primary (اصلی) ، success (موفقیت) ، danger (خطر) و غیره

هنگامی که نیاز به تغییر ظاهر دکمه عمومی دارید ، مثلاً برای اینکه border-radius (خمیدگی گوشه ها) یا padding (فضای خالی اطراف متن) آن کاهش یابد ، بهترین راه تغییر استایل های کلاس btn است.

روش دیگری که پیشنهاد می کنم ساخت نوع جدیدی از دکمه و گسترش استایل های مشترک دکمه بوت استرپ است. به عنوان مثال ، یک دکمه با خطوط اطراف آن و یک دکمه آبی تیره ایجاد می کنیم:

من 2 کلاس جدید ایجاد خواهم کرد: btn-outline و btn-color-1. این کلاس ها استایل پیش فرض btn را گسترش می دهند.
در CSS ، استایل حالت پیش فرض آنها را مشخص می کنم و همچنین: active ، :focus ، :hover: و active. (همه اینها در یک استایل مشترکند)
بعد از اتمام کار ، من آماده استفاده از یک دکمه جدید هستم ، به عنوان مثال <a class="btn btn-outline">New button</a>

کد CSS:

.btn-outline {
  color: #4fbfa8;
  background-color: #ffffff;
  border-color: #4fbfa8;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.btn-outline {
  color: #4fbfa8;
  background-color: #ffffff;
  border-color: #4fbfa8;
  font-weight: bold;
  border-radius: 0;
}

.btn-outline:hover,
.btn-outline:active,
.btn-outline:focus,
.btn-outline.active {
  background: #4fbfa8;
  color: #ffffff;
  border-color: #4fbfa8;
  
}


.btn-colour-1 {
  color: #fff;
  background-color: #004E64;
  border-color: #004E64;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 0;
}

.btn-colour-1:hover,
.btn-colour-1:active,
.btn-colour-1:focus,
.btn-colour-1.active {
  /* let's darken #004E64 a bit for hover effect */
  background: #003D4F;
  color: #ffffff;
  border-color: #003D4F;
}

/* for demo purpose only */

body {
  padding: 20px 0;
  font-family: Roboto, sans-serif;
}

h1 {
  font-weight: 300;
  margin-bottom: 40px;
}

کد html:

<body>
  <div class="container">
    <h1>How to create your custom Bootstrap buttons</h1>

    <p><a href="#" class="btn btn-outline">Custom outline button</a></p>
    <p><a href="#" class="btn btn-colour-1">Custom colour button</a></p>
  </div>
</body>

چگونه دکمه ها و سایر عناصر فرم را غیرفعال کنیم

به راحتی می توانید دکمه ها و ورودی ها را در فرم خود غیرفعال کنید. در صورت غیرفعال شدن ، دکمه ها رنگ سبک تری و یک مکان نمای غیر مجاز (در زمان قرار گیری مکان نما روی آنها) دارند.

برای غیرفعال کردن رادیویی ها و چک باکس ها:

کلاس disabled را به عنصر والد checkbox یا radio اضافه کنید
ویژگی disabled را به ورودی اضافه کنید

<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
     This checkbox is disabled
  </label>
</div>

<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
     This radio is disabled
  </label>
</div>

برای غیرفعال کردن دکمه ها:

ویژگی disabled را به دکمه های <button> اضافه کنید
یا کلاس disabled را به دکمه های <a> اضافه کنید

<button type="button" class="btn btn-primary" disabled="disabled">Disabled button</button>
<a href="#" class="btn btn-primary disabled" role="button">Disabled link button</a>

نکات مربوط به تایپوگرافی و طرح بندی

چگونه یک عنصر بلوک را در مرکز قرار دهیم:

برای اینکه به راحتی یک عنصر بلوک را در مرکز افقی قرار دهید ، فقط کلاس center-block را مانند <div class = "center-block"> </div> به آن اضافه کنید.

این کلاس استایل های CSS زیر را به عنصر شما اضافه می کند:

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// همچنین امکان استفاده به صورت میکسین در لس هست
.element {
  .center-block(); // in LESS as mixin

}

چگونه یک محتوای inline را در مرکز قرار دهیم

اگر نیاز دارید که محتوای inline (درون خطی) یا عناصر inline-block (بلوک درون خطی) در مرکز div قرار گیرد ، کلاس text-center را به عنصر والد اضافه کنید.

متن و دکمه را با کد زیر می توان در مرکز افقی قرار داد:

<p class="text-center">
  This will be horizontally aligned to the center.
</p>
<p class="text-center">
  <a class="btn btn-primary">This button will be centered too.</a>
</p>

نحوه استفاده از کلاس های عنوان

اغلب با این مشکل روبرو می شویم که نیاز به عنوانی با اندازه کوچک و تگ h2 داریم. برای تقلید از ظاهر h4 ، کافی است کلاس h4 را به تگ h2 خود اضافه کنید. مثال زیر را ببینید:

<h2 class="h4">
  This heading will look like h4 but it is h2.
</h2>

نحوه جاسازی واکنش گرای فیلم های YouTube یا Vimeo

با استفاده از کلاسهای کمکی واکنش گرا در بوت استرپ می توانید فیلم های YouTube یا Vimeo را به راحتی جاسازی کنید.

براساس نسبت تصویر ویدئویی خود ، از کلاس های embed-responsive-16by9 یا embed-responsive-4by3 استفاده کنید.

<div class="row">
  <div class="col-sm-6">
    <!-- 16:9 -->
    <h4>16:9 Aspect Ratio</h4>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zB4I68XVPzQ"></iframe>
    </div>
  </div>
  <div class="col-sm-6">
    <!-- 4:3 -->
    <h4>4:3 Aspect Ratio</h4>
    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zB4I68XVPzQ"></iframe>
    </div>
  </div>
</div>

پکیج های آموزشی جدید

آموزش طراحی وب با ASP.NET Core MVC (تحت پروژه سایت اشتراک فیلم)

فصلِ: 5 , تعداد قسمت ها: 176 , سطح: صفر تا صد

موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش Bootstrap آموزش Ajax آموزش JQUERY

این فصل در یک نگاه:

در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…

توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد. آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از ASP.NET CORE MVC 3.0 و V…

دانلود و ادامه توضیحات

ساخت پروژه دیوار بصورت دو سکویی با ASP.NET Core و Xamarin

فصلِ: 5 , تعداد قسمت ها: 135 , سطح: صفر تا صد

موضوعات: آموزش ASP.NET آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET MVC آموزش Bootstrap

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…

دانلود و ادامه توضیحات

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

فصلِ: 2 , تعداد قسمت ها: 13 , سطح: صفر تا صد

موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …

توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…

دانلود و ادامه توضیحات

دوره اموزش فریم ورک بوت استرپ

فصلِ: 6 , تعداد قسمت ها: 23 , سطح: صفر تا صد

موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…

سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …

دانلود و ادامه توضیحات

آموزش طراحی وبسایت و اپلیکیشن اندروید ورزش3 (Varzesh3)

فصلِ: 4 , تعداد قسمت ها: 78 , سطح: متوسط

موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش JQUERY آموزش HTML5 آموزش Ajax آموزش Bootstrap آموزش JAVASCRIPT

این فصل در یک نگاه:

…

در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …

دانلود و ادامه توضیحات

پکیج آموزش پروژه محور PHP ساخت سایت نیازمندی ها مشابه شیپور

فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

موضوعات: آموزش PHP آموزش Bootstrap آموزش CSS آموزش JQUERY آموزش HTML آموزش PHP MVC آموزش Ajax آموزش HTML5

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…

دانلود و ادامه توضیحات

آموزش api نویسی

فصلِ: 5 , تعداد قسمت ها: 201 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش Bootstrap آموزش برنامه نویسی آندروید

این فصل در یک نگاه:

ایجاد پروژه آژانس مسافرتی.....…

فصل اول: آشنایی با مبانی برنامه نویسی اندروید آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…

دانلود و ادامه توضیحات

وبینار آموزش تکنیکهای ایمیل مارکتینگ | روشهای تبدیل بازدیدکننده به مشتری

فصلِ: 1 , تعداد قسمت ها: 2 , سطح: متوسط

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش Ajax آموزش Bootstrap آموزش Laravel آموزش PHP MVC آموزش ایمیل مارکتینگ آموزش وردپرس

این فصل در یک نگاه:

بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…

وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…

دانلود و ادامه توضیحات

آموزش تصویری لاراول - پروژه محور و کاربردی

فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش ساخت فروشگاه اینترنتی آموزش Bootstrap آموزش Laravel

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…

دانلود و ادامه توضیحات

پکیج پروژه محور ساخت سایت مشابه آپارات با فریم ورک های react.js و laravel

فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش NodeJs آموزش Bootstrap آموزش Laravel آموزش Symphony

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …

دانلود و ادامه توضیحات

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

نکات و ترفند های BOOTSTRAP