مجموعات الازرار Bootstrap 5 Button Groups

-

بنتعلم شو يعني Button Groups والي هي تجميع سلسلة من الأزرار معًا في سطر واحد أو تكديسها في عمود رأسي. 

نبدا بتطبيق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <h2>Buttons group</h2>
        <p>The .btn-group class creates a button group</p>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">button 1</button>
            <button type="button" class="btn btn-info">button 2</button>
            <button type="button" class="btn btn-secondary">button 3</button>
        </div>
    </div>
</body>
</html>

نتيجة التنفيذ:

Active Classes مع <a> 

يمكن تطبيق active classes على<a> لانشاء مجموعة Buttons 

نطبق المثال التالي :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <h2>Buttons group</h2>
        <p>The .btn-group class creates a button group</p>
        <div class="btn-group">
            <a href="#" class="btn btn-primary active" aria-current="page">Active button 1</a>
            <a href="#" class="btn btn-primary">button 2</a>
            <a href="#" class="btn btn-primary">button 3</a>
        </div>
    </div>
</body>
</html>
النتيجة:
استخدام role و aria-label

 الهدف من هذه الاوامر ضمان role الصحيح وتوفير التسمية المناسبه، حتى تقدر التقنيات المساعدة (مثل screen readers) على تجميع هذه السلسلة من الأزرار ، واكيد الافضل يكون التسمية مناسبة لمجموعات الأزرار والها مدلول واضح، وعادتا يستخدم الكود عند تعريف group : 

role="group"

ويستخدم الكود عند تعريف toolbars 

role="toolbar"


بالإضافة إلى ذلك ، يجب ان تكون التسمية واضحه للمجموعات groups وأشرطة الأدوات toolbars ،حتى لو حددنا role بشكل مناسب.

في الأمثلة التالية بنستخدم aria-label ، ويمكن أيضًا استخدام بدائل مثل aria-labelledby.

نطبق المثال التالي لتنفيذ Mixed styles

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        
        <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-success">Middle</button>
            <button type="button" class="btn btn-info">Right</button>
        </div>
    </div>
</body>
</html>

النتيجة بتكون:
لاحظ ان استخدمنا الكود الي حددنا فيه aria-label و role:
<div class="btn-group" role="group" aria-label="Basic mixed styles example">

Button Size 

ممكن تطبيق احجام مختلفه على Buttons 

نطبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <div class="btn-group btn-group-lg" role="group" aria-label="button Large Size styles example">
            <button type="button" class="btn btn-danger">Left</button>
            <button type="button" class="btn btn-success">Middle</button>
            <button type="button" class="btn btn-info">Right</button>
        </div>
        <br />
        <br />
        <div class="btn-group" role="group" aria-label="button Default Size styles example">
            <button type="button" class="btn btn-danger">Left</button>
            <button type="button" class="btn btn-success">Middle</button>
            <button type="button" class="btn btn-info">Right</button>
        </div>
        <br />
        <br />
        <div class="btn-group btn-group-sm" role="group" aria-label="button small Size styles example">
            <button type="button" class="btn btn-danger">Left</button>
            <button type="button" class="btn btn-success">Middle</button>
            <button type="button" class="btn btn-info">Right</button>
        </div>
    </div>
</body>
</html>

النتيجة:

عملنا في هذا المثال 3 مجموعات كل مجموعه باسم مختلف وحجم مختلف وايضا كل مجموعه اعطناها role و aria-label

طبقنا كمان class التالي btn-group-lg على Div الحاوي ل buttons وبهاذ الكود بتم تطبيق الحجم على كل buttons في Div ونفس الفكره لبقية Groups

نطبق مثال على Outlined styles

طبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <div class="btn-group" role="group" aria-label="Basic outlined example">
            <button type="button" class="btn btn-outline-danger">Left</button>
            <button type="button" class="btn btn-outline-success">Middle</button>
            <button type="button" class="btn btn-outline-info">Right</button>
        </div>
    </div>
</body>
</html>

النتيجة :

مثال على Checkbox groups 

طبق الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
            <input type="checkbox" class="btn-check" id="btncheck1">
            <label class="btn btn-outline-danger" for="btncheck1">Checkbox 1</label>
            <input type="checkbox" class="btn-check" id="btncheck2">
            <label class="btn btn-outline-success" for="btncheck2">Checkbox 2</label>
            <input type="checkbox" class="btn-check" id="btncheck3">
            <label class="btn btn-outline-info" for="btncheck3">Checkbox 3</label>
        </div>
    </div>
</body>
</html>

النتيجة :
طبقنا في هذا المثال class باسم btn-group على جميع محتويات Div واكيد طبقنا role و aria-label وفي داخل هذا Div اضفنا input من نوع checkbox وطبقنا عليه class باسم btn-check
جرب انقر فوق اي button وشوف النتيجة.

مثال على radio button groups

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
            <input type="radio" class="btn-check" name="btnradio" id="btnradio1"  checked>
            <label class="btn btn-outline-success" for="btnradio1">Radio 1</label>
            <input type="radio" class="btn-check" name="btnradio" id="btnradio2" >
            <label class="btn btn-outline-success" for="btnradio2">Radio 2</label>
            <input type="radio" class="btn-check" name="btnradio" id="btnradio3" >
            <label class="btn btn-outline-success" for="btnradio3">Radio 3</label>
        </div>
    </div>
</body>
</html>
النتيجة:
جرب تنقر فوق اي button وشوف النتيجة
هذا الكود نفس كود Checkbox باسثناء ان اضفنا input من نوع radio

اضافة مجموعة ازارا بشكل عمودي Vertical Button Groups

ممكن نعرض buttons بشكل عمودي فوق بعض حتي نفهم كيف نطبق المثال التالي:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-success">button 1</button>
            <button type="button" class="btn btn-success">button 2</button>
            <button type="button" class="btn btn-success">button 3</button>
        </div>
    </div>
</body>
</html>

النتيجة بتكون:

طبقنا هون class باسم btn-group-vertical وهو المسؤول عن عرض buttons بشكل عمودي.وبقية الكود مثل ما تعلمنا في اول الدرس.


تطبيق Nesting Buttons 

يمكن تطبيق اكثر من button list داخل بعض والنتيجة بتكون عرض قائمة منسدله على شكل Buttons 

نطبق المثال التالي حتى نفهم الموضوع

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-primary">button 1</button>
            <button type="button" class="btn btn-primary">button 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 Menu
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                    <li><a class="dropdown-item" href="#">Dropdown link 1</a></li>
                    <li><a class="dropdown-item" href="#">Dropdown link 2</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html> 

النتيجة

في هذا المثال طبقنا btn-group داخل btn-group والكود الخاص بعمل dropdown هو الكود التالي:

<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 Menu
    </button>
 <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
 <li><a class="dropdown-item" href="#">Dropdown link 1</a></li>
 <li><a class="dropdown-item" href="#">Dropdown link 2</a></li>
 </ul>
 </div>

ومكان هذا الكود بكون داخل btn-group الاولى. واضفنا داخلها input من نوع button وطبقنا عليه class باسم btn btn-primary dropdown-toggle الي هو المسؤول عن عرضو على شكل قائمة منسدله. وبعد هيك اضفنا input من نوع <ul> وطبقنا عليه class باسم dropdown-menu وبعد هيك بتقدر تضيف Link المطلوبة داخل dropdown Menu List