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

ورود عضویت کسب درآمد

سبد خرید شما 0

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

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

ساخت داشبورد با بوت استرپ

در این آموزش موارد زیر را می سازیم:

یک الگوی اولیه برای پروژه
نوار ناوبری یا Navbar
استایل های سفارشی
یک منوی کناری
بخش جدول
بخش کارت ها

آیا می خواهید از عنصرهای آماده ، وب سایت ایجاد کنید؟ بوت استرپ یکی از محبوب ترین چارچوب های CSS است و به ما امکان می دهد یک UI زیبا از اجزای آماده مانند نوارهای ناوبری یا فرم ها بسازیم. Bootstrap همچنین یک طراحی واکنش گرا (responsive) ارائه می دهد ، بنابراین ، اگر از شبکه grid به درستی استفاده کنید دیگر مجبور نیستید برای نمایش صفحه سایت تان در تلفن همراه استایل دیگری ایجاد کنید.

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

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

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

پروژه را شروع می کنیم:

ایجاد یک الگوی اولیه

در ابتدا ، برای شروع پروژه خود باید یک فایل HTML ساده ایجاد کنیم. من نام این فایل را dashboard.html انتخاب می کنم.

در داخل این فایل، نمی خواهم یک ساختار اولیه بسازم در عوض قصد دارم از الگوی اولیه ارائه شده توسط Bootstrap با تمام پیوندهای CDN اضافه شده استفاده کنم. اگر می خواهید این الگوی اولیه را از صفحه Bootstrap دریافت کنید ، از فرم جستجوی آن استفاده کنید و "Starter template" را جستجو کنید. بیایید با کد زیر شروع کنیم می توانید این کد را به دلخواه خود تغییر بدهید مثلاً در این کد من نامم را در عنوان قرار داده ام:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Clicksite</title>
  </head>
  <body>
    <h1>Clicksite</h1>
    <p>email: clicksite.ir@gmail.com</p>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <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/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

در صورت تمایل می توانید این فایل را در مرورگر باز کنید و الگوی اولیه را مشاهده کنید! اکنون ، بیایید اولین مؤلفه را ایجاد کنیم، نوار ناوبری یا navbar.

ساختن نوار ناوبری یا navbar

قبل از تنظیم کانتینرها و گرید ، می خواهم یک نوار ناوبری اضافه کنم که عرض کل پنجره را بگیرد. برای این منظور ، از مؤلفه navbar استفاده می کنم. اگر می خواهید تمام مؤلفه های navbar را پیدا کنید کافی است در وب سایت Bootstrap عبارت navbar را جستجو کنید.

در اینجا من از کد زیر استفاده می کنم:

<nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow">
 
</nav>

ممکن است متوجه شده باشید که من برخی کلاسهای اضافی مانند bg-primary یا fixed-top را اضافه کردم. نتیجه کار یک هدر ثابت (چسبیده به بالای صفحه) با رنگ آبی است.

Navbar من دارای سه عنصر در داخلش است ، نام پروژه ، نوار جستجو و یک پیوند خروج از سیستم. در ادامه آنها را اضافه می کنیم.

<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Duomly Dashboard</a>
<input type="text" class="form-control form-control-primary w-100" placeholder="Search..." >
<ul class="navbar-nav px-3">
  <li class="nav-item text-nowrap">
    <a class="nav-link" href="#">Logout</a>
  </li>
</ul>

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

استایل سفارشی

برای اضافه کردن استایل های سفارشی برای عناصر bootstrap ، به یک فایل CSS نیاز داریم ، بنابراین بیایید یکی ایجاد کنیم. من برای سازگاری با پروژه نام فایل را dashboard.css انتخاب کرده ام. برای اینکه این فایل در ساختار HTML قابل خواندن باشد ، باید پیوندی را در بالای فایل HTML درست زیر پیوند Bootstrap اضافه کنید:

<link rel="stylesheet" href="./dashboard.css" >

اکنون می توانید برخی از استایل ها را برای نوار جستجو در فایل CSS جدید اضافه کنید:

.form-control-primary {
  margin: 10px;
  opacity: 0.2;
  border-radius: 2px;
}

عالی ، اولین عنصر صفحه آماده است. اکنون می توانیم ببینیم که چگونه به نظر می رسد:

ساختن یک منوی جانبی

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

<div class="container-fluid">
  <div class="row">
    <!-- Sidear -->
  </div>
</div>

حالا که container آماده است ، باید کمی فضای کافی نیز برای ساخت نوار کناری ایجاد کنیم ، زیرا Bootstrap به صورت خودکار فضای مورد نیاز را به ما نمی دهد. اما جای نگرانی نیست ، فقط باید استایل ستون را تنظیم و منوی کناری را اضافه کنیم. ابتدا با کد زیر در داخل div مربوط به سطر ، برای ستون کناری فضا ایجاد می کنیم:

<div class="col-md-2 bg-light d-none d-md-block sidebar">
  <div class="left-sidebar">
  
  </div>
</div>

وقت آن است که تعدادی منوی واقعی را به منوی کناری صفحه اضافه کنیم. در ادامه کد مربوط به منوی عمودی را می بینید. علاوه بر لینک های منو، در هر منو از آیکون نیز استفاده کردم. آیکون ها به صورت SVG اضافه شده اند.

<ul class="nav flex-column sidebar-nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Candidates
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Jobs
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Orders
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Invoices
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <svg class="bi bi-chevron-right" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
      Reports
    </a>
  </li>
</ul>

عالی شد ، اکنون ما باید یک استایل برای منوی کناری اضافه کنیم:

.sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: 100;
  padding: 70px 0 0 10px;
  border-right: 1px solid #d3d3d3;
}

.left-sidebar {
  position: sticky;
  top:0;
  height: calc(100vh - 70px)
}

.sidebar-nav li .nav-link {
  color: #333;
  font-weight: 500;
}

اکنون ، می توانیم نتیجه را بررسی کنیم!

ساختن بخش جدول

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

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> </main>

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

<h3>Candidates</h3>
<hr>
<div class="table-responsive">
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Position</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>Project Manager</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>JS developer</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>Bird</td>
        <td>Back-end developer</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Martin</td>
        <td>Smith</td>
        <td>Back-end developer</td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>Kate</td>
        <td>Mayers</td>
        <td>Scrum master</td>
      </tr>
    </tbody>
  </table>
</div>

احتمالاً اگر حالا نتیجه کار را ببینید کمی مشکل دارد ، ولی راه حل یک قطعه کوچک از کد CSS است که در زیر می بینید:

main {
  padding-top: 90px;
}

ساختن بخش کارت ها

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

<h3>Invoice</h3>
<hr>

وقتی کار تمام شد ، از دو کارت ، هر کدام برای نیم ستون استفاده می کنیم ، و من دو بار از آن استفاده می کنم.

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Invoice #184382</h5>
        <p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <a href="#" class="btn btn-primary">Print</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Invoice #184386</h5>
        <p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <a href="#" class="btn btn-primary">Print</a>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Invoice #184389</h5>
        <p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <a href="#" class="btn btn-primary">Print</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Invoice #184391</h5>
        <p class="card-text">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <a href="#" class="btn btn-primary">Print</a>
      </div>
    </div>
  </div>
</div>

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

main .card {
  margin-bottom: 20px;
}

بالاخره صفحه داشبورد آماده شد. حالا نتیجه را بررسی کنید همچنین ، در صورت تمایل می توانید واکنش گرایی را نیز بررسی کنید. برای بررسی واکنش گرایی می توانید عرض مرورگر خودتان را تغییر دهید و یا به قسمت Developer در مرورگر خود برید و با کلیک روی آیکون مربوط به تست Responsive نوع دستگاهی که صفحه را می خواهید در آن ببینید انتخاب کنید.

نتیجه

در این آموزش ، شما می توانید یاد بگیرید که چگونه یک داشبورد ساده با Bootstrap و بدون نیاز به استایل های طولانی و پیچیده بسازید. استفاده از چارچوب های CSS راهی عالی برای ایجاد یک طرح ساده است که بدون نیاز به کار اضافی واکنش گرا نیز باشد.

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

امیدوارم این آموزش به عنوان پایه ای برای ایجاد پروژه هایی با بوت استرپ برای شما مفید واقع شود.

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

آموزش طراحی وب با 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 روی لوکال و انجام تست های لازم آغاز آشنایی …

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

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

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

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

سایر

ساخت داشبورد با بوت استرپ