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

معرفی بوت استرپ 5 - ساخت یک صفحه وب

طراحی سایت با Bootstrap 5

 

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

مواردی که در این آموزش به آن می پردازیم عبارتند از:

  • چگونه با استفاده از Bootstrap یک صفحه وب ساده ایجاد کنید
  • موارد جدید در Bootstrap 5 چیست؟
  • چگونه یک پروژه جدید Bootstrap بسازیم؟
  • چگونه می توان در Bootstrap 5 منو ساخت؟
  • چگونه می توان بخش hero را در بوت استرپ 5 ساخت؟
  • چگونه می توان در بوت استرپ 5 بخش «درباره ما» ساخت؟
  • چگونه می توان بخش «نمونه کارها» را در بوت استرپ 5 ساخت؟

 

 

چگونه با استفاده از Bootstrap یک صفحه وب ساده ایجاد کنید

 

Bootstrap ، محبوب ترین چارچوب front-end ، ساخته شده برای طراحی رابط های مدرن ، واکنشی و پویا ، مناسب برای طراحی صفحات وب حرفه ای است. تیم Bootstrap در حال توسعه یک به روز رسانی بزرگ است ، Bootstrap 5. اولین نسخه آزمایشی آن یعنی نسخه آلفای Bootstrap 5 در تاریخ ۲۷ خرداد سال ۱۳۹۹ منتشر شد.

در این آموزش پس از آشنایی با Bootstrap 5 نحوه ساخت یک وب سایت نمونه کارها برای سایت «خانه نرم افزار» با استفاده از Bootstrap 5 را بررسی می کنیم.

ابتدا با بررسی موارد جدید در Bootstrap 5 شروع می کنیم!

 

 

موارد جدید در Bootstrap 5 چیست؟

 

از آنجا که نسخه آلفای Bootstrap 5 در دسترس است ، می توانیم در مورد ویژگی های جدید ارائه شده با نسخه جدید صحبت کنیم. در ادامه مهمترین تغییرات آن نسبت به نسخه قبلی را بررسی می کنیم:

  • بوت استرپ از jQuery برای عناصری مانند popup (پنجره بازشو) یا tooltip (راهنمای روی صفحه) استفاده می کرد. ولی در نسخه 5 ، دیگر به صورت پیش فرض از jQuery استفاده نمی کند. در عوض ، با Javascript خالص کار می کند.
  • بوت استرپ 5 با توجه به عدم پشتیبانی از Internet Explorer ، ویژگی های سفارشی CSS یا CSS custom properties را به ارمغان می آورد. بیایید نگاهی به مثال جداول Bootstrap در مستندات آن بیندازیم:
.table {
--bs-table-bg: #{$table-bg};
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #{$table-striped-color};
--bs-table-striped-bg: #{$table-striped-bg};
--bs-table-active-color: #{$table-active-color};
--bs-table-active-bg: #{$table-active-bg};
--bs-table-hover-color: #{$table-hover-color};
--bs-table-hover-bg: #{$table-hover-bg};
}

در کد بالا ویژگی های سفارشی را با پیشوند *-bs-- می بینید.

  • اکنون ، در مستندات Bootstrap 5 ، می توانیم بخش دیگری پیدا کنیم - سفارشی سازی. این بخش اطلاعاتی در مورد تم ها ، سفارشی سازی ها و گسترش Bootstrap با Sass ، رنگ های بیشتر و سایر گزینه ها را به ارمغان می آورد.
  • کنترل های کاملاً سفارشی در فرم ها ، ویژگی دیگری است که همراه نسخه Bootstrap 5 ارائه شده است. از این پس ، ظاهر کنترل ها مانند checkbox  یا radio box به مرورگر بستگی ندارد.
  • Utility API جدید، برای کنترل بهتر ، ویژگی دیگری است.
  • علاوه بر این ، grid در Bootstrap بهبود یافته است و اکنون می توانیم از کلاس جدید xxl استفاده کنیم ، gutter با یوتیلیتی های *g جایگزین شده. همچنین ، ویژگی پیشفرض relative برای position در ستون ها را حذف شده است. انتظار می رود در نسخه های بعدی تغییرات بیشتری داشته باشیم (مخصوصاً چون این نسخه آلفا است).

 

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

 

 

چگونه یک پروژه جدید Bootstrap بسازیم؟

 

بیایید شروع به ایجاد وب سایت خود با ایجاد پوشه ای کنیم که می خواهیم سایت را در آن قرار دهیم و در داخل این پوشه ، یک فایل index.html ایجاد کنیم.

پس از باز کردن فایل index.html در ویرایشگر کد مورد علاقه خود ، ساختار فایل HTML و کلیه CDN های مورد نیاز را به صورت زیر تنظیم می کنیم. (منظور از CDN یا شبکه تحویل محتوا در اینجا ، آدرس کتابخانه های مورد نیاز Bootstrap است که در تگ های link و script قرار می دهیم.)

<!DOCTYPE>
<html>
  <head>
    <title>Clicksite</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
    <!-- JavaScript and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
  </head>
  <body>
  </body>
</html>

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

 

 

چگونه می توان در Bootstrap 5 منو ساخت؟

 

اکنون وقت آن است که ساختار دلخواه خود را در وب سایت خود ایجاد کنیم. اولین عنصری که قصد ایجاد آن را داریم لینک ها و منوها است. در داخل تگ body ، قصد داریم از کد زیر استفاده کنیم:

<!-- Navbar -->
<nav class="py-3 navbar navbar-expand-lg fixed-top auto-hiding-navbar">
  <div class="container">
    <a class="navbar-brand"" href="#">
      <img class="logo" src="./assets/logo.png" /> SoftwareHouse
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- End Navbar -->

 

ما برای وب سایت خود به یک لوگو نیاز داریم. هر تصویر یا نمادی را که می خواهید به عنوان لوگو استفاده کنید پیدا کنید و آن را در پوشه assets داخل پوشه وب سایت قرار دهید. من لگوی سایت را در کد به عنوان یک فایل logo.png وارد کردم ، بنابراین مطمئن شوید که نام فایل شما مطابق با تصویر انتخابی تان و موقعیت مکانی آن باشد.

در مرحله بعدی ، برخی از استایل های سفارشی را برای لینک های خود اضافه خواهیم کرد. فایل styles.css را باز کرده و کد زیر را اضافه کنید.

body {
  display: block;
  overflow-x: hidden;
}
nav {
  background-color: white;
}
.navbar-brand img {
  max-height: 50px;
}
.navbar-brand {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 900;
  color: #683aa4;
}
nav ul li a {
  color: #a9a9a9;
  font-size: 22px;
  margin: auto 10px;
}
nav ul li a:hover {
  color: #683aa4;
}

عالی شد ، منوی سایت شما حالا آماده است!

 

 

چگونه می توان بخش hero را در بوت استرپ 5 ساخت؟

 

در وب ، بخش hero (بخش قهرمان یا hero section) معمولاً یک تصویر برجسته ، اسلایدر ، متن یا عنصر مشابه است که در بالای صفحه اصلی (و احتمالاً سایر صفحات) قرار دارد. این بخشی است که جلوی چشم و در مرکز دید است.

گام بعدی در ساخت صفحه وب ما ایجاد یک بخش hero است. در زیر کد منوها ، یک بخش جدید با تصویر ، متن و سه کارت ایجاد می کنیم.

برای این قسمت ، به یک تصویر که من آن را hero-img.png می نامم و سه تصویر یا آیکون برای کارت ها احتیاج دارید.

<!-- Hero section -->
<section id="hero">
  <div class="container">
    <div class="row">
      <div class="col">
        <h1>Software<br>Development</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <button type="button" class="btn btn-dark btn-large">Learn more</button>
      </div>
      <div class="col img-col">
        <img src="./assets/hero-img.png" class="img-fluid" alt="Software Development">
      </div>
    </div>
    <div class="row cards">

      <div class="col-md-4 d-flex justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="card-body">
            <img src="./assets/icon1.svg" class="icon" alt="Service One"/>
            <h5 class="card-title">Web Dev</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 d-flex justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="card-body">
            <img src="./assets/icon2.svg" class="icon" alt="Service Two"/>
            <h5 class="card-title">Machine Learning</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 d-flex justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="card-body">
            <img src="./assets/icon3.svg" class="icon" alt="Service Three"/>
            <h5 class="card-title">Security</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
<!-- End Hero section -->

 

برای خوب نشان دادن آن ، هنوز باید استایل های سفارشی خودمان را اضافه کنیم. بنابراین ، فایل styles.css خود را باز کرده و کد زیر را در آن قرار دهید:

section {
  padding-top: 50px;
  padding-bottom: 50px;
}
section h1 {
  text-transform: uppercase;
  font-weight: 900;
  color: #683aa4;
  text-align: left;
  margin-bottom: 20px;
}
section p {
  font-size: 16px;
  font-weight: 300;
}
button {
  max-width: 50%;
  border-radius: 50px !important;
}
#hero .col {
  justify-content: center; 
  flex-direction: column;
  display: flex;
}
#hero .img-col {
  justify-content: flex-end; 
  margin-top: 100px;
}
#hero img {
  max-width: 130% !important;
  width: 130%;
}
#hero .card {
  box-shadow: 11px 7px 16px #f9f9f9;
  border: 0;
  text-align: center;
}
#hero .icon {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}

 

بخش hero با این استایل، عالی شد، وب سایت شما باید مانند تصویر زیر باشد (فقط با لوگو و آیکون های متفاوت):

 

 

چگونه می توان در بوت استرپ 5 بخش «درباره ما» ساخت؟

 

بخش بعدی که می خواهیم در صفحه وب خود بسازیم ، قسمت «About Us» است. در این بخش نیز یک تصویر اضافه خواهیم کرد ، بنابراین مطمئن شوید که یک تصویر به نام about-us.png در پوشه assets خود دارید.

 

فایل index.html را در ویرایشگر خود باز کنید و در زیر قسمت hero، کد زیر را اضافه کنید:

<!-- About us section -->
<section id="about-us">
  <div class="container">
    <div class="row align-items-center">
      <div class="col">
        <img src="./assets/about-us.png" class="img-fluid" alt="About Us">
      </div>
      <div class="col text-col">
        <h1>About Us</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <p>Clicksite</p>
        <p>Email: clicksite.ir@gmail.com</p>

        <button type="button" class="btn btn-dark btn-large">Let's meet</button>
      </div>
    </div>
  </div>
</section>
<!-- End About us section -->

 

حالا ، بخش دوم هم آماده شد.

 

 

چگونه می توان بخش «نمونه کارها» را در بوت استرپ 5 ساخت؟

 

اکنون نوبت به مهمترین قسمت در صفحه ی «خانه نرم افزار» رسیده. ما یک بخش برای پروژه ها ایجاد خواهیم کرد ، متشکل از چهار کارت در دو ردیف.

مطمئن شوید که 4 تصویر دیگر برای این بخش در پوشه assets خود دارید ، شاید تمایل داشته باشید از تصاویر پروژه های شخصی خود که می خواهید ارائه دهید استفاده کنید.

در زیر بخش درباره ما ، کد زیر را اضافه کنید.

<!-- Projects section -->
<section id="projects">
<div class="container">
  <div class="row align-items-center projects">
    <div class="col">
      <h1>Our Projects</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
  </div>

  <div class="row align-items-center">
    <div class="col">
      <div class="card mb-3">
        <img src="./assets/projects/project1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Investment App</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">React Native, Java, REST Api</small></p>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card mb-3">
        <img src="./assets/projects/project2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">My Doc</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Kotlin, REST Api</small></p>
        </div>
      </div>
    </div>
  </div>

  <div class="row align-items-center">
    <div class="col">
      <div class="card mb-3">
        <img src="./assets/projects/project3.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Socialize</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Flutter, Machine Learning Algrithms, Python, NodeJS</small></p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card mb-3">
        <img src="./assets/projects/project4.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Give Me A Ride</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Google Api, Golang, Swift</small></p>
        </div>
      </div>
    </div>

  </div>
</div>
</section>
<!-- End Projects section -->

 

مقداری CSS دیگر اضافه کنید تا جلوه خوبی داشته باشد:

#projects .projects {
  margin-bottom: 50px;
}

 

فقط یک مورد دیگر برای تکمیل وب سایت ما وجود دارد. یک بخش «تماس با ما» با متن اضافه می کنیم. کد زیر را در فایل index.html اضافه کنید:

<!-- Contact section -->
<section id="contact">
  <div class="container">
    <div class="row align-items-center">
      <div class="col">
        <h1>Contact US</h1>
        <p>Clicksite</p>
        <p>Email: clicksite.ir@gmail.com</p>
      </div>
    </div>
  </div>
</section>
<!-- End Contact section -->

 

و آخرین قسمت اضافه کردن آخرین کد CSS است:

#contact {
  text-align: center;
  background-color: #683aa4;
  color: white;
}
#contact h1 {
  text-align: center;
  color: white;
}

 

بالاخره صفحه وب Bootstrap 5 ما آماده شد! در تصویر زیر نتیجه کار را می بینید:

 

نتیجه

تبریک می گویم ، شما یک صفحه ی ارائه ی نمونه کارها با استفاده از Bootstrap 5 ایجاد کردید. اگر می خواهید صفحه نمونه کارهای اختصاصی خود را ایجاد کنید ، کافی است تصاویر و متن های مورد نظر خود را به این صفحه اضافه کنید تا یک وب سایت آماده داشت باشید.

 

آموزش طراحی وب با 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 روی لوکال و انجام تست های لازم آغاز آشنایی …
دانلود و ادامه توضیحات
به راهنمایی نیاز دارید؟و یا سردرگم هستید؟
021-4762 3380 901-000-5000 تماس از ساعت 8 الی 16:30 آدرس های ایمیل سایت: clicksite.ir@gmail.com
کسب درآمد کنید
اگر در هر زمینه ای مربوط به رشته های مهندسی و یا برنامه نویسی به تخصص خودایمان دارید،پس زمان را تلف نکنید و هم اکنون دست به کار شوید.به جمع متخصصی بپیوندید،گامی در راستای ارتقا سطح آموزش های تصویری فارسی بردارید. کلیک سایت از طرف همه مهندسین ،شما را دعوت به همکاری می نماید.وجود شما افتخاری برای همه ماست.
نماد اعتماد الکترونیک
لوگو ساماندهی
logo-samandehi

مقالات

آموزش PHP

آموزش HTML

آموزش CSS

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

مقالات آموزش CSS

مدیریت و پشتیبانی سرور

مشاهده سبد این پنجره را مجددا نمایش نده!

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
انتخاب فایل
ارسال فایل
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید