معرفی پلاگین Bootstrap4,Font awesome4 استفاده از بوت استرپ بدون یاد داشتنش!

خب از اونجایی که نمیدونم واسه مقدمه چی بنویسم یه راست میرم سراغ اصل مطلبپلاگین Bootstrap4,Font awesome4 پلاگیی که یه سری شورتکد های رو در اختیار میزاه که باهاشون میتونی کد های بوت استرپ خیلی سریع تر بنویسید(یچیز مثل emmet) این پلاگین برای اکثر کد ادیتور ها و IDE ها هست https://plugins.jetbrains.com/plugin/9341-bootstrap-4-font-awesome-4-font-awesome-5-free--pro-live-templates-snippets https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode خب حالا بریم سراغ کار با این پلاگین برای مثال شما با نوشتن این شورتکدو زدن دکمه TABb4-$میتونید کد با ضاهر زیر ایجاد کنید:<!doctype html> <html lang=&quoten&quot> <head> <title>Title</title> <!-- Required meta tags --> <meta charset=&quotutf-8&quot> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1, shrink-to-fit=no&quot> <!-- Bootstrap CSS --> <link rel=&quotstylesheet&quot href=&quothttps://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot integrity=&quotsha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot crossorigin=&quotanonymous&quot> </head> <body> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src=&quothttps://code.jquery.com/jquery-3.3.1.slim.min.js&quot integrity=&quotsha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot crossorigin=&quotanonymous&quot> <script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot integrity=&quotsha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot crossorigin=&quotanonymous&quot> <script src=&quothttps://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot integrity=&quotsha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot crossorigin=&quotanonymous&quot> </body> </html>که شامل cdn های بوت استرپ هستیا با نوشتن این شورتکد و زدن دکمه TABb4-navbar-defaultمیتونید کدی با شکل زیر ایجاد کنید:<nav class=&quotnavbar navbar-expand-sm navbar-light bg-light&quot> <a class=&quotnavbar-brand&quot href=&quot#&quot>Navbar</a> <button class=&quotnavbar-toggler d-lg-none&quot type=&quotbutton&quot data-toggle=&quotcollapse&quot data-target=&quot#collapsibleNavId&quot aria-controls=&quotcollapsibleNavId&quot aria-expanded=&quotfalse&quot aria-label=&quotToggle navigation&quot> <span class=&quotnavbar-toggler-icon&quot></span> </button> <div class=&quotcollapse navbar-collapse&quot id=&quotcollapsibleNavId&quot> <ul class=&quotnavbar-nav mr-auto mt-2 mt-lg-0&quot> <li class=&quotnav-item active&quot> <a class=&quotnav-link&quot href=&quot#&quot>Home <span class=&quotsr-only&quot>(current)</span></a> </li> <li class=&quotnav-item&quot> <a class=&quotnav-link&quot href=&quot#&quot>Link</a> </li> <li class=&quotnav-item dropdown&quot> <a class=&quotnav-link dropdown-toggle&quot href=&quot#&quot id=&quotdropdownId&quot data-toggle=&quotdropdown&quot aria-haspopup=&quottrue&quot aria-expanded=&quotfalse&quot>Dropdown</a> <div class=&quotdropdown-menu&quot aria-labelledby=&quotdropdownId&quot> <a class=&quotdropdown-item&quot href=&quot#&quot>Action 1</a> <a class=&quotdropdown-item&quot href=&quot#&quot>Action 2</a> </div> </li> </ul> <form class=&quotform-inline my-2 my-lg-0&quot> <input class=&quotform-control mr-sm-2&quot type=&quottext&quot placeholder=&quotSearch&quot> <button class=&quotbtn btn-outline-success my-2 my-sm-0&quot type=&quotsubmit&quot>Search</button> </form> </div> </nav>شما میتونید با نوشتن b4 در phpstorm و زدن دکمه Alt+Enter شورتکد هاشو ببیندی خب بریم سراغ آموزش نصب پلاگین هاشما میتونید تو phpstorm با رفتن به بخش File > settings >plugins برید و با سرچ عبارت bootstrap اونرو پیدا و دانلود کنید (تو بقیه برنامه هاهم باید اینجوری باشه)امیدوارم این پلاگین بدرتون بخورهممنون بابت خوندن این مطلب