ویرگول
ورودثبت نام
amir
amirسلام امیرم یه بچه برنامه نویس تازه کار (یکساله) که تنها چیزی که میخواد پیشرفت تو چیزی که دوسش داره
amir
amir
خواندن ۲ دقیقه·۶ سال پیش

معرفی پلاگین 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

خب حالا بریم سراغ کار با این پلاگین برای مثال شما با نوشتن این شورتکدو زدن دکمه TAB

b4-$

میتونید کد با ضاهر زیر ایجاد کنید:

<!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 های بوت استرپ هست

یا با نوشتن این شورتکد و زدن دکمه TAB

b4-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 اونرو پیدا و دانلود کنید (تو بقیه برنامه هاهم باید اینجوری باشه)

امیدوارم این پلاگین بدرتون بخوره

ممنون بابت خوندن این مطلب

bootstrapبوت استرپpluginبرنامه نویسیطراحی وب
۷
۰
amir
amir
سلام امیرم یه بچه برنامه نویس تازه کار (یکساله) که تنها چیزی که میخواد پیشرفت تو چیزی که دوسش داره
شاید از این پست‌ها خوشتان بیاید