القوائم المنسدله Bootstrap 5 Dropdowns

-

بنتعلم في هذا الدرس شو يعني قوائم منسدله Dropdowns، وكيف تستخدم. بالاضافة الى اناعها وطرق عرضها. ويمكن تعريف Dropdowns على انها قائمة قابلة للتبديل تسمح للمستخدم باختيار قيمة واحدة من مجموعه من القيم المحددة مسبقًا:

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

<!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 m-2">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="DRDMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="DRDMenuButton1">
                    <li><a class="dropdown-item" href="#">Action 1</a></li>
                    <li><a class="dropdown-item" href="#">Action 2</a></li>
                    <li><a class="dropdown-item" href="#">Action 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة: 
طبقنا في الكود السابق class باسم dropdown على <div> الى بيدل على ان هذا <div> من نوع dropdown  وداخل هذا <Div> اضنفا button وطبقنا عليه class باسم 
btn btn-secondary dropdown-toggle واضفنا Id الو .
المسؤول عن فتح القائمة من button هي attribute التالية  : dropdown-toggle. و "data-bs-toggle="dropdown 
بعد هيك اضنفا List من نوع <ul>  وربطناها مع button عن طريق Id . وداخل هذه <ul> اضفنا مجموعه من الروابط باستخدام <a> واكيد لازم تضيفclass باسم dropdown-item لكل <a> وبعدها بتربط هذا الرابط مع الصفحات المطلوبة. 

تطبيق انماط مختلفه على dropdown 

اكيد بتقدر تغير شكل ولون button باستخدام classes الى تعلمناها سابقا. مثل 
btn btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark
الموضوع بسيط فقط بنطبق واحد من هذه classes على button 
مثال : 
<!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 m-2">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="dropdown">
                <button class=" btn btn-warning dropdown-toggle" type="button" id="DRDMenuButton1" data-bs-toggle="dropdown" aria-expanded="true">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="DRDMenuButton1">
                    <li><a class="dropdown-item" href="#">Action 1</a></li>
                    <li><a class="dropdown-item" href="#">Action 2</a></li>
                    <li><a class="dropdown-item" href="#">Action 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة: 
شوف المثال التالي طبقنا اكثر من button بلون مختلف 
<!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 m-2">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="dropdown">
                <button class=" btn btn-warning dropdown-toggle" type="button" id="DRDMenuButton1" data-bs-toggle="dropdown" aria-expanded="true">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="DRDMenuButton1">
                    <li><a class="dropdown-item" href="#">Action 1</a></li>
                    <li><a class="dropdown-item" href="#">Action 2</a></li>
                    <li><a class="dropdown-item" href="#">Action 3</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class=" btn btn-primary dropdown-toggle" type="button" id="DRDMenuButton1" data-bs-toggle="dropdown" aria-expanded="true">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="DRDMenuButton1">
                    <li><a class="dropdown-item" href="#">Action 1</a></li>
                    <li><a class="dropdown-item" href="#">Action 2</a></li>
                    <li><a class="dropdown-item" href="#">Action 3</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class=" btn btn-success dropdown-toggle" type="button" id="DRDMenuButton1" data-bs-toggle="dropdown" aria-expanded="true">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="DRDMenuButton1">
                    <li><a class="dropdown-item" href="#">Action 1</a></li>
                    <li><a class="dropdown-item" href="#">Action 2</a></li>
                    <li><a class="dropdown-item" href="#">Action 3</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class=" btn btn-secondary dropdown-toggle" type="button" id="DRDMenuButton1" data-bs-toggle="dropdown" aria-expanded="true">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="DRDMenuButton1">
                    <li><a class="dropdown-item" href="#">Action 1</a></li>
                    <li><a class="dropdown-item" href="#">Action 2</a></li>
                    <li><a class="dropdown-item" href="#">Action 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة: 


اضافة فاصل Dropdown Divider

يمكن فصل الروابط الموجوده في Dropdown بفاصل باستخدام class باسم dropdown-divider. وبيكون هذا الفاصل بشكل افقي رفيع horizontal border. 
نطبق مثال حتى نفهم الموضوع : 
<!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 m-2">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="dropdown">
                <button class=" btn btn-warning dropdown-toggle" type="button" id="DRDMenuButton1" data-bs-toggle="dropdown" aria-expanded="true">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="DRDMenuButton1">
                    <li><a class="dropdown-item" href="#">Action 1</a></li>
                    <li><a class="dropdown-item" href="#">Action 2</a></li>
                    <li><a class="dropdown-item" href="#">Action 3</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Another link</a></li>
                </ul>   
            </div>
        </div>
    </div>
</body>
</html>
النتيجة: 
الكود الي بيعمل هذا الخط مميز باللون الاصفر. اضفنا <hr> وطبقنا عليها class باسم dropdown-divider الي بيعمل الخط الفاصل. 

تقسيم الزر Split button
نطبق مثال حتى نفهم الموضوع 
<!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 m-2">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <!-- Example split danger button -->
            <div class="btn-group">
                <button type="button" class="btn btn-warning">Action</button>
                <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة:
نفهم الكود: 
اضفنا 2 button في <div> الاول طبقنا عليه class باسم btn btn-warning لتغير اللون والثاني طبقنا عليه class باسم
 btn btn-warning dropdown-toggle dropdown-toggle-split
وهذا الكود هو المسؤوع عن اعطاء صفة القائمة المنسدله، وبعدها اضفنا الروابط المطلوب عرضها باستخدام <ul> وطبقنا عليها نفس الخصائص  الى تعلمناها في اول الدرس. 

اضافة Dropdown Header
بنتعلم الان كيف نضيف  Header ل Dropdown. وذلك عن طريف اضافة class باسم dropdown-header. 
نطبق المثال التالي : 
<!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 m-2">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <!-- Example split danger button -->
            <div class="btn-group">
                <button type="button" class="btn btn-warning">Action</button>
                <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><h5 class="dropdown-header">Dropdown header 1</h5></li>
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة بتكون : 
عملنا اضافة رابط وطبقنا عليه class باسم dropdown-header . حاول تحرك المؤشر فوق هذا الرابط اكيد ما بتقدر تعمل شي.
ممكن نضيف اكثر من Header داخل Dropdown 

تفعيل وتعطيل Disable and Active items 
يمكن التحكم بالروابط في القائمة بتفعيلها او تنشيطها. الموضوع بسيط جدا. 
للتفعيل بنطبق class باسم active. (بكون لوخ الخلفية ازرق للرابط الي بيعني ان هاذ Item فعلا)
للتعطيل بنطبق class باسم disabled.   (يكون لون النص رمادي فاتح وشكل المؤشر no-parking-sign
نطبق المثال التالي حتى نفهم الموضوع:

<!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 m-2">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <!-- Example split danger button -->
            <div class="btn-group">
                <button class=" btn btn-warning dropdown-toggle" type="button" id="DRDMenuButton1" data-bs-toggle="dropdown" aria-expanded="true">
                   Dropdown button
                </button>
                <ul class="dropdown-menu">
                   <li><h5 class="dropdown-header">Dropdown header 1</h5></li>
                    <li><a class="dropdown-item active" href="#">Active</a></li>
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                    <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة:

التحكم بحجم Sizing Dropdown 
يمكن تكبير وتصغير حجم القائمة باستخدام classes الخاصة بتكبير وتصغير button  وهي : btn-lg ، btn-sm
 تمام نطبق مثال ونشوف كيف ممكن نستخدمها: 
<!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 m-2">      <!-- Example split danger button -->      <div class="btn-group"> <button class=" btn btn-warning dropdown-toggle btn-sm" type="button" id="DRDMenuButton1" data-bs-toggle="dropdown" aria-expanded="true">  Dropdown button  </button> <ul class="dropdown-menu"><li><h5 class="dropdown-header">Dropdown header 1</h5></li> <li><a class="dropdown-item active" href="#">Active</a></li> <li><a class="dropdown-item" href="#">Action</a></li>  <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> <li><a class="dropdown-item disabled" href="#">Disabled</a></li></ul> </div><div class="btn-group"> <button class=" btn btn-warning dropdown-toggle btn-lg" type="button" id="DRDMenuButton2" data-bs-toggle="dropdown" aria-expanded="true"> Dropdown button </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">Dropdown header 2</h5></li> <li><a class="dropdown-item active" href="#">Active</a></li> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>  <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> <li><a class="dropdown-item disabled" href="#">Disabled</a></li> </ul> </div>  <br /> <br /><div class="btn-group"> <button type="button" class="btn btn-warning btn-sm">Action</button> <button class=" btn btn-warning dropdown-toggle btn-sm" type="button" id="DRDMenuButton3" data-bs-toggle="dropdown" aria-expanded="true"> <span class="visually-hidden">Toggle Dropdown</span> </button>  <ul class="dropdown-menu"> <li><h5 class="dropdown-header">Dropdown header 3</h5></li> <li><a class="dropdown-item active" href="#">Active</a></li><li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> <li><a class="dropdown-item disabled" href="#">Disabled</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-warning btn-lg">Action</button> <button class=" btn btn-warning dropdown-toggle btn-lg"type="button" id="DRDMenuButton4" data-bs-toggle="dropdown" aria-expanded="true"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">Dropdown header 4</h5></li>  <li><a class="dropdown-item active" href="#">Active</a></li>  <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li><li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> <li><a class="dropdown-item disabled" href="#">Disabled</a></li>  </ul></div>  </div></body></html>
 النتيجة: 
تطبيق النمط الغامق Dark dropdowns
يمكن تطبيق اللون الغامق dark على الروابط في القائمة المنسدله. بتطبيق class باسم dropdown-menu-dark. 
الموضوع بسيط جدا نطبق المثال التالي حتى نفهم المطلوب: 
 <!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 m-2">
        <div class="dropdown">
            <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown button
            </button>
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
                <li><a class="dropdown-item active" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
      
    </div>
    
</body>
</html>
النتيجة: 
استخدام القوائم المسندله مع navbar
الفكره هون عو هرض شريط من الروابط وبنضيف فيها قائمة مسندله. 
نطبق المثال التالي حتى نفهم الموضوع: 

<!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 m-2">
        <nav class="navbar navbar-expand-lg navbar-dark bg-success ">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Home</a>
                <a class="navbar-brand" href="#">About Us</a>
                <a class="navbar-brand" href="#">Contact Us</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Dropdown
                            </a>
                            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</body>
</html>
النتيجة: 
واكيد هذه النتيجة متوافقه مع حجم الشاشة. يعني لو حاولت تصغر حجم الشاشة بتم تعديل العرض بشكل يتناسب مع عرض الشاشة. 


مكان Dropdown Position
يمكن التحكم بمكان القائمة بحيث يكون الاتجاه الى اليمين او اليسار. 
لجعل الاتجاه الى اليسار بنستخدم class باسم dropend
لجل الاتجاه الى اليمين بنستخدم class باسم dropstart
تمام نطبق مثال حتى نفهم الموضوع: 
<!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 m-2">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="btn-group">
                
                <div class="dropdown dropend">
                    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">
                        Dropend
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Normal</a></li>
                        <li><a class="dropdown-item active" href="#">Active</a></li>
                        <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
                    </ul>
                </div>
            </div>
            <div class="btn-group">
                <div class="dropdown dropstart">
                    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">
                        Dropend
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Normal</a></li>
                        <li><a class="dropdown-item active" href="#">Active</a></li>
                        <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة: 

تحديد اتجاه القائمة الى اعلى Dropup
لعمل ذلك فقط بتم عن طريق تطبيق class باسم dropup.
طبق الكود التالي: 
<!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 m-2">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <!-- Default dropup button -->
            <div class="btn-group dropup">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropup
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Normal</a></li>
                    <li><a class="dropdown-item active" href="#">Active</a></li>
                    <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
                </ul>
            </div>
            <!-- Split dropup button -->
            <div class="btn-group dropup">
                <button type="button" class="btn btn-secondary">
                    Split dropup
                </button>
                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Normal</a></li>
                    <li><a class="dropdown-item active" href="#">Active</a></li>
                    <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة: 
المثال التالي يحتوى على معظم class الخاصة بمكان واتجاه القوائم. 
<!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 m-5">
        <div class="btn-group">
            <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Right-aligned menu
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
                Left-aligned, right-aligned lg
            </button>
            <ul class="dropdown-menu dropdown-menu-lg-end">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
                Right-aligned, left-aligned lg
            </button>
            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="btn-group dropstart">
            <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropstart
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
       
        <div class="btn-group dropend">
            <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropend
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="btn-group dropup">
            <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropup
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
النتيجة:
تطبيق قائمة بشكل عمودي Vertical Button Dropdown
يمكن عرض القائمة المنسدلة على شكل عمودي باستخدام class باسم btn-group-vertical
طبق المثال التالي: 
<!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 m-5">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-danger">Opertion System</button>
            <button type="button" class="btn btn-danger">Data Structure</button>
            <div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">Programming Language</button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">C#</a></li>
                    <li><a class="dropdown-item" href="#">F#</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

النتيجة: 

الاغلاق التلقائي Auto close behavior

يحتوي Bootstrap على مجموعه من classes الي من خلالها بنتحكم بطريقة الاغلاق للقائمة.ولتطبيق هذا الكلام بنستخدم الكود:

data-bs-auto-close

 والقيم الي بنعطيها هي: 

"data-bs-auto-close="true : الوضع الفتراضي للقائمة، يتم الاغلاق بعد اختيار Item 

"data-bs-auto-close="inside : يتم الاغلاق عند النقر داخل القائمة. 

"data-bs-auto-close="outside : يتم الاغلاق عند النقر في مكان ما خارج القائمة. 

"data-bs-auto-close="false : يتم الاغلاق بشكل يدوي عند اختيار ذلك.

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

<!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 m-5">
        <div class="btn-group">
            <button class="btn btn-danger dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                Default dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
                Clickable outside
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                Clickable inside
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
                Manual close
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
                <li><a class="dropdown-item" href="#">Menu item</a></li>
            </ul>
        </div>
    </div>
</body>
</html>