::eBazar:: Ui Buttons

دکمه ها
گروه های دکمه ها

نمونه ها

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

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>

انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با کلاس، گنجانده شده است. .visually-hidden

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

اگر نمی‌خواهید متن دکمه بسته شود، می‌توانید کلاس را اضافه کنید .text-nowrapبه دکمه در Sass می توانید تنظیم کنید $btn-white-space: nowrap برای غیرفعال کردن بسته بندی متن برای هر دکمه.

برچسب های دکمه

.btn کلاس ها برای استفاده با <button> عنصر با این حال، می توانید از این کلاس ها نیز استفاده کنید <a> or <input> عناصر (اگرچه برخی از مرورگرها ممکن است رندر کمی متفاوت اعمال کنند).

هنگام استفاده از کلاس های دکمه در <a> عناصری که برای فعال کردن عملکرد درون صفحه (مانند جمع شدن محتوا)، به جای پیوند دادن به صفحات یا بخش‌های جدید در صفحه فعلی استفاده می‌شوند، به این پیوندها باید یک role="button" تا به طور مناسب هدف خود را به فناوری های کمکی مانند صفحه خوان ها منتقل کنند.

لینک

    <a class="btn btn-primary" href="#" role="button">Link</a>
    <button class="btn btn-primary" type="submit">Button</button>
    <input class="btn btn-primary" type="button" value="Input">
    <input class="btn btn-primary" type="submit" value="Submit">
    <input class="btn btn-primary" type="reset" value="Reset">

دکمه های طرح کلی

به یک دکمه نیاز دارید، اما نه به رنگ‌های پس‌زمینه سنگینی که می‌آورند؟ کلاس های اصلاح کننده پیش فرض را با .btn-outline-* برای حذف تمام تصاویر پس زمینه و رنگ ها در هر دکمه.

    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>

اندازه ها

دکمه های بزرگتر یا کوچکتر را دوست دارید؟ اضافه کردن .btn-lg یا .btn-sm برای اندازه های اضافی.

    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-secondary btn-lg">Large button</button>

    <button type="button" class="btn btn-primary btn-sm">Small button</button>
    <button type="button" class="btn btn-secondary btn-sm">Small button</button>

با افزودن، دکمه‌های سطح بلوک را ایجاد کنید - دکمه‌هایی که تمام عرض یک والد را پوشش می‌دهند .btn-block.

    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

حالت غیر فعال

با اضافه کردن دکمه ها، دکمه ها را غیر فعال کنید disabled ویژگی بولی به هر کدام <button> عنصر دکمه های غیر فعال دارند pointer-events: none برای جلوگیری از راه اندازی حالت شناور و فعال استفاده می شود.

    <button type="button" class="btn btn-lg btn-primary" disabled="">Primary button</button>
    <button type="button" class="btn btn-secondary btn-lg" disabled="">Button</button>

غیرفعال کردن دکمه ها با استفاده از <a> عنصر کمی متفاوت رفتار می کند:

<a>پشتیبانی نمی کند disabled ویژگی، بنابراین باید آن را اضافه کنید .disabled کلاس تا از نظر بصری غیرفعال به نظر برسد.
برخی از سبک های آینده پسند برای غیرفعال کردن همه گنجانده شده است pointer-events روی دکمه های لنگر.
دکمه های غیرفعال باید شامل aria-disabled="true" aویژگی برای نشان دادن وضعیت عنصر به فناوری های کمکی.

لینک اصلی لینک

    <a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
    <a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

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

.disabled استفاده های کلاس pointer-events: none سعی کنید عملکرد پیوند را غیرفعال کنید <a> اما آن ویژگی CSS هنوز استاندارد نشده است. علاوه بر این، حتی در مرورگرهایی که پشتیبانی می کنند pointer-events: none، پیمایش صفحه کلید بدون تأثیر باقی می ماند، به این معنی که کاربران صفحه کلید بینا و کاربران فناوری های کمکی همچنان می توانند این پیوندها را فعال کنند. بنابراین برای ایمن بودن، علاوه بر aria-disabled="true"، همچنین شامل atabindex="-1" برای جلوگیری از دریافت فوکوس صفحه کلید، روی این پیوندها مشخص کنید و از جاوا اسکریپت سفارشی برای غیرفعال کردن عملکرد آنها به طور کلی استفاده کنید..

افزونه دکمه

افزونه دکمه به شما امکان می دهد دکمه های روشن/خاموش ساده ایجاد کنید.

از نظر بصری، این دکمه های ضامن یکسان هستند checkbox toggle buttons. با این حال، آن‌ها توسط فناوری‌های کمکی متفاوت منتقل می‌شوند: کلیدهای چک باکس توسط خوانندگان صفحه به‌عنوان «تیک‌خورده»/ «تیک‌نخورده» اعلام می‌شوند (از آنجایی که، علی‌رغم ظاهرشان، اساساً هنوز چک‌باکس هستند)، در حالی که این دکمه‌های جابه‌جایی به‌عنوان اعلام می‌شوند. "دکمه"/"دکمه فشرده". انتخاب بین این دو رویکرد بستگی به نوع جابه‌جایی که ایجاد می‌کنید، و اینکه آیا تغییر هنگام اعلام به‌عنوان یک چک باکس یا به‌عنوان یک دکمه واقعی برای کاربران معنا پیدا می‌کند یا خیر، بستگی دارد..

وضعیت ها را تغییر دهید

افزودن data-bs-toggle="button" برای تغییر دادن یک دکمه active دولت. اگر از قبل دکمه ای را تغییر می دهید، باید آن را به صورت دستی اضافه کنید .active کلاس و aria-pressed="true" تا اطمینان حاصل شود که به طور مناسب به فناوری های کمکی منتقل می شود.

    <button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
    <button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
    <button type="button" class="btn btn-primary" disabled="" data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>

تغییر دادن پیوند پیوند فعال پیوند تعویض غیرفعال شد

    <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
    <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
    <a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

متدها

برای مثال می‌توانید یک نمونه دکمه با سازنده دکمه ایجاد کنید:

var button = document.getElementById('myButton')
    var bsButton = new bootstrap.Button(button)

متد	توضیحات
`toggle`	وضعیت فشار را تغییر می دهد. به دکمه ظاهری می دهد که فعال شده است.
`dispose`	دکمه یک عنصر را از بین می برد.

به عنوان مثال، برای جابجایی همه دکمه ها

var buttons = document.querySelectorAll('.btn')
    buttons.forEach(function (button) {
        var button = new bootstrap.Button(button)
        button.toggle()
    })

در این صفحه

مثال اساسی

یک سری دکمه را با .btn در .btn-group.

    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>

اطمینان حاصل کنید که درست است `role` و یک برچسب ارائه دهید

برای اینکه فناوری‌های کمکی (مانند صفحه‌خوان‌ها) نشان دهند که مجموعه‌ای از دکمه‌ها گروه‌بندی شده‌اند، یک گزینه مناسب role ویژگی باید ارائه شود. برای گروه های دکمه، این خواهد بود role="group", while toolbars should have a role="toolbar".

علاوه بر این، به گروه ها و نوار ابزارها باید یک برچسب صریح داده شود، زیرا اکثر فناوری های کمکی در غیر این صورت، علی رغم وجود ویژگی نقش صحیح، آنها را اعلام نمی کنند. در مثال های ارائه شده در اینجا، ما استفاده می کنیم aria-label, but alternatives such as aria-labelledby نیز قابل استفاده است.

این کلاس‌ها را می‌توان به عنوان جایگزینی برای گروه‌های پیوندها نیز اضافه کرد .nav اجزای ناوبری.

لینک فعال لینک لینک

    <div class="btn-group">
        <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
        <a href="#" class="btn btn-primary">Link</a>
        <a href="#" class="btn btn-primary">Link</a>
    </div>

سبک های ترکیبی

    <div class="btn-group" role="group" aria-label="Basic mixed styles example">
        <button type="button" class="btn btn-danger">Left</button>
        <button type="button" class="btn btn-warning">Middle</button>
        <button type="button" class="btn btn-success">Right</button>
    </div>

سبک های مشخص شده

    <div class="btn-group" role="group" aria-label="Basic outlined example">
        <button type="button" class="btn btn-outline-primary">Left</button>
        <button type="button" class="btn btn-outline-primary">Middle</button>
        <button type="button" class="btn btn-outline-primary">Right</button>
    </div>

چک باکس و گروه های دکمه رادیویی

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

چک باکس 1 چک باکس 2 چک باکس 3

    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
        <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
        <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

        <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

        <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
        <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
    </div>

رادیو 1 رادیو 2 رادیو 3

    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked="">
        <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

        <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

        <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
    </div>

مجموعه‌ای از گروه‌های دکمه‌ها را در نوار ابزار دکمه‌ها برای اجزای پیچیده‌تر ترکیب کنید. در صورت نیاز از کلاس های کاربردی برای فاصله بین گروه ها، دکمه ها و موارد دیگر استفاده کنید.

    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group me-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
            <button type="button" class="btn btn-primary">4</button>
        </div>
        <div class="btn-group me-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary">5</button>
            <button type="button" class="btn btn-secondary">6</button>
            <button type="button" class="btn btn-secondary">7</button>
        </div>
        <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-info">8</button>
        </div>
    </div>

به راحتی می توانید گروه های ورودی را با گروه های دکمه ای در نوار ابزار خود ترکیب کنید. مشابه مثال بالا، احتمالاً به برخی از ابزارهای کمکی نیاز دارید تا به درستی فضاها را جابجا کنید.

    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group me-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-outline-secondary">1</button>
            <button type="button" class="btn btn-outline-secondary">2</button>
            <button type="button" class="btn btn-outline-secondary">3</button>
            <button type="button" class="btn btn-outline-secondary">4</button>
        </div>
        <div class="input-group">
            <div class="input-group-text" id="btnGroupAddon">@</div>
            <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
        </div>
    </div>

    <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group" role="group" aria-label="First group">
            <button type="button" class="btn btn-outline-secondary">1</button>
            <button type="button" class="btn btn-outline-secondary">2</button>
            <button type="button" class="btn btn-outline-secondary">3</button>
            <button type="button" class="btn btn-outline-secondary">4</button>
        </div>
            <div class="input-group">
            <div class="input-group-text" id="btnGroupAddon2">@</div>
            <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
        </div>
    </div>

اندازه ها

به جای اعمال کلاس های اندازه دکمه برای هر دکمه در یک گروه، فقط اضافه کنید .btn-group-* برای هر .btn-group، از جمله هر یک هنگام تودرتو کردن چندین گروه.

    <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
        <button type="button" class="btn btn-outline-dark">Left</button>
        <button type="button" class="btn btn-outline-dark">Middle</button>
        <button type="button" class="btn btn-outline-dark">Right</button>
    </div>
    <br>
    <div class="btn-group" role="group" aria-label="Default button group">
        <button type="button" class="btn btn-outline-dark">Left</button>
        <button type="button" class="btn btn-outline-dark">Middle</button>
        <button type="button" class="btn btn-outline-dark">Right</button>
    </div>
    <br>
    <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
        <button type="button" class="btn btn-outline-dark">Left</button>
        <button type="button" class="btn btn-outline-dark">Middle</button>
        <button type="button" class="btn btn-outline-dark">Right</button>
    </div>

تودرتو کردن

قرار دادن .btn-group درون دیگری .btn-group وقتی می خواهید منوهای کشویی با یک سری دکمه ترکیب شده باشند.

    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>

        <div class="btn-group" role="group">
            <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>

تغییرات عمودی

کاری کنید که مجموعه ای از دکمه ها به جای افقی به صورت عمودی روی هم قرار گیرند. کشویی دکمه تقسیم در اینجا پشتیبانی نمی شود.

    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
        <button type="button" class="btn btn-dark">Button</button>
        <button type="button" class="btn btn-dark">Button</button>
        <button type="button" class="btn btn-dark">Button</button>
        <button type="button" class="btn btn-dark">Button</button>
        <button type="button" class="btn btn-dark">Button</button>
        <button type="button" class="btn btn-dark">Button</button>
    </div>

    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
        <button type="button" class="btn btn-primary">Button</button>
        <button type="button" class="btn btn-primary">Button</button>
        <div class="btn-group" role="group">
            <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </div>
        <button type="button" class="btn btn-primary">Button</button>
        <button type="button" class="btn btn-primary">Button</button>
        <div class="btn-group" role="group">
            <button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </div>
        <div class="btn-group" role="group">
            <button id="btnGroupVerticalDrop3" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </div>
        <div class="btn-group" role="group">
            <button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>

رادیو 1 رادیو 2 رادیو 3

    <div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
        <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked="">
        <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
        <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
        <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
        <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
        <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
    </div>

در این صفحه

تنظیمات رنگ قالب

برای تنظیمات پویا کلیک کنید

رنگ اصلی
رنگ ثانویه
رنگ نمودار 1
رنگ نمودار 2
رنگ نمودار 3
رنگ نمودار 4
رنگ نمودار 5

تنظیمات فونت

فونت گوگل پاپینس
فونت گوگل اوپن سانس
فونت گوگل مونت
فونت گوگل موتکا

چیدمان کنتراست

فعال کردن حالت تاریک!
فعال کردن کنتراست بالا
فعال کردن حالت چپ چین!

نمونه ها

انتقال معنا به فناوری های کمکی

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

برچسب های دکمه

دکمه های طرح کلی

اندازه ها

حالت غیر فعال

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

افزونه دکمه

وضعیت ها را تغییر دهید

متدها

مثال اساسی

اطمینان حاصل کنید که درست است role و یک برچسب ارائه دهید

سبک های ترکیبی

سبک های مشخص شده

چک باکس و گروه های دکمه رادیویی

نوار ابزار دکمه

اندازه ها

تودرتو کردن

تغییرات عمودی

اطمینان حاصل کنید که درست است `role` و یک برچسب ارائه دهید